fix: age 변경부분 수정하기 페이지 추가, 필수 표시

필수 표시 바꿀 때 switch 케이스명도 바꿔주기
Step3-kakao-tech-campus · Oct 18, 2023 · aaa70de · aaa70de
1 parent c641674
commit aaa70de
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 46 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
             }}