Merge pull request #53 from CarrotAuction/feat/KAN-10/advertisement-m…

…odal

[Feat] 광고 모달창 구현

src/app/(main)/page.tsx

@@ -1,13 +1,25 @@
-import React from 'react';
+'use client';
+
+import React, { useEffect, useState } from 'react';
 import MainIntroduce from '@/src/components/mainPage/MainIntroduce';
 import Banner from '@/src/components/mainPage/Banner';
+import AdvertisementModal from '@/src/components/auctionPage/AdvertisementModal';
+import { getCookie } from 'cookies-next';
 import styles from './index.module.scss';
 
 export default function Home() {
+  const [open, setOpen] = useState(false);
+  const modalCookie = getCookie('ad-modal');
+
+  useEffect(() => {
+    setOpen(!modalCookie);
+  }, []);
+
   return (
     <main className={styles.main}>
       <Banner />
       <MainIntroduce />
+      {open && <AdvertisementModal setOpen={setOpen} />}
     </main>
   );
 }

src/components/auctionPage/AdvertisementModal/index.module.scss

@@ -0,0 +1,47 @@
+.wrapper {
+  position: fixed;
+  right: 45rem;
+  top: 300px;
+  width: 45rem;
+  height: 45rem;
+  border-radius: 10px;
+  background-color: rgb(255, 255, 255);
+  box-shadow:
+    0 4px 8px rgba(0, 0, 0, 0.2),
+    0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.image {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 35.5rem;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.buttons {
+  height: 10rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  color: rgb(51, 51, 51);
+}
+
+.button-oneDay {
+  font-size: 2rem;
+  width: 100%;
+  cursor: pointer;
+  height: 7rem;
+  background-color: white;
+  border: none;
+}
+
+.button-close {
+  font-size: 2rem;
+  width: 100%;
+  cursor: pointer;
+  height: 7rem;
+  background-color: white;
+  border: none;
+}

src/components/auctionPage/AdvertisementModal/index.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React, { useState } from 'react';
+import classNamees from 'classnames/bind';
+import Image from 'next/image';
+import { setCookie } from 'cookies-next';
+import styles from './index.module.scss';
+
+type Props = {
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const AdvertisementModal = ({ setOpen }: Props) => {
+  const cx = classNamees.bind(styles);
+
+  const oneDayInMillis = 24 * 60 * 60 * 1000;
+  const handleGetModalCookie = () => {
+    setOpen(false);
+    setCookie('ad-modal', true, {
+      expires: new Date(Date.now() + oneDayInMillis),
+    });
+  };
+
+  const handleModalClose = () => {
+    setOpen(false);
+  };
+  return (
+    <div className={cx('wrapper')}>
+      <div className={cx('image')}>
+        <Image
+          fill
+          src="https://images.unsplash.com/photo-1607083206869-4c7672e72a8a?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt=""
+        />
+      </div>
+      <div className={cx('buttons')}>
+        <button
+          onClick={handleGetModalCookie}
+          className={cx('button-oneDay')}
+          type="button"
+        >
+          1일간 다시 보지 않기
+        </button>
+        <button
+          onClick={handleModalClose}
+          className={cx('button-close')}
+          type="button"
+        >
+          닫기
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default AdvertisementModal;