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

시장 주요 지표 참고 추가

Browse Source
This commit is contained in:
gahusb
2026-03-05 02:45:45 +09:00
parent ccc9f7c634
commit c28bd9368c
4 changed files with 372 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1570,6 +1570,14 @@
gap: 6px;
padding: 12px 0 8px;
text-align: center;
width: 100%;
}
.stock-vix__top {
display: flex;
align-items: center;
gap: 16px;
justify-content: center;
}
.stock-vix__score {
@@ -1586,17 +1594,70 @@
transition: color 0.4s ease;
}
.stock-vix__legend {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
justify-content: center;
margin-top: 10px;
font-size: 11px;
.stock-vix__change {
margin: 4px 0 0;
font-size: 12px;
color: var(--muted);
}
.stock-vix__legend span {
font-weight: 500;
.stock-vix__change.is-up { color: #f04452; }
.stock-vix__change.is-down { color: #3b82f6; }
/* VIX 구간별 설명 목록 */
.stock-vix__levels {
display: grid;
gap: 6px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--line);
width: 100%;
text-align: left;
}
.stock-vix__level {
padding: 8px 10px;
border-radius: 8px;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.02);
transition: background 0.2s ease, border-color 0.2s ease;
}
.stock-vix__level.is-current {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
.stock-vix__level-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.stock-vix__level-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.stock-vix__level-label {
font-size: 12px;
font-weight: 700;
}
.stock-vix__level-range {
font-size: 11px;
color: var(--muted);
margin-left: auto;
}
.stock-vix__level-desc {
margin: 0;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
padding-left: 16px;
}
/* ══════════════════════════════════════════════════════════════════
@@ -1679,4 +1740,118 @@
.stock-news-grid {
grid-template-columns: 1fr;
}
}
/* ══════════════════════════════════════════════════════════════════
매크로 지표 카드
══════════════════════════════════════════════════════════════════ */
.stock-macro-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.stock-macro-card {
border: 1px solid var(--line);
border-radius: 14px;
padding: 16px;
background: rgba(0, 0, 0, 0.2);
display: grid;
gap: 6px;
}
.stock-macro-card__title {
margin: 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.stock-macro-card__value {
font-size: 32px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.stock-macro-card__change {
margin: 0;
font-size: 12px;
color: var(--muted);
}
.stock-macro-card__change.is-up { color: #f04452; }
.stock-macro-card__change.is-down { color: #3b82f6; }
.stock-macro-card__desc {
margin: 6px 0 0;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
border-top: 1px solid var(--line);
padding-top: 8px;
}
/* ══════════════════════════════════════════════════════════════════
시장 건강 지표 (Placeholder)
══════════════════════════════════════════════════════════════════ */
.stock-health-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
}
.stock-placeholder-card {
border: 1px dashed var(--line);
border-radius: 14px;
padding: 16px;
background: rgba(0, 0, 0, 0.1);
display: grid;
gap: 8px;
opacity: 0.75;
}
.stock-placeholder-card__title {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.stock-placeholder-card__status {
font-size: 13px;
color: var(--muted);
}
.stock-placeholder-card__desc {
margin: 0;
font-size: 12px;
color: var(--muted);
line-height: 1.6;
}
.stock-placeholder-card__api {
font-size: 11px;
color: var(--muted);
opacity: 0.7;
font-family: monospace;
background: rgba(0, 0, 0, 0.2);
padding: 4px 8px;
border-radius: 6px;
border: 1px solid var(--line);
display: inline-block;
}
@media (max-width: 768px) {
.stock-macro-grid,
.stock-health-grid {
grid-template-columns: 1fr;
}
.stock-macro-card__value {
font-size: 26px;
}
}