임시커밋

features/trade/components/details/StockPriceBadge.tsx

@@ -0,0 +1,48 @@
+import { TrendingDown, TrendingUp } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const PRICE_FORMATTER = new Intl.NumberFormat("ko-KR");
+function formatPrice(value: number) {
+  return `${PRICE_FORMATTER.format(value)}원`;
+}
+
+interface StockPriceBadgeProps {
+  currentPrice: number;
+  change: number;
+  changeRate: number;
+}
+
+export function StockPriceBadge({
+  currentPrice,
+  change,
+  changeRate,
+}: StockPriceBadgeProps) {
+  const isPositive = change >= 0;
+  const ChangeIcon = isPositive ? TrendingUp : TrendingDown;
+  const changeColor = isPositive ? "text-red-500" : "text-brand-600";
+  const changeSign = isPositive ? "+" : "";
+
+  return (
+    <div className="flex items-baseline gap-2">
+      <span className={cn("text-3xl font-bold", changeColor)}>
+        {formatPrice(currentPrice)}
+      </span>
+      <div
+        className={cn(
+          "flex items-center gap-1 text-sm font-medium",
+          changeColor,
+        )}
+      >
+        <ChangeIcon className="h-4 w-4" />
+        <span>
+          {changeSign}
+          {PRICE_FORMATTER.format(change)}원
+        </span>
+        <span>
+          ({changeSign}
+          {changeRate.toFixed(2)}%)
+        </span>
+      </div>
+    </div>
+  );
+}