전체적인 리팩토링

features/layout/components/Logo.tsx

@@ -93,12 +93,12 @@ export function Logo({
       {variant === "full" && (
         <span
           className={cn(
-            "font-bold tracking-tight",
+            "font-heading font-semibold tracking-tight",
             blendWithBackground
               ? "text-white opacity-95"
               : "text-brand-900 dark:text-brand-50",
           )}
-          style={{ fontSize: "1.35rem", fontFamily: "'Inter', sans-serif" }}
+          style={{ fontSize: "1.35rem" }}
         >
           JOORIN-E
         </span>

features/layout/components/header.tsx

@@ -13,6 +13,9 @@ import { SessionTimer } from "@/features/auth/components/session-timer";
 import { cn } from "@/lib/utils";
 import { Logo } from "@/features/layout/components/Logo";
 
+
+import { MarketIndices } from "@/features/layout/components/market-indices";
+
 interface HeaderProps {
   /** 현재 로그인 사용자 정보(null 가능) */
   user: User | null;
@@ -59,7 +62,6 @@ export function Header({
             : "",
         )}
       >
-        {/* ========== LEFT: LOGO SECTION ========== */}
         {/* ========== LEFT: LOGO SECTION ========== */}
         <Link href={AUTH_ROUTES.HOME} className="group flex items-center gap-2">
           <Logo
@@ -69,6 +71,13 @@ export function Header({
           />
         </Link>
 
+        {/* ========== CENTER: MARKET INDICES ========== */}
+        {!blendWithBackground && user && (
+          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+            <MarketIndices />
+          </div>
+        )}
+
         {/* ========== RIGHT: ACTION SECTION ========== */}
         <div
           className={cn(
@@ -141,3 +150,4 @@ export function Header({
     </header>
   );
 }
+

features/layout/components/market-indices.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+/**
+ * @file features/layout/components/market-indices.tsx
+ * @description KOSPI/KOSDAQ 지수를 표시하는 UI 컴포넌트
+ *
+ * @description [주요 책임]
+ * - `useMarketIndices` 훅을 사용하여 지수 데이터를 가져옴
+ * - 30초마다 데이터를 자동으로 새로고침
+ * - 로딩 상태일 때 스켈레톤 UI를 표시
+ * - 각 지수 정보를 `MarketIndexItem` 컴포넌트로 렌더링
+ */
+
+import { useEffect } from "react";
+import { useMarketIndices } from "@/features/layout/hooks/use-market-indices";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import type { DomesticMarketIndexResult } from "@/lib/kis/dashboard";
+
+const MarketIndexItem = ({ index }: { index: DomesticMarketIndexResult }) => (
+  <div className="flex items-center space-x-2">
+    <span className="text-sm font-medium">{index.name}</span>
+    <span
+      className={cn("text-sm", {
+        "text-red-500": index.change > 0,
+        "text-blue-500": index.change < 0,
+      })}
+    >
+      {index.price.toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      })}
+    </span>
+    <span
+      className={cn("text-xs", {
+        "text-red-500": index.change > 0,
+        "text-blue-500": index.change < 0,
+      })}
+    >
+      {index.change.toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      })}{" "}
+      ({index.changeRate.toFixed(2)}%)
+    </span>
+  </div>
+);
+
+export function MarketIndices() {
+  const { indices, isLoading, fetchIndices, fetchedAt } = useMarketIndices();
+
+  useEffect(() => {
+    fetchIndices();
+    const interval = setInterval(fetchIndices, 30000); // 30초마다 새로고침
+    return () => clearInterval(interval);
+  }, [fetchIndices]);
+
+  if (isLoading && !fetchedAt) {
+    return (
+      <div className="flex items-center space-x-4">
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-4 w-24" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="hidden items-center space-x-6 md:flex">
+      {indices.map((index) => (
+        <MarketIndexItem key={index.code} index={index} />
+      ))}
+    </div>
+  );
+}

features/layout/components/user-menu.tsx

@@ -18,12 +18,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { KIS_REMEMBER_LOCAL_STORAGE_KEYS } from "@/features/settings/lib/kis-remember-storage";
 import { cn } from "@/lib/utils";
 
 const SESSION_RELATED_STORAGE_KEYS = [
   "session-storage",
   "auth-storage",
   "autotrade-kis-runtime-store",
+  ...KIS_REMEMBER_LOCAL_STORAGE_KEYS,
 ] as const;
 
 interface UserMenuProps {