[Feat] 이벤트페이지

public/index.ts

@@ -38,6 +38,8 @@ export { default as LinkCopyIcon } from '@/public/svgs/link.svg';
 export { default as ShareIcon } from '@/public/svgs/share.svg';
 
 export { default as CalendarIcon } from './svgs/calendar.svg';
+export { default as FreeIcon } from './svgs/free.svg';
+export { default as KeydeukBlueIcon } from './svgs/keydeukBlueIcon.svg';
 export { default as ResetIcon } from './svgs/reset.svg';
 export { default as SearchIcon } from './svgs/search.svg';
 export { default as SoundVibrationIcon } from './svgs/soundVibration.svg';
@@ -47,17 +49,21 @@ export { default as ThumbIcon } from './svgs/thumb.svg';
 export { default as UserIcon } from './svgs/user.svg';
 export { default as VerticalTripleDotIcon } from './svgs/verticalTripleDot.svg';
 export { default as WarnCircleIcon } from './svgs/warnCircle.svg';
-export { default as KeydeukBlueIcon } from './svgs/keydeukBlueIcon.svg';
 
+export { default as eventTopImg } from './images/eventTop.png';
 export { default as ErrorIcon } from './svgs/404.svg';
+export { default as CloverIcon } from './svgs/clover.svg';
 export { default as FailIcon } from './svgs/failIcon.svg';
 
+export { default as backConfettiImg } from './images/backconfetti.png';
 export { default as banner1Img } from './images/banner1.png';
 export { default as banner2Img } from './images/banner2.png';
 export { default as blackSwitchImg } from './images/blackSwitch.jpg';
 export { default as blueSwitchImg } from './images/blueSwitch.jpg';
 export { default as brownSwitchImg } from './images/brownSwitch.jpg';
+export { default as deliveryImg } from './images/delivery.png';
 export { default as errorImg } from './images/error.png';
+
 export { default as guide1Img } from './images/guide1.png';
 export { default as guide2Img } from './images/guide2.png';
 export { default as guide3Img } from './images/guide3.png';
@@ -68,6 +74,10 @@ export { default as heroItem3Img } from './images/heroItem3.png';
 export { default as heroItem4Img } from './images/heroItem4.png';
 export { default as heroItem5Img } from './images/heroItem5.png';
 export { default as heroItem6Img } from './images/heroItem6.png';
+export { default as pointImg } from './images/point.png';
+export { default as rouletteImg } from './images/roulette.png';
+
+export { default as couponDownImg } from './images/couponDown.png';
 export { default as keydeukProfileImg } from './images/kedeukProfile.png';
 export { default as keydeukImg } from './images/keydeuk.png';
 export { default as myProfileImg } from './images/myProfile.jpeg';

src/api/couponAPI.ts

@@ -1,30 +1,43 @@
 import { getCookie } from '@/libs/manageCookie';
-import { CouponTypes } from '@/types/couponType';
+import { CouponResponse, CreateCouponType } from '@/types/couponType';
 
 const BASE_URL = process.env.NEXT_PUBLIC_KEYDEUK_API_BASE_URL;
 
-export const getCoupons = async (): Promise<CouponTypes[] | null> => {
+export const postCreateCoupon = async (payload: CreateCouponType) => {
   const token = await getCookie('accessToken');
 
-  if (!token) {
-    return null;
+  try {
+    const response = await fetch(`${BASE_URL}/api/v1/coupon/create`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify(payload),
+    });
+    if (!response.ok) {
+      const errorData = await response.json(); // 서버에서 반환된 에러 메시지를 추출
+      throw new Error(errorData.message || '쿠폰 생성에 실패했습니다.'); // 에러 메시지를 포함시켜 에러 던지기
+    }
+  } catch (error) {
+    throw error;
   }
+};
+
+export const getCoupon = async (): Promise<CouponResponse[]> => {
+  const token = await getCookie('accessToken');
 
   try {
-    const res = await fetch(`${BASE_URL}/api/v1/user/coupon`, {
+    const response = await fetch(`${BASE_URL}/api/v1/user/coupon`, {
       cache: 'no-cache',
       headers: {
         'Cache-Control': 'no-cache',
-        Authorization: `Bearer ${token}`,
+        Authorization: token ? `Bearer ${token}` : '',
       },
     });
-    const { data } = await res.json();
-
-    if (res.ok) {
-      return data;
-    }
+    const rawData = await response.json();
 
-    throw new Error(data.message || '쿠폰을 가져오는데 실패하였습니다.');
+    return rawData.data;
   } catch (error) {
     throw error;
   }

src/api/productAPI.ts

@@ -31,14 +31,11 @@ export const getProductDetail = async (productId: number): Promise<ProductType>
 };
 
 export async function getAllProductList({ sort, page, size }: ProductParams): Promise<ProductListResponse> {
-  const token = await getCookie('accessToken');
-
   try {
     const response = await fetch(`${BASE_URL}/api/v1/product/all?&sort=${sort}&page=${page}&size=${size}`, {
       cache: 'no-cache',
       headers: {
         'Cache-Control': 'no-cache',
-        Authorization: token ? `Bearer ${token}` : '',
       },
     });
     const rawData: ProductListResponse = await response.json();

src/app/(test)/dw/page.tsx

@@ -90,7 +90,7 @@ export default function Page() {
       <div className={cn('auth-section-wrapper')}>
         {AUTH_SECTION.map((text, i) => (
           <div key={text} className={cn('auth-section')}>
-            <div className={cn('auth-section-text')} onClick={() => handleClickLink(ROUTER.AHTH.SIGN_UP)}>
+            <div className={cn('auth-section-text')} onClick={() => handleClickLink(ROUTER.AUTH.SIGN_UP)}>
               {text}
             </div>
             {i === 2 || <div className={cn('bar')}>|</div>}

src/app/custom-keyboard/_components/navigator/TotalCostWithNavigation.tsx

@@ -16,9 +16,9 @@ import type {
   CustomKeyboardStepTypes,
   OptionDataType,
 } from '@/types/customKeyboardType';
-import CartModal from './CartModal';
 import OptionProductModal from './OptionProductModal';
 
+import CartModal from './CartModal';
 import styles from './TotalCostWithNavigation.module.scss';
 
 const cn = classNames.bind(styles);
@@ -152,7 +152,7 @@ export default function TotalCostWithNavigation() {
     setIsOpenCartModal(true);
   };
 
-  const handleCloseCartMoal = () => {
+  const handleCloseCartModal = () => {
     if (isOpenAnyModalOnCartModal) {
       return;
     }
@@ -229,13 +229,13 @@ export default function TotalCostWithNavigation() {
           openCartModal={handleOpenCartModal}
         />
       </Modal>
-      <Modal isOpen={isOpenCartModal} onClose={handleCloseCartMoal}>
+      <Modal isOpen={isOpenCartModal} onClose={handleCloseCartModal}>
         <CartModal
           optionData={optionData}
           optionPrice={optionPrice}
           isOpenConfirmDialog={isOpenConfirmDialog}
           isOpenLoginModal={isOpenLoginModal}
-          onClose={handleCloseCartMoal}
+          onClose={handleCloseCartModal}
           updateOptionPrice={updateOptionPrice}
           changeConfirmDialog={handleConfirmDialog}
           changeLoginModal={setIsOpenLoginModal}

src/app/event/_components/BenefitDelivery.module.scss

@@ -0,0 +1,34 @@
+.container {
+  width: 100%;
+  background-color: $white;
+  scroll-margin-top: 10rem;
+}
+
+.inner {
+  @include inner;
+}
+
+.delivery-img-wrap {
+  position: relative;
+}
+
+.delivery-img-wrap,
+.center {
+  @include flex-center;
+}
+
+.center {
+  @include pretendard-16-400;
+
+  width: 49.4rem;
+  margin: 0 auto 20rem;
+  padding: 3rem;
+  border: 0.1rem solid $gray-50;
+  color: $gray-50;
+}
+
+.icon {
+  position: absolute;
+  top: 0;
+  right: 20rem;
+}

src/app/event/_components/BenefitDelivery.tsx

@@ -0,0 +1,23 @@
+import { FreeIcon, deliveryImg } from '@/public/index';
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+import styles from './BenefitDelivery.module.scss';
+import EventTitle from './EventTitle';
+
+const cn = classNames.bind(styles);
+export default function BenefitDelivery() {
+  return (
+    <section id='delivery' className={cn('container')}>
+      <EventTitle title='배송비 FREE' color='black'>
+        키득은 하나를 사도 <br /> 배송비 무료
+      </EventTitle>
+      <div className={cn('inner')}>
+        <div className={cn('delivery-img-wrap')}>
+          <Image src={deliveryImg} width={557} height={526} alt='무료배송이미지' className={cn('delivery-img')} />
+          <FreeIcon className={cn('icon')} />
+        </div>
+        <span className={cn('center')}> 📌 키캡은 세트 구매시에만 적용됩니다</span>
+      </div>
+    </section>
+  );
+}

src/app/event/_components/BenefitJoin.module.scss

@@ -0,0 +1,54 @@
+.container {
+  width: 100%;
+  background-image: linear-gradient(#ecf5fe, #fff);
+  scroll-margin-top: 10rem;
+}
+
+.inner {
+  @include inner;
+}
+
+.coupon-area {
+  @include flex-center;
+
+  flex-wrap: wrap;
+  margin: 8rem 0;
+  gap: 5.2rem;
+}
+
+.coupon-down {
+  position: relative;
+  width: 49.4rem;
+  height: 24rem;
+}
+
+.coupon {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.discount {
+  position: absolute;
+  top: 10rem;
+  left: 3.6rem;
+  color: $white;
+  font-size: 7.4rem;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 3.2rem;
+}
+
+.min-price {
+  position: absolute;
+  top: 15rem;
+  left: 4rem;
+  color: $white;
+  @include pretendard-24-500;
+}
+
+.button {
+  max-width: 49.4rem;
+  margin: 0 auto 16rem;
+  background-color: #212530;
+}

src/app/event/_components/BenefitJoin.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { Button } from '@/components';
+import SignInModal from '@/components/SignInModal/SignInModal';
+import { COUPON_LIST } from '@/constants/event';
+import { useCreateCouponMutation } from '@/hooks/useCreateCouponMutation';
+import { couponDownImg } from '@/public/index';
+import type { CouponDataType } from '@/types/couponType';
+import { useQueryClient } from '@tanstack/react-query';
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState } from 'react';
+import styles from './BenefitJoin.module.scss';
+import EventTitle from './EventTitle';
+
+const cn = classNames.bind(styles);
+
+export default function BenefitJoin() {
+  const [isLoginOpen, setIsLoginOpen] = useState(false);
+  const queryClient = useQueryClient();
+
+  const { mutate: createCoupon } = useCreateCouponMutation();
+
+  const handleClick = async (price: number, minPrice: string) => {
+    const couponData = queryClient.getQueryData<CouponDataType>(['userData']);
+
+    if (!couponData?.data) {
+      setIsLoginOpen(true);
+      return;
+    }
+    createCoupon({
+      name: '웰컴 쿠폰',
+      price,
+      minPrice: +minPrice.slice(0, 1) * 10000,
+      expiredDate: new Date(),
+      isWelcome: true,
+    });
+  };
+  return (
+    <section id='join' className={cn('container')}>
+      <EventTitle title='WELCOME 쿠폰' color='black'>
+        즉시 사용가능한 <br /> 신규 가입 쿠폰 증정
+      </EventTitle>
+      <div className={cn('inner')}>
+        <div className={cn('coupon-area')}>
+          {COUPON_LIST.map(({ price, minPrice }) => (
+            <button
+              className={cn('coupon-down')}
+              key={minPrice}
+              type='button'
+              onClick={() => handleClick(price, minPrice)}
+            >
+              <Image className={cn('coupon')} src={couponDownImg} alt='쿠폰이미지' fill />
+              <h3 className={cn('discount')}>{price.toLocaleString()}</h3>
+              <span className={cn('min-price')}>{minPrice}</span>
+            </button>
+          ))}
+        </div>
+        <Button className={cn('button')} as={Link} href='/'>
+          쿠폰함 가기
+        </Button>
+      </div>
+      <SignInModal isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
+    </section>
+  );
+}

src/app/event/_components/BenefitRoulette.module.scss

@@ -0,0 +1,9 @@
+.container {
+  width: 100%;
+  background-color: #3363ff;
+  scroll-margin-top: 10rem;
+}
+
+.inner {
+  @include inner;
+}

src/app/event/_components/BenefitRoulette.tsx

@@ -0,0 +1,19 @@
+import classNames from 'classnames/bind';
+import styles from './BenefitRoulette.module.scss';
+import EventTitle from './EventTitle';
+import Wheel from './Wheel';
+
+const cn = classNames.bind(styles);
+
+export default function BenefitRoulette() {
+  return (
+    <section id='roulette' className={cn('container')}>
+      <EventTitle title='랜덤쿠폰 증정' color='white'>
+        매일 9시 한번 100% 당첨 <br /> 쿠폰 룰렛 돌리기!
+      </EventTitle>
+      <div className={cn('roulette-zone')}>
+        <Wheel />
+      </div>
+    </section>
+  );
+}