[#227] feat: storage 이용한 팝업 기능 구현

src/app/(root)/dashboard/layout.tsx

@@ -16,7 +16,7 @@ export default async function Layout({ children }: Readonly<{ children: React.Re
   return (
     <div className="flex h-screen flex-col justify-between overflow-hidden">
       <HydrationBoundary state={dehydrate(queryClient)}>{children}</HydrationBoundary>
-      <NoticeModal noticeData={noticeData} />
+      {noticeData && <NoticeModal noticeData={noticeData} />}
       <NavLinks />
     </div>
   );

src/components/notice/noticeModal.tsx

@@ -1,22 +1,61 @@
 'use client';
 
-import useModal from '@/hooks/useModal';
 import { Notice } from '@/lib/definitions';
+import { Modal } from 'antd';
 import { useEffect } from 'react';
+import Button from '../common/button/button';
 
 export default function NoticeModal({ noticeData }: { noticeData: Notice }) {
-  const { noticeModal } = useModal();
+  const { title, content, id } = noticeData;
 
   useEffect(() => {
-    noticeModal({
-      title: noticeData.title,
-      content: noticeData.content,
-      onClick: () => {
-        // TODO: 확인버튼, 다시보지 않기 버튼 클릭 2가지 경우 고려해서 함수 구현
-        console.log('모달 확인 버튼 클릭');
-      },
-    });
-  }, [noticeData.content, noticeData.title, noticeModal]);
+    const dismissCheck = localStorage.getItem('dismiss');
+    const seenCheck = sessionStorage.getItem('seen');
+    if (dismissCheck !== String(id)) {
+      localStorage.removeItem('dismiss');
+    }
+    if (seenCheck !== String(id)) {
+      sessionStorage.removeItem('seen');
+    }
+    const noticeModal = () => {
+      Modal.confirm({
+        title: <h3 className="f20 mb-4 font-bold text-text_primary">{title}</h3>,
+        content: <p className="f16 font-medium text-text_primary">{content}</p>,
+        footer: (
+          <div className="mt-6 flex flex-row">
+            <Button
+              label="다시보지 않기"
+              variant="default"
+              size="full"
+              onClick={() => {
+                localStorage.setItem('dismiss', String(id));
+                Modal.destroyAll();
+              }}
+              className="mr-2"
+            />
+            <Button
+              label="확인"
+              variant="primary"
+              size="full"
+              onClick={() => {
+                sessionStorage.setItem('seen', String(id));
+                Modal.destroyAll();
+              }}
+            />
+          </div>
+        ),
+        icon: null,
+        maskClosable: false,
+        centered: true,
+        width: '358px',
+        style: { top: -100 },
+        transitionName: '',
+      });
+    };
+    if (!seenCheck && !dismissCheck) {
+      noticeModal();
+    }
+  }, [content, title, id]);
 
   return <div />;
 }

src/hooks/useModal.tsx

@@ -62,39 +62,6 @@ export default function useModal() {
       centered: true,
     });
   };
-  const noticeModal = ({ title, content, onClick = () => null }: ModalProps) => {
-    Modal.confirm({
-      title: <h3 className="f20 mb-4 font-bold text-text_primary">{title}</h3>,
-      content: <p className="f16 font-medium text-text_primary">{content}</p>,
-      footer: (
-        <div className="mt-6 flex flex-row">
-          <Button
-            label="다시보지 않기"
-            variant="default"
-            size="full"
-            onClick={() => {
-              Modal.destroyAll();
-            }}
-            className="mr-2"
-          />
-          <Button
-            label="확인"
-            variant="primary"
-            size="full"
-            onClick={() => {
-              onClick();
-              Modal.destroyAll();
-            }}
-          />
-        </div>
-      ),
-      icon: null,
-      maskClosable: false,
-      centered: true,
-      width: '358px',
-      style: { top: -100 },
-      transitionName: '',
-    });
-  };
-  return { modal, confirmModal, noticeModal };
+
+  return { modal, confirmModal };
 }

src/lib/actions/noticePopUp.ts

@@ -4,15 +4,18 @@ import { fetchExtended } from '@/utils/fetchExtended';
 import { Notice } from '../definitions';
 
 export default async function getNoticePopUP() {
-  const { body: noticeData } = await fetchExtended<Notice>(
-    'http://dev.api.segam.org:3000/v1/notice/popup',
-    {
-      cache: 'no-store',
-      next: {
-        tags: ['noticePopUp'],
+  try {
+    const { body: noticeData } = await fetchExtended<Notice>(
+      'http://dev.api.segam.org:3000/v1/notice/popup',
+      {
+        cache: 'no-store',
+        next: {
+          tags: ['noticePopUp'],
+        },
       },
-    },
-  );
-
-  return noticeData;
+    );
+    return noticeData;
+  } catch (e) {
+    return null;
+  }
 }