aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

대시보드 화면 레이아웃 수정

Browse Source
This commit is contained in:
Macbook
2026-06-03 14:21:29 +09:00
parent 4dc7962a2f
commit 3e17d6cfb8
3 changed files with 415 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/dashboardCommand.css
+122 -36
View File
@@ -105,9 +105,10 @@
min-height: 0;
display: grid;
grid-template-columns: minmax(220px, 24%) minmax(0, 1fr) minmax(240px, 26%);
gap: 10px;
padding: 10px 12px 12px;
gap: 12px;
padding: 12px 14px 14px;
overflow: hidden;
align-items: stretch;
}
.gc-dash-col {
@@ -121,11 +122,15 @@
.gc-dash-card {
flex-shrink: 0;
display: flex;
flex-direction: column;
min-width: 0;
border: 1px solid color-mix(in srgb, #22d3ee 18%, var(--se-border));
border-radius: 12px;
border-radius: 10px;
background: color-mix(in srgb, var(--se-bg-elevated) 92%, #0a1628);
padding: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 color-mix(in srgb, #22d3ee 6%, transparent);
padding: 0;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 color-mix(in srgb, #22d3ee 6%, transparent);
}
.gc-dash-card--glow {
@@ -139,11 +144,11 @@
.gc-dash-card--wide { /* grid child */ }
.gc-dash-card--chart { padding: 8px 10px 4px; }
.gc-dash-card--chart .gc-dash-card-inner { padding: 8px 12px 6px; }
.gc-dash-card--chart-sm { padding: 6px 8px 2px; }
.gc-dash-card--chart-sm .gc-dash-card-inner { padding: 6px 12px 4px; }
.gc-dash-card--compact { padding: 10px; }
.gc-dash-card--compact .gc-dash-card-inner { padding: 10px 12px; }
.gc-dash-card--flex {
flex: 1;
@@ -153,12 +158,38 @@
}
.gc-dash-card-title {
margin: 0 0 10px;
flex-shrink: 0;
margin: 0;
padding: 9px 12px 8px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--se-gold, #e6c200);
text-transform: uppercase;
border-bottom: 1px solid color-mix(in srgb, var(--se-border) 80%, transparent);
background: color-mix(in srgb, var(--se-bg) 40%, transparent);
}
/* 카드 본문 — 패딩·정렬 통일 */
.gc-dash-card-inner {
flex: 1;
min-height: 0;
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 0;
}
.gc-dash-card-inner--center {
align-items: center;
justify-content: center;
text-align: center;
}
.gc-dash-card-inner--flex {
flex: 1;
min-height: 0;
overflow: hidden;
}
/* ── Portfolio KPI ── */
@@ -167,11 +198,16 @@
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 10px;
margin-bottom: 8px;
}
.gc-dash-kpi-block {
padding: 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
min-height: 72px;
padding: 10px 10px 8px;
border-radius: 8px;
border: 1px solid var(--se-border);
background: color-mix(in srgb, var(--se-bg) 60%, transparent);
@@ -181,7 +217,8 @@
display: block;
font-size: 0.62rem;
color: var(--se-text-muted);
margin-bottom: 4px;
margin-bottom: 6px;
line-height: 1.2;
}
.gc-dash-kpi-val {
@@ -189,13 +226,17 @@
font-size: 1rem;
font-weight: 800;
color: var(--se-text);
line-height: 1.15;
letter-spacing: -0.02em;
}
.gc-dash-kpi-sub {
display: block;
font-size: 0.68rem;
margin-top: 2px;
margin-top: auto;
padding-top: 4px;
color: var(--se-text-muted);
line-height: 1.2;
}
.gc-dash-kpi-sub.up { color: #34d399; }
@@ -208,19 +249,30 @@
}
.gc-dash-kv li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 5px 0;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding: 6px 0;
font-size: 0.72rem;
border-bottom: 1px solid color-mix(in srgb, var(--se-border) 60%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--se-border) 50%, transparent);
min-height: 28px;
}
.gc-dash-kv li:last-child { border-bottom: none; }
.gc-dash-kv span { color: var(--se-text-muted); }
.gc-dash-kv span {
color: var(--se-text-muted);
text-align: left;
}
.gc-dash-kv strong { color: var(--se-text); font-weight: 600; }
.gc-dash-kv strong {
color: var(--se-text);
font-weight: 600;
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ── Traffic light ── */
@@ -325,9 +377,10 @@
}
.gc-seg-bar-head {
display: flex;
justify-content: space-between;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
}
@@ -340,6 +393,9 @@
.gc-seg-bar-val {
font-size: 0.62rem;
color: var(--se-text-muted);
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.gc-seg-bar-track {
@@ -383,7 +439,8 @@
.gc-gauge-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
gap: 10px 8px;
align-items: start;
}
.gc-gauge {
@@ -420,14 +477,18 @@
.gc-proc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
gap: 8px;
align-items: stretch;
}
.gc-proc {
display: flex;
flex-direction: column;
min-height: 100%;
border: 1px solid var(--se-border);
border-radius: 8px;
padding: 10px;
padding: 10px 10px 8px;
background: color-mix(in srgb, var(--se-bg) 70%, transparent);
}
@@ -475,13 +536,30 @@
}
.gc-proc-metrics li {
display: flex;
justify-content: space-between;
padding: 2px 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: baseline;
padding: 3px 0;
color: var(--se-text-muted);
border-bottom: 1px solid color-mix(in srgb, var(--se-border) 35%, transparent);
}
.gc-proc-metrics strong { color: var(--se-text); font-weight: 500; }
.gc-proc-metrics li:last-child { border-bottom: none; }
.gc-proc-metrics span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gc-proc-metrics strong {
color: var(--se-text);
font-weight: 500;
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ── Signal list ── */
@@ -496,28 +574,33 @@
.gc-signal-item {
display: grid;
grid-template-columns: 20px 1fr auto;
gap: 6px;
grid-template-columns: 22px minmax(0, 1fr) 42px;
gap: 8px;
align-items: center;
padding: 7px 6px;
padding: 8px 4px;
border-bottom: 1px solid color-mix(in srgb, var(--se-border) 50%, transparent);
font-size: 0.68rem;
}
.gc-signal-item:nth-child(even) {
background: color-mix(in srgb, var(--se-bg) 35%, transparent);
}
.gc-signal-item--buy .gc-signal-arrow { color: var(--gc-trade-buy); }
.gc-signal-item--sell .gc-signal-arrow { color: var(--gc-trade-sell); }
.gc-signal-main {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
align-items: baseline;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 6px 8px;
align-items: center;
background: none;
border: none;
padding: 0;
color: var(--se-text);
cursor: pointer;
text-align: left;
min-width: 0;
}
.gc-signal-main strong {
@@ -533,6 +616,9 @@
.gc-signal-time {
font-size: 0.58rem;
color: var(--se-text-dim);
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.gc-dash-muted {