Feat: 세션 유지 컴포넌트 추가 및 주석 디자인 다크테마 적용

app/(home)/page.tsx

@@ -1,3 +1,13 @@
+/**
+ * @file app/(home)/page.tsx
+ * @description 서비스 메인 랜딩 페이지
+ * @remarks
+ * - [레이어] Pages (Server Component)
+ * - [역할] 비로그인 유저 유입, 브랜드 소개, 로그인/대시보드 유도
+ * - [구성요소] Header, Hero Section (Spline 3D), Feature Section (Bento Grid)
+ * - [데이터 흐름] Server Auth Check -> Client Component Props
+ */
+
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { createClient } from "@/utils/supabase/server";
@@ -5,106 +15,209 @@ import { Header } from "@/features/layout/components/header";
 import { AUTH_ROUTES } from "@/features/auth/constants";
 import { SplineScene } from "@/features/home/components/spline-scene";
 
+/**
+ * 메인 페이지 컴포넌트 (비동기 서버 컴포넌트)
+ * @returns Landing Page Elements
+ * @see layout.tsx - RootLayout 내에서 렌더링
+ * @see spline-scene.tsx - 3D 인터랙션
+ */
 export default async function HomePage() {
+  // [Step 1] 서버 사이드 인증 상태 확인
   const supabase = await createClient();
   const {
     data: { user },
   } = await supabase.auth.getUser();
 
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex min-h-screen flex-col overflow-x-hidden">
       <Header user={user} showDashboardLink={true} />
 
-      <main className="flex-1">
-        <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>
+      <main className="flex-1 bg-background pt-16">
+        {/* Background Pattern */}
+        <div className="absolute inset-0 -z-10 h-full w-full bg-white dark:bg-black bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-size-[14px_24px] mask-[radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
+
+        <section className="container relative mx-auto max-w-7xl px-4 pt-12 md:pt-24 lg:pt-32">
+          <div className="flex flex-col items-center justify-center text-center">
+            {/* Badge */}
+            <div className="mb-6 inline-flex items-center rounded-full border border-indigo-200/50 bg-indigo-50/50 px-3 py-1 text-sm font-medium text-indigo-600 backdrop-blur-md dark:border-indigo-800/50 dark:bg-indigo-950/50 dark:text-indigo-300">
+              <span className="flex h-2 w-2 rounded-full bg-indigo-500 mr-2 animate-pulse"></span>
+              The Future of Trading
             </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">
+            <h1 className="font-heading text-4xl font-black tracking-tight text-foreground sm:text-6xl md:text-7xl lg:text-8xl">
+              투자의 미래를 <br className="hidden sm:block" />
+              <span className="text-transparent bg-clip-text bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 animate-gradient-x underline decoration-indigo-500/30 decoration-4 underline-offset-8">
+                자동화하세요
+              </span>
+            </h1>
+
+            <p className="mt-6 max-w-2xl text-lg text-muted-foreground sm:text-xl leading-relaxed break-keep">
+              AutoTrade는 최첨단 알고리즘을 통해 24시간 암호화폐 시장을
+              분석합니다.
+              <br className="hidden md:block" />
+              감정 없는 데이터 기반 투자로 안정적인 수익을 경험해보세요.
+            </p>
+
+            <div className="mt-8 flex flex-col items-center gap-4 sm:flex-row">
+              {user ? (
+                <Button
+                  asChild
+                  size="lg"
+                  className="h-14 rounded-full px-10 text-lg font-bold shadow-xl shadow-indigo-500/20 transition-all hover:scale-105 hover:shadow-indigo-500/40"
+                >
+                  <Link href={AUTH_ROUTES.DASHBOARD}>대시보드 바로가기</Link>
+                </Button>
+              ) : (
+                <Button
+                  asChild
+                  size="lg"
+                  className="h-14 rounded-full px-10 text-lg font-bold shadow-xl shadow-indigo-500/20 transition-all hover:scale-105 hover:shadow-indigo-500/40"
+                >
+                  <Link href={AUTH_ROUTES.LOGIN}>무료로 시작하기</Link>
+                </Button>
+              )}
+              {!user && (
+                <Button
+                  asChild
+                  variant="outline"
+                  size="lg"
+                  className="h-14 rounded-full border-border bg-background/50 px-10 text-lg hover:bg-accent/50 backdrop-blur-sm"
+                >
+                  <Link href={AUTH_ROUTES.LOGIN}>데모 체험하기</Link>
+                </Button>
+              )}
+            </div>
+
+            {/* Spline Scene - Centered & Wide */}
+            <div className="relative mt-16 w-full max-w-5xl">
+              <div className="group relative aspect-video w-full overflow-hidden rounded-3xl border border-white/20 bg-linear-to-b from-white/10 to-transparent shadow-2xl backdrop-blur-2xl dark:border-white/10 dark:bg-black/20">
+                {/* Glow Effect */}
+                <div className="absolute -inset-1 rounded-3xl bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-20 blur-2xl transition-opacity duration-500 group-hover:opacity-40" />
+
                 <SplineScene
                   sceneUrl="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode"
-                  className="rounded-2xl"
+                  className="relative z-10 h-full w-full rounded-2xl"
                 />
               </div>
             </div>
           </div>
         </section>
 
-        <section className="container space-y-6 bg-slate-50 py-8 dark:bg-transparent md:py-12 lg:py-24">
-          <div className="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
-            <h2 className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
-              주요 기능
+        {/* Features Section - Bento Grid */}
+        <section className="container mx-auto max-w-7xl px-4 py-24 sm:py-32">
+          <div className="mb-16 text-center">
+            <h2 className="font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
+              강력한 기능,{" "}
+              <span className="text-indigo-500">직관적인 경험</span>
             </h2>
-            <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
+            <p className="mt-4 text-lg text-muted-foreground">
               성공적인 투자를 위해 필요한 모든 도구가 준비되어 있습니다.
             </p>
           </div>
-          <div className="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-5xl md:grid-cols-3">
-            {[
-              {
-                title: "실시간 모니터링",
-                description:
-                  "시장 상황을 실시간으로 분석하고 최적의 타이밍을 포착합니다.",
-              },
-              {
-                title: "알고리즘 트레이딩",
-                description:
-                  "검증된 전략을 기반으로 자동으로 매수와 매도를 실행합니다.",
-              },
-              {
-                title: "포트폴리오 관리",
-                description:
-                  "자산 분배와 리스크 관리를 통해 안정적인 수익을 추구합니다.",
-              },
-            ].map((feature, index) => (
-              <div
-                key={index}
-                className="relative overflow-hidden rounded-lg border bg-background p-2"
-              >
-                <div className="flex h-[180px] flex-col justify-between rounded-md p-6">
-                  <div className="space-y-2">
-                    <h3 className="font-bold">{feature.title}</h3>
-                    <p className="text-sm text-muted-foreground">
-                      {feature.description}
-                    </p>
-                  </div>
+
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-8">
+            {/* Feature 1 */}
+            <div className="group relative col-span-1 overflow-hidden rounded-3xl border border-border/50 bg-background/50 p-8 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 dark:bg-zinc-900/50 md:col-span-2">
+              <div className="relative z-10 flex flex-col justify-between h-full gap-6">
+                <div className="h-14 w-14 flex items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600 dark:bg-indigo-900/20 dark:text-indigo-400">
+                  <svg
+                    className="w-8 h-8"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <h3 className="text-2xl font-bold mb-2">실시간 모니터링</h3>
+                  <p className="text-muted-foreground text-lg leading-relaxed">
+                    초당 수천 건의 트랜잭션을 실시간으로 분석합니다.
+                    <br />
+                    시장 변동성을 놓치지 않고 최적의 진입 시점을 포착하세요.
+                  </p>
                 </div>
               </div>
-            ))}
+              <div className="absolute top-0 right-0 h-64 w-64 translate-x-1/2 -translate-y-1/2 rounded-full bg-indigo-500/10 blur-3xl group-hover:bg-indigo-500/20 transition-all duration-500" />
+            </div>
+
+            {/* Feature 2 (Tall) */}
+            <div className="group relative col-span-1 row-span-2 overflow-hidden rounded-3xl border border-border/50 bg-background/50 p-8 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 dark:bg-zinc-900/50">
+              <div className="relative z-10 flex flex-col h-full gap-6">
+                <div className="h-14 w-14 flex items-center justify-center rounded-2xl bg-purple-50 text-purple-600 dark:bg-purple-900/20 dark:text-purple-400">
+                  <svg
+                    className="w-8 h-8"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+                    />
+                  </svg>
+                </div>
+                <h3 className="text-2xl font-bold">알고리즘 트레이딩</h3>
+                <p className="text-muted-foreground text-lg">
+                  24시간 멈추지 않는 자동 매매 시스템입니다.
+                </p>
+                <div className="mt-auto space-y-4 pt-4">
+                  {[
+                    "추세 추종 전략",
+                    "변동성 돌파",
+                    "AI 예측 모델",
+                    "리스크 관리",
+                  ].map((item) => (
+                    <div
+                      key={item}
+                      className="flex items-center gap-3 text-sm font-medium text-foreground/80"
+                    >
+                      <div className="h-2 w-2 rounded-full bg-purple-500" />
+                      {item}
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="absolute bottom-0 left-0 h-64 w-64 -translate-x-1/2 translate-y-1/2 rounded-full bg-purple-500/10 blur-3xl group-hover:bg-purple-500/20 transition-all duration-500" />
+            </div>
+
+            {/* Feature 3 */}
+            <div className="group relative col-span-1 overflow-hidden rounded-3xl border border-border/50 bg-background/50 p-8 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 dark:bg-zinc-900/50 md:col-span-2">
+              <div className="relative z-10 flex flex-col justify-between h-full gap-6">
+                <div className="h-14 w-14 flex items-center justify-center rounded-2xl bg-pink-50 text-pink-600 dark:bg-pink-900/20 dark:text-pink-400">
+                  <svg
+                    className="w-8 h-8"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <h3 className="text-2xl font-bold mb-2">스마트 포트폴리오</h3>
+                  <p className="text-muted-foreground text-lg leading-relaxed">
+                    목표 수익률 달성 시 자동으로 이익을 실현하고, MDD를
+                    최소화하여
+                    <br />
+                    시장이 하락할 때도 당신의 자산을 안전하게 지킵니다.
+                  </p>
+                </div>
+              </div>
+              <div className="absolute bottom-0 right-0 h-40 w-40 translate-x-1/3 translate-y-1/3 rounded-full bg-pink-500/10 blur-3xl group-hover:bg-pink-500/20 transition-all duration-500" />
+            </div>
           </div>
         </section>
       </main>