diff --git a/src/pages/store/StorePost.tsx b/src/pages/store/StorePost.tsx index 6caeddb..e2deca0 100644 --- a/src/pages/store/StorePost.tsx +++ b/src/pages/store/StorePost.tsx @@ -1,3 +1,93 @@ +import { useEffect, useState } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; +import { getShopNotice, type NoticeDetailItem } from '@/api/noticeApi'; +import Footer from '@/components/layout/Footer'; +import PostLarge from '@/components/common/PostLarge'; +import Button from '@/components/common/Button'; +import Table from '@/components/common/table/Table'; +import Modal from '@/components/common/Modal'; + +const MODAL_MESSAGE = { + notice: '존재하지 않는 공고입니다.', + login: '로그인이 필요합니다.', +}; + export default function StorePost() { - return
내 가게 공고 상세 (사장님)
; + const navigate = useNavigate(); + const { shopId, noticeId } = useParams(); + const [notice, setNotice] = useState(); + const [isMobile, setIsMobile] = useState(window.innerWidth < 768); + const [modalType, setModalType] = useState<'notice' | 'login' | null>(null); + + const handleClose = () => { + if (modalType === 'notice') navigate('/owner/store'); + else if (modalType === 'login') navigate('/login'); + }; + + useEffect(() => { + if (!localStorage.getItem('userId')) { + setModalType('login'); + return; + } + + if (!shopId || !noticeId) return; + + (async () => { + try { + const { item } = await getShopNotice(shopId, noticeId); + setNotice(item); + } catch { + setModalType('notice'); + } + })(); + }, [shopId, noticeId]); + + // 반응형 + useEffect(() => { + const handleResize = () => { + setIsMobile(window.innerWidth < 768); + }; + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + return ( +
+
+
+
+
+ 식당 +
+

+ {notice?.shop.item.name} +

+
+ {notice && ( + + + + )} +
+
+
+
+

+ 신청자 목록 +

+ {shopId && noticeId && ( + + )} + + + {modalType && ( + + {MODAL_MESSAGE[modalType]} + + )} +
+ + ); }