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 (
+
+
+
+
내 프로필
+
+

+
+
+
+
+ {modal.isOpen && (
+
+ {modal.message}
+
+ )}
+
+ );
}