fix: do not show selected option on user didn't select

wanted-fork-fork · Dec 5, 2024 · 7b1c07d · 7b1c07d
1 parent 8ac33da
commit 7b1c07d
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 12 deletions.
diff --git a/src/pages/form/ideal_partner/IdealPartnerPage.tsx b/src/pages/form/ideal_partner/IdealPartnerPage.tsx
@@ -21,7 +21,9 @@ export const IdealPartnerPage = ({ onClickNextStep }: { onClickNextStep: () => v
   const addTouchedStep = useIdealPartnerFormProcessStore((state) => state.addTouchedStep);
 
   useEffect(() => {
-    addTouchedStep(StepKeys[currentStepIdx]);
+    if (currentStepIdx > 0) {
+      addTouchedStep(StepKeys[currentStepIdx - 1]);
+    }
   }, [addTouchedStep, currentStepIdx]);
 
   const handleClickNext = () => {

diff --git a/src/processes/ideal_partner/DrinkingForm/DrinkingForm.tsx b/src/processes/ideal_partner/DrinkingForm/DrinkingForm.tsx
@@ -5,6 +5,7 @@ import { DrinkingDrinkingCategory } from 'src/types';
 import { useTranslation } from 'react-i18next';
 import { useMemo } from 'react';
 import { DistributedOmit } from '../../../shared/types/distributedOmit';
+import { useIdealPartnerFormProcessStore } from '../_store/idealPartnerFormProcessStore';
 
 const drinkingRadioMeta: DistributedOmit<RadioMeta<DrinkingDrinkingCategory>, 'name'>[] = [
   { key: 'NO_PROBLEM', allowInput: false },
@@ -20,6 +21,14 @@ export const DrinkingForm = () => {
   const setDrinkingCategory = useIdealPartnerStore((state) => state.setDrinkingCategory);
   const setDrinkingAmount = useIdealPartnerStore((state) => state.setDrinkingAmount);
 
+  const addTouchedStep = useIdealPartnerFormProcessStore((state) => state.addTouchedStep);
+  const touchedSteps = useIdealPartnerFormProcessStore((state) => state.touchedSteps);
+
+  const onSelect = (category: DrinkingDrinkingCategory) => {
+    setDrinkingCategory(category);
+    addTouchedStep('IDEAL_DRINKING');
+  };
+
   const { t } = useTranslation();
   const meta = useMemo(
     () =>
@@ -34,8 +43,8 @@ export const DrinkingForm = () => {
     <section className={styles.Container}>
       <RadioList
         radioMetaList={meta}
-        selected={drinkingCategory}
-        onSelect={setDrinkingCategory}
+        selected={touchedSteps.has('IDEAL_DRINKING') ? drinkingCategory : null}
+        onSelect={onSelect}
         inputValue={drinkingAmount}
         onChangeInputValue={setDrinkingAmount}
       />

diff --git a/src/processes/ideal_partner/ReligionForm/ReligionForm.tsx b/src/processes/ideal_partner/ReligionForm/ReligionForm.tsx
@@ -5,6 +5,7 @@ import { ReligionReligionCategory } from 'src/types';
 import { DistributedOmit } from '../../../shared/types/distributedOmit';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useIdealPartnerFormProcessStore } from '../_store/idealPartnerFormProcessStore';
 
 const religionRadioMeta: DistributedOmit<RadioMeta<ReligionReligionCategory>, 'name'>[] = [
   { key: 'IRRELIGION', allowInput: false },
@@ -20,6 +21,14 @@ export const ReligionForm = () => {
   const setReligionCategory = useIdealPartnerStore((state) => state.setReligionCategory);
   const setReligionName = useIdealPartnerStore((state) => state.setReligionName);
 
+  const addTouchedStep = useIdealPartnerFormProcessStore((state) => state.addTouchedStep);
+  const touchedSteps = useIdealPartnerFormProcessStore((state) => state.touchedSteps);
+
+  const onSelect = (category: ReligionReligionCategory) => {
+    setReligionCategory(category);
+    addTouchedStep('IDEAL_RELIGION');
+  };
+
   const { t } = useTranslation();
   const meta = useMemo(
     () =>
@@ -34,8 +43,8 @@ export const ReligionForm = () => {
     <section className={styles.Container}>
       <RadioList
         radioMetaList={meta}
-        selected={religionCategory}
-        onSelect={setReligionCategory}
+        selected={touchedSteps.has('IDEAL_RELIGION') ? religionCategory : null}
+        onSelect={onSelect}
         inputValue={religionName}
         onChangeInputValue={setReligionName}
       />

diff --git a/src/processes/ideal_partner/SmokingForm/SmokingForm.tsx b/src/processes/ideal_partner/SmokingForm/SmokingForm.tsx
@@ -5,6 +5,7 @@ import { SmokingSmokingCategory } from 'src/types';
 import { DistributedOmit } from '../../../shared/types/distributedOmit';
 import { useTranslation } from 'react-i18next';
 import { useMemo } from 'react';
+import { useIdealPartnerFormProcessStore } from '../_store/idealPartnerFormProcessStore';
 
 const smokingRadioMeta: DistributedOmit<RadioMeta<SmokingSmokingCategory>, 'name'>[] = [
   { key: 'SMOKER', allowInput: false },
@@ -18,6 +19,14 @@ export const SmokingForm = () => {
   const setSmokingCategory = useIdealPartnerStore((state) => state.setSmokingCategory);
   const setSmokingAmount = useIdealPartnerStore((state) => state.setSmokingAmount);
 
+  const addTouchedStep = useIdealPartnerFormProcessStore((state) => state.addTouchedStep);
+  const touchedSteps = useIdealPartnerFormProcessStore((state) => state.touchedSteps);
+
+  const onSelect = (category: SmokingSmokingCategory) => {
+    setSmokingCategory(category);
+    addTouchedStep('IDEAL_SMOKING');
+  };
+
   const { t } = useTranslation();
   const meta = useMemo(
     () =>
@@ -32,8 +41,8 @@ export const SmokingForm = () => {
     <section className={styles.Container}>
       <RadioList
         radioMetaList={meta}
-        selected={smokingCategory}
-        onSelect={setSmokingCategory}
+        selected={touchedSteps.has('IDEAL_SMOKING') ? smokingCategory : null}
+        onSelect={onSelect}
         inputValue={smokingAmount}
         onChangeInputValue={setSmokingAmount}
       />

diff --git a/src/processes/my_profile/JobForm/JobForm.tsx b/src/processes/my_profile/JobForm/JobForm.tsx
@@ -5,6 +5,7 @@ import { JobJobCategory } from 'src/types';
 import { DistributedOmit } from '../../../shared/types/distributedOmit';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useMyProfileFormProcessStore } from '../_store/myProfileFormProcessStore';
 
 const JobMetaList: DistributedOmit<RadioMeta<JobJobCategory>, 'name'>[] = [
   {
@@ -35,9 +36,13 @@ export const JobForm = () => {
   const setJobType = useMyProfileStore((state) => state.setJobCategory);
   const setJobDescription = useMyProfileStore((state) => state.setJobName);
 
+  const addTouchedStep = useMyProfileFormProcessStore((state) => state.addTouchedStep);
+  const touchedSteps = useMyProfileFormProcessStore((state) => state.touchedSteps);
+
   const onSelect = (job: JobJobCategory) => {
     setJobType(job);
     setJobDescription('');
+    addTouchedStep('PROFILE_JOB');
   };
 
   const { t } = useTranslation();
@@ -54,7 +59,7 @@ export const JobForm = () => {
     <section className={styles.Container} role={'radiogroup'}>
       <RadioList
         radioMetaList={meta}
-        selected={jobType}
+        selected={touchedSteps.has('PROFILE_JOB') ? jobType : null}
         onSelect={onSelect}
         inputValue={description}
         onChangeInputValue={setJobDescription}

diff --git a/src/processes/my_profile/ReligionForm/ReligionForm.tsx b/src/processes/my_profile/ReligionForm/ReligionForm.tsx
@@ -6,6 +6,7 @@ import { ReligionReligionCategory } from 'src/types';
 import { DistributedOmit } from '../../../shared/types/distributedOmit';
 import { useTranslation } from 'react-i18next';
 import { useMemo } from 'react';
+import { useMyProfileFormProcessStore } from '../_store/myProfileFormProcessStore';
 
 const religionRadioMeta: DistributedOmit<RadioMeta<ReligionReligionCategory>, 'name'>[] = [
   { key: 'IRRELIGION', allowInput: false },
@@ -20,6 +21,14 @@ export const ReligionForm = () => {
   const setReligionCategory = useMyProfileStore((state) => state.setReligionCategory);
   const setReligionName = useMyProfileStore((state) => state.setReligionName);
 
+  const addTouchedStep = useMyProfileFormProcessStore((state) => state.addTouchedStep);
+  const touchedSteps = useMyProfileFormProcessStore((state) => state.touchedSteps);
+
+  const onSelect = (category: ReligionReligionCategory) => {
+    setReligionCategory(category);
+    addTouchedStep('PROFILE_RELIGION');
+  };
+
   const { t } = useTranslation();
   const meta = useMemo(
     () =>
@@ -45,8 +54,8 @@ export const ReligionForm = () => {
         <p className={styles.Label}>네! 저는..</p>
         <RadioList
           radioMetaList={meta.slice(1)}
-          selected={religionCategory}
-          onSelect={setReligionCategory}
+          selected={touchedSteps.has('PROFILE_RELIGION') ? religionCategory : null}
+          onSelect={onSelect}
           inputValue={religionName}
           onChangeInputValue={setReligionName}
         />

diff --git a/src/processes/my_profile/SmokeAlcoholForm/SmokeAlcoholForm.tsx b/src/processes/my_profile/SmokeAlcoholForm/SmokeAlcoholForm.tsx
@@ -6,6 +6,7 @@ import { SmokingSmokingCategory } from 'src/types';
 import { DistributedOmit } from '../../../shared/types/distributedOmit';
 import { useTranslation } from 'react-i18next';
 import { useMemo } from 'react';
+import { useMyProfileFormProcessStore } from '../_store/myProfileFormProcessStore';
 
 const smokingRadioMeta: DistributedOmit<RadioMeta<SmokingSmokingCategory>, 'name'>[] = [
   { key: 'SMOKER', allowInput: false },
@@ -31,6 +32,14 @@ export const SmokeAlcoholForm = () => {
     [t],
   );
 
+  const addTouchedStep = useMyProfileFormProcessStore((state) => state.addTouchedStep);
+  const touchedSteps = useMyProfileFormProcessStore((state) => state.touchedSteps);
+
+  const onSelect = (category: SmokingSmokingCategory) => {
+    setSmokingCategory(category);
+    addTouchedStep('PROFILE_SMOKE_ALCOHOL');
+  };
+
   return (
     <section className={styles.Container}>
       <fieldset>
@@ -45,9 +54,9 @@ export const SmokeAlcoholForm = () => {
         <legend className={`strong ${styles.Legend}`}>흡연 여부</legend>
         <RadioList
           radioMetaList={meta}
-          selected={smokingCategory}
+          selected={touchedSteps.has('PROFILE_SMOKE_ALCOHOL') ? smokingCategory : null}
           inputValue={smokingAmount}
-          onSelect={setSmokingCategory}
+          onSelect={onSelect}
           onChangeInputValue={setSmokingAmount}
         />
       </fieldset>