diff --git a/src/pages/stock/Stock.css b/src/pages/stock/Stock.css
index 3548223..5a0d312 100644
--- a/src/pages/stock/Stock.css
+++ b/src/pages/stock/Stock.css
@@ -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,49 +593,59 @@
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;
+ }
+
+ .stock-holdings__name {
+ font-size: 14px;
}
}
-@media (max-width: 520px) {
+@media (max-width: 420px) {
+ .stock-panel {
+ padding: 10px;
+ border-radius: 12px;
+ }
+
+ .stock-holdings__item {
+ padding: 10px;
+ gap: 6px 8px;
+ }
+
.stock-holdings__metric {
- grid-template-columns: minmax(0, 1fr);
+ padding: 3px 8px;
+ }
+
+ .stock-holdings__metric span {
+ font-size: 9px;
}
.stock-holdings__metric strong {
- font-size: 14px;
+ font-size: 12px;
}
}
@@ -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;
}
}
\ No newline at end of file
diff --git a/src/pages/stock/StockTrade.jsx b/src/pages/stock/StockTrade.jsx
index 6982a10..a8db1d2 100644
--- a/src/pages/stock/StockTrade.jsx
+++ b/src/pages/stock/StockTrade.jsx
@@ -742,6 +742,14 @@ const StockTrade = () => {
: '조회 실패'}
+
+ 평가금액
+
+ {item.current_price != null && item.quantity != null
+ ? formatNumber(item.current_price * item.quantity)
+ : '-'}
+
+
수익률
{
{formatNumber(getCurrentPrice(item))}
+
+ 평가금액
+
+ {getCurrentPrice(item) != null && getQty(item) != null
+ ? formatNumber(toNumeric(getCurrentPrice(item)) * toNumeric(getQty(item)))
+ : '-'}
+
+
수익률