Feat: auth 관련페이지 header 적용

app/(home)/page.tsx

@@ -1,8 +1,9 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { createClient } from "@/utils/supabase/server";
-import { UserMenu } from "@/features/layout/components/user-menu";
+import { Header } from "@/features/layout/components/header";
 import { AUTH_ROUTES } from "@/features/auth/constants";
+import { SplineScene } from "@/features/home/components/spline-scene";
 
 export default async function HomePage() {
   const supabase = await createClient();
@@ -12,67 +13,53 @@ export default async function HomePage() {
 
   return (
     <div className="flex min-h-screen flex-col">
-      <header className="sticky top-0 z-40 flex h-14 w-full items-center justify-between border-b border-zinc-200 bg-white/75 px-6 backdrop-blur-md dark:border-zinc-800 dark:bg-black/75">
-        <Link href={AUTH_ROUTES.HOME} className="flex items-center gap-2">
-          <div className="h-6 w-6 rounded-md bg-zinc-900 dark:bg-zinc-50" />
-          <span className="text-lg font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
-            AutoTrade
-          </span>
-        </Link>
-        <div className="flex items-center gap-4">
-          {user ? (
-            <>
-              <Button asChild variant="ghost" size="sm">
-                <Link href={AUTH_ROUTES.DASHBOARD}>대시보드</Link>
-              </Button>
-              <UserMenu user={user} />
-            </>
-          ) : (
-            <>
-              <Button asChild variant="ghost" size="sm">
-                <Link href={AUTH_ROUTES.LOGIN}>로그인</Link>
-              </Button>
-              <Button asChild size="sm">
-                <Link href={AUTH_ROUTES.SIGNUP}>무료로 시작하기</Link>
-              </Button>
-            </>
-          )}
-        </div>
-      </header>
+      <Header user={user} showDashboardLink={true} />
 
       <main className="flex-1">
-        <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
-          <div className="container flex max-w-5xl flex-col items-center gap-4 text-center">
-            <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
-              투자의 미래,{" "}
-              <span className="text-gradient bg-linear-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-                자동화하세요
-              </span>
-            </h1>
-            <p className="max-w-2xl leading-normal text-muted-foreground sm:text-xl sm:leading-8">
-              AutoTrade는 최첨단 알고리즘을 통해 당신의 암호화폐 투자를 24시간
-              관리합니다. 감정에 휘둘리지 않는 투자를 경험하세요.
-            </p>
-            <div className="space-x-4">
-              {user ? (
-                <Button asChild size="lg" className="h-11 px-8">
-                  <Link href={AUTH_ROUTES.DASHBOARD}>대시보드로 이동</Link>
-                </Button>
-              ) : (
-                <Button asChild size="lg" className="h-11 px-8">
-                  <Link href={AUTH_ROUTES.LOGIN}>지금 시작하기</Link>
-                </Button>
-              )}
-              {!user && (
-                <Button
-                  asChild
-                  variant="outline"
-                  size="lg"
-                  className="h-11 px-8"
-                >
-                  <Link href={AUTH_ROUTES.LOGIN}>데모 체험</Link>
-                </Button>
-              )}
+        <section className="relative overflow-hidden pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
+          <div className="container relative z-10 flex max-w-7xl flex-col items-center gap-4 lg:grid lg:grid-cols-2 lg:gap-8 lg:text-left">
+            <div className="flex flex-col items-center lg:items-start lg:gap-8">
+              <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
+                투자의 미래,{" "}
+                <span className="text-gradient bg-linear-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
+                  자동화하세요
+                </span>
+              </h1>
+              <p className="max-w-2xl leading-normal text-muted-foreground sm:text-xl sm:leading-8">
+                AutoTrade는 최첨단 알고리즘을 통해 당신의 암호화폐 투자를 24시간
+                관리합니다. 감정에 휘둘리지 않는 투자를 경험하세요.
+              </p>
+              <div className="space-x-4">
+                {user ? (
+                  <Button asChild size="lg" className="h-11 px-8">
+                    <Link href={AUTH_ROUTES.DASHBOARD}>대시보드로 이동</Link>
+                  </Button>
+                ) : (
+                  <Button asChild size="lg" className="h-11 px-8">
+                    <Link href={AUTH_ROUTES.LOGIN}>지금 시작하기</Link>
+                  </Button>
+                )}
+                {!user && (
+                  <Button
+                    asChild
+                    variant="outline"
+                    size="lg"
+                    className="h-11 px-8"
+                  >
+                    <Link href={AUTH_ROUTES.LOGIN}>데모 체험</Link>
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            <div className="relative mt-8 h-[400px] w-full lg:mt-0 lg:h-[600px]">
+              {/* Spline Scene Container */}
+              <div className="absolute inset-0 rounded-2xl bg-zinc-100/50 dark:bg-zinc-900/50">
+                <SplineScene
+                  sceneUrl="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode"
+                  className="rounded-2xl"
+                />
+              </div>
             </div>
           </div>
         </section>