전체적인 리팩토링

features/dashboard/components/StockDetailPreview.tsx

@@ -57,7 +57,7 @@ export function StockDetailPreview({
   // [Step 1] 종목이 선택되지 않은 경우 초기 안내 화면 렌더링
   if (!holding) {
     return (
-      <Card>
+      <Card className="border-brand-200/70 bg-background/90 shadow-sm dark:border-brand-800/45">
         <CardHeader>
           <CardTitle className="flex items-center gap-2 text-base">
             <BarChartBig className="h-4 w-4 text-brand-600 dark:text-brand-400" />
@@ -86,7 +86,7 @@ export function StockDetailPreview({
       : 0;
 
   return (
-    <Card>
+    <Card className="border-brand-200/70 bg-background/90 shadow-sm dark:border-brand-800/45">
       {/* ========== 카드 헤더: 종목명 및 기본 정보 ========== */}
       <CardHeader className="pb-3">
         <CardTitle className="flex items-center gap-2 text-base">
@@ -131,6 +131,10 @@ export function StockDetailPreview({
             label="보유 수량"
             value={`${holding.quantity.toLocaleString("ko-KR")}주`}
           />
+          <Metric
+            label="매도가능 수량"
+            value={`${holding.sellableQuantity.toLocaleString("ko-KR")}주`}
+          />
           <Metric
             label="매입 평균가"
             value={`${formatCurrency(holding.averagePrice)}원`}
@@ -171,7 +175,7 @@ export function StockDetailPreview({
         </div>
 
         {/* ========== 추가 기능 예고 영역 (Placeholder) ========== */}
-        <div className="rounded-xl border border-dashed border-border/80 bg-muted/30 p-3">
+        <div className="rounded-xl border border-dashed border-brand-300/60 bg-brand-50/40 p-3 dark:border-brand-700/50 dark:bg-brand-900/20">
           <p className="flex items-center gap-1.5 text-sm font-medium text-foreground/80">
             <MousePointerClick className="h-4 w-4 text-brand-500" />
             빠른 주문(준비 중)