design: 긴급공지 클릭 시, 모달 렌더링

4bujak-4bujak · May 31, 2024 · 218297c · 218297c
1 parent 218cb11
commit 218297c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 18 deletions.
diff --git a/src/components/home/OfficeNotice.tsx b/src/components/home/OfficeNotice.tsx
@@ -1,26 +1,48 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useNotices } from '@/hook/useNotices';
 
 const OfficeNotice: React.FC = () => {
-
-  const { urgentNoticeTitle } = useNotices();
+  const { urgentNoticeTitle, urgentNoticeContent } = useNotices();
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
-return (
-  <div className="w-full h-12 mt-7 bg-gray-200 flex items-center gap-[13px] px-[13px] py-[14px] rounded shadow border border-gray-200">
-    <div>
-      <img src="/home/notice.svg" alt="" />
-    </div>
+  const handleModalOpen = () => {
+    setIsModalOpen(true);
+  };
 
-    <div className="flex-1 flex items-center gap-[22px] justify-between">
-      <div className="text-sm font-normal flex justify-center text-space-purple-darker">
-        {urgentNoticeTitle ? urgentNoticeTitle : '긴급 공지가 없습니다.'}
-      </div>
-      <div>
-        <img src="/home/toNext.svg" alt="" />
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      <div className="w-full h-12 mt-7 bg-gray-200 flex items-center gap-[13px] px-[13px] py-[14px] rounded shadow border border-gray-200">
+        <div>
+          <img src="/home/notice.svg" alt="" />
+        </div>
+
+        <div className="flex-1 flex items-center gap-[22px] justify-between">
+          <div className="text-sm font-normal flex justify-center text-space-purple-darker">
+            {urgentNoticeTitle ? urgentNoticeTitle : '긴급 공지가 없습니다.'}
+          </div>
+          {urgentNoticeContent && (
+            <div onClick={handleModalOpen} className="cursor-pointer">
+              <img src="/home/toNext.svg" alt="" />
+            </div>
+          )}
+        </div>
       </div>
-    </div>
-  </div>
-);
+      {isModalOpen && (
+        <div className="fixed w-full inset-0 flex items-center justify-center z-50">
+          <div className="fixed inset-0 bg-black opacity-50" onClick={handleModalClose}></div>
+          <div className="bg-white p-6 rounded shadow-lg z-50 max-w-[393px] mx-[20px] px-[20px]">
+            <h2 className="text-xl font-semibold mb-4">긴급 공지</h2>
+            <p>{urgentNoticeContent}</p>
+            <button onClick={handleModalClose} className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">닫기</button>
+          </div>
+        </div>
+      )}
+    </>
+  );
 };
 
 export default OfficeNotice;
diff --git a/src/hook/useNotices.ts b/src/hook/useNotices.ts
@@ -21,6 +21,7 @@ const seededRandom = (seed: number) => {
 export const useNotices = () => {
   const [randomNotices, setRandomNotices] = useState<Notice[]>([]);
   const [urgentNoticeTitle, setUrgentNoticeTitle] = useState<string | null>(null);
+  const [urgentNoticeContent, setUrgentNoticeContent] = useState<string | null>(null);
   const [expandedNotice, setExpandedNotice] = useState<{ [key: string]: boolean }>({});
   const [currentDate, setCurrentDate] = useState<string>('');
   const selectedBranch = useBranchStore((state) => state.selectedBranch);
@@ -50,6 +51,7 @@ export const useNotices = () => {
 
     setRandomNotices(combinedNotices);
     setUrgentNoticeTitle(randomUrgentNotice ? randomUrgentNotice.title : null);
+    setUrgentNoticeContent(randomUrgentNotice ? randomUrgentNotice.content : null);
 
   }, [selectedBranch]);
 
@@ -60,5 +62,5 @@ export const useNotices = () => {
     }));
   };
 
-  return { randomNotices, urgentNoticeTitle, expandedNotice, toggleExpand, currentDate };
+  return { randomNotices, urgentNoticeTitle, urgentNoticeContent, expandedNotice, toggleExpand, currentDate };
 };