대시보드 중간 커밋

app/(home)/page.tsx

@@ -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>

app/(main)/dashboard/page.tsx

@@ -5,12 +5,12 @@
 
 import { redirect } from "next/navigation";
 import { createClient } from "@/utils/supabase/server";
-import { DashboardMain } from "@/features/dashboard/components/dashboard-main";
+import { DashboardContainer } from "@/features/dashboard/components/DashboardContainer";
 
 /**
  * 대시보드 페이지
- * @returns DashboardMain UI
- * @see features/dashboard/components/dashboard-main.tsx 클라이언트 상호작용(검색/시세/차트)은 해당 컴포넌트가 담당합니다.
+ * @returns DashboardContainer UI
+ * @see features/dashboard/components/DashboardContainer.tsx 클라이언트 상호작용(검색/시세/차트)은 해당 컴포넌트가 담당합니다.
  */
 export default async function DashboardPage() {
   // 상태 정의: 서버에서 세션을 먼저 확인해 비로그인 접근을 차단합니다.
@@ -21,5 +21,5 @@ export default async function DashboardPage() {
 
   if (!user) redirect("/login");
 
-  return <DashboardMain />;
+  return <DashboardContainer />;
 }

app/api/kis/domestic/chart/route.ts

@@ -0,0 +1,98 @@
+import type {
+  DashboardChartTimeframe,
+  DashboardStockChartResponse,
+} from "@/features/dashboard/types/dashboard.types";
+import type { KisCredentialInput } from "@/lib/kis/config";
+import { hasKisConfig, normalizeTradingEnv } from "@/lib/kis/config";
+import { getDomesticChart } from "@/lib/kis/domestic";
+import { NextRequest, NextResponse } from "next/server";
+
+const VALID_TIMEFRAMES: DashboardChartTimeframe[] = [
+  "1m",
+  "30m",
+  "1h",
+  "1d",
+  "1w",
+];
+
+/**
+ * @file app/api/kis/domestic/chart/route.ts
+ * @description 국내주식 차트(분봉/일봉/주봉) 조회 API
+ */
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const symbol = (searchParams.get("symbol") ?? "").trim();
+  const timeframe = (
+    searchParams.get("timeframe") ?? "1d"
+  ).trim() as DashboardChartTimeframe;
+  const cursor = (searchParams.get("cursor") ?? "").trim() || undefined;
+
+  if (!/^\d{6}$/.test(symbol)) {
+    return NextResponse.json(
+      { error: "symbol은 6자리 숫자여야 합니다." },
+      { status: 400 },
+    );
+  }
+
+  if (!VALID_TIMEFRAMES.includes(timeframe)) {
+    return NextResponse.json(
+      { error: "지원하지 않는 timeframe입니다." },
+      { status: 400 },
+    );
+  }
+
+  const credentials = readKisCredentialsFromHeaders(request.headers);
+  if (!hasKisConfig(credentials)) {
+    return NextResponse.json(
+      {
+        error:
+          "대시보드 상단에서 KIS API 키를 입력하고 검증해 주세요. 키 정보가 없어서 차트를 조회할 수 없습니다.",
+      },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const chart = await getDomesticChart(
+      symbol,
+      timeframe,
+      credentials,
+      cursor,
+    );
+
+    const response: DashboardStockChartResponse = {
+      symbol,
+      timeframe,
+      candles: chart.candles,
+      nextCursor: chart.nextCursor,
+      hasMore: chart.hasMore,
+      fetchedAt: new Date().toISOString(),
+    };
+
+    return NextResponse.json(response, {
+      headers: {
+        "cache-control": "no-store",
+      },
+    });
+  } catch (error) {
+    const message =
+      error instanceof Error
+        ? error.message
+        : "KIS 차트 조회 중 오류가 발생했습니다.";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+function readKisCredentialsFromHeaders(headers: Headers): KisCredentialInput {
+  const appKey = headers.get("x-kis-app-key")?.trim();
+  const appSecret = headers.get("x-kis-app-secret")?.trim();
+  const tradingEnv = normalizeTradingEnv(
+    headers.get("x-kis-trading-env") ?? undefined,
+  );
+
+  return {
+    appKey,
+    appSecret,
+    tradingEnv,
+  };
+}

app/api/kis/domestic/order-cash/route.ts

@@ -0,0 +1,104 @@
+import { NextRequest, NextResponse } from "next/server";
+import { executeOrderCash } from "@/lib/kis/trade";
+import {
+  DashboardStockCashOrderRequest,
+  DashboardStockCashOrderResponse,
+} from "@/features/dashboard/types/dashboard.types";
+import {
+  KisCredentialInput,
+  hasKisConfig,
+  normalizeTradingEnv,
+} from "@/lib/kis/config";
+
+/**
+ * @file app/api/kis/domestic/order-cash/route.ts
+ * @description 국내주식 현금 주문 API
+ */
+
+export async function POST(request: NextRequest) {
+  const credentials = readKisCredentialsFromHeaders(request.headers);
+
+  if (!hasKisConfig(credentials)) {
+    return NextResponse.json(
+      {
+        ok: false,
+        tradingEnv: normalizeTradingEnv(credentials.tradingEnv),
+        message: "KIS API 키 설정이 필요합니다.",
+      },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const body = (await request.json()) as DashboardStockCashOrderRequest;
+
+    // TODO: Validate body fields (symbol, quantity, price, etc.)
+    if (
+      !body.symbol ||
+      !body.accountNo ||
+      !body.accountProductCode ||
+      body.quantity <= 0
+    ) {
+      return NextResponse.json(
+        {
+          ok: false,
+          tradingEnv: normalizeTradingEnv(credentials.tradingEnv),
+          message:
+            "주문 정보가 올바르지 않습니다. (종목코드, 계좌번호, 수량 확인)",
+        },
+        { status: 400 },
+      );
+    }
+
+    const output = await executeOrderCash(
+      {
+        symbol: body.symbol,
+        side: body.side,
+        orderType: body.orderType,
+        quantity: body.quantity,
+        price: body.price,
+        accountNo: body.accountNo,
+        accountProductCode: body.accountProductCode,
+      },
+      credentials,
+    );
+
+    const response: DashboardStockCashOrderResponse = {
+      ok: true,
+      tradingEnv: normalizeTradingEnv(credentials.tradingEnv),
+      message: "주문이 전송되었습니다.",
+      orderNo: output.ODNO,
+      orderTime: output.ORD_TMD,
+      orderOrgNo: output.KRX_FWDG_ORD_ORGNO,
+    };
+
+    return NextResponse.json(response);
+  } catch (error) {
+    const message =
+      error instanceof Error
+        ? error.message
+        : "주문 전송 중 오류가 발생했습니다.";
+    return NextResponse.json(
+      {
+        ok: false,
+        tradingEnv: normalizeTradingEnv(credentials.tradingEnv),
+        message,
+      },
+      { status: 500 },
+    );
+  }
+}
+
+function readKisCredentialsFromHeaders(headers: Headers): KisCredentialInput {
+  const appKey = headers.get("x-kis-app-key")?.trim();
+  const appSecret = headers.get("x-kis-app-secret")?.trim();
+  const tradingEnv = normalizeTradingEnv(
+    headers.get("x-kis-trading-env") ?? undefined,
+  );
+
+  return {
+    appKey,
+    appSecret,
+    tradingEnv,
+  };
+}

app/api/kis/domestic/orderbook/route.ts

@@ -0,0 +1,106 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  getDomesticOrderBook,
+  KisDomesticOrderBookOutput,
+} from "@/lib/kis/domestic";
+import { DashboardStockOrderBookResponse } from "@/features/dashboard/types/dashboard.types";
+import {
+  KisCredentialInput,
+  hasKisConfig,
+  normalizeTradingEnv,
+} from "@/lib/kis/config";
+
+/**
+ * @file app/api/kis/domestic/orderbook/route.ts
+ * @description 국내주식 호가 조회 API
+ */
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const symbol = (searchParams.get("symbol") ?? "").trim();
+
+  if (!/^\d{6}$/.test(symbol)) {
+    return NextResponse.json(
+      { error: "symbol은 6자리 숫자여야 합니다." },
+      { status: 400 },
+    );
+  }
+
+  const credentials = readKisCredentialsFromHeaders(request.headers);
+
+  if (!hasKisConfig(credentials)) {
+    return NextResponse.json(
+      {
+        error: "KIS API 키 설정이 필요합니다.",
+      },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const raw = await getDomesticOrderBook(symbol, credentials);
+
+    const levels = Array.from({ length: 10 }, (_, i) => {
+      const idx = i + 1;
+      return {
+        askPrice: readOrderBookNumber(raw, `askp${idx}`),
+        bidPrice: readOrderBookNumber(raw, `bidp${idx}`),
+        askSize: readOrderBookNumber(raw, `askp_rsqn${idx}`),
+        bidSize: readOrderBookNumber(raw, `bidp_rsqn${idx}`),
+      };
+    });
+
+    const response: DashboardStockOrderBookResponse = {
+      symbol,
+      source: "kis",
+      levels,
+      totalAskSize: readOrderBookNumber(raw, "total_askp_rsqn"),
+      totalBidSize: readOrderBookNumber(raw, "total_bidp_rsqn"),
+      tradingEnv: normalizeTradingEnv(credentials.tradingEnv),
+      fetchedAt: new Date().toISOString(),
+    };
+
+    return NextResponse.json(response, {
+      headers: {
+        "cache-control": "no-store",
+      },
+    });
+  } catch (error) {
+    const message =
+      error instanceof Error
+        ? error.message
+        : "호가 조회 중 오류가 발생했습니다.";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+function readKisCredentialsFromHeaders(headers: Headers): KisCredentialInput {
+  const appKey = headers.get("x-kis-app-key")?.trim();
+  const appSecret = headers.get("x-kis-app-secret")?.trim();
+  const tradingEnv = normalizeTradingEnv(
+    headers.get("x-kis-trading-env") ?? undefined,
+  );
+
+  return {
+    appKey,
+    appSecret,
+    tradingEnv,
+  };
+}
+
+/**
+ * @description 호가 응답 필드를 대소문자 모두 허용해 숫자로 읽습니다.
+ * @see app/api/kis/domestic/orderbook/route.ts GET에서 output/output1 키 차이 방어 로직으로 사용합니다.
+ */
+function readOrderBookNumber(raw: KisDomesticOrderBookOutput, key: string) {
+  const record = raw as Record<string, unknown>;
+  const direct = record[key];
+  const upper = record[key.toUpperCase()];
+  const value = direct ?? upper ?? "0";
+  const normalized =
+    typeof value === "string"
+      ? value.replaceAll(",", "").trim()
+      : String(value ?? "0");
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : 0;
+}

app/api/kis/domestic/overview/route.ts

@@ -1,4 +1,4 @@
-import { KOREAN_STOCK_INDEX } from "@/features/dashboard/data/korean-stocks";
+import { KOREAN_STOCK_INDEX } from "@/features/dashboard/data/korean-stocks";
 import type { DashboardStockOverviewResponse } from "@/features/dashboard/types/dashboard.types";
 import type { KisCredentialInput } from "@/lib/kis/config";
 import { hasKisConfig, normalizeTradingEnv } from "@/lib/kis/config";

app/layout.tsx

@@ -13,6 +13,7 @@ import { Geist, Geist_Mono, Outfit } from "next/font/google";
 import { QueryProvider } from "@/providers/query-provider";
 import { ThemeProvider } from "@/components/theme-provider";
 import { SessionManager } from "@/features/auth/components/session-manager";
+import { Toaster } from "sonner";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -61,6 +62,13 @@ export default function RootLayout({
         >
           <SessionManager />
           <QueryProvider>{children}</QueryProvider>
+          <Toaster
+            richColors
+            position="top-right"
+            toastOptions={{
+              duration: 4000,
+            }}
+          />
         </ThemeProvider>
       </body>
     </html>