From 7abb69aa2f302c830ad2b78a61bd9ea034febb83 Mon Sep 17 00:00:00 2001
From: Savien/Woo Jun Han <49388937+MrMirror21@users.noreply.github.com>
Date: Fri, 18 Oct 2024 18:02:30 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20funnel=20=ED=8C=A8=ED=84=B4?=
 =?UTF-8?q?=20=EA=B5=AC=EC=84=B1=20=EB=B0=8F=20=EC=B2=AB=20step=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20#5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Information/InformationPage.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/pages/Information/InformationPage.tsx b/src/pages/Information/InformationPage.tsx
index 318eb2b5..0e7782f6 100644
--- a/src/pages/Information/InformationPage.tsx
+++ b/src/pages/Information/InformationPage.tsx
@@ -1,16 +1,35 @@
+import InformationStep from '@/components/Information/InformationStep';
 import StepIndicator from '@/components/Information/StepIndicator';
+import {
+  initialUserInfoRequestBody,
+  UserInfoRequestBody,
+} from '@/types/api/users';
 import { useState } from 'react';
 
 const InformationPage = () => {
   const [currentStep, setCurrentStep] = useState(1);
+  const [userInfo, setUserInfo] = useState<UserInfoRequestBody>(
+    initialUserInfoRequestBody,
+  );
+
+  const handleNext = (newInfo: UserInfoRequestBody) => {
+    setUserInfo(newInfo);
+    setCurrentStep((prev) => prev + 1);
+  };
   return (
-    <div className="m-auto max-w-[500px] h-screen flex flex-col items-center justify-start border border-black">
+    <div className="m-auto max-w-[500px] py-6 h-screen flex flex-col items-center justify-start border border-black">
       <div className="w-full flex flex-row items-center justify-between">
-        <div className="relative w-full flex items-center justify-center text-[1.75rem] tracking-[-0.01em] leading-9 font-semibold font-[Pretendard] text-[#1e1926] text-left" onClick={() => setCurrentStep(currentStep + 1)}>
+        <div
+          className="relative w-full flex items-center justify-center text-[1.75rem] tracking-[-0.01em] leading-9 font-semibold font-[Pretendard] text-[#1e1926] text-left"
+          onClick={() => setCurrentStep(currentStep + 1)}
+        >
           Information
         </div>
         <StepIndicator currentStep={currentStep} />
       </div>
+      {currentStep === 1 && (
+        <InformationStep userInfo={userInfo} onNext={handleNext} />
+      )}
     </div>
   );
 };