(#73) 🚀 feat: 온보딩 렌더링 이벤트 연동

KUSITMS-30th-TEAM-A · Nov 28, 2024 · 455b307 · 455b307
1 parent bb403fd
commit 455b307
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
@@ -5,6 +5,7 @@ import CoachMark from "@/src/pages/Main/components/CoachMark";
 import Main from '@/src/pages/Main/Main'; // 메인 컴포넌트
 
 const HomePage = () => {
+    // 로직: init -> signup -> onboarding -> coachmark -> main
     const [currentPage, setCurrentPage] = useState<'init' | 'signup' | 'onboarding' | 'coachmark' | 'main'>('init'); // 페이지 상태
 
     useEffect(() => {
@@ -25,13 +26,13 @@ const HomePage = () => {
     return (
         <div>
             {/* 초기 페이지 */}
-            {currentPage === 'init' && <InitPage onComplete={() => setCurrentPage('signup')} />} 
+            {currentPage === 'init' && <InitPage onComplete={() => setCurrentPage('onboarding')} />} 
 
             {/* 온보딩 페이지 */}
-            {currentPage === 'onboarding' && <SignupPage3 />} 
+            {currentPage === 'onboarding' && <SignupPage3 onComplete={() => setCurrentPage('coachmark')}/>} 
 
             {/* 코치마크 페이지 */}
-            {currentPage === 'main' && <CoachMark />}
+            {currentPage === 'coachmark' && <CoachMark onClose={() => setCurrentPage('main')}/>}
 
             {/* 메인 페이지 */}
             {currentPage === 'main' && <Main />}

diff --git a/src/pages/Onboarding/Signup/SignupPage3.tsx b/src/pages/Onboarding/Signup/SignupPage3.tsx
@@ -10,12 +10,12 @@ import signupZonePinkIcon from '../../../assets/svg/signup_zone_pink.svg';
 import onboardingRookieIcon from "@/src/assets/webp/onboarding_welcome_rookie.webp";
 import onboardingZoneBackgroundIcon from "@/src/assets/webp/onboarding_welcome_zone_background.webp";
 
-const Page = () => {
-    // 시작하기 버튼 이벤트
-    const handleStart = () => {
-
-    }
 
+interface Props {
+    onComplete: () => void;
+}
+
+const Page = ({onComplete}: Props) => {
 
     return (
         <div className="relative justify-center items-center w-full h-screen ">
@@ -57,7 +57,7 @@ const Page = () => {
                     />
                     <div className="flex justify-center items-center bg-main-50 border rounded-[8px] h-[48px] mb-[40px]">
                         <p className="text-md text-white font-semibold ">
-                            <button onClick={handleStart}>Hitzone 시작하기</button>
+                            <button onClick={onComplete}>Hitzone 시작하기</button>
                         </p>
                     </div>
                 </div>