[YS-224] fix: Funnel 로 인해 의도치 않게 에러 상태에 따라 컴포넌트 자체를 갈아끼워 상태가 유지되지 않는 문제 해결

Author: rbgksqkr

src/app/join/components/Participant/ParticipantForm.tsx

@@ -20,7 +20,7 @@ const ParticipantForm = () => {
 
   const { mutate: joinParticipant } = useParticipantJoinMutation();
 
-  const { Funnel, setStep } = useFunnel(['email', 'info', 'success'] as const);
+  const { Funnel, Step, setStep } = useFunnel(['email', 'info', 'success'] as const);
 
   const participantMethods = useForm<ParticipantJoinSchemaType>({
     resolver: zodResolver(ParticipantJoinSchema()),
@@ -61,17 +61,17 @@ const ParticipantForm = () => {
   return (
     <FormProvider {...participantMethods}>
       <Funnel>
-        <Funnel.Step name={STEP.email}>
+        <Step name={STEP.email}>
           <Participant.EmailStep onNext={() => setStep(STEP.info)} />
-        </Funnel.Step>
-        <Funnel.Step name={STEP.info}>
+        </Step>
+        <Step name={STEP.info}>
           <Participant.InfoStep
             handleSubmit={participantMethods.handleSubmit(handleParticipantSubmit)}
           />
-        </Funnel.Step>
-        <Funnel.Step name={STEP.success}>
+        </Step>
+        <Step name={STEP.success}>
           <JoinSuccessStep name={participantMethods.getValues('name')} />
-        </Funnel.Step>
+        </Step>
       </Funnel>
     </FormProvider>
   );

src/app/join/components/Researcher/ResearcherForm.tsx

@@ -18,7 +18,7 @@ const ResearcherForm = () => {
 
   const { mutate: joinResearcher } = useResearcherJoinMutation();
 
-  const { Funnel, setStep } = useFunnel(['email', 'info', 'success'] as const);
+  const { Funnel, Step, setStep } = useFunnel(['email', 'info', 'success'] as const);
 
   const researcherMethods = useForm<ResearcherJoinSchemaType>({
     resolver: zodResolver(ResearcherJoinSchema()),
@@ -49,17 +49,17 @@ const ResearcherForm = () => {
   return (
     <FormProvider {...researcherMethods}>
       <Funnel>
-        <Funnel.Step name={STEP.email}>
+        <Step name={STEP.email}>
           <Researcher.EmailStep onNext={() => setStep(STEP.info)} />
-        </Funnel.Step>
-        <Funnel.Step name={STEP.info}>
+        </Step>
+        <Step name={STEP.info}>
           <Researcher.InfoStep
             handleSubmit={researcherMethods.handleSubmit(handleResearcherSubmit)}
           />
-        </Funnel.Step>
-        <Funnel.Step name={STEP.success}>
+        </Step>
+        <Step name={STEP.success}>
           <JoinSuccessStep name={researcherMethods.getValues('name')} />
-        </Funnel.Step>
+        </Step>
       </Funnel>
     </FormProvider>
   );

src/app/join/hooks/useFunnel.tsx

@@ -1,5 +1,5 @@
 import { useRouter, useSearchParams } from 'next/navigation';
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, useMemo } from 'react';
 
 const DEFAULT_STEP = 'email';
 
@@ -31,19 +31,25 @@ const useFunnel = <Steps extends StepsType>(steps: Steps) => {
     }
   };
 
-  const Funnel = ({ children }: FunnelProps) => {
-    const targetStep = children.find((childStep) => childStep.props.name === currentStep);
+  const Funnel = useMemo(
+    () =>
+      ({ children }: FunnelProps) => {
+        const targetStep = children.find((childStep) => childStep.props.name === currentStep);
 
-    return <>{targetStep}</>;
-  };
+        return <>{targetStep}</>;
+      },
 
-  const Step = (props: StepProps) => {
-    return <>{props.children}</>;
-  };
+    [currentStep],
+  );
 
-  Funnel.Step = Step;
+  const Step = useMemo(
+    () => (props: StepProps) => {
+      return <>{props.children}</>;
+    },
+    [],
+  );
 
-  return { Funnel, setStep, step: currentStep } as const;
+  return { Funnel, Step, setStep, step: currentStep } as const;
 };
 
 export default useFunnel;