[#553] [모임 생성] 모임 상세 퍼널 (#558)

* fix: RadioButton 컴포넌트 수정

-value와 label props 분리

* feat: 모임 상세 퍼널 스텝 작성

* feat: 모임 상세 퍼널 스텝 스토리 작성

* refactor: 라디오 옵션 constants로 분리

* refactor: isMaxMemberCountCustom 변수명 수정

- isCustomMemberCount로 수정

* chore: 오탈자 수정

* refactor: 코드리뷰 반영

src/constants/groupRadioValues.ts

@@ -40,3 +40,12 @@ export const HAS_JOIN_PASSWORD_VALUE = [
 ];
 
 export const HAS_JOIN_PASSWORD_DEFAULT_VALUE = 'false';
+
+export const MAX_MEMBER_COUNT_OPTIONS = [
+  { label: '제한없음', value: 9999 },
+  { label: '50명', value: 50 },
+  { label: '100명', value: 100 },
+  { label: '200명', value: 200 },
+  { label: '500명', value: 500 },
+  { label: '직접 입력', value: 'custom' },
+] as const;

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

@@ -1,16 +1,50 @@
+import { FormProvider, useForm } from 'react-hook-form';
+import type { APICreateGroup } from '@/types/group';
+import { getTodayDate } from '@/utils/date';
+
 import { SetUpDetailStep } from '@/v1/bookGroup/create/funnel';
 import { Meta, StoryObj } from '@storybook/react';
+import { appLayoutMeta } from '@/stories/meta';
 
 const meta: Meta<typeof SetUpDetailStep> = {
   title: 'bookGroup/funnel/SetUpDetailStep',
   component: SetUpDetailStep,
-  tags: ['autodocs'],
+  ...appLayoutMeta,
 };
 
 export default meta;
 
 type Story = StoryObj<typeof SetUpDetailStep>;
+interface FunnelFormValues extends APICreateGroup {
+  customMemberCount: string | number;
+}
+
+const SetUpDetailForm = () => {
+  const methods = useForm<FunnelFormValues>({
+    mode: 'all',
+    defaultValues: {
+      bookId: 23,
+      title: '',
+      introduce: '',
+      maxMemberCount: 9999,
+      startDate: getTodayDate(),
+      endDate: '',
+      isPublic: false,
+      hasJoinPasswd: false,
+      joinQuestion: '',
+      joinPasswd: '',
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <form>
+        <SetUpDetailStep />
+      </form>
+    </FormProvider>
+  );
+};
 
 export const Default: Story = {
-  args: {},
+  render: () => <SetUpDetailForm />,
 };

src/v1/base/RadioButton.tsx

@@ -1,14 +1,14 @@
 import { ComponentPropsWithoutRef, forwardRef, Ref } from 'react';
 
+type RadioButtonProps = {
+  label?: string;
+} & Omit<ComponentPropsWithoutRef<'input'>, 'id' | 'type' | 'className'>;
+
 const BASE_RADIO_BUTTON_CLASSES =
   'px-[1.2rem] py-[0.5rem] bg-main-600/[0.18] text-main-900 text-sm font-normal rounded-[2rem] cursor-pointer w-full h-full peer-checked:bg-main-900 peer-checked:text-white';
 
 const RadioButton = (
-  {
-    name,
-    value,
-    ...props
-  }: Omit<ComponentPropsWithoutRef<'input'>, 'id' | 'type' | 'className'>,
+  { name, value, label, ...props }: RadioButtonProps,
   ref: Ref<HTMLInputElement>
 ) => {
   return (
@@ -22,7 +22,7 @@ const RadioButton = (
         ref={ref}
         {...props}
       />
-      <span className={BASE_RADIO_BUTTON_CLASSES}>{value}</span>
+      <span className={BASE_RADIO_BUTTON_CLASSES}>{label ?? value}</span>
     </label>
   );
 };