From 102f59bf0fa0a9a42ba47cc7701bbb2b39f88106 Mon Sep 17 00:00:00 2001
From: happyGyu <happyboyto.dev@gmail.com>
Date: Sat, 29 Jun 2024 19:55:25 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=98=A8=EB=B3=B4=EB=94=A9=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=20=ED=97=A4=EB=8D=94,=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/onboard/index.tsx | 62 +++++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 22 deletions(-)

diff --git a/src/routes/onboard/index.tsx b/src/routes/onboard/index.tsx
index 354a296..2de5f0d 100644
--- 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>
   );
 }