대시보드 중간 커밋
This commit is contained in:
@@ -1,222 +1,163 @@
|
||||
/**
|
||||
/**
|
||||
* @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
|
||||
* @description 서비스 메인 랜딩 페이지(Server Component)
|
||||
*/
|
||||
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { createClient } from "@/utils/supabase/server";
|
||||
import { ArrowRight, BarChart3, ShieldCheck, Sparkles, Zap } from "lucide-react";
|
||||
import { Header } from "@/features/layout/components/header";
|
||||
import { AUTH_ROUTES } from "@/features/auth/constants";
|
||||
import { SplineScene } from "@/features/home/components/spline-scene";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import ShaderBackground from "@/components/ui/shader-background";
|
||||
import { createClient } from "@/utils/supabase/server";
|
||||
|
||||
/**
|
||||
* 메인 페이지 컴포넌트 (비동기 서버 컴포넌트)
|
||||
* @returns Landing Page Elements
|
||||
* @see layout.tsx - RootLayout 내에서 렌더링
|
||||
* @see spline-scene.tsx - 3D 인터랙션
|
||||
* 홈 메인 랜딩 페이지
|
||||
* @returns 랜딩 UI
|
||||
* @see features/layout/components/header.tsx blendWithBackground 모드 헤더를 함께 사용
|
||||
*/
|
||||
export default async function HomePage() {
|
||||
// [Step 1] 서버 사이드 인증 상태 확인
|
||||
// [로그인 상태 조회] 사용자 유무에 따라 CTA 링크를 분기합니다.
|
||||
const supabase = await createClient();
|
||||
const {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser();
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col overflow-x-hidden">
|
||||
<Header user={user} showDashboardLink={true} />
|
||||
<div className="flex min-h-screen flex-col overflow-x-hidden bg-transparent">
|
||||
<Header user={user} showDashboardLink={true} blendWithBackground={true} />
|
||||
|
||||
<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%)]" />
|
||||
<main className="relative isolate flex-1 pt-16">
|
||||
{/* ========== SHADER BACKGROUND SECTION ========== */}
|
||||
<ShaderBackground opacity={1} className="-z-20" />
|
||||
|
||||
<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-brand-200/50 bg-brand-50/50 px-3 py-1 text-sm font-medium text-brand-600 backdrop-blur-md dark:border-brand-800/50 dark:bg-brand-900/50 dark:text-brand-300">
|
||||
<span className="mr-2 flex h-2 w-2 animate-pulse rounded-full bg-brand-500"></span>
|
||||
The Future of Trading
|
||||
</div>
|
||||
|
||||
<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="animate-gradient-x bg-linear-to-r from-brand-500 via-brand-600 to-brand-700 bg-clip-text text-transparent underline decoration-brand-500/30 decoration-4 underline-offset-8">
|
||||
자동화하세요
|
||||
{/* ========== HERO SECTION ========== */}
|
||||
<section className="container mx-auto max-w-7xl px-4 pb-10 pt-16 md:pt-24">
|
||||
<div className="p-2 md:p-6">
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<span className="inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs font-semibold text-brand-200 [text-shadow:0_2px_24px_rgba(0,0,0,0.65)]">
|
||||
<Sparkles className="h-3.5 w-3.5" />
|
||||
Shader Background Landing
|
||||
</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>
|
||||
<h1 className="mt-5 text-4xl font-black tracking-tight text-white [text-shadow:0_4px_30px_rgba(0,0,0,0.6)] md:text-6xl">
|
||||
데이터로 판단하고
|
||||
<br />
|
||||
<span className="bg-linear-to-r from-brand-300 via-brand-400 to-brand-500 bg-clip-text text-transparent">
|
||||
자동으로 실행합니다
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<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-brand-500/20 transition-all hover:scale-105 hover:shadow-brand-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-brand-500/20 transition-all hover:scale-105 hover:shadow-brand-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>
|
||||
)}
|
||||
<p className="mx-auto mt-5 max-w-2xl text-sm leading-relaxed text-white/80 [text-shadow:0_2px_16px_rgba(0,0,0,0.5)] md:text-lg">
|
||||
실시간 시세 확인, 전략 점검, 주문 연결까지 한 화면에서 이어지는 자동매매 환경을
|
||||
제공합니다. 복잡한 설정은 줄이고 실행 속도는 높였습니다.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
||||
{/* [분기 렌더] 로그인 사용자는 대시보드, 비로그인 사용자는 가입/로그인 동선을 노출합니다. */}
|
||||
{user ? (
|
||||
<Button asChild size="lg" className="h-12 rounded-full bg-primary px-8 text-base hover:bg-primary/90">
|
||||
<Link href={AUTH_ROUTES.DASHBOARD}>
|
||||
대시보드 바로가기
|
||||
<ArrowRight className="ml-1.5 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button asChild size="lg" className="h-12 rounded-full bg-primary px-8 text-base hover:bg-primary/90">
|
||||
<Link href={AUTH_ROUTES.SIGNUP}>
|
||||
무료로 시작하기
|
||||
<ArrowRight className="ml-1.5 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="h-12 rounded-full border-white/40 bg-transparent px-8 text-base text-white hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<Link href={AUTH_ROUTES.LOGIN}>로그인</Link>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</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-brand-500 via-brand-600 to-brand-700 opacity-20 blur-2xl transition-opacity duration-500 group-hover:opacity-40" />
|
||||
|
||||
<SplineScene
|
||||
sceneUrl="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode"
|
||||
className="relative z-10 h-full w-full rounded-2xl"
|
||||
/>
|
||||
<div className="mt-8 grid gap-3 sm:grid-cols-3">
|
||||
<div className="rounded-2xl p-4 text-white [text-shadow:0_2px_12px_rgba(0,0,0,0.35)]">
|
||||
<p className="text-xs text-white/70">지연 시간 기준</p>
|
||||
<p className="mt-1 text-lg font-bold">Low Latency</p>
|
||||
</div>
|
||||
<div className="rounded-2xl p-4 text-white [text-shadow:0_2px_12px_rgba(0,0,0,0.35)]">
|
||||
<p className="text-xs text-white/70">모니터링</p>
|
||||
<p className="mt-1 text-lg font-bold">실시간 시세 반영</p>
|
||||
</div>
|
||||
<div className="rounded-2xl p-4 text-white [text-shadow:0_2px_12px_rgba(0,0,0,0.35)]">
|
||||
<p className="text-xs text-white/70">실행 환경</p>
|
||||
<p className="mt-1 text-lg font-bold">웹 기반 자동매매</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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-brand-500">직관적인 경험</span>
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-muted-foreground">
|
||||
성공적인 투자를 위해 필요한 모든 도구가 준비되어 있습니다.
|
||||
</p>
|
||||
{/* ========== FEATURE SECTION ========== */}
|
||||
<section className="container mx-auto max-w-7xl px-4 pb-16 md:pb-24">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card className="border-0 bg-transparent text-white shadow-none">
|
||||
<CardHeader>
|
||||
<div className="mb-2 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-400/20 text-brand-200">
|
||||
<BarChart3 className="h-5 w-5" />
|
||||
</div>
|
||||
<CardTitle className="text-white [text-shadow:0_2px_12px_rgba(0,0,0,0.4)]">실시간 데이터 가시화</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm leading-relaxed text-white/75">
|
||||
시세 변화와 거래 흐름을 빠르게 확인할 수 있게 핵심 정보만 선별해 보여줍니다.
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-0 bg-transparent text-white shadow-none">
|
||||
<CardHeader>
|
||||
<div className="mb-2 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-400/20 text-brand-200">
|
||||
<Zap className="h-5 w-5" />
|
||||
</div>
|
||||
<CardTitle className="text-white [text-shadow:0_2px_12px_rgba(0,0,0,0.4)]">전략 실행 속도 최적화</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm leading-relaxed text-white/75">
|
||||
필요한 단계만 남긴 단순한 흐름으로 전략 테스트와 실행 전환 시간을 줄였습니다.
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-0 bg-transparent text-white shadow-none">
|
||||
<CardHeader>
|
||||
<div className="mb-2 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-400/20 text-brand-200">
|
||||
<ShieldCheck className="h-5 w-5" />
|
||||
</div>
|
||||
<CardTitle className="text-white [text-shadow:0_2px_12px_rgba(0,0,0,0.4)]">명확한 리스크 관리</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm leading-relaxed text-white/75">
|
||||
자동매매에서 중요한 손실 한도와 조건을 먼저 정의하고 일관되게 적용할 수 있습니다.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 dark:bg-brand-900/20 dark:text-brand-300">
|
||||
<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>
|
||||
{/* ========== CTA SECTION ========== */}
|
||||
<section className="container mx-auto max-w-7xl px-4 pb-20">
|
||||
<div className="p-2 md:p-4">
|
||||
<div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-brand-200 [text-shadow:0_2px_18px_rgba(0,0,0,0.45)]">준비되면 바로 시작하세요</p>
|
||||
<h2 className="mt-1 text-2xl font-bold tracking-tight text-white [text-shadow:0_2px_18px_rgba(0,0,0,0.45)] md:text-3xl">
|
||||
AutoTrade에서 전략을 실행해 보세요
|
||||
</h2>
|
||||
</div>
|
||||
<div className="absolute top-0 right-0 h-64 w-64 translate-x-1/2 -translate-y-1/2 rounded-full bg-brand-500/10 blur-3xl transition-all duration-500 group-hover:bg-brand-500/20" />
|
||||
</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="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 dark:bg-brand-900/20 dark:text-brand-300">
|
||||
<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-brand-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-brand-500/10 blur-3xl transition-all duration-500 group-hover:bg-brand-500/20" />
|
||||
</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="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 dark:bg-brand-900/20 dark:text-brand-300">
|
||||
<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 right-0 bottom-0 h-40 w-40 translate-x-1/3 translate-y-1/3 rounded-full bg-brand-500/10 blur-3xl transition-all duration-500 group-hover:bg-brand-500/20" />
|
||||
<Button asChild className="h-11 rounded-full bg-primary px-7 hover:bg-primary/90">
|
||||
<Link href={user ? AUTH_ROUTES.DASHBOARD : AUTH_ROUTES.SIGNUP}>
|
||||
{user ? "대시보드 열기" : "회원가입 시작"}
|
||||
<ArrowRight className="ml-1.5 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user