feat(pages/form): add IdealPartnel form page

src/pages/form/ideal_partner/IdealPartnerPage.module.css

@@ -0,0 +1,44 @@
+.Container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.Header {
+  margin-bottom: 30px;
+}
+
+.HeaderBar {
+  margin-bottom: 15px;
+  height: 44px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--color-neutral-40);
+}
+
+.Description {
+  display: block;
+  margin-top: 10px;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--color-neutral-50);
+
+  & strong {
+    font-size: 14px;
+  }
+}
+
+.Main {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.Footer {
+  margin-top: auto;
+  padding: 15px 0;
+}

src/pages/form/ideal_partner/IdealPartnerPage.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { IdealPartnerPage } from 'src/pages/form/ideal_partner/IdealPartnerPage';
+
+const meta: Meta<typeof IdealPartnerPage> = {
+  component: IdealPartnerPage,
+};
+
+export default meta;
+type Story = StoryObj<typeof IdealPartnerPage>;
+
+export const Default: Story = {
+  args: {},
+  decorators: (fn) => <div style={{ height: '100vh' }}>{fn()}</div>,
+};

src/pages/form/ideal_partner/IdealPartnerPage.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { useProfileFirstName } from 'src/entities/profile/lib/useProfileFirstName';
+import styles from './IdealPartnerPage.module.css';
+import { ArrowLeft } from 'src/shared/ui/icons';
+import { Button } from 'src/shared/ui/Button/Button';
+import { IdealPartnerStepMeta } from 'src/pages/form/ideal_partner/IdealPartnerStepMeta';
+import { useIdlePartnerStore } from 'src/entities/ideal_partner/model/idealPartnerStore';
+
+const Steps = Object.values(IdealPartnerStepMeta);
+export const IdealPartnerPage = () => {
+  const [currentStepIdx, setCurrentStep] = useState(0);
+  const name = useProfileFirstName();
+
+  const currentStep = Steps[currentStepIdx];
+  const canGoNext = useIdlePartnerStore(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/form/ideal_partner/IdealPartnerStepMeta.tsx

@@ -0,0 +1,94 @@
+import { StepMeta } from 'src/shared/types/FormStepMeta';
+import { AgeForm } from 'src/processes/ideal_partner/AgeForm/AgeForm';
+import { IdealPartner } from 'src/entities/ideal_partner/model/idealPartnerStore';
+import { HeightStyleForm } from 'src/processes/ideal_partner/HeightStyleForm/HeightStyleForm';
+import { LocationForm } from 'src/processes/ideal_partner/LocationForm/LocationForm';
+import { HobbyForm } from 'src/processes/ideal_partner/HobbyForm/HobbyForm';
+import { ReligionForm } from 'src/processes/ideal_partner/ReligionForm/ReligionForm';
+import { DrinkingForm } from 'src/processes/ideal_partner/DrinkingForm/DrinkingForm';
+import { SmokingForm } from 'src/processes/ideal_partner/SmokingForm/SmokingForm';
+
+export const IdealPartnerStepMeta: Record<string, StepMeta<IdealPartner>> = {
+  AGE: {
+    title: () => <>선호하는 연령대는 어떻게 되나요?</>,
+    description: () => <></>,
+    form: <AgeForm />,
+    canGoNext: (state) => Boolean(state.ageRange.max && state.ageRange.min),
+  },
+  HEIGHT_STYLE: {
+    title: () => <>선호하는 키와 스타일을 알려주세요</>,
+    description: () => <></>,
+    form: <HeightStyleForm />,
+    canGoNext: (state) => Boolean(state.heightRange.min && state.heightRange.max && state.style),
+  },
+  LOCATION: {
+    title: ({ name }) => (
+      <>
+        상대방이 어느 지역에 있어야
+        <br />
+        {name}님과 만나기 좋을까요?
+      </>
+    ),
+    description: () => <></>,
+    form: <LocationForm />,
+    canGoNext: () => true,
+  },
+  HOBBY: {
+    title: () => (
+      <>
+        상대방이 어떤 취미생활을 할 때<br />좀 더 관심이 갈 것 같나요?
+      </>
+    ),
+    description: () => <></>,
+    form: <HobbyForm />,
+    canGoNext: (state) => Boolean(state.hobbies.length > 0),
+  },
+  RELIGION: {
+    title: () => <>상대방이 어떤 종교이길 희망하시나요?</>,
+    description: () => <></>,
+    form: <ReligionForm />,
+    canGoNext: (state) => Boolean(state.religion.religionCategory),
+  },
+  DRINKING: {
+    title: () => (
+      <>
+        상대방의 음주 빈도는
+        <br />
+        어디까지 이해할 수 있나요?
+      </>
+    ),
+    description: () => <></>,
+    form: <DrinkingForm />,
+    canGoNext: (state) => Boolean(state.drinking.drinkingCategory),
+  },
+  SMOKING: {
+    title: () => <>상대방의 흡연은 괜찮으신가요?</>,
+    description: () => <></>,
+    form: <SmokingForm />,
+    canGoNext: (state) => Boolean(state.smoking.smokingCategory),
+  },
+  REQUIRED_OPTIONS: {
+    title: () => (
+      <>
+        지금까지 입력한 것 중에서,
+        <br />
+        포기할 수 없는 조건이 있나요? (최대 3개)
+      </>
+    ),
+    description: () => <></>,
+    form: <></>,
+    canGoNext: (state) => Boolean(state.requiredOptions.length > 0),
+  },
+  TO_MATCHR: {
+    title: () => (
+      <>
+        주선자에게 추가로 말하고 싶은
+        <br />
+        내용이 있다면 입력해주세요.
+      </>
+    ),
+    description: () => <></>,
+    form: <></>,
+    canGoNext: (state) => Boolean(state.toMatchMaker),
+  },
+};

src/pages/form/my_profile/MyProfileStepMeta.tsx

@@ -9,8 +9,9 @@ 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 { MyProfile } from 'src/entities/profile/model/myProfileStore';
 
-export const MyProfileStepMeta: Record<string, StepMeta> = {
+export const MyProfileStepMeta: Record<string, StepMeta<MyProfile>> = {
   PERSONAL_INFO: {
     title: () => (
       <>

src/processes/ideal_partner/HeightStyleForm/HeightStyleForm.module.css

@@ -1,5 +1,6 @@
 .Container {
   height: 100%;
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 40px;
 }

src/shared/types/FormStepMeta.ts

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