[#562] [모임 생성] 모임 이름 퍼널

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

@@ -0,0 +1,39 @@
+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';
+
+const meta: Meta<typeof EnterTitleStep> = {
+  title: 'bookGroup/create/steps/EnterTitleStep',
+  component: EnterTitleStep,
+  ...appLayoutMeta,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EnterTitleStep>;
+
+const EnterTitleForm = () => {
+  const methods = useForm<EnterTitleStepValues>({
+    mode: 'all',
+    defaultValues: {
+      title: '',
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <form>
+        <EnterTitleStep />
+      </form>
+    </FormProvider>
+  );
+};
+
+export const Default: Story = {
+  render: () => <EnterTitleForm />,
+};

src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx

@@ -0,0 +1,36 @@
+import { useFormContext } from 'react-hook-form';
+
+import BottomActionButton from '@/v1/base/BottomActionButton';
+import { TitleField } from './fields';
+
+interface MoveFunnelStepProps {
+  onNextStep?: () => void;
+}
+
+export interface EnterTitleStepValues {
+  title: string;
+}
+
+const EnterTitleStep = ({ onNextStep }: MoveFunnelStepProps) => {
+  const { handleSubmit } = useFormContext<EnterTitleStepValues>();
+
+  return (
+    <article>
+      <section className="flex flex-col gap-[1.5rem]">
+        <h2 className="text-lg font-bold text-black-700">
+          독서모임 이름을 적어주세요
+        </h2>
+        <TitleField name="title" />
+      </section>
+
+      <BottomActionButton
+        type="submit"
+        onClick={handleSubmit(() => onNextStep?.())}
+      >
+        다음
+      </BottomActionButton>
+    </article>
+  );
+};
+
+export default EnterTitleStep;

src/v1/bookGroup/create/steps/EnterTitleStep/fields/TitleField.tsx

@@ -0,0 +1,47 @@
+import { useFormContext, useWatch } from 'react-hook-form';
+
+import type { EnterTitleStepValues } from '../EnterTitleStep';
+
+import ErrorMessage from '@/v1/base/ErrorMessage';
+import Input from '@/v1/base/Input';
+import InputLength from '@/v1/base/InputLength';
+
+type DefaultFieldNameProps = {
+  name: keyof EnterTitleStepValues;
+};
+
+const TitleField = ({ name }: DefaultFieldNameProps) => {
+  const {
+    register,
+    control,
+    formState: { errors },
+  } = useFormContext<EnterTitleStepValues>();
+
+  const titleValue = useWatch({ control, name: name });
+  const titleErrors = errors[name];
+
+  return (
+    <label htmlFor={name} className="flex flex-col gap-[0.5rem]">
+      <Input
+        id={name}
+        placeholder="독서모임을 잘 표현할 수 있는 이름이면 좋아요."
+        error={!!titleErrors}
+        {...register(name, {
+          required: '독서모임 이름을 작성해 주세요',
+          minLength: { value: 2, message: '2글자 이상 입력해주세요' },
+          maxLength: { value: 20, message: '20글자 이하로 입력해주세요' },
+        })}
+      />
+      <div className="flex flex-row-reverse justify-between">
+        <InputLength
+          currentLength={titleValue.length}
+          isError={!!titleErrors}
+          maxLength={20}
+        />
+        <ErrorMessage>{titleErrors?.message}</ErrorMessage>
+      </div>
+    </label>
+  );
+};
+
+export default TitleField;

src/v1/bookGroup/create/steps/EnterTitleStep/fields/index.ts

@@ -0,0 +1 @@
+export { default as TitleField } from './TitleField';

src/v1/bookGroup/create/steps/EnterTitleStep/index.ts

@@ -0,0 +1,2 @@
+export type { EnterTitleStepValues } from './EnterTitleStep';
+export { default as EnterTitleStep } from './EnterTitleStep';