fix: allow blank value in age and height input

wanted-fork-fork · Dec 23, 2024 · bc5398b · bc5398b
1 parent 5e13342
commit bc5398b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/src/entities/ideal_partner/model/idealPartnerStore.ts b/src/entities/ideal_partner/model/idealPartnerStore.ts
@@ -45,11 +45,11 @@ export type IdealPartner = {
 
 type Action = {
   toggleAge: (on: boolean) => void;
-  setMinAge: (value: number) => void;
-  setMaxAge: (value: number) => void;
+  setMinAge: (value?: number) => void;
+  setMaxAge: (value?: number) => void;
   toggleHeight: (on: boolean) => void;
-  setMinHeight: (value: number) => void;
-  setMaxHeight: (value: number) => void;
+  setMinHeight: (value?: number) => void;
+  setMaxHeight: (value?: number) => void;
   setStyle: (value: string) => void;
   setImages: (getState: (prevFiles: File[]) => File[]) => void;
   setImageDtoList: (getState: (prevFiles: ImageDto[]) => ImageDto[]) => void;

diff --git a/src/processes/ideal_partner/AgeForm/AgeForm.tsx b/src/processes/ideal_partner/AgeForm/AgeForm.tsx
@@ -15,13 +15,19 @@ export const AgeForm = () => {
   const setMax = useIdealPartnerStore((state) => state.setMaxAge);
 
   const onChangeMin = (e: ChangeEvent<HTMLInputElement>) => {
-    if (!isNaN(Number(e.target.value))) {
+    const value = Number(e.target.value);
+    if (value <= 0 || isNaN(value)) {
+      setMin(undefined);
+    } else {
       setMin(Number(e.target.value));
     }
   };
 
   const onChangeMax = (e: ChangeEvent<HTMLInputElement>) => {
-    if (!isNaN(Number(e.target.value))) {
+    const value = Number(e.target.value);
+    if (value <= 0 || isNaN(value)) {
+      setMax(undefined);
+    } else {
       setMax(Number(e.target.value));
     }
   };
@@ -42,15 +48,15 @@ export const AgeForm = () => {
               <Input
                 placeholder={'최소 나이'}
                 suffixSlot={<span>세</span>}
-                value={min}
+                value={min ?? ''}
                 onChange={onChangeMin}
                 inputMode={'numeric'}
               />
               <span>-</span>
               <Input
                 placeholder={'최대 나이'}
                 suffixSlot={<span>세</span>}
-                value={max}
+                value={max ?? ''}
                 onChange={onChangeMax}
                 inputMode={'numeric'}
               />

diff --git a/src/processes/ideal_partner/HeightStyleForm/HeightStyleForm.tsx b/src/processes/ideal_partner/HeightStyleForm/HeightStyleForm.tsx
@@ -27,11 +27,19 @@ export const HeightStyleForm = () => {
 
   const onChangeMin = (e: ChangeEvent<HTMLInputElement>) => {
     const value = Number(e.target.value);
-    if (!isNaN(value)) setMin(value);
+    if (value <= 0 || isNaN(value)) {
+      setMin(undefined);
+    } else {
+      setMin(value);
+    }
   };
   const onChangeMax = (e: ChangeEvent<HTMLInputElement>) => {
     const value = Number(e.target.value);
-    if (!isNaN(value)) setMax(value);
+    if (value <= 0 || isNaN(value)) {
+      setMax(undefined);
+    } else {
+      setMax(value);
+    }
   };
 
   const onCheckDisable = () => {
@@ -61,15 +69,15 @@ export const HeightStyleForm = () => {
               <Input
                 placeholder={'최소 키 입력'}
                 suffixSlot={<span>cm</span>}
-                value={min}
+                value={min ?? ''}
                 onChange={onChangeMin}
                 inputMode={'numeric'}
               />
               <span>-</span>
               <Input
                 placeholder={'최대 키 입력'}
                 suffixSlot={<span>cm</span>}
-                value={max}
+                value={max ?? ''}
                 onChange={onChangeMax}
                 inputMode={'numeric'}
               />