feat: add input in info drinking form

public/locales/ko/common.json

@@ -1,6 +1,8 @@
 {
   "MALE": "남",
   "FEMALE": "여",
+  "INFO_DRINKING_DRINKER": "합니다",
+  "INFO_DRINKING_NON_DRINKER": "안합니다",
   "INFO_SMOKING_SMOKER": "합니다",
   "INFO_SMOKING_NON_SMOKER": "안합니다",
   "INFO_SMOKING_ETC": "기타",

src/entities/profile/model/myProfileStore.tsx

@@ -69,6 +69,7 @@ type Action = {
   setReligionName: (description: string) => void;
   setHobbies: (hobbies: Hobby[]) => void;
   setDrinkingCategory: (value: UserInfoDrinkingDrinkingCategory) => void;
+  setDrinkingAmount: (value: string) => void;
   setSmokingCategory: (value: UserInfoSmokingSmokingCategory) => void;
   setSmokingAmount: (value: string) => void;
   setIntroduction: (value: string) => void;
@@ -125,7 +126,8 @@ const createStoreHook = (initialState?: MyProfile) =>
     hobbies: [],
     setHobbies: (hobbies) => set({ hobbies: hobbies }),
     drinking: { drinkingCategory: 'DRINKER', drinkingAmount: '' },
-    setDrinkingCategory: (value) => set({ drinking: { drinkingCategory: value } }),
+    setDrinkingCategory: (value) => set({ drinking: { ...get().drinking, drinkingCategory: value } }),
+    setDrinkingAmount: (value) => set({ drinking: { ...get().drinking, drinkingAmount: value } }),
     smoking: {
       smokingCategory: 'ETC',
       smokingAmount: '',

src/processes/my_profile/SmokeAlcoholForm/SmokeAlcoholForm.tsx

@@ -3,7 +3,7 @@ import { RadioList, RadioMeta } from 'src/shared/ui/RadioList/RadioList';
 import { useMyProfileStore } from 'src/entities/profile/model/myProfileStore';
 import { DistributedOmit } from '../../../shared/types/distributedOmit';
 import { useTranslation } from 'react-i18next';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useMyProfileFormProcessStore } from '../_store/myProfileFormProcessStore';
 import { UserInfoDrinkingDrinkingCategory, UserInfoSmokingSmokingCategory } from 'src/types';
 
@@ -14,13 +14,20 @@ const smokingRadioMeta: DistributedOmit<RadioMeta<UserInfoSmokingSmokingCategory
 ];
 
 const drinkingRadioMeta: DistributedOmit<RadioMeta<UserInfoDrinkingDrinkingCategory>, 'name'>[] = [
-  { key: 'DRINKER', allowInput: false },
   { key: 'NON_DRINKER', allowInput: false },
+  { key: 'DRINKER', allowInput: true, placeholder: '빈도는 어떻게 되시나요?' },
 ];
 
 export const SmokeAlcoholForm = () => {
+  const touchedSteps = useMyProfileFormProcessStore((state) => state.touchedSteps);
+  const [touchedDrinking, setTouchedDrinking] = useState(() => touchedSteps.has('PROFILE_SMOKE_ALCOHOL'));
+  const [touchedSmoking, setTouchedSmoking] = useState(() => touchedSteps.has('PROFILE_SMOKE_ALCOHOL'));
+
   const drinkingCategory = useMyProfileStore((state) => state.drinking.drinkingCategory);
+  const drinkingAmount = useMyProfileStore((state) => state.drinking.drinkingAmount);
   const setDrinkingCategory = useMyProfileStore((state) => state.setDrinkingCategory);
+  const setDrinkingAmount = useMyProfileStore((state) => state.setDrinkingAmount);
+
   const smokingCategory = useMyProfileStore((state) => state.smoking.smokingCategory);
   const smokingAmount = useMyProfileStore((state) => state.smoking.smokingAmount);
   const setSmokingCategory = useMyProfileStore((state) => state.setSmokingCategory);
@@ -44,17 +51,14 @@ export const SmokeAlcoholForm = () => {
     [t],
   );
 
-  const addTouchedStep = useMyProfileFormProcessStore((state) => state.addTouchedStep);
-  const touchedSteps = useMyProfileFormProcessStore((state) => state.touchedSteps);
-
   const onSelectDrinking = (category: UserInfoDrinkingDrinkingCategory) => {
     setDrinkingCategory(category);
-    addTouchedStep('PROFILE_SMOKE_ALCOHOL');
+    setTouchedDrinking(true);
   };
 
   const onSelectSmoking = (category: UserInfoSmokingSmokingCategory) => {
     setSmokingCategory(category);
-    addTouchedStep('PROFILE_SMOKE_ALCOHOL');
+    setTouchedSmoking(true);
   };
 
   return (
@@ -63,15 +67,17 @@ export const SmokeAlcoholForm = () => {
         <legend className={`strong ${styles.Legend}`}>음주 여부</legend>
         <RadioList
           radioMetaList={drinkingMeta}
-          selected={touchedSteps.has('PROFILE_SMOKE_ALCOHOL') ? drinkingCategory : null}
+          selected={touchedDrinking ? drinkingCategory : null}
           onSelect={onSelectDrinking}
+          inputValue={drinkingAmount}
+          onChangeInputValue={setDrinkingAmount}
         />
-      </fieldset>{' '}
+      </fieldset>
       <fieldset>
         <legend className={`strong ${styles.Legend}`}>흡연 여부</legend>
         <RadioList
           radioMetaList={meta}
-          selected={touchedSteps.has('PROFILE_SMOKE_ALCOHOL') ? smokingCategory : null}
+          selected={touchedSmoking ? smokingCategory : null}
           inputValue={smokingAmount}
           onSelect={onSelectSmoking}
           onChangeInputValue={setSmokingAmount}