Merge pull request #381 from TripInfoWeb/dev_auth

feat: 유저 추가정보 유효성 검증 추가

src/components/auth/AddUserInformationForm.tsx

@@ -1,48 +1,63 @@
 "use client"
 
+import { AddUserInformationFormSchema } from "@/lib/zod/schema/AddUserInformationFormSchema";
 import useAuthStore from "@/store/authStore";
+import useToastifyStore from "@/store/toastifyStore";
 import { fetchWithAuth } from "@/utils/fetchWithAuth";
-import { useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
 
 interface IAddUserInformationForm {
   closeModal: () => void;
 }
 const AddUserInformationForm = (props: IAddUserInformationForm) => {
-  const [sex, setSex] = useState("");
-  const [age, setAge] = useState("");
-  const [name, setName] = useState("");
   const authStore = useAuthStore();
+  const toastifyStore = useToastifyStore();
+
+  const { formState, register, setValue, getValues, trigger } = useForm({
+      resolver: zodResolver(AddUserInformationFormSchema),
+      defaultValues: {
+        name: "",
+        age: 0,
+        sex: "",
+      },
+    });
 
   // 숫자만 입력되게 필터링
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
     if (!/^\d*$/.test(value)) return;
-    setAge(value);
+    setValue("age", Number(value));
+    trigger();
   };
 
   const addUserInformationSubmit = async () => {
     const response = await fetchWithAuth('/api/auth/user', {
       method: "PUT",
       body: JSON.stringify({
-        sex,
-        name,
-        age,
+        sex: getValues("sex"),
+        name: getValues("name"),
+        age: getValues("age"),
       })
     })
 
     if (response.status == 204) {
-      authStore.setUser({
-        sex: sex,
-        age: Number(age),
+      toastifyStore.setToastify({
+        type: "success",
+        message: "등록 성공"
       })
+      authStore.setUser({
+        sex: getValues("sex"),
+        age: getValues("age"),
+      });
       props.closeModal();
     }
   }
 
   return (
     <section
       className={
-        "flex max-w-[31.25rem] max-h-[calc(100vh-1rem)] overflow-y-scroll scrollbar-hide flex-col items-center rounded-b-[1rem] bg-white px-[3.5rem] pb-[2rem] pt-[.5rem]"
+        "flex max-h-[calc(100vh-1rem)] w-full flex-col items-center overflow-y-scroll rounded-b-[1rem] bg-white px-[3.5rem] pb-[2rem] pt-[.5rem] scrollbar-hide"
       }
     >
       <h2 className="text-[1.625rem] font-bold text-black">
@@ -51,57 +66,64 @@ const AddUserInformationForm = (props: IAddUserInformationForm) => {
       <p className="mt-[0.625rem] max-w-[15.875rem] text-center text-gray1">
         신뢰할 수 있는 이용 환경을 위해 필요한 정보를 입력해 주세요
       </p>
-      <div className="mt-[1.25rem] flex w-full max-w-[24.25rem] flex-col gap-y-[2.375rem] rounded-[1.125rem] bg-[#F7F7F7] px-[2.25rem] pb-[1.875rem] pt-[1.5rem]">
+      <div className="mt-[1.25rem] flex w-full flex-col gap-y-[2.375rem] rounded-[1.125rem] bg-[#F7F7F7] px-[2.25rem] pb-[1.875rem] pt-[1.5rem]">
+        <article className="flex flex-col">
+          <h3 className="text-[1.125rem] font-bold text-black"> 이름 </h3>
+          <input
+            type={"text"}
+            className={`mt-3 h-10 w-full rounded-[1.5rem] px-3 text-center text-main focus:outline-main`}
+            placeholder="이름을 입력해주세요"
+            maxLength={10}
+            {...register("name")}
+          />
+        </article>
         <article className="flex flex-col">
           <h3 className="text-[1.125rem] font-bold text-black"> 성별 </h3>
           <div className={"mt-3 flex h-10 w-full gap-x-3"}>
             <button
-              className={`h-full w-full rounded-[1.5rem] outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${sex == "male" ? "font-bold bg-[#F2FAF7] text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
-              onClick={() => setSex("male")}
+              className={`h-full w-full rounded-[1.5rem] outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${getValues("sex") == "male" ? "bg-[#F2FAF7] font-bold text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
+              onClick={() => {
+                setValue("sex", "male");
+                trigger();
+              }}
             >
               남성
             </button>
             <button
-              className={`h-full w-full rounded-[1.5rem] outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${sex == "female" ? "font-bold bg-[#F2FAF7] text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
-              onClick={() => setSex("female")}
+              className={`h-full w-full rounded-[1.5rem] outline outline-[0.0625rem] outline-offset-[-0.0625rem] ${getValues("sex") == "female" ? "bg-[#F2FAF7] font-bold text-main outline-main" : "bg-white text-gray2 outline-[#f0f0f0]"}`}
+              onClick={() => {
+                setValue("sex", "female");
+                trigger();
+              }}
             >
               여성
             </button>
           </div>
         </article>
         <article className="flex flex-col">
-          <h3 className="text-[1.125rem] font-bold text-black"> 나이(연도) </h3>
+          <h3 className="flex items-center gap-x-2 text-[1.125rem] font-bold text-black"> 연도(나이) <span className="text-gray2 flex items-center"> {new Date().getFullYear() - 58} ~ {new Date().getFullYear() - 19} </span></h3>
           <div className="mt-3 flex h-10 items-center justify-center rounded-[1.5rem] bg-white py-[0.375rem] text-main outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-[#F0F0F0]">
             <input
               type="text"
               name="year"
-              value={age}
               onChange={handleInputChange}
               placeholder="YYYY"
               maxLength={4}
-              min={1965}
-              className="w-[2.5rem] bg-transparent text-center outline-none"
-              />
+              className="w-full bg-transparent text-center outline-none"
+            />
           </div>
         </article>
-        <article className="flex flex-col">
-          <h3 className="text-[1.125rem] font-bold text-black"> 이름 </h3>
-          <input
-            type={"text"}
-            value={name}
-            onChange={(e)=> setName(e.target.value)}
-            className={"mt-3 h-10 w-full rounded-[1.5rem] px-3"}
-            placeholder="이름을 입력해주세요"
-          />
-        </article>
       </div>
       <p className="mt-[0.875rem] max-w-[18.125rem] text-center text-sm text-gray1">
         정보를 입력하지 않아도 서비스를 이용할 수 있으나 일부 서비스 이용이
         제한될 수 있습니다
       </p>
       <button
-        onClick={()=> addUserInformationSubmit()}
-        className={"mt-5 min-h-[4rem] w-full rounded-[1.5rem] bg-main text-white"}
+        onClick={() => addUserInformationSubmit()}
+        className={
+          `mt-5 min-h-[4rem] w-full rounded-[1.5rem] ${formState.isValid ? "bg-main text-white" : "bg-gray3"}`
+        }
+        disabled={!formState.isValid}
       >
         추가 정보 제출
       </button>

src/lib/zod/schema/AddUserInformationFormSchema.ts

@@ -0,0 +1,20 @@
+import { z } from "zod";
+
+const currentYear = new Date().getFullYear();
+
+// 유저 추가정보 받을 떄 유효성 검사
+export const AddUserInformationFormSchema = z.object({
+  name: z
+    .string()
+    .min(1, { message: "이름은 1글자 이상이어야 합니다." })
+    .max(10, { message: "이름은 10글자 이하이어야 합니다." }),
+
+  age: z
+    .number()
+    .min(currentYear - 58, {
+      message: "나이는 59세까지 허용이 됩니다..",
+    })
+    .max(currentYear - 19, { message: "나이는 20살 이상이어야 합니다." }),
+
+  sex: z.string().min(1, { message: "성별은 선택은 필수입니다." }),
+});