diff --git a/src/Router.tsx b/src/Router.tsx index 834bb93..ff4eedd 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -53,6 +53,7 @@ const shopRoutes: RouteObject[] = [ { path: ROUTES.SHOP.EDIT, Component: ShopEditPage, + handle: { hideFooter: true }, }, ]; @@ -65,10 +66,12 @@ const profileRoutes: RouteObject[] = [ { path: ROUTES.PROFILE.REGISTER, Component: ProfileRegisterPage, + handle: { hideFooter: true }, }, { path: ROUTES.PROFILE.EDIT, Component: ProfileEditPage, + handle: { hideFooter: true }, }, ]; @@ -80,10 +83,12 @@ const noticeRoutes: RouteObject[] = [ { path: ROUTES.NOTICE.REGISTER, Component: NoticeRegisterPage, + handle: { hideFooter: true }, }, { path: ROUTES.NOTICE.EDIT, Component: NoticeEditPage, + handle: { hideFooter: true }, }, { path: ROUTES.NOTICE.NOTICE_ID.EMPLOYER, diff --git a/src/pages/ProfileRegisterPage.tsx b/src/pages/ProfileRegisterPage.tsx index 8421c01..7b7abf0 100644 --- a/src/pages/ProfileRegisterPage.tsx +++ b/src/pages/ProfileRegisterPage.tsx @@ -1,3 +1,150 @@ +import { useState } from "react"; + +import { useNavigate } from "react-router-dom"; + +import { SeoulDistrict, SeoulDistricts } from "../types"; + +import { putUser } from "@/apis/services/userService"; +import { Close } from "@/assets/icon"; +import Button from "@/components/Button"; +import Select from "@/components/Select"; +import TextField from "@/components/TextField"; +import { ROUTES } from "@/constants/router"; +import { useUserStore } from "@/hooks/useUserStore"; +import { autoHyphenFormatter } from "@/utils/phoneNumber"; + +type FormType = { + name: string; + phone: string; + address: SeoulDistrict | undefined; + bio: string; +}; + +const FIELD_LABELS: Record = { + name: "이름", + phone: "연락처", + address: "선호 지역", + bio: "소개", +}; + export default function ProfileRegisterPage() { - return
ProfileRegisterPage
; + const navigate = useNavigate(); + const { user } = useUserStore(); + const [isSubmitting, setIsSubmitting] = useState(false); + + const [form, setForm] = useState({ + name: "", + phone: "", + address: undefined, + bio: "", + }); + + const handleChange = (key: keyof FormType, value: string | SeoulDistrict) => { + setForm((prev) => ({ ...prev, [key]: value })); + }; + + const handleSubmit = async () => { + if (!user?.id) { + alert("로그인 정보가 없습니다."); + return; + } + + if (isSubmitting) return; + + const requiredFields: Array = ["name", "phone"]; + + const missingField = requiredFields.find((key) => { + const value = form[key]; + return typeof value === "string" && value.trim() === ""; + }); + + if (missingField) { + alert(`${FIELD_LABELS[missingField]}을(를) 입력해 주세요.`); + return; + } + + setIsSubmitting(true); + const payload = { + name: form.name.trim(), + phone: form.phone, + address: form.address, + bio: form.bio.trim(), + }; + + try { + await putUser(user.id, payload); + navigate(ROUTES.PROFILE.ROOT); + } finally { + setIsSubmitting(false); + } + }; + + return ( +
{ + e.preventDefault(); + handleSubmit(); + }} + > +
+

+ 내 프로필 +

+ +
+ +
+ handleChange("name", e.target.value)} + maxLength={20} + /> + { + const formatted = autoHyphenFormatter(e.target.value); + handleChange("phone", formatted); + }} + /> +