트레이딩창 UI 배치 및 UX 수정 및 기획서 추가

features/trade/components/header/StockHeader.tsx

@@ -1,6 +1,6 @@
 // import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
-import { DashboardStockItem } from "@/features/trade/types/trade.types";
+import type { DashboardStockItem } from "@/features/trade/types/trade.types";
 import { cn } from "@/lib/utils";
 
 interface StockHeaderProps {
@@ -13,6 +13,10 @@ interface StockHeaderProps {
   volume?: string;
 }
 
+/**
+ * @description 선택된 종목의 현재가/등락/시세 요약 헤더를 렌더링합니다.
+ * @see features/trade/components/layout/TradeDashboardContent.tsx - StockHeader 사용 (header prop으로 전달)
+ */
 export function StockHeader({
   stock,
   price,
@@ -22,68 +26,154 @@ export function StockHeader({
   low,
   volume,
 }: StockHeaderProps) {
-  const isRise = changeRate.startsWith("+") || parseFloat(changeRate) > 0;
-  const isFall = changeRate.startsWith("-") || parseFloat(changeRate) < 0;
+  const changeRateNum = parseFloat(changeRate);
+  const isRise = changeRateNum > 0;
+  const isFall = changeRateNum < 0;
   const colorClass = isRise
     ? "text-red-500"
     : isFall
       ? "text-blue-600 dark:text-blue-400"
       : "text-foreground";
 
+  const bgGlowClass = isRise
+    ? "from-red-500/10 to-transparent dark:from-red-500/15"
+    : isFall
+      ? "from-blue-500/10 to-transparent dark:from-blue-500/15"
+      : "from-brand-500/10 to-transparent";
+
+  // 전일종가 계산 (현재가 - 변동액)
+  const prevClose =
+    stock.prevClose > 0 ? stock.prevClose.toLocaleString("ko-KR") : "--";
+  const open = stock.open > 0 ? stock.open.toLocaleString("ko-KR") : "--";
+
   return (
-    <div className="bg-white px-3 py-1.5 dark:bg-brand-900/22 sm:px-4 sm:py-2">
+    <div className="bg-white px-3 py-2 dark:bg-brand-900/22 sm:px-4">
       {/* ========== STOCK SUMMARY ========== */}
       <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <h1 className="truncate text-base font-bold leading-tight text-foreground dark:text-brand-50 sm:text-lg">
-            {stock.name}
-          </h1>
+        {/* 종목명 + 코드 */}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <h1 className="truncate text-base font-bold leading-tight text-foreground dark:text-brand-50 sm:text-lg">
+              {stock.name}
+            </h1>
+            <span className="shrink-0 rounded border border-brand-200/60 bg-brand-50/50 px-1.5 py-0.5 text-[10px] font-medium text-brand-600 dark:border-brand-700/45 dark:bg-brand-900/30 dark:text-brand-200">
+              {stock.market}
+            </span>
+          </div>
           <span className="mt-0.5 block text-[11px] text-muted-foreground dark:text-brand-100/70 sm:text-xs">
-            {stock.symbol}/{stock.market}
+            {stock.symbol}
           </span>
         </div>
 
-        <div className={cn("shrink-0 text-right", colorClass)}>
-          <span className="block text-xl font-bold tracking-tight sm:text-2xl">{price}</span>
-          <span className="text-[11px] font-medium sm:text-xs">
-            {changeRate}% <span className="ml-1 text-[11px] sm:text-xs">{change}</span>
+        {/* 현재가 + 등락 */}
+        <div
+          className={cn(
+            "shrink-0 rounded-lg bg-linear-to-l px-3 py-1.5 text-right",
+            bgGlowClass,
+          )}
+        >
+          <span
+            className={cn(
+              "block text-xl font-bold tracking-tight tabular-nums sm:text-2xl",
+              colorClass,
+            )}
+          >
+            {price}
           </span>
+          <div className="flex items-center justify-end gap-1.5">
+            <span
+              className={cn(
+                "text-[11px] font-medium tabular-nums sm:text-xs",
+                colorClass,
+              )}
+            >
+              {isRise ? "▲" : isFall ? "▼" : ""}
+              {changeRate}%
+            </span>
+            <span
+              className={cn("text-[11px] tabular-nums sm:text-xs", colorClass)}
+            >
+              {isRise && "+"}
+              {change}
+            </span>
+          </div>
         </div>
       </div>
 
-      {/* ========== STATS ========== */}
-      <div className="mt-1.5 grid grid-cols-3 gap-2 text-xs md:hidden">
-        <div className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
-          <p className="text-[11px] text-muted-foreground dark:text-brand-100/70">고가</p>
-          <p className="font-medium text-red-500">{high || "--"}</p>
-        </div>
-        <div className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
-          <p className="text-[11px] text-muted-foreground dark:text-brand-100/70">저가</p>
-          <p className="font-medium text-blue-600 dark:text-blue-400">{low || "--"}</p>
-        </div>
-        <div className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
-          <p className="text-[11px] text-muted-foreground dark:text-brand-100/70">거래량(24H)</p>
-          <p className="font-medium">{volume || "--"}</p>
-        </div>
+      {/* ========== MOBILE STATS ========== */}
+      <div className="mt-2 grid grid-cols-3 gap-1.5 text-xs md:hidden">
+        <StatCard label="고가" value={high || "--"} tone="ask" />
+        <StatCard label="저가" value={low || "--"} tone="bid" />
+        <StatCard label="거래량" value={volume || "--"} />
       </div>
 
       <Separator className="mt-1.5 md:hidden" />
 
       {/* ========== DESKTOP STATS ========== */}
-      <div className="hidden items-center justify-end gap-5 pt-1 text-sm md:flex">
-        <div className="flex flex-col items-end">
-          <span className="text-muted-foreground text-xs dark:text-brand-100/70">고가</span>
-          <span className="font-medium text-red-500">{high || "--"}</span>
-        </div>
-        <div className="flex flex-col items-end">
-          <span className="text-muted-foreground text-xs dark:text-brand-100/70">저가</span>
-          <span className="font-medium text-blue-600 dark:text-blue-400">{low || "--"}</span>
-        </div>
-        <div className="flex flex-col items-end">
-          <span className="text-muted-foreground text-xs dark:text-brand-100/70">거래량(24H)</span>
-          <span className="font-medium">{volume || "--"}</span>
-        </div>
+      <div className="hidden items-center justify-end gap-4 pt-1.5 md:flex">
+        <DesktopStat label="전일종가" value={prevClose} />
+        <DesktopStat label="시가" value={open} />
+        <DesktopStat label="고가" value={high || "--"} tone="ask" />
+        <DesktopStat label="저가" value={low || "--"} tone="bid" />
+        <DesktopStat label="거래량" value={volume ? `${volume}주` : "--"} />
       </div>
     </div>
   );
 }
+
+/** 모바일 통계 카드 */
+function StatCard({
+  label,
+  value,
+  tone,
+}: {
+  label: string;
+  value: string;
+  tone?: "ask" | "bid";
+}) {
+  return (
+    <div className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
+      <p className="text-[11px] text-muted-foreground dark:text-brand-100/70">
+        {label}
+      </p>
+      <p
+        className={cn(
+          "font-semibold",
+          tone === "ask" && "text-red-500",
+          tone === "bid" && "text-blue-600 dark:text-blue-400",
+        )}
+      >
+        {value}
+      </p>
+    </div>
+  );
+}
+
+/** 데스크톱 통계 항목 */
+function DesktopStat({
+  label,
+  value,
+  tone,
+}: {
+  label: string;
+  value: string;
+  tone?: "ask" | "bid";
+}) {
+  return (
+    <div className="flex flex-col items-end">
+      <span className="text-[11px] text-muted-foreground dark:text-brand-100/70">
+        {label}
+      </span>
+      <span
+        className={cn(
+          "text-sm font-semibold tabular-nums",
+          tone === "ask" && "text-red-500",
+          tone === "bid" && "text-blue-600 dark:text-blue-400",
+          !tone && "text-foreground dark:text-brand-50",
+        )}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}