gahusb/web-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(stock): 포트폴리오 카드 모바일 금액 줄바꿈 방지

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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-05-06 03:54:20 +09:00
parent 4acdc451c0
commit d38ee553c3
3 changed files with 59 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/pages/stock/components/PortfolioTab.jsx
View File

@@ -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>
)}