fix some validations

wanted-fork-fork · Dec 22, 2024 · 75016ca · 75016ca
1 parent e4f0bed
commit 75016ca
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 14 deletions.
diff --git a/src/entities/profile/ui/ProfileCard/ProfileCard.tsx b/src/entities/profile/ui/ProfileCard/ProfileCard.tsx
@@ -10,6 +10,7 @@ import { getJobText } from 'src/entities/profile/lib/getJobText';
 import { Avatar } from 'src/shared/ui/Avatar/Avatar';
 import { convertDtoToLocation } from 'src/entities/profile/model/convertProfileToDto';
 import { getDrinkingText } from 'src/entities/profile/lib/getDrinkingText';
+import { getLocationText } from 'src/entities/profile/lib/getLocationText';
 
 type Props = {
   profile: ProfileSummary;
@@ -39,7 +40,7 @@ export const ProfileCard = ({ profile, headerRightSlot }: Props) => {
           <div className={styles.Info}>
             <span>{calculateAge(new Date(profile.birthDate))}세</span>
             <span>{t(profile.gender)}</span>
-            {location && <span>getLocationText(location)</span>}
+            {location && <span>{getLocationText(location)}</span>}
           </div>
         </div>
       </div>

diff --git a/src/pages/form/ideal_partner/IdealPartnerPage.tsx b/src/pages/form/ideal_partner/IdealPartnerPage.tsx
@@ -15,16 +15,19 @@ export const IdealPartnerPage = ({ onClickNextStep }: { onClickNextStep: () => v
   const [currentStepIdx, setCurrentStep] = useState(0);
   const name = useProfileFirstName();
 
-  const currentStep = Steps[currentStepIdx];
-  const canGoNext = useIdealPartnerStore(currentStep.canGoNext);
-
+  const touchedSteps = useIdealPartnerFormProcessStore((state) => state.touchedSteps);
   const addTouchedStep = useIdealPartnerFormProcessStore((state) => state.addTouchedStep);
 
+  const currentStep = Steps[currentStepIdx];
+  const canGoNext = useIdealPartnerStore((state) =>
+    currentStep.canGoNext(state, (key) => touchedSteps.has(key as keyof typeof IdealPartnerStepMeta)),
+  );
+
   useEffect(() => {
     if (currentStepIdx > 0) {
       addTouchedStep(StepKeys[currentStepIdx - 1]);
     }
-    if (currentStepIdx === StepKeys.length) {
+    if (currentStepIdx === StepKeys.length - 1) {
       addTouchedStep(StepKeys[currentStepIdx]);
     }
   }, [addTouchedStep, currentStepIdx]);

diff --git a/src/pages/form/ideal_partner/IdealPartnerStepMeta.tsx b/src/pages/form/ideal_partner/IdealPartnerStepMeta.tsx
@@ -15,14 +15,14 @@ export const IdealPartnerStepMeta = {
     title: () => <>선호하는 연령대가 있나요?</>,
     description: () => <></>,
     form: () => <AgeForm />,
-    canGoNext: (state) => Boolean(state.ageRange?.max && state.ageRange.min),
+    canGoNext: (state) => (state.ageRange ? Boolean(state.ageRange.max && state.ageRange.min) : true),
     shortcutTitle: '선호하는 연령대',
   },
   IDEAL_HEIGHT_STYLE: {
     title: () => <>이상형을 볼 때 외모가 중요한가요?</>,
     description: () => <></>,
     form: () => <HeightStyleForm />,
-    canGoNext: (state) => Boolean(state.heightRange?.min && state.heightRange.max && state.style),
+    canGoNext: (state) => (state.heightRange ? Boolean(state.heightRange.min && state.heightRange.max) : true),
     shortcutTitle: '선호하는 키, 스타일',
   },
   IDEAL_LOCATION: {
@@ -35,7 +35,7 @@ export const IdealPartnerStepMeta = {
     ),
     description: () => <></>,
     form: () => <LocationForm />,
-    canGoNext: (state) => state.locations.length > 0,
+    canGoNext: (_, checkTouched) => checkTouched?.('IDEAL_LOCATION') ?? true,
     shortcutTitle: '상대방이 주로 머무는 지역',
   },
   IDEAL_HOBBY: {
@@ -48,7 +48,7 @@ export const IdealPartnerStepMeta = {
     ),
     description: () => <></>,
     form: () => <HobbyForm />,
-    canGoNext: (state) => Boolean(state.hobbies.length > 0),
+    canGoNext: (_, checkTouched) => checkTouched?.('IDEAL_HOBBY') ?? true,
     shortcutTitle: '상대방의 취미',
   },
   IDEAL_RELIGION: {

diff --git a/src/pages/form/my_profile/MyProfilePage.tsx b/src/pages/form/my_profile/MyProfilePage.tsx
@@ -29,7 +29,7 @@ export const MyProfilePage = ({ onClickNextStep }: { onClickNextStep: () => void
     if (currentStepIdx > 0) {
       addTouchedStep(StepKeys[currentStepIdx - 1]);
     }
-    if (currentStepIdx === StepKeys.length) {
+    if (currentStepIdx === StepKeys.length - 1) {
       addTouchedStep(StepKeys[currentStepIdx]);
     }
   }, [addTouchedStep, currentStepIdx]);

diff --git a/src/processes/ideal_partner/AgeForm/AgeForm.tsx b/src/processes/ideal_partner/AgeForm/AgeForm.tsx
@@ -39,9 +39,21 @@ export const AgeForm = () => {
           <div className={styles.AgeDetailWrapper}>
             <small>선호하는 연령대를 입력해주세요</small>
             <div className={styles.AgeInputWrapper}>
-              <Input placeholder={'최소 나이'} suffixSlot={<span>세</span>} value={min} onChange={onChangeMin} />
+              <Input
+                placeholder={'최소 나이'}
+                suffixSlot={<span>세</span>}
+                value={min}
+                onChange={onChangeMin}
+                inputMode={'numeric'}
+              />
               <span>-</span>
-              <Input placeholder={'최대 나이'} suffixSlot={<span>세</span>} value={max} onChange={onChangeMax} />
+              <Input
+                placeholder={'최대 나이'}
+                suffixSlot={<span>세</span>}
+                value={max}
+                onChange={onChangeMax}
+                inputMode={'numeric'}
+              />
             </div>
           </div>
         )}

diff --git a/src/processes/ideal_partner/HeightStyleForm/HeightStyleForm.tsx b/src/processes/ideal_partner/HeightStyleForm/HeightStyleForm.tsx
@@ -58,9 +58,21 @@ export const HeightStyleForm = () => {
             <p className={styles.Description}>그렇다면 선호하는 키와 스타일을 알려주세요</p>
             <p className={'label'}>키</p>
             <div className={styles.HeightInput}>
-              <Input placeholder={'최소 키 입력'} suffixSlot={<span>cm</span>} value={min} onChange={onChangeMin} />
+              <Input
+                placeholder={'최소 키 입력'}
+                suffixSlot={<span>cm</span>}
+                value={min}
+                onChange={onChangeMin}
+                inputMode={'numeric'}
+              />
               <span>-</span>
-              <Input placeholder={'최대 키 입력'} suffixSlot={<span>cm</span>} value={max} onChange={onChangeMax} />
+              <Input
+                placeholder={'최대 키 입력'}
+                suffixSlot={<span>cm</span>}
+                value={max}
+                onChange={onChangeMax}
+                inputMode={'numeric'}
+              />
             </div>
           </div>
           <label className={styles.StyleInputWrapper}>