[#9] Add Join Page

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
     "classnames": "^2.5.1",
+    "immer": "^10.1.1",
     "next": "14.2.9",
     "react": "^18",
     "react-dom": "^18",

src/app/join/page.tsx

@@ -1,93 +1,85 @@
 'use client';
 
-import { memo, useCallback, useState } from 'react';
+import { memo, useState } from 'react';
+import { produce } from 'immer';
 import TermsAgreement from '@/components/join/termsAgreement';
 import EmailJoinForm from '@/components/join/emailJoinForm';
 import PasswordJoinForm from '@/components/join/passwordJoinForm';
 import PhoneJoinForm from '@/components/join/phoneJoinForm';
 import PersonalInfoForm from '@/components/join/personalInfoForm';
 import JoinSuccess from '@/components/join/joinSuccess';
-import { StepType } from '@/types/join';
+import { StepType, UserDataType } from '@/types/join';
 
 const Join = memo(function Join() {
   const [step, setStep] = useState(0);
 
-  const [userData, setUserData] = useState({
+  const [userData, setUserData] = useState<UserDataType>({
     term_marketing: false,
     term_ad: false,
-    email: '',
-    password: '',
-    phone: '',
-    name: '',
-    birth: '',
+    email: null,
+    password: null,
+    phone: null,
+    name: null,
+    birth: null,
   });
 
   console.log('userData', userData);
 
-  const handleUserData = useCallback((id: string, value: boolean | string) => {
-    setUserData((state) => ({
-      ...state,
-      [id]: value,
-    }));
-  }, []);
-
-  const handleStep = useCallback((step: number) => {
-    setStep(step);
-  }, []);
+  const handleUserData = (id: keyof UserDataType, value: boolean | string) => {
+    setUserData(
+      produce((draft) => {
+        (draft[id] as typeof value) = value;
+      }),
+    );
+  };
 
-  const StepData: { [key: number]: StepType } = {
-    0: {
+  const StepData: StepType[] = [
+    {
       title: 'eqCM에 이용 약관에\n동의해 주세요',
       component: (
         <TermsAgreement
-          onClickNextBtn={handleStep}
+          onClickNextBtn={setStep}
           onChangeData={handleUserData}
         />
       ),
     },
-    1: {
+    {
       title: '로그인에 사용할\n아이디를 입력해 주세요.',
       component: (
-        <EmailJoinForm
-          onClickNextBtn={handleStep}
-          onChangeData={handleUserData}
-        />
+        <EmailJoinForm onClickNextBtn={setStep} onChangeData={handleUserData} />
       ),
     },
-    2: {
+    {
       title: '로그인에 사용할\n비밀번호를 입력해 주세요.',
       component: (
         <PasswordJoinForm
-          onClickNextBtn={handleStep}
+          onClickNextBtn={setStep}
           onChangeData={handleUserData}
         />
       ),
     },
-    3: {
+    {
       title: '본인인증을\n진행해 주세요',
       subtitle: '이미 가입한 계정이 있다면 알려드릴게요!',
       component: (
-        <PhoneJoinForm
-          onClickNextBtn={handleStep}
-          onChangeData={handleUserData}
-        />
+        <PhoneJoinForm onClickNextBtn={setStep} onChangeData={handleUserData} />
       ),
     },
-    4: {
+    {
       title: '이름과 생년월일을\n입력해 주세요.',
       component: (
         <PersonalInfoForm
-          onClickNextBtn={handleStep}
+          onClickNextBtn={setStep}
           onChangeData={handleUserData}
         />
       ),
     },
-    5: {
+    {
       title: '가입 완료!',
       subtitle: '가입을 축하해요!',
       component: <JoinSuccess />,
     },
-  };
+  ];
 
   return (
     <div className="flex flex-col w-full min-h-[650px] py-[50px] px-[20px] md:w-[400px] mx-auto md:px-0 md:pt-[43px] font-pretendard">

src/components/join/emailJoinForm.tsx

@@ -1,14 +1,14 @@
 import { memo } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { EmailJoinFormData } from '@/types/join';
+import { EmailJoinFormData, UserDataType } from '@/types/join';
 import { EmailJoinFormSchema } from '@/constants/join';
 import Input from '../common/input';
 import NextButton from './nextButton';
 
 type Props = {
   onClickNextBtn: (step: number) => void;
-  onChangeData: (id: string, value: boolean | string) => void;
+  onChangeData: (id: keyof UserDataType, value: boolean | string) => void;
 };
 
 function EmailJoinForm({ onClickNextBtn, onChangeData }: Props) {

src/components/join/passwordJoinForm.tsx

@@ -1,15 +1,15 @@
 import { memo } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { PasswordJoinFormData } from '@/types/join';
+import { PasswordJoinFormData, UserDataType } from '@/types/join';
 import Input from '../common/input';
 import { PasswordJoinFormSchema } from '@/constants/join';
 import NextButton from './nextButton';
 import OptionCheck from './optionCheck';
 
 type Props = {
   onClickNextBtn: (step: number) => void;
-  onChangeData: (id: string, value: boolean | string) => void;
+  onChangeData: (id: keyof UserDataType, value: boolean | string) => void;
 };
 
 function PasswordJoinForm({ onClickNextBtn, onChangeData }: Props) {

src/components/join/personalInfoForm.tsx

@@ -1,14 +1,14 @@
 import { memo } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { PersonalInfoFormData } from '@/types/join';
+import { PersonalInfoFormData, UserDataType } from '@/types/join';
 import { PersonalInfoFormSchema } from '@/constants/join';
 import Input from '../common/input';
 import NextButton from './nextButton';
 
 type Props = {
   onClickNextBtn: (step: number) => void;
-  onChangeData: (id: string, value: boolean | string) => void;
+  onChangeData: (id: keyof UserDataType, value: boolean | string) => void;
 };
 
 function PersonalInfoForm({ onClickNextBtn, onChangeData }: Props) {

src/components/join/phoneJoinForm.tsx

@@ -3,15 +3,15 @@
 import { memo, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { PhoneJoinFormData } from '@/types/join';
+import { PhoneJoinFormData, UserDataType } from '@/types/join';
 import { PhoneJoinFormSchema } from '@/constants/join';
 import Input from '../common/input';
 import NextButton from './nextButton';
 import { PhoneFormSchema } from '@/constants/common';
 
 type Props = {
   onClickNextBtn: (step: number) => void;
-  onChangeData: (id: string, value: boolean | string) => void;
+  onChangeData: (id: keyof UserDataType, value: boolean | string) => void;
 };
 
 function PhoneJoinForm({ onClickNextBtn, onChangeData }: Props) {

src/components/join/termsAgreement.tsx

@@ -2,12 +2,13 @@
 
 import { useCallback, useState } from 'react';
 import { AGREEMENT_CHECK_IDS, TERMS_AGREEMENT_LIST } from '@/constants/join';
+import { UserDataType } from '@/types/join';
 import CheckBox from './checkbox';
 import NextButton from './nextButton';
 
 type Props = {
   onClickNextBtn: (step: number) => void;
-  onChangeData: (id: string, value: boolean | string) => void;
+  onChangeData: (id: keyof UserDataType, value: boolean | string) => void;
 };
 
 const TermsAgreement = ({ onClickNextBtn, onChangeData }: Props) => {

src/types/join.ts

@@ -7,6 +7,16 @@ import {
   PhoneJoinFormSchema,
 } from '@/constants/join';
 
+export type UserDataType = {
+  term_marketing: boolean;
+  term_ad: boolean;
+  email: string | null;
+  password: string | null;
+  phone: string | null;
+  name: string | null;
+  birth: string | null;
+};
+
 export type StepType = {
   title: string;
   subtitle?: string;

yarn.lock

@@ -1215,6 +1215,7 @@ __metadata:
     eslint-config-prettier: "npm:^9.1.0"
     eslint-plugin-prettier: "npm:^5.2.1"
     eslint-plugin-unused-imports: "npm:^4.1.3"
+    immer: "npm:^10.1.1"
     next: "npm:14.2.9"
     postcss: "npm:^8"
     prettier: "npm:^3.3.3"
@@ -2147,6 +2148,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immer@npm:^10.1.1":
+  version: 10.1.1
+  resolution: "immer@npm:10.1.1"
+  checksum: 10c0/b749e10d137ccae91788f41bd57e9387f32ea6d6ea8fd7eb47b23fd7766681575efc7f86ceef7fe24c3bc9d61e38ff5d2f49c2663b2b0c056e280a4510923653
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.2.1":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"