임시커밋

features/trade/components/header/StockHeader.tsx

@@ -0,0 +1,89 @@
+// import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { DashboardStockItem } from "@/features/trade/types/trade.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-600 dark:text-blue-400"
+      : "text-foreground";
+
+  return (
+    <div className="bg-white px-3 py-2 dark:bg-brand-900/22 sm:px-4 sm:py-3">
+      {/* ========== STOCK SUMMARY ========== */}
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h1 className="truncate text-lg font-bold leading-tight text-foreground dark:text-brand-50 sm:text-xl">
+            {stock.name}
+          </h1>
+          <span className="mt-0.5 block text-xs text-muted-foreground dark:text-brand-100/70 sm:text-sm">
+            {stock.symbol}/{stock.market}
+          </span>
+        </div>
+
+        <div className={cn("shrink-0 text-right", colorClass)}>
+          <span className="block text-2xl font-bold tracking-tight">{price}</span>
+          <span className="text-xs font-medium sm:text-sm">
+            {changeRate}% <span className="ml-1 text-[11px] sm:text-xs">{change}</span>
+          </span>
+        </div>
+      </div>
+
+      {/* ========== STATS ========== */}
+      <div className="mt-2 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>
+      </div>
+
+      <Separator className="mt-2 md:hidden" />
+
+      {/* ========== DESKTOP STATS ========== */}
+      <div className="hidden items-center justify-end gap-6 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>
+    </div>
+  );
+}