From 8e6ac505d1585050e98f591679a2501d9911e5ff Mon Sep 17 00:00:00 2001
From: hojin <devbang5674@gmail.com>
Date: Thu, 20 Jun 2024 20:17:12 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=ED=99=88=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EC=9C=A0=EB=8F=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/PopUpModal.tsx | 32 ++++++++++++++++++++++++------
 src/pages/guide/index.tsx          | 30 ----------------------------
 src/pages/index.tsx                | 19 ++++++++++++++++--
 3 files changed, 43 insertions(+), 38 deletions(-)
 delete mode 100644 src/pages/guide/index.tsx

diff --git a/src/components/home/PopUpModal.tsx b/src/components/home/PopUpModal.tsx
index bd11b80..63eb033 100644
--- a/src/components/home/PopUpModal.tsx
+++ b/src/components/home/PopUpModal.tsx
@@ -1,15 +1,29 @@
-import React from 'react';
+'use client';
+import React, { Dispatch } from 'react';
 import { motion } from 'framer-motion';
 import { IoClose } from 'react-icons/io5';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 
-const PopUpModal = () => {
+interface PopUpModalType {
+  setGuideModalOpen: Dispatch<React.SetStateAction<boolean>>;
+}
+
+const PopUpModal = ({ setGuideModalOpen }: PopUpModalType) => {
+  const handleExpireTime = () => {
+    const timeClicked = JSON.stringify(new Date().getTime());
+    localStorage.setItem('timeClicked', timeClicked);
+    setGuideModalOpen(false);
+  };
+
   const router = useRouter();
+
   return (
     <div className="fixed inset-0 bg-gray-900 bg-opacity-30 z-[99999]">
       <div className="z-50 w-[393px] bg-white absolute left-1/2 bottom-0 transform -translate-x-1/2 rounded-t-2xl">
-        <div className="flex items-center justify-end mt-2 mr-2 cursor-pointer">
+        <div
+          onClick={() => handleExpireTime()}
+          className="flex items-center justify-end mt-2 mr-2 cursor-pointer">
           <IoClose size={30} color="#828282" />
         </div>
         <div className="flex items-center justify-center mt-4">
@@ -93,7 +107,7 @@ const PopUpModal = () => {
         <motion.div
           initial={{ opacity: 0, translateX: -90 }}
           transition={{
-            duration: 0.6,
+            duration: 0.4,
             ease: 'easeInOut',
             delay: 0.9
           }}
@@ -102,11 +116,17 @@ const PopUpModal = () => {
             translateX: 0
           }}>
           <div className="flex items-center justify-center gap-3 mb-6">
-            <div className="cursor-pointer flex-1 ml-5 flex items-center h-[45px] justify-center rounded-lg bg-gray-400 text-lg text-white font-semibold ">
+            <div
+              onClick={() => handleExpireTime()}
+              className="cursor-pointer flex-1 ml-5 flex items-center h-[45px] justify-center rounded-lg bg-gray-400 text-lg text-white font-semibold ">
               다시 보지 않기
             </div>
             <div
-              onClick={() => router.push('/guide')}
+              onClick={() =>
+                router.push(
+                  'https://support.google.com/chrome/answer/9658361?hl=ko&co=GENIE.Platform%3DiOS&oco=2'
+                )
+              }
               className="cursor-pointer flex-1 mr-5 flex items-center  h-[45px] justify-center rounded-lg bg-space-purple text-lg text-white font-semibold ">
               자세히 보기
             </div>
diff --git a/src/pages/guide/index.tsx b/src/pages/guide/index.tsx
deleted file mode 100644
index 92b1ebb..0000000
--- a/src/pages/guide/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import Footer from '@/components/layout/footer/Footer';
-import MainContainer from '@/components/shared/MainContainer';
-import React, { useState } from 'react';
-
-const GuidePage = () => {
-  const [phone, setPhone] = useState('aos');
-  return (
-    <MainContainer>
-      <header className="w-full flex gap-[20px] pl-[16px] pt-[12px] mt-6">
-        <div
-          className={`w-[73px] h-[41px] cursor-pointer font-pretendard] text-lg flex justify-center items-centerpt-3 pb-2
-      ${phone === 'aos' ? 'text-gray-900 font-bold border-b-2 border-space-purple ' : 'text-gray-900'}
-      `}
-          onClick={() => setPhone('aos')}>
-          Andriod
-        </div>
-        <div
-          className={`w-[73px] h-[41px] cursor-pointer font-pretendard] text-lg flex justify-center items-centerpt-3 pb-2
-      ${phone === 'ios' ? 'text-gray-900 font-bold border-b-2 border-space-purple ' : 'text-gray-900'}
-      `}
-          onClick={() => setPhone('ios')}>
-          IOS
-        </div>
-      </header>
-      <Footer />
-    </MainContainer>
-  );
-};
-
-export default GuidePage;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ed230a5..b40ebc3 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -4,7 +4,7 @@ import MainPageIndex from '@/components/home/MainPageIndex';
 import Footer from '@/components/layout/footer/Footer';
 import MainContainer from '@/components/shared/MainContainer';
 import { useMember, useSetMember } from '@/store/user';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import { fcmpost } from '@/api/fcm/fcm.post.api';
 import { getTokenHandler } from '@/components/pwa/Fcm';
@@ -15,6 +15,9 @@ const Index = () => {
   const member = useMember();
   const { data: memberData } = useQuery({ queryKey: ['userinfo'], queryFn: userinfo });
   const setmember = useSetMember();
+
+  const [guideModalOpen, setGuideModalOpen] = useState(false);
+
   useEffect(() => {
     setmember(memberData?.data);
   }, [memberData, setmember]);
@@ -34,11 +37,23 @@ const Index = () => {
     fetchToken();
   }, []);
 
+  useEffect(() => {
+    const timeClicked = localStorage.getItem('timeClicked');
+    if (timeClicked) {
+      const currentTime = new Date().getTime();
+      const timeDifference = currentTime - JSON.parse(timeClicked);
+      if (timeDifference < 24 * 60 * 60 * 1000) {
+        return;
+      }
+    }
+    setGuideModalOpen(true);
+  }, []);
+
   return (
     <MainContainer>
       <MainPageIndex />
       <Footer />
-      <PopUpModal />
+      {guideModalOpen ? <PopUpModal setGuideModalOpen={setGuideModalOpen} /> : null}
     </MainContainer>
   );
 };