대시보드 중간 커밋

features/dashboard/components/header/StockHeader.tsx

@@ -0,0 +1,71 @@
+// import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { DashboardStockItem } from "@/features/dashboard/types/dashboard.types";
+import { cn } from "@/lib/utils";
+
+interface StockHeaderProps {
+  stock: DashboardStockItem;
+  price: string;
+  change: string;
+  changeRate: string;
+  high?: string;
+  low?: string;
+  volume?: string;
+}
+
+export function StockHeader({
+  stock,
+  price,
+  change,
+  changeRate,
+  high,
+  low,
+  volume,
+}: StockHeaderProps) {
+  const isRise = changeRate.startsWith("+") || parseFloat(changeRate) > 0;
+  const isFall = changeRate.startsWith("-") || parseFloat(changeRate) < 0;
+  const colorClass = isRise
+    ? "text-red-500"
+    : isFall
+      ? "text-blue-500"
+      : "text-foreground";
+
+  return (
+    <div className="flex items-center justify-between px-4 py-3">
+      {/* Left: Stock Info */}
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <h1 className="text-xl font-bold">{stock.name}</h1>
+          <span className="text-sm text-muted-foreground">
+            {stock.symbol}/{stock.market}
+          </span>
+        </div>
+
+        <Separator orientation="vertical" className="h-6" />
+
+        <div className={cn("flex items-end gap-2", colorClass)}>
+          <span className="text-2xl font-bold tracking-tight">{price}</span>
+          <span className="text-sm font-medium mb-1">
+            {changeRate}% <span className="text-xs ml-1">{change}</span>
+          </span>
+        </div>
+      </div>
+
+      {/* Right: 24h Stats */}
+      <div className="hidden md:flex items-center gap-6 text-sm">
+        <div className="flex flex-col items-end">
+          <span className="text-muted-foreground text-xs">고가</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">저가</span>
+          <span className="font-medium text-blue-500">{low || "--"}</span>
+        </div>
+        <div className="flex flex-col items-end">
+          <span className="text-muted-foreground text-xs">거래량(24H)</span>
+          <span className="font-medium">{volume || "--"}</span>
+        </div>
+      </div>
+    </div>
+  );
+}