Refactor: 리스트 생성 페이지 두 컴포넌트 합체

8-Sprinters · Feb 3, 2024 · 02c79a0 · 02c79a0
1 parent d6f41f5
commit 02c79a0
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git a/src/app/create/_components/CreateItem.tsx b/src/app/create/_components/CreateItem.tsx
@@ -4,15 +4,21 @@ import BackIcon from '/public/icons/back.svg';
 import Items from './Items';
 import * as styles from './CreateItem.css';
 
-export default function CreateItem() {
+interface CreateItemProps {
+  onBackClick: () => void;
+}
+
+export default function CreateItem({ onBackClick }: CreateItemProps) {
   const {
     formState: { isValid },
   } = useFormContext();
 
   return (
     <div>
       <div className={styles.header}>
-        <BackIcon alt="뒤로가기 버튼" />
+        <button onClick={onBackClick}>
+          <BackIcon alt="뒤로가기 버튼" />
+        </button>
         <h1 className={styles.headerTitle}>리스트 생성</h1>
         <button
           onClick={() => {

diff --git a/src/app/create/_components/CreateList.tsx b/src/app/create/_components/CreateList.tsx
@@ -21,7 +21,7 @@ interface UserProfileType {
   nickname: string;
 }
 
-function CreateList() {
+function CreateList({ onNextClick }: { onNextClick: () => void }) {
   const { register, getValues, setValue, setError, control, formState } = useFormContext();
   const { errors, isValid } = formState;
 
@@ -63,9 +63,9 @@ function CreateList() {
       <div className={styles.header}>
         <CloseButton width={'24'} height={'24'} />
         <h1 className={styles.headerTitle}>리스트 생성</h1>
-        <Link href="/" className={styles.headerNextButton}>
+        <button className={styles.headerNextButton} onClick={onNextClick}>
           다음
-        </Link>
+        </button>
       </div>
 
       <div className={styles.body}>

diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
@@ -1,8 +1,9 @@
 'use client';
 
 import { FieldErrors, FormProvider, useForm } from 'react-hook-form';
-// import CreateItem from '@/app/create/_components/CreateItem';
+import CreateItem from '@/app/create/_components/CreateItem';
 import CreateList from '@/app/create/_components/CreateList';
+import { useState } from 'react';
 
 interface Item {
   rank: number;
@@ -26,6 +27,12 @@ interface FormValues {
 export type FormErrors = FieldErrors<FormValues>;
 
 export default function CreatePage() {
+  const [step, setStep] = useState<'list' | 'item'>('list');
+
+  const handleStepChange = (step: 'list' | 'item') => {
+    setStep(step);
+  };
+
   const methods = useForm<FormValues>({
     mode: 'onChange',
     defaultValues: {
@@ -70,8 +77,19 @@ export default function CreatePage() {
     <div>
       <div>
         <FormProvider {...methods}>
-          <CreateList />
-          {/* <CreateItem/> */}
+          {step === 'list' ? (
+            <CreateList
+              onNextClick={() => {
+                handleStepChange('item');
+              }}
+            />
+          ) : (
+            <CreateItem
+              onBackClick={() => {
+                handleStepChange('list');
+              }}
+            />
+          )}
         </FormProvider>
       </div>
     </div>