From be6aa50827a4fb9a8a2d1fb7847957d0604c5032 Mon Sep 17 00:00:00 2001
From: hanyugeon <hanyugeon@naver.com>
Date: Wed, 1 May 2024 17:23:36 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20EnterTitleStep=EC=9D=98=20TitleFiel?=
 =?UTF-8?q?d=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EnterTitleStep/fields/TitleField.tsx      | 47 +++++++++++++++++++
 .../steps/EnterTitleStep/fields/index.ts      |  1 +
 2 files changed, 48 insertions(+)
 create mode 100644 src/v1/bookGroup/create/steps/EnterTitleStep/fields/TitleField.tsx
 create mode 100644 src/v1/bookGroup/create/steps/EnterTitleStep/fields/index.ts

diff --git a/src/v1/bookGroup/create/steps/EnterTitleStep/fields/TitleField.tsx b/src/v1/bookGroup/create/steps/EnterTitleStep/fields/TitleField.tsx
new file mode 100644
index 00000000..7f74cdf4
--- /dev/null
+++ b/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;
diff --git a/src/v1/bookGroup/create/steps/EnterTitleStep/fields/index.ts b/src/v1/bookGroup/create/steps/EnterTitleStep/fields/index.ts
new file mode 100644
index 00000000..e25dc05f
--- /dev/null
+++ b/src/v1/bookGroup/create/steps/EnterTitleStep/fields/index.ts
@@ -0,0 +1 @@
+export { default as TitleField } from './TitleField';

From 0e29aa75e54b85d788447b0d13eb66dcd5e38ed2 Mon Sep 17 00:00:00 2001
From: hanyugeon <hanyugeon@naver.com>
Date: Wed, 1 May 2024 17:24:41 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20EnterTitleStep=20=ED=8D=BC=EB=84=90?=
 =?UTF-8?q?=20=EC=8A=A4=ED=85=9D=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../steps/EnterTitleStep/EnterTitleStep.tsx   | 36 +++++++++++++++++++
 .../create/steps/EnterTitleStep/index.ts      |  2 ++
 2 files changed, 38 insertions(+)
 create mode 100644 src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx
 create mode 100644 src/v1/bookGroup/create/steps/EnterTitleStep/index.ts

diff --git a/src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx b/src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx
new file mode 100644
index 00000000..c9f81531
--- /dev/null
+++ b/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;
diff --git a/src/v1/bookGroup/create/steps/EnterTitleStep/index.ts b/src/v1/bookGroup/create/steps/EnterTitleStep/index.ts
new file mode 100644
index 00000000..90646c32
--- /dev/null
+++ b/src/v1/bookGroup/create/steps/EnterTitleStep/index.ts
@@ -0,0 +1,2 @@
+export type { EnterTitleStepValues } from './EnterTitleStep';
+export { default as EnterTitleStep } from './EnterTitleStep';

From 1e6f68632a0369d34fbfd9a5b7ef75b4cac5e486 Mon Sep 17 00:00:00 2001
From: hanyugeon <hanyugeon@naver.com>
Date: Wed, 1 May 2024 17:25:26 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20EnterTitleStep=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/funnel/EnterTitleStep.stories.tsx  | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/stories/bookGroup/create/funnel/EnterTitleStep.stories.tsx

diff --git a/src/stories/bookGroup/create/funnel/EnterTitleStep.stories.tsx b/src/stories/bookGroup/create/funnel/EnterTitleStep.stories.tsx
new file mode 100644
index 00000000..80ea0097
--- /dev/null
+++ b/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 />,
+};