From aaa70dea4625e55bbadd1f5634b9ec9b6387acf4 Mon Sep 17 00:00:00 2001
From: LimSumi <thddkwl5330@naver.com>
Date: Wed, 18 Oct 2023 19:25:25 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20age=20=EB=B3=80=EA=B2=BD=EB=B6=80?=
 =?UTF-8?q?=EB=B6=84=20=EC=88=98=EC=A0=95=ED=95=98=EA=B8=B0=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80,=20=ED=95=84=EC=88=98?=
 =?UTF-8?q?=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

필수 표시 바꿀 때 switch 케이스명도 바꿔주기
---
 src/commons/SelectBox.tsx                | 13 ++++----
 src/pages/register/VMRegisterForm.tsx    | 26 +++++-----------
 src/pages/register/VRadioGroup.tsx       |  6 ++--
 src/pages/update/VUpdateRegisterForm.tsx | 38 ++++++++++++------------
 4 files changed, 37 insertions(+), 46 deletions(-)

diff --git a/src/commons/SelectBox.tsx b/src/commons/SelectBox.tsx
index d3c95a91..5253d16a 100644
--- a/src/commons/SelectBox.tsx
+++ b/src/commons/SelectBox.tsx
@@ -13,7 +13,7 @@ interface SelectProps {
 }
 
 const yearOptions: SelectProps[] = [];
-for (let idx = 0; idx < 33; idx += 1) {
+for (let idx = 0; idx < 32; idx += 1) {
   yearOptions.push({ label: `${idx}`, value: `${idx}` });
 }
 
@@ -31,6 +31,7 @@ const SelectBox = ({ id, label }: IdProps) => {
   const [selectedType, setSelectedType] = useRecoilState(registerState);
 
   const year = selectedType.age.substring(0, selectedType.age.indexOf('년'));
+  console.log('년', year);
   const month = selectedType.age.substring(
     selectedType.age.indexOf('년') + 1,
     selectedType.age.indexOf('개'),
@@ -40,21 +41,21 @@ const SelectBox = ({ id, label }: IdProps) => {
     console.log(value);
 
     console.log('달', month);
-    if (label === '종') {
+    if (label === '종🔸') {
       setSelectedType((prevType) => ({
         ...prevType,
         type: value,
       }));
-    } else if (label === '나이') {
+    } else if (label === 'ㅤ') {
       setSelectedType((prevType) => ({
         ...prevType,
-        age: `${value}년${month}개월`,
+        age: `${year}년${value}개월`,
       }));
       console.log(value);
     } else {
       setSelectedType((prevType) => ({
         ...prevType,
-        age: `${year}년${value}개월`,
+        age: `${value}년${month}개월`,
       }));
       console.log(value);
     }
@@ -79,7 +80,7 @@ const SelectBox = ({ id, label }: IdProps) => {
     <div className="justify-end">
       <h2 className="font-semibold mb-1">{label}</h2>
       <select
-        className="border-2 rounded-md border-gray-300 h-10"
+        className="border-2 rounded-md w-auto border-gray-300 h-10 mx-auto"
         name="type"
         value={key}
         onChange={(e) => handleChange(e.target.value)}
diff --git a/src/pages/register/VMRegisterForm.tsx b/src/pages/register/VMRegisterForm.tsx
index 2f4c9ecb..9f9cc27c 100644
--- a/src/pages/register/VMRegisterForm.tsx
+++ b/src/pages/register/VMRegisterForm.tsx
@@ -6,11 +6,6 @@ type RegisterProps = {
   handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-interface IdProps {
-  id: number;
-  label: string;
-}
-
 const VMRegisterForm = ({ handleChange }: RegisterProps) => {
   return (
     <div className="sm:mx-auto flex flex-col items-center gap-8 mt-10">
@@ -19,7 +14,7 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
           <div className="w-full justify-center">
             <InputGroup
               id="name"
-              name="이름"
+              name="이름🔸"
               type="text"
               placeholder="이름을 입력해주세요"
               onChange={(e) => {
@@ -29,16 +24,11 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
             />
           </div>
           <div className="flex w-3/4 gap-2 whitespace-nowrap items-center ml-10 justify-center">
-            <SelectBox id={1} label={'나이'} />
+            <SelectBox id={1} label={'나이🔸'} />
             <div className="flex h-full items-end">년</div>
             <SelectBox id={2} label={'ㅤ'} />
-            <div
-              className="flex w-12
-             h-full items-end"
-            >
-              개월
-            </div>
-            <SelectBox id={3} label={'종'} />
+            <div className="flex w-12 h-full items-end">개월</div>
+            <SelectBox id={3} label={'종🔸'} />
           </div>
         </div>
       </div>
@@ -51,7 +41,7 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
         <div className="w-full">
           <InputGroup
             id="size"
-            name="크기"
+            name="크기🔸"
             type="text"
             placeholder="주변 사물과 비교해서 작성해주셔도 좋아요!"
             onChange={(e) => {
@@ -64,7 +54,7 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
       <div className="flex flex-col sm:flex-row justify-center gap-5 sm:gap-10 w-3/4 sm:w-1/2 text-sm  mb-5">
         <div className="flex flex-col gap-1 w-full">
           <label htmlFor={'weight'} className="text-sm font-semibold">
-            몸무게
+            몸무게🔸
           </label>
           <input
             className="border-2 rounded-md border-gray-300 p-2"
@@ -82,7 +72,7 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
         <div className=" w-full">
           <InputGroup
             id="vaccinationStatus"
-            name="접종여부"
+            name="접종여부🔸"
             type="text"
             placeholder="접종명과 차수를 입력해주세요"
             onChange={(e) => {
@@ -96,7 +86,7 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
         <div className="w-full">
           <InputGroup
             id="description"
-            name="상세설명"
+            name="상세설명🔸"
             type="text"
             placeholder="상세 설명을 입력해주세요"
             onChange={(e) => {
diff --git a/src/pages/register/VRadioGroup.tsx b/src/pages/register/VRadioGroup.tsx
index a3102fb8..da83a819 100644
--- a/src/pages/register/VRadioGroup.tsx
+++ b/src/pages/register/VRadioGroup.tsx
@@ -25,7 +25,7 @@ const VRadioGroup = ({
   return (
     <div className="flex flex-col sm:flex-row sm:gap-20 justify-center">
       <div>
-        <h2 className="font-semibold my-3  whitespace-nowrap">성별</h2>
+        <h2 className="font-semibold my-3  whitespace-nowrap">성별🔸</h2>
         <div className="grid grid-cols-2 gap-8 text-sm  whitespace-nowrap">
           <DetailRadio
             label="남"
@@ -62,7 +62,7 @@ const VRadioGroup = ({
 
       <div>
         <h2 className="font-semibold text-sm my-3 whitespace-nowrap">
-          입양 상태
+          입양 상태🔸
         </h2>
         <div className="grid grid-cols-2 w-full  gap-10 text-sm whitespace-nowrap">
           <DetailRadio
@@ -97,7 +97,7 @@ const VRadioGroup = ({
       </div>
       <div>
         <h2 className="font-semibold text-sm my-3 whitespace-nowrap">
-          중성화 상태
+          중성화 상태🔸
         </h2>
         <div className="grid grid-cols-3 w-full gap-16 text-sm whitespace-nowrap">
           <DetailRadio
diff --git a/src/pages/update/VUpdateRegisterForm.tsx b/src/pages/update/VUpdateRegisterForm.tsx
index 998c94bd..f22759a1 100644
--- a/src/pages/update/VUpdateRegisterForm.tsx
+++ b/src/pages/update/VUpdateRegisterForm.tsx
@@ -23,25 +23,19 @@ const VMRegisterForm = (
               id="name"
               name="이름"
               type="text"
-              placeholder={petInfo.name}
+              placeholder="이름을 입력해주세요"
               onChange={(e) => {
                 handleChange(e);
               }}
               defaultValue={petInfo.name}
             />
           </div>
-          <div className="flex w-3/4 gap-5 whitespace-nowrap items-center ml-10 justify-center">
-            <InputGroup
-              id="age"
-              name="나이"
-              type="text"
-              placeholder={petInfo.age}
-              onChange={(e) => {
-                handleChange(e);
-              }}
-              defaultValue={petInfo.age}
-            />
-            <SelectBox id={1} label={'나이'} />
+          <div className="flex w-3/4 gap-2 whitespace-nowrap items-center ml-10 justify-center">
+            <SelectBox id={1} label={'나이🔸'} />
+            <div className="flex h-full items-end">년</div>
+            <SelectBox id={2} label={'ㅤ'} />
+            <div className="flex w-12 h-full items-end">개월</div>
+            <SelectBox id={3} label={'종🔸'} />
           </div>
         </div>
       </div>
@@ -56,7 +50,7 @@ const VMRegisterForm = (
             id="size"
             name="크기"
             type="text"
-            placeholder={petInfo.size}
+            placeholder="주변 사물과 비교해서 작성해주셔도 좋아요!"
             onChange={(e) => {
               handleChange(e);
             }}
@@ -65,15 +59,21 @@ const VMRegisterForm = (
         </div>
       </div>
       <div className="flex flex-col sm:flex-row justify-center gap-5 sm:gap-10 w-3/4 sm:w-1/2 text-sm  mb-5">
-        <div className=" w-full">
-          <InputGroup
+        <div className="flex flex-col gap-1 w-full">
+          <label htmlFor={'weight'} className="text-sm font-semibold">
+            몸무게
+          </label>
+          <input
+            className="border-2 rounded-md border-gray-300 p-2"
             id="weight"
             name="몸무게"
             type="number"
-            placeholder={`${petInfo.weight}`}
+            placeholder="kg 단위로 입력해주세요"
             onChange={(e) => {
               handleChange(e);
             }}
+            autoComplete="off"
+            min={1}
             defaultValue={petInfo.weight}
           />
         </div>
@@ -82,7 +82,7 @@ const VMRegisterForm = (
             id="vaccinationStatus"
             name="접종여부"
             type="text"
-            placeholder={petInfo.vaccinationStatus}
+            placeholder="접종명과 차수를 입력해주세요"
             onChange={(e) => {
               handleChange(e);
             }}
@@ -96,7 +96,7 @@ const VMRegisterForm = (
             id="description"
             name="상세설명"
             type="text"
-            placeholder={petInfo.description}
+            placeholder="상세 설명을 입력해주세요"
             onChange={(e) => {
               handleChange(e);
             }}