fix: enable next button on click 상관없음 in mbti form

src/pages/form/my_profile/MyProfilePage.tsx

@@ -17,12 +17,18 @@ export const MyProfilePage = ({ onClickNextStep }: { onClickNextStep: () => void
   const name = useProfileFirstName();
 
   const currentStep = Steps[currentStepIdx];
-  const canGoNext = useMyProfileStore(currentStep.canGoNext);
 
   const addTouchedStep = useMyProfileFormProcessStore((state) => state.addTouchedStep);
+  const touchedSteps = useMyProfileFormProcessStore((state) => state.touchedSteps);
+
+  const canGoNext = useMyProfileStore((state) =>
+    currentStep.canGoNext(state, (key) => touchedSteps.has(key as keyof typeof MyProfileStepMeta)),
+  );
 
   useEffect(() => {
-    addTouchedStep(StepKeys[currentStepIdx]);
+    if (currentStepIdx > 0) {
+      addTouchedStep(StepKeys[currentStepIdx - 1]);
+    }
   }, [addTouchedStep, currentStepIdx]);
 
   const handleClickNext = useCallback(() => {

src/pages/form/my_profile/MyProfileStepMeta.tsx

@@ -38,7 +38,7 @@ export const MyProfileStepMeta = {
     title: ({ name }) => <>{name}님의 MBTI를 알려주세요.</>,
     description: () => '해당하는 MBTI를 한 개씩 선택해주세요.',
     form: () => <MbtiForm />,
-    canGoNext: (state) => Boolean(state.mbti),
+    canGoNext: (state, checkTouched) => state.mbti !== null || Boolean(checkTouched?.('PROFILE_MBTI')),
     shortcutTitle: 'MBTI',
   },
   PROFILE_JOB: {

src/processes/my_profile/MbtiForm/MbtiForm.tsx

@@ -3,16 +3,21 @@ import { useEffect, useState } from 'react';
 import styles from './MbtiForm.module.css';
 import { isValidMbti, MbtiFirstWord, MbtiFourthWord, MbtiKey, MbtiSecondWord, MbtiThirdWord } from 'src/shared/vo/mbti';
 import { useMyProfileStore } from 'src/entities/profile/model/myProfileStore';
+import { useMyProfileFormProcessStore } from '../_store/myProfileFormProcessStore';
 
 export const MbtiForm = () => {
   const mbti = useMyProfileStore((state) => state.mbti);
   const setMbti = useMyProfileStore((state) => state.setMbti);
+  const addTouchedStep = useMyProfileFormProcessStore((state) => state.addTouchedStep);
+  const hasTouchedStep = useMyProfileFormProcessStore((state) => state.hasTouchedStep);
 
   const [eiState, setEiState] = useState<MbtiFirstWord | null>(mbti?.[0] ?? null);
   const [snState, setSnState] = useState<MbtiSecondWord | null>(mbti?.[1] ?? null);
   const [tfState, setTfState] = useState<MbtiThirdWord | null>(mbti?.[2] ?? null);
   const [jpState, setJpState] = useState<MbtiFourthWord | null>(mbti?.[3] ?? null);
-  const [skipState, setSkipState] = useState<boolean>(false);
+  const [skipState, setSkipState] = useState<boolean>(mbti === null);
+
+  const isSkipChecked = skipState && hasTouchedStep('PROFILE_MBTI');
 
   const mbtiState = `${eiState ?? ''}${snState ?? ''}${tfState ?? ''}${jpState ?? ''}`;
   useEffect(() => {
@@ -25,6 +30,8 @@ export const MbtiForm = () => {
     setSnState(null);
     setTfState(null);
     setJpState(null);
+    setMbti(null);
+    addTouchedStep('PROFILE_MBTI');
   };
 
   const onClickMbti = (key: MbtiKey) => {
@@ -54,7 +61,7 @@ export const MbtiForm = () => {
   return (
     <section className={styles.Container}>
       <div className={styles.RadioContainer}>
-        <Radio label={'입력 안 함'} checked={skipState} onChange={onClickSkip} />
+        <Radio label={'입력 안 함'} checked={isSkipChecked} onChange={onClickSkip} />
       </div>
       <div className={styles.MbtiResult} data-blank={isBlank}>
         {mbtiState}

src/shared/types/FormStepMeta.ts

@@ -6,7 +6,7 @@ export type StepMeta<State> = {
   title: ({ name }: { name: string }) => ReactNode;
   description?: () => ReactNode;
   form: ({ onClickNextForm }: FormProps) => ReactElement<FormProps>;
-  canGoNext: (state: State) => boolean;
+  canGoNext: (state: State, checkTouched?: (key: string) => boolean) => boolean;
   /**
    * @default true
    */