diff --git a/src/pages/store/StoreForm.tsx b/src/pages/store/StoreForm.tsx index 7ebd7e1..0eb640d 100644 --- a/src/pages/store/StoreForm.tsx +++ b/src/pages/store/StoreForm.tsx @@ -1,3 +1,178 @@ +import { useState, useEffect, useCallback, useRef } from 'react'; +import { Link, useNavigate } from 'react-router-dom'; +import { getUser } from '@/api/userApi'; +import { postShopNotice, type NoticeUpsertRequest } from '@/api/noticeApi'; +import Input from '@/components/common/Input'; +import Button from '@/components/common/Button'; +import Modal from '@/components/common/Modal'; +import close from '@/assets/icons/close.svg'; + export default function StoreForm() { - return
내 가게 공고 등록
; + const navigate = useNavigate(); + const [noticeInfo, setNoticeInfo] = useState>({ + hourlyPay: undefined, + startsAt: '', + workhour: undefined, + description: '', + }); + const shopId = useRef(''); + const noticeId = useRef(''); + + const [modal, setModal] = useState({ + isOpen: false, + message: '', + }); + + useEffect(() => { + const userId = localStorage.getItem('userId'); + + if (!userId) { + setModal({ + isOpen: true, + message: '로그인이 필요합니다.', + }); + return; + } + + (async () => { + try { + const userInfo = await getUser(userId); + shopId.current = userInfo.item.shop?.item.id ?? ''; + } catch (error) { + setModal({ + isOpen: true, + message: (error as Error).message, + }); + } + })(); + }, []); + + function handleChange( + e: React.ChangeEvent, + ) { + const { name, value } = e.target; + const sanitized = + name === 'hourlyPay' ? Number(value.replace(/[^0-9]/g, '')) : value; + + setNoticeInfo((prev) => ({ + ...prev, + [name]: sanitized, + })); + } + + async function handleSubmit(e: React.FormEvent) { + e.preventDefault(); + const userId = localStorage.getItem('userId'); + // 로그인이 안된 상태에 대한 처리 + if (!userId) { + setModal({ + isOpen: true, + message: '로그인이 필요합니다.', + }); + return; + } + + if (!noticeInfo?.startsAt) { + setModal({ + isOpen: true, + message: '시작 일시를 설정해주세요', + }); + return; + } + + try { + const startsTime = new Date(noticeInfo?.startsAt).toISOString(); + const { item } = await postShopNotice(shopId.current, { + hourlyPay: noticeInfo?.hourlyPay ?? 0, + startsAt: startsTime, + workhour: noticeInfo?.workhour ?? 0, + description: noticeInfo?.description ?? '', + }); + noticeId.current = item.id; + setModal({ + isOpen: true, + message: '등록이 완료되었습니다.', + }); + } catch (error) { + setModal({ + isOpen: true, + message: (error as Error).message, + }); + } + } + + const handleModalConfirm = useCallback(() => { + if (modal.message === '등록이 완료되었습니다.') { + setModal({ isOpen: false, message: '' }); + navigate(`/owner/post/${noticeId.current}`); + } else if (modal.message.includes('로그인')) { + setModal({ isOpen: false, message: '' }); + navigate('/login'); + } else { + setModal({ isOpen: false, message: '' }); + } + }, [modal.message, navigate]); + + return ( +
+
+
+

내 프로필

+ + 닫기 + +
+
+
+
+ + + +
+
+ +