feat : 홈화면 유도 컴포넌트 구현 완료

4bujak-4bujak · Jun 20, 2024 · 8e6ac50 · 8e6ac50
1 parent 70b0c49
commit 8e6ac50
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 38 deletions.
diff --git 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
diff --git 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>
   );
 };