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

주식 보유 카드 UI 수정 & 평가 금액 추가

Browse Source
This commit is contained in:
gahusb
2026-02-26 01:54:09 +09:00
parent 3e9112c4c7
commit 840b0a5300
2 changed files with 111 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/pages/stock/Stock.css
View File

@@ -359,20 +359,23 @@
}
.stock-balance__summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.stock-balance__card {
border: 1px solid var(--line);
border-radius: 14px;
padding: 10px;
display: grid;
gap: 6px;
padding: 10px 14px;
display: flex;
flex-direction: column;
gap: 4px;
background: rgba(0, 0, 0, 0.2);
font-size: 12px;
color: var(--muted);
flex: 1 1 120px;
min-width: 100px;
}
.stock-balance__card strong {
@@ -388,16 +391,22 @@
.stock-holdings__item {
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px;
display: grid;
grid-template-columns: minmax(0, 1.2fr) repeat(5, minmax(0, 0.6fr));
gap: 10px;
padding: 10px 14px;
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
font-size: 13px;
color: var(--muted);
background: rgba(255, 255, 255, 0.02);
align-items: center;
}
/* 종목명 영역: 데스크톱에서는 넓게, 모바일에서 full width */
.stock-holdings__item>div:first-child {
flex: 1 1 140px;
min-width: 100px;
}
.stock-holdings__name {
margin: 0;
font-weight: 600;
@@ -410,19 +419,23 @@
}
.stock-holdings__metric {
display: grid;
gap: 4px;
justify-items: start;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 70px;
flex: 0 1 auto;
}
.stock-holdings__metric span {
font-size: 11px;
color: var(--muted);
white-space: nowrap;
}
.stock-holdings__metric strong {
font-size: 14px;
color: var(--text);
white-space: nowrap;
}
.stock-profit {
@@ -539,12 +552,13 @@
@media (max-width: 768px) {
.stock {
gap: 20px;
gap: 16px;
}
.stock-panel {
padding: 16px;
gap: 12px;
padding: 14px;
gap: 10px;
border-radius: 16px;
}
.stock-filter-row {
@@ -553,7 +567,7 @@
}
.stock-header h1 {
font-size: 28px;
font-size: 26px;
}
.stock-actions {
@@ -567,7 +581,7 @@
}
.stock-card {
padding: 16px;
padding: 14px;
}
.stock-status>div {
@@ -579,52 +593,62 @@
word-break: break-word;
}
.stock-balance__summary {
grid-template-columns: 1fr;
}
.stock-holdings__item {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.stock-holdings__name {
font-size: 15px;
/* 종목명: 모바일에서 full width로 한 줄 차지 */
.stock-holdings__item>div:first-child {
flex: 1 1 100%;
}
/* Metric 칩: 인라인으로 나란히, 공간 부족 시 줄바꿈 */
.stock-holdings__metric {
grid-template-columns: repeat(2, 1fr);
align-items: center;
justify-items: start;
gap: 8px 16px;
}
/* Make the last item span full width if it's odd */
.stock-holdings__metric>*:last-child:nth-child(odd) {
grid-column: 1 / -1;
flex-direction: row;
align-items: baseline;
gap: 4px;
min-width: 0;
flex: 0 0 auto;
padding: 4px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.stock-holdings__metric span {
font-size: 11px;
font-size: 10px;
}
.stock-holdings__metric strong {
font-size: 15px;
word-break: break-word;
}
font-size: 13px;
word-break: keep-all;
}
@media (max-width: 520px) {
.stock-holdings__metric {
grid-template-columns: minmax(0, 1fr);
}
.stock-holdings__metric strong {
.stock-holdings__name {
font-size: 14px;
}
}
@media (max-width: 420px) {
.stock-panel {
padding: 10px;
border-radius: 12px;
}
.stock-holdings__item {
padding: 10px;
gap: 6px 8px;
}
.stock-holdings__metric {
padding: 3px 8px;
}
.stock-holdings__metric span {
font-size: 9px;
}
.stock-holdings__metric strong {
font-size: 12px;
}
}
/* ── Main Tabs ─────────────────────────────────────────────────────── */
.stock-main-tabs {
@@ -775,20 +799,23 @@
}
.pf-total-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pf-total-summary__card {
border: 1px solid var(--line);
border-radius: 14px;
padding: 12px;
display: grid;
gap: 6px;
padding: 10px 14px;
display: flex;
flex-direction: column;
gap: 4px;
background: rgba(0, 0, 0, 0.2);
font-size: 12px;
color: var(--muted);
flex: 1 1 110px;
min-width: 90px;
}
.pf-total-summary__card strong {
@@ -796,8 +823,8 @@
color: var(--text);
}
.pf-item {
grid-template-columns: minmax(0, 1.2fr) repeat(5, minmax(0, 0.55fr)) auto;
.pf-item-actions {
margin-left: auto;
}
.pf-item-actions {
@@ -863,25 +890,32 @@
}
@media (max-width: 768px) {
.pf-item {
grid-template-columns: minmax(0, 1fr);
}
.pf-add-form {
grid-template-columns: 1fr;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.pf-edit-row {
grid-template-columns: 1fr;
}
.pf-total-summary {
grid-template-columns: repeat(2, 1fr);
.pf-item-actions {
flex: 0 0 auto;
margin-left: 0;
}
}
@media (max-width: 520px) {
.pf-total-summary {
grid-template-columns: 1fr;
@media (max-width: 420px) {
.pf-add-form {
grid-template-columns: 1fr 1fr;
}
.pf-total-summary__card {
padding: 8px 10px;
flex: 1 1 80px;
min-width: 70px;
}
.pf-total-summary__card strong {
font-size: 14px;
}
}

16
src/pages/stock/StockTrade.jsx
View File

@@ -742,6 +742,14 @@ const StockTrade = () => {
: '조회 실패'}
</strong>
</div>
<div className="stock-holdings__metric">
<span>평가금액</span>
<strong>
{item.current_price != null && item.quantity != null
? formatNumber(item.current_price * item.quantity)
: '-'}
</strong>
</div>
<div className="stock-holdings__metric">
<span>수익률</span>
<strong
@@ -904,6 +912,14 @@ const StockTrade = () => {
{formatNumber(getCurrentPrice(item))}
</strong>
</div>
<div className="stock-holdings__metric">
<span>평가금액</span>
<strong>
{getCurrentPrice(item) != null && getQty(item) != null
? formatNumber(toNumeric(getCurrentPrice(item)) * toNumeric(getQty(item)))
: '-'}
</strong>
</div>
<div className="stock-holdings__metric">
<span>수익률</span>
<strong