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) => ( -
- {s.label} - - {s.isRate ? formatPercent(s.value) : formatNumber(s.value)} - -
- ))} - {pf.totalCash != null && ( -
- 예수금 합계 - {formatNumber(pf.totalCash)}원 -
- )} - {pf.totalAssets != null && ( -
- 총 자산 - {formatNumber(pf.totalAssets)}원 -
- )} + ].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 ( +
+ {s.label} + + {display} + +
+ ); + })} + {pf.totalCash != null && (() => { + const display = `${formatNumber(pf.totalCash)}원`; + return ( +
+ 예수금 합계 + {display} +
+ ); + })()} + {pf.totalAssets != null && (() => { + const display = `${formatNumber(pf.totalAssets)}원`; + return ( +
+ 총 자산 + {display} +
+ ); + })()} )} 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 '정상 (안정적)';