refactor(pages/form): move MyProfilePage, extract meta from MyProfile…

…Page

src/pages/my_profile/MyProfilePage.stories.tsx → src/pages/form/my_profile/MyProfilePage.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MyProfilePage } from 'src/pages/my_profile/MyProfilePage';
+import { MyProfilePage } from 'src/pages/form/my_profile/MyProfilePage';
 import { useMyProfileStore } from 'src/entities/profile/model/myProfileStore';
 import { useProfileFirstName } from 'src/entities/profile/lib/useProfileFirstName';
 

src/pages/form/my_profile/MyProfilePage.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { Button } from 'src/shared/ui/Button/Button';
+import { ArrowLeft } from 'src/shared/ui/icons';
+import styles from 'src/pages/form/my_profile/MyProfilePage.module.css';
+import { useProfileFirstName } from 'src/entities/profile/lib/useProfileFirstName';
+import { useMyProfileStore } from 'src/entities/profile/model/myProfileStore';
+import { MyProfileStepMeta } from 'src/pages/form/my_profile/MyProfileStepMeta';
+
+const Steps = Object.values(MyProfileStepMeta);
+
+export const MyProfilePage = () => {
+  const [currentStepIdx, setCurrentStep] = useState(0);
+  const name = useProfileFirstName();
+
+  const currentStep = Steps[currentStepIdx];
+  const canGoNext = useMyProfileStore(currentStep.canGoNext);
+
+  return (
+    <div className={styles.Container}>
+      <header className={styles.Header}>
+        <div className={styles.HeaderBar}>
+          <ArrowLeft type={'button'} onClick={() => setCurrentStep((prev) => Math.max(0, prev - 1))} />
+          <span>
+            {currentStepIdx + 1}/{Steps.length}
+          </span>
+        </div>
+        <h2>{currentStep.title({ name })}</h2>
+        {currentStep.description && <small className={styles.Description}>{currentStep.description()}</small>}
+      </header>
+      <main className={styles.Main}>{currentStep.form}</main>
+      <footer className={styles.Footer}>
+        <Button
+          variant={'filled'}
+          widthType={'fill'}
+          color={'primary'}
+          disabled={!canGoNext}
+          onClick={() => setCurrentStep((prev) => Math.min(prev + 1, Steps.length - 1))}
+        >
+          다음
+        </Button>
+      </footer>
+    </div>
+  );
+};

src/pages/my_profile/MyProfilePage.tsx → src/pages/form/my_profile/MyProfileStepMeta.tsx

@@ -1,7 +1,6 @@
-import { ReactElement, ReactNode, useState } from 'react';
-import { Button } from 'src/shared/ui/Button/Button';
-import { ArrowLeft } from 'src/shared/ui/icons';
+import { StepMeta } from 'src/shared/types/FormStepMeta';
 import { PersonalInfoForm } from 'src/processes/my_profile/PersonalInfoForm/PersonalInfoForm';
+import { isValidDate } from 'src/shared/vo/date';
 import { MyImageForm } from 'src/processes/my_profile/MyImageForm/MyImageForm';
 import { MbtiForm } from 'src/processes/my_profile/MbtiForm/MbtiForm';
 import { JobForm } from 'src/processes/my_profile/JobForm/JobForm';
@@ -10,19 +9,8 @@ import { ReligionForm } from 'src/processes/my_profile/ReligionForm/ReligionForm
 import { HobbyForm } from 'src/processes/my_profile/HobbyForm/HobbyForm';
 import { SmokeAlcoholForm } from 'src/processes/my_profile/SmokeAlcoholForm/SmokeAlcoholForm';
 import { IntroduceForm } from 'src/processes/my_profile/IntroduceForm/IntroduceForm';
-import styles from './MyProfilePage.module.css';
-import { useProfileFirstName } from 'src/entities/profile/lib/useProfileFirstName';
-import { MyProfile, useMyProfileStore } from 'src/entities/profile/model/myProfileStore';
-import { isValidDate } from 'src/shared/vo/date';
 
-type StepMeta = {
-  title: ({ name }: { name: string }) => ReactNode;
-  description?: () => ReactNode;
-  form: ReactElement;
-  canGoNext: (state: MyProfile) => boolean;
-};
-
-const Step: Record<string, StepMeta> = {
+export const MyProfileStepMeta: Record<string, StepMeta> = {
   PERSONAL_INFO: {
     title: () => (
       <>
@@ -110,40 +98,3 @@ const Step: Record<string, StepMeta> = {
     canGoNext: () => true,
   },
 };
-
-const Steps = Object.values(Step);
-
-export const MyProfilePage = () => {
-  const [currentStepIdx, setCurrentStep] = useState(0);
-  const name = useProfileFirstName();
-
-  const currentStep = Steps[currentStepIdx];
-  const canGoNext = useMyProfileStore(currentStep.canGoNext);
-
-  return (
-    <div className={styles.Container}>
-      <header className={styles.Header}>
-        <div className={styles.HeaderBar}>
-          <ArrowLeft type={'button'} onClick={() => setCurrentStep((prev) => Math.max(0, prev - 1))} />
-          <span>
-            {currentStepIdx + 1}/{Steps.length}
-          </span>
-        </div>
-        <h2>{currentStep.title({ name })}</h2>
-        {currentStep.description && <small className={styles.Description}>{currentStep.description()}</small>}
-      </header>
-      <main className={styles.Main}>{currentStep.form}</main>
-      <footer className={styles.Footer}>
-        <Button
-          variant={'filled'}
-          widthType={'fill'}
-          color={'primary'}
-          disabled={!canGoNext}
-          onClick={() => setCurrentStep((prev) => Math.min(prev + 1, Steps.length - 1))}
-        >
-          다음
-        </Button>
-      </footer>
-    </div>
-  );
-};

src/shared/types/FormStepMeta.ts

@@ -0,0 +1,9 @@
+import { ReactElement, ReactNode } from 'react';
+import { MyProfile } from 'src/entities/profile/model/myProfileStore';
+
+export type StepMeta = {
+  title: ({ name }: { name: string }) => ReactNode;
+  description?: () => ReactNode;
+  form: ReactElement;
+  canGoNext: (state: MyProfile) => boolean;
+};