전체적인 리팩토링

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 {

features/layout/hooks/use-market-indices.ts

@@ -0,0 +1,98 @@
+/**
+ * @file features/layout/hooks/use-market-indices.ts
+ * @description 시장 지수 데이터를 가져오고 상태를 관리하는 커스텀 훅
+ *
+ * @description [주요 책임]
+ * - `useMarketIndicesStore`와 연동하여 상태(지수, 로딩, 에러)를 제공
+ * - KIS 검증 세션이 있을 때 `/api/kis/domestic/indices` API를 인증 헤더와 함께 호출
+ * - API 호출 로직을 `useCallback`으로 메모이제이션하여 성능을 최적화
+ */
+import { useCallback } from "react";
+import {
+  buildKisRequestHeaders,
+  resolveKisApiErrorMessage,
+  type KisApiErrorPayload,
+} from "@/features/settings/apis/kis-api-utils";
+import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";
+import { useMarketIndicesStore } from "@/features/layout/stores/market-indices-store";
+import type { DomesticMarketIndexResult } from "@/lib/kis/dashboard";
+import type { DashboardIndicesResponse } from "@/features/dashboard/types/dashboard.types";
+
+interface LegacyMarketIndicesResponse {
+  indices: DomesticMarketIndexResult[];
+  fetchedAt: string;
+}
+
+export function useMarketIndices() {
+  const verifiedCredentials = useKisRuntimeStore((state) => state.verifiedCredentials);
+  const isKisVerified = useKisRuntimeStore((state) => state.isKisVerified);
+
+  const {
+    indices,
+    isLoading,
+    error,
+    fetchedAt,
+    setIndices,
+    setLoading,
+    setError,
+  } = useMarketIndicesStore();
+
+  const fetchIndices = useCallback(async () => {
+    // [Step 1] KIS 검증이 안 된 상태에서는 지수 API를 호출하지 않습니다.
+    if (!isKisVerified || !verifiedCredentials) {
+      setLoading(false);
+      setError(null);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // [Step 2] 인증 헤더를 포함한 신규 지수 API를 호출합니다.
+      const response = await fetch("/api/kis/domestic/indices", {
+        method: "GET",
+        headers: buildKisRequestHeaders(verifiedCredentials, {
+          includeSessionOverride: true,
+        }),
+        cache: "no-store",
+      });
+
+      const payload = (await response.json()) as
+        | DashboardIndicesResponse
+        | LegacyMarketIndicesResponse
+        | KisApiErrorPayload;
+
+      if (!response.ok) {
+        throw new Error(resolveKisApiErrorMessage(payload, "지수 조회 중 오류가 발생했습니다."));
+      }
+
+      // [Step 3] 신규/레거시 응답 형식을 모두 수용해 스토어에 반영합니다.
+      if ("items" in payload) {
+        setIndices({
+          indices: payload.items,
+          fetchedAt: payload.fetchedAt,
+        });
+        return;
+      }
+
+      if ("indices" in payload && "fetchedAt" in payload) {
+        setIndices({
+          indices: payload.indices,
+          fetchedAt: payload.fetchedAt,
+        });
+        return;
+      }
+
+      throw new Error("지수 응답 형식이 올바르지 않습니다.");
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error("An unknown error occurred"));
+    }
+  }, [isKisVerified, setError, setIndices, setLoading, verifiedCredentials]);
+
+  return {
+    indices,
+    isLoading,
+    error,
+    fetchedAt,
+    fetchIndices,
+  };
+}

features/layout/stores/market-indices-store.ts

@@ -0,0 +1,39 @@
+/**
+ * @file features/layout/stores/market-indices-store.ts
+ * @description 시장 지수(KOSPI, KOSDAQ) 데이터 상태 관리를 위한 Zustand 스토어
+ *
+ * @description [주요 책임]
+ * - 지수 데이터, 로딩 상태, 에러 정보, 마지막 fetch 시각을 저장
+ * - 상태를 업데이트하는 액션(setIndices, setLoading, setError)을 제공
+ */
+import type { DomesticMarketIndexResult } from "@/lib/kis/dashboard";
+import { create } from "zustand";
+
+interface MarketIndicesState {
+  indices: DomesticMarketIndexResult[];
+  isLoading: boolean;
+  error: Error | null;
+  fetchedAt: string | null;
+  setIndices: (data: {
+    indices: DomesticMarketIndexResult[];
+    fetchedAt: string;
+  }) => void;
+  setLoading: (isLoading: boolean) => void;
+  setError: (error: Error | null) => void;
+}
+
+export const useMarketIndicesStore = create<MarketIndicesState>((set) => ({
+  indices: [],
+  isLoading: false,
+  error: null,
+  fetchedAt: null,
+  setIndices: (data) =>
+    set({
+      indices: data.indices,
+      fetchedAt: data.fetchedAt,
+      isLoading: false,
+      error: null,
+    }),
+  setLoading: (isLoading) => set({ isLoading }),
+  setError: (error) => set({ error, isLoading: false }),
+}));