feat(ui): 기간 수익률 + 거래주체 순매수 패널

- PeriodReturns: chart.ohlcv 종가로 1주/1개월/3개월/6개월/1년/전체 수익률 그리드
- TradingValuePanel: chart.trading_value 외국인/기관/개인 최근 5일 표 (억원 단위)
- [code]/page.tsx 레이아웃 재배치: 수익률 → 거래주체+메트릭 → 뉴스+공시

백엔드 변경 없음 — 기존 ChartPayload 의 미사용 시리즈를 재활용.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/components/TradingValuePanel.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+// 거래주체 패널 — chart.trading_value (외국인/기관/개인 순매수) 를 최근 5일 표로.
+// 별도 백엔드 호출 없음. ChartPayload 에 이미 들어있는 시리즈를 재사용.
+// 단위: 백엔드는 원(KRW) 단위. UI 는 억원(억원=1e8)으로 환산.
+// 색: KR 관행 — 매수 우위(+) 빨강, 매도 우위(-) 파랑.
+
+import type { TradingValuePoint } from "../lib/api";
+
+export function TradingValuePanel({
+  data,
+}: {
+  data: TradingValuePoint[];
+}) {
+  if (!data || data.length === 0) {
+    return (
+      <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4 text-xs text-zinc-500">
+        거래주체 데이터 없음
+      </div>
+    );
+  }
+  // 최근 5일만 (입력은 오래된→최신 순), 표시는 최신이 위.
+  const recent = data.slice(-5).reverse();
+
+  return (
+    <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
+      <div className="mb-3 flex items-baseline justify-between">
+        <div className="text-sm font-medium text-zinc-200">거래주체 순매수</div>
+        <div className="text-[11px] text-zinc-500">최근 {recent.length}일 · 단위: 억원</div>
+      </div>
+      <div className="overflow-hidden rounded-md border border-zinc-800">
+        <table className="w-full text-xs tabular-nums">
+          <thead className="bg-zinc-900/60 text-[11px] text-zinc-500">
+            <tr>
+              <th className="px-2 py-1.5 text-left font-normal">일자</th>
+              <th className="px-2 py-1.5 text-right font-normal">외국인</th>
+              <th className="px-2 py-1.5 text-right font-normal">기관</th>
+              <th className="px-2 py-1.5 text-right font-normal">개인</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-zinc-800">
+            {recent.map((row) => (
+              <tr key={row.date}>
+                <td className="px-2 py-1.5 text-left text-zinc-400">
+                  {shortDate(row.date)}
+                </td>
+                <NetCell value={row.foreign_net} />
+                <NetCell value={row.institution_net} />
+                <NetCell value={row.individual_net} />
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function NetCell({ value }: { value: number | null }) {
+  if (value == null) {
+    return <td className="px-2 py-1.5 text-right text-zinc-600">—</td>;
+  }
+  const eok = value / 1e8;
+  const tone =
+    eok === 0
+      ? "text-zinc-400"
+      : eok > 0
+      ? "text-rose-400"
+      : "text-sky-400";
+  const sign = eok > 0 ? "+" : "";
+  return (
+    <td className={`px-2 py-1.5 text-right ${tone}`}>
+      {sign}
+      {eok.toLocaleString(undefined, { maximumFractionDigits: 0 })}
+    </td>
+  );
+}
+
+function shortDate(iso: string): string {
+  // 'YYYY-MM-DD' → 'MM-DD'
+  const m = /^\d{4}-(\d{2})-(\d{2})/.exec(iso);
+  return m ? `${m[1]}-${m[2]}` : iso;
+}