From d38ee553c3f5b58fe1f543e97831dcb66089cca4 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Wed, 6 May 2026 03:54:20 +0900
Subject: [PATCH] =?UTF-8?q?fix(stock):=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?=
 =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EC=B9=B4=EB=93=9C=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=20=EA=B8=88=EC=95=A1=20=EC=A4=84=EB=B0=94=EA=BF=88=20?=
 =?UTF-8?q?=EB=B0=A9=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

천만원 단위 이상에서 '원'이 다음 줄로 넘어가던 문제 해결.
값 길이별 폰트 단계 축소(is-fit-sm/xs) + nowrap 적용.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/pages/stock/Stock.css                   | 19 +++++++
 src/pages/stock/components/PortfolioTab.jsx | 60 +++++++++++----------
 src/pages/stock/stockUtils.js               |  7 +++
 3 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/src/pages/stock/Stock.css b/src/pages/stock/Stock.css
index 83fb872..76e4afe 100644
--- a/src/pages/stock/Stock.css
+++ b/src/pages/stock/Stock.css
@@ -833,6 +833,17 @@
 .pf-total-summary__card strong {
     font-size: 16px;
     color: var(--text);
+    white-space: nowrap;
+}
+
+.pf-total-summary__card strong.is-fit-sm {
+    font-size: 13px;
+    letter-spacing: -0.01em;
+}
+
+.pf-total-summary__card strong.is-fit-xs {
+    font-size: 11px;
+    letter-spacing: -0.02em;
 }
 
 .pf-item-actions {
@@ -955,6 +966,14 @@
     .pf-total-summary__card strong {
         font-size: 14px;
     }
+
+    .pf-total-summary__card strong.is-fit-sm {
+        font-size: 12px;
+    }
+
+    .pf-total-summary__card strong.is-fit-xs {
+        font-size: 10px;
+    }
 }
 
 /* ── Cash Panel (예수금) ─────────────────────────────────────────── */
diff --git a/src/pages/stock/components/PortfolioTab.jsx b/src/pages/stock/components/PortfolioTab.jsx
index b1692b4..43c016e 100644
--- a/src/pages/stock/components/PortfolioTab.jsx
+++ b/src/pages/stock/components/PortfolioTab.jsx
@@ -4,7 +4,7 @@ import {
     ResponsiveContainer, AreaChart, Area, XAxis, YAxis,
     Tooltip as ChartTooltip,
 } from 'recharts';
-import { formatNumber, formatPercent, toNumeric, profitColorClass } from '../stockUtils';
+import { formatNumber, formatPercent, toNumeric, profitColorClass, numFitClass } from '../stockUtils';
 
 const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
     <>
@@ -140,32 +140,38 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                         { label: '총 평가', value: pf.portfolioSummary.total_eval },
                         { label: '총 손익', value: pf.portfolioSummary.total_profit, isProfit: true },
                         { label: '수익률', value: pf.portfolioSummary.total_profit_rate, isRate: true },
-                    ].map((s) => (
-                        <div key={s.label} className="pf-total-summary__card">
-                            <span>{s.label}</span>
-                            <strong
-                                className={
-                                    s.isProfit || s.isRate
-                                        ? `stock-profit ${profitColorClass(toNumeric(s.value))}`
-                                        : ''
-                                }
-                            >
-                                {s.isRate ? formatPercent(s.value) : formatNumber(s.value)}
-                            </strong>
-                        </div>
-                    ))}
-                    {pf.totalCash != null && (
-                        <div className="pf-total-summary__card is-cash">
-                            <span>예수금 합계</span>
-                            <strong>{formatNumber(pf.totalCash)}원</strong>
-                        </div>
-                    )}
-                    {pf.totalAssets != null && (
-                        <div className="pf-total-summary__card is-assets">
-                            <span>총 자산</span>
-                            <strong>{formatNumber(pf.totalAssets)}원</strong>
-                        </div>
-                    )}
+                    ].map((s) => {
+                        const display = s.isRate ? formatPercent(s.value) : formatNumber(s.value);
+                        const profitCls = s.isProfit || s.isRate
+                            ? `stock-profit ${profitColorClass(toNumeric(s.value))}`
+                            : '';
+                        return (
+                            <div key={s.label} className="pf-total-summary__card">
+                                <span>{s.label}</span>
+                                <strong className={`${profitCls} ${numFitClass(display)}`.trim()}>
+                                    {display}
+                                </strong>
+                            </div>
+                        );
+                    })}
+                    {pf.totalCash != null && (() => {
+                        const display = `${formatNumber(pf.totalCash)}원`;
+                        return (
+                            <div className="pf-total-summary__card is-cash">
+                                <span>예수금 합계</span>
+                                <strong className={numFitClass(display)}>{display}</strong>
+                            </div>
+                        );
+                    })()}
+                    {pf.totalAssets != null && (() => {
+                        const display = `${formatNumber(pf.totalAssets)}원`;
+                        return (
+                            <div className="pf-total-summary__card is-assets">
+                                <span>총 자산</span>
+                                <strong className={numFitClass(display)}>{display}</strong>
+                            </div>
+                        );
+                    })()}
                 </div>
             )}
 
diff --git a/src/pages/stock/stockUtils.js b/src/pages/stock/stockUtils.js
index 10e0caa..15ebba7 100644
--- a/src/pages/stock/stockUtils.js
+++ b/src/pages/stock/stockUtils.js
@@ -71,6 +71,13 @@ export const profitColorClass = (numericValue) => {
     return '';
 };
 
+export const numFitClass = (text) => {
+    const len = String(text ?? '').length;
+    if (len >= 13) return 'is-fit-xs';
+    if (len >= 10) return 'is-fit-sm';
+    return '';
+};
+
 export const getVixLabel = (vix) => {
     if (vix < 12) return '극히 낮음 (안일 주의)';
     if (vix < 20) return '정상 (안정적)';