feat: 온보딩 페이지에 헤더, 버튼 컴포넌트 적용

mash-up-kr · Jun 29, 2024 · 102f59b · 102f59b
1 parent ee9011b
commit 102f59b
Showing 1 changed file with 40 additions and 22 deletions.
diff --git a/src/routes/onboard/index.tsx b/src/routes/onboard/index.tsx
@@ -1,4 +1,5 @@
 import { Button } from "@/components/common/Button";
+import { Header } from "@/components/common/Header";
 import Image from "@/components/common/Image";
 import { createFileRoute } from "@tanstack/react-router";
 import { useRef } from "react";
@@ -23,30 +24,47 @@ function OnBoardPage() {
     }
   };
 
+  const handleNextClick = () => {
+    console.log("Next button clicked");
+  };
+
   return (
-    <div className="flex flex-col items-center min-h-screen pt-[140px]">
-      <div className="flex flex-col items-center w-[280px]">
-        <Image alt="Profile Image" w={80} h={80} />
-        <div className="mt-3 flex flex-col items-center gap-1">
-          <h1 className="t-h4-b-20">낭은영</h1>
-          <p className="t-b3-r-14 bg-grey054">14기 Product Design</p>
+    <div>
+      <Header
+        right={
+          <button
+            type="button"
+            onClick={handleNextClick}
+            className="text-purple100 t-h5-sb-17"
+          >
+            다음
+          </button>
+        }
+      />
+      <main className="flex flex-col items-center">
+        <div className="flex flex-col items-center w-[280px] mt-[140px]">
+          <Image alt="Profile Image" w={80} h={80} />
+          <div className="mt-3 flex flex-col items-center gap-1">
+            <h1 className="t-h4-b-20">낭은영</h1>
+            <p className="t-b3-r-14 bg-grey054">14기 Product Design</p>
+          </div>
+          <Button
+            size="md"
+            buttonType="line"
+            className="mt-8"
+            onClick={handleButtonClick}
+          >
+            프로필 사진 변경하기
+          </Button>
+          <input
+            type="file"
+            accept="image/*"
+            ref={fileInputRef}
+            style={{ display: "none" }}
+            onChange={handleFileChange}
+          />
         </div>
-        <Button
-          size="md"
-          buttonType="line"
-          className="mt-8"
-          onClick={handleButtonClick}
-        >
-          프로필 사진 변경하기
-        </Button>
-        <input
-          type="file"
-          accept="image/*"
-          ref={fileInputRef}
-          style={{ display: "none" }}
-          onChange={handleFileChange}
-        />
-      </div>
+      </main>
     </div>
   );
 }