[#581] [모임 생성] 모임 생성 퍼널 페이지 작성 (#582)

* chore: 책 선택 스텝 경로 수정

* feat: useFunnel 커스텀훅에 currentStep 조회 기능 추가

* feat: 모임 생성 퍼널 작성

* feat: 모임 상세 퍼널 뒤로가기 버튼 기능 구현

* refactor: Funnel.tsx 경로 변경 및 공통 interface 정의

* refactor: 모임 생성 퍼널 코드 스플리팅

* chore: 모임 생성 퍼널 스텝 stories 경로 변경

* refactor: index 파일 정리

* refactor: formValues 타입 정리

* chore: 스토리북 import 경로 수정

* feat: 모임 생성 mutation 함수 작성

* feat: 독서 모임 생성 기능 구현

* chore: import문 수정

* refactor: StepFormValues 타입명 통일 (리뷰 반영)

* feat: SwitchIsPublicField에서 isComment 값에 따른 안내 문구 표시

* chore: CreateBookGroupFunnel 컴포넌트 이름 수정

* feat: 독서 모임 생성시 독서 모임 상세 페이지로 이동

Author: hanyugeon

src/apis/group/index.ts

@@ -14,7 +14,7 @@ const groupAPI = {
       `/service-api/book-groups?pageSize=10&groupCursorId=` + pageParam
     ),
 
-  createGroup: ({ group }: { group: APICreateGroup }) =>
+  createGroup: (group: APICreateGroup) =>
     publicApi.post('/service-api/book-groups', group),
 
   getGroupDetailInfo: ({

src/app/group/create/page.tsx

@@ -1,19 +1,7 @@
-'use client';
+import CreateBookGroupFunnel from '@/v1/bookGroup/create/CreateBookGroupFunnel';
 
-import AddGroupForm from '@/ui/Group/AddGroupForm';
-import { VStack } from '@chakra-ui/react';
-import TopNavigation from '@/ui/common/TopNavigation';
-import AuthRequired from '@/ui/AuthRequired';
-
-const GroupCreatePage = () => {
-  return (
-    <AuthRequired>
-      <VStack justify="center" align="center">
-        <TopNavigation pageTitle="모임 생성" />
-        <AddGroupForm />
-      </VStack>
-    </AuthRequired>
-  );
+const GroupCreateFunnelPage = () => {
+  return <CreateBookGroupFunnel />;
 };
 
-export default GroupCreatePage;
+export default GroupCreateFunnelPage;

src/hooks/useFunnel.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { useEffect, useMemo, useRef } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
-import type { FunnelProps, StepProps } from '@/v1/base/Funnel/Funnel';
 import { assert } from '@/utils/assert';
 
-import { Funnel, Step } from '@/v1/base/Funnel/Funnel';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import type { FunnelProps, StepProps } from '@/v1/base/Funnel';
+import { Funnel, Step } from '@/v1/base/Funnel';
 
 export type NonEmptyArray<T> = readonly [T, ...T[]];
 
@@ -34,7 +34,11 @@ export const useFunnel = <Steps extends NonEmptyArray<string>>(
     initialStep?: Steps[number];
     onStepChange?: (name: Steps[number]) => void;
   }
-): readonly [FunnelComponent<Steps>, (step: Steps[number]) => void] => {
+): readonly [
+  FunnelComponent<Steps>,
+  (step: Steps[number]) => void,
+  Steps[number]
+] => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const pathname = usePathname();
@@ -78,11 +82,12 @@ export const useFunnel = <Steps extends NonEmptyArray<string>>(
     const params = new URLSearchParams(searchParams.toString());
     params.set('funnel-step', `${step}`);
 
-    return router.replace(`?${params.toString()}`);
+    return router.replace(`?${params.toString()}`, { shallow: true });
   };
 
-  return [FunnelComponent, setStep] as unknown as readonly [
+  return [FunnelComponent, setStep, step] as unknown as readonly [
     FunnelComponent<Steps>,
-    (step: Steps[number]) => Promise<void>
+    (step: Steps[number]) => Promise<void>,
+    Steps[number]
   ];
 };

src/queries/group/useCreateBookGroupMutation.ts

@@ -0,0 +1,13 @@
+import { useMutation } from '@tanstack/react-query';
+
+import type { APICreateGroup } from '@/types/group';
+import groupAPI from '@/apis/group';
+
+const useCreateBookGroupMutation = () => {
+  return useMutation({
+    mutationFn: (formData: APICreateGroup) =>
+      groupAPI.createGroup(formData).then(({ data }) => data),
+  });
+};
+
+export default useCreateBookGroupMutation;

src/stories/bookGroup/create/funnel/EnterTitleStep.stories.tsx src/stories/bookGroup/create/steps/EnterTitleStep.stories.tsx

@@ -1,11 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { appLayoutMeta } from '@/stories/meta';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import {
-  EnterTitleStep,
-  type EnterTitleStepValues,
-} from '@/v1/bookGroup/create/steps/EnterTitleStep';
+import type { EnterTitleStepFormValues } from '@/v1/bookGroup/create/types';
+
+import { appLayoutMeta } from '@/stories/meta';
+import { EnterTitleStep } from '@/v1/bookGroup/create/steps';
 
 const meta: Meta<typeof EnterTitleStep> = {
   title: 'bookGroup/create/steps/EnterTitleStep',
@@ -18,7 +17,7 @@ export default meta;
 type Story = StoryObj<typeof EnterTitleStep>;
 
 const EnterTitleForm = () => {
-  const methods = useForm<EnterTitleStepValues>({
+  const methods = useForm<EnterTitleStepFormValues>({
     mode: 'all',
     defaultValues: {
       title: '',

src/stories/bookGroup/create/funnel/SelectBookStep.stories.tsx src/stories/bookGroup/create/steps/SelectBookStep.stories.tsx

@@ -1,13 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { FormProvider, useForm } from 'react-hook-form';
 
+import type { SelectBookStepFormValues } from '@/v1/bookGroup/create/types';
+
 import { appLayoutMeta } from '@/stories/meta';
-import SelectBookStep, {
-  SelectBookFormValue,
-} from '@/v1/bookGroup/create/funnel/SelectBookStep';
+import { SelectBookStep } from '@/v1/bookGroup/create/steps';
 
 const meta: Meta<typeof SelectBookStep> = {
-  title: 'bookGroup/funnel/SelectBookStep',
+  title: 'bookGroup/create/steps/SelectBookStep',
   component: SelectBookStep,
   ...appLayoutMeta,
 };
@@ -17,7 +17,7 @@ export default meta;
 type Story = StoryObj<typeof SelectBookStep>;
 
 const RenderSelectBookStep = () => {
-  const methods = useForm<SelectBookFormValue>();
+  const methods = useForm<SelectBookStepFormValues>();
 
   const goNextStep = () => {
     const book = methods.getValues('book');

src/stories/bookGroup/create/steps/SelectJoinTypeStep.stories.tsx

@@ -1,11 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { appLayoutMeta } from '@/stories/meta';
 
-import {
-  SelectJoinTypeStep,
-  SelectJoinTypeStepFormValues,
-} from '@/v1/bookGroup/create/steps/SelectJoinTypeStep';
+import type { SelectJoinTypeStepFormValues } from '@/v1/bookGroup/create/types';
+
+import { appLayoutMeta } from '@/stories/meta';
+import { SelectJoinTypeStep } from '@/v1/bookGroup/create/steps';
 
 const meta: Meta<typeof SelectJoinTypeStep> = {
   title: 'bookGroup/create/steps/SelectJoinTypeStep',
@@ -20,15 +19,15 @@ type Story = StoryObj<typeof SelectJoinTypeStep>;
 const RenderSelectJoinTypeStep = () => {
   const methods = useForm<SelectJoinTypeStepFormValues>({
     defaultValues: {
-      hasJoinPasswd: 'false',
+      hasJoinPassword: 'false',
     },
     mode: 'all',
   });
 
   const onSubmit = () => {
-    const { hasJoinPasswd, joinPasswd, joinQuestion } = methods.getValues();
+    const { hasJoinPassword, joinPassword, joinQuestion } = methods.getValues();
     alert(
-      `가입 문제 유무: ${hasJoinPasswd}\n가입 문제: ${joinQuestion}\n정답: ${joinPasswd}`
+      `가입 문제 유무: ${hasJoinPassword}\n가입 문제: ${joinQuestion}\n정답: ${joinPassword}`
     );
   };
 

src/stories/bookGroup/create/steps/SetUpDetailStep.stories.tsx

@@ -1,13 +1,12 @@
-import { appLayoutMeta } from '@/stories/meta';
 import { Meta, StoryObj } from '@storybook/react';
 import { FormProvider, useForm } from 'react-hook-form';
 
+import type { SetUpDetailStepFormValues } from '@/v1/bookGroup/create/types';
+
 import { getTodayDate } from '@/utils/date';
 
-import {
-  SetUpDetailStep,
-  type SetUpDetailStepValues,
-} from '@/v1/bookGroup/create/steps/SetUpDetailStep';
+import { appLayoutMeta } from '@/stories/meta';
+import { SetUpDetailStep } from '@/v1/bookGroup/create/steps';
 
 const meta: Meta<typeof SetUpDetailStep> = {
   title: 'bookGroup/create/steps/SetUpDetailStep',
@@ -20,19 +19,14 @@ export default meta;
 type Story = StoryObj<typeof SetUpDetailStep>;
 
 const SetUpDetailForm = () => {
-  const methods = useForm<SetUpDetailStepValues>({
+  const methods = useForm<SetUpDetailStepFormValues>({
     mode: 'all',
     defaultValues: {
       title: '',
       book: {
         bookId: 23,
       },
-      introduce: '',
-      maxMemberCount: '',
-      customMemberCount: '',
       startDate: getTodayDate(),
-      endDate: '',
-      isPublic: false,
     },
   });