✨ feat: funnel 패턴 구성 및 첫 step 추가 #5

Team-inglo · Oct 18, 2024 · ad4151d · ad4151d
1 parent d2066c1
commit ad4151d
Showing 1 changed file with 21 additions and 2 deletions.
diff --git 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>
   );
 };