stock 지표 수정 및 자산 분석 탭 항목 추가
This commit is contained in:
@@ -1855,3 +1855,90 @@
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
리스크 분산 분석
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.risk-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.risk-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.risk-card__title {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.risk-item {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.risk-item__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.risk-item__name {
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.risk-item__ratio {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.risk-item__ratio.is-ok { color: #34d399; }
|
||||
.risk-item__ratio.is-warn { color: #f97316; }
|
||||
.risk-item__ratio.is-danger { color: #ef4444; }
|
||||
|
||||
.risk-bar {
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.risk-bar__fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
|
||||
.risk-bar__fill.is-ok { background: #34d399; }
|
||||
.risk-bar__fill.is-warn { background: #f97316; }
|
||||
.risk-bar__fill.is-danger { background: #ef4444; }
|
||||
|
||||
.risk-warning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
background: rgba(249, 115, 22, 0.1);
|
||||
border: 1px solid rgba(249, 115, 22, 0.3);
|
||||
font-size: 12px;
|
||||
color: #fdba74;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.risk-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -170,6 +170,7 @@ const Stock = () => {
|
||||
}, [autoRefreshMs]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadSentiment = () => {
|
||||
getFearAndGreed()
|
||||
.then((data) => {
|
||||
const fg = data?.fear_and_greed ?? data;
|
||||
@@ -188,6 +189,10 @@ const Stock = () => {
|
||||
brent: b.status === 'fulfilled' ? b.value : null,
|
||||
});
|
||||
});
|
||||
};
|
||||
loadSentiment();
|
||||
const timer = window.setInterval(loadSentiment, 600000); // 10분마다 갱신
|
||||
return () => window.clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
const indexOrder = [
|
||||
|
||||
@@ -564,6 +564,43 @@ ${holdingsText}
|
||||
[portfolioHoldings]
|
||||
);
|
||||
|
||||
/* ── derived: 리스크 분산 분석 ────────────────────────────────── */
|
||||
|
||||
const brokerConcentration = useMemo(() => {
|
||||
const totalEval = toNumeric(portfolioSummary.total_eval);
|
||||
if (!totalEval || totalEval === 0) return [];
|
||||
return brokerGroups
|
||||
.map(([broker, items]) => {
|
||||
const { totalEval: brokerEval } = getBrokerSummary(items);
|
||||
const ratio = Math.round((brokerEval / totalEval) * 1000) / 10;
|
||||
return { broker, eval: brokerEval, ratio };
|
||||
})
|
||||
.sort((a, b) => b.ratio - a.ratio);
|
||||
}, [brokerGroups, portfolioSummary.total_eval]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const stockConcentration = useMemo(() => {
|
||||
const totalEval = toNumeric(portfolioSummary.total_eval);
|
||||
if (!totalEval || totalEval === 0) return [];
|
||||
return portfolioHoldings
|
||||
.map((item) => {
|
||||
const evalAmt = item.eval_amount != null
|
||||
? toNumeric(item.eval_amount)
|
||||
: (item.current_price != null && item.quantity != null)
|
||||
? toNumeric(item.current_price) * toNumeric(item.quantity)
|
||||
: null;
|
||||
if (!evalAmt) return null;
|
||||
return {
|
||||
name: item.name ?? item.ticker ?? 'N/A',
|
||||
ticker: item.ticker ?? '',
|
||||
eval: evalAmt,
|
||||
ratio: Math.round((evalAmt / totalEval) * 1000) / 10,
|
||||
};
|
||||
})
|
||||
.filter(Boolean)
|
||||
.sort((a, b) => b.ratio - a.ratio)
|
||||
.slice(0, 5);
|
||||
}, [portfolioHoldings, portfolioSummary.total_eval]);
|
||||
|
||||
const sortedHoldings = useMemo(() => {
|
||||
const getVal = (item) => {
|
||||
switch (reportSortField) {
|
||||
@@ -1476,6 +1513,84 @@ ${holdingsText}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* ── 리스크 분산 분석 ─────────────────────────────── */}
|
||||
{portfolioHoldings.length > 0 && portfolioSummary.total_eval != null && (
|
||||
<section className="stock-panel stock-panel--wide">
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">리스크 관리</p>
|
||||
<h3>분산 분석</h3>
|
||||
<p className="stock-panel__sub">증권사·종목 집중도를 확인합니다. 단일 비중 40% 초과 시 주의.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="risk-grid">
|
||||
{/* 증권사별 집중도 */}
|
||||
<div className="risk-card">
|
||||
<p className="risk-card__title">증권사별 집중도</p>
|
||||
{brokerConcentration.length === 0 ? (
|
||||
<p className="stock-empty" style={{ fontSize: 13 }}>평가금액 데이터 없음</p>
|
||||
) : (
|
||||
<>
|
||||
{brokerConcentration.some((b) => b.ratio > 40) && (
|
||||
<div className="risk-warning">
|
||||
⚠️ 단일 증권사 집중도가 40%를 초과합니다
|
||||
</div>
|
||||
)}
|
||||
{brokerConcentration.map(({ broker, eval: evalAmt, ratio }) => {
|
||||
const level = ratio >= 60 ? 'is-danger' : ratio >= 40 ? 'is-warn' : 'is-ok';
|
||||
return (
|
||||
<div key={broker} className="risk-item">
|
||||
<div className="risk-item__head">
|
||||
<span className="risk-item__name">{broker}</span>
|
||||
<span className={`risk-item__ratio ${level}`}>{ratio.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div className="risk-bar">
|
||||
<div className={`risk-bar__fill ${level}`} style={{ width: `${Math.min(ratio, 100)}%` }} />
|
||||
</div>
|
||||
<span style={{ fontSize: 11, color: 'var(--muted)' }}>{formatNumber(evalAmt)}원</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* 종목별 집중도 */}
|
||||
<div className="risk-card">
|
||||
<p className="risk-card__title">상위 5 종목 집중도</p>
|
||||
{stockConcentration.length === 0 ? (
|
||||
<p className="stock-empty" style={{ fontSize: 13 }}>현재가 데이터 없음</p>
|
||||
) : (
|
||||
<>
|
||||
{stockConcentration.some((s) => s.ratio > 40) && (
|
||||
<div className="risk-warning">
|
||||
⚠️ 단일 종목 집중도가 40%를 초과합니다
|
||||
</div>
|
||||
)}
|
||||
{stockConcentration.map(({ name, ticker, eval: evalAmt, ratio }) => {
|
||||
const level = ratio >= 60 ? 'is-danger' : ratio >= 40 ? 'is-warn' : 'is-ok';
|
||||
return (
|
||||
<div key={ticker || name} className="risk-item">
|
||||
<div className="risk-item__head">
|
||||
<span className="risk-item__name">{name}</span>
|
||||
<span className={`risk-item__ratio ${level}`}>{ratio.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div className="risk-bar">
|
||||
<div className={`risk-bar__fill ${level}`} style={{ width: `${Math.min(ratio, 100)}%` }} />
|
||||
</div>
|
||||
<span style={{ fontSize: 11, color: 'var(--muted)' }}>
|
||||
{ticker && <span style={{ marginRight: 6 }}>{ticker}</span>}
|
||||
{formatNumber(evalAmt)}원
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* ── 수익률 랭킹 테이블 ─────────────────────────── */}
|
||||
{portfolioHoldings.length > 0 && (
|
||||
<section className="stock-panel stock-panel--wide">
|
||||
@@ -1483,7 +1598,7 @@ ${holdingsText}
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">수익률 랭킹</p>
|
||||
<h3>종목별 상세 현황</h3>
|
||||
<p className="stock-panel__sub">헤더 클릭으로 정렬</p>
|
||||
<p className="stock-panel__sub">헤더 클릭으로 정렬 · 비중은 총 평가금액 대비</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="report-table-wrapper">
|
||||
@@ -1506,6 +1621,7 @@ ${holdingsText}
|
||||
</span>
|
||||
</th>
|
||||
))}
|
||||
<th style={{ cursor: 'default' }}>비중</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -1517,6 +1633,10 @@ ${holdingsText}
|
||||
: item.current_price != null
|
||||
? item.current_price * item.quantity
|
||||
: null;
|
||||
const totalEval = toNumeric(portfolioSummary.total_eval);
|
||||
const weight = evalAmt != null && totalEval
|
||||
? Math.round((evalAmt / totalEval) * 1000) / 10
|
||||
: null;
|
||||
return (
|
||||
<tr key={item.id}>
|
||||
<td>
|
||||
@@ -1543,6 +1663,9 @@ ${holdingsText}
|
||||
<td className="report-td-muted">
|
||||
{evalAmt != null ? formatNumber(evalAmt) : '-'}
|
||||
</td>
|
||||
<td className="report-td-muted">
|
||||
{weight != null ? `${weight.toFixed(1)}%` : '-'}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -38,21 +38,36 @@ export default defineConfig({
|
||||
secure: true,
|
||||
rewrite: () => '/v8/finance/chart/%5EVIX?interval=1d&range=1d',
|
||||
},
|
||||
// 미국 10년물 국채 금리 (^TNX)
|
||||
// 미국 10년물 국채 금리 (^TNX) — Yahoo Finance
|
||||
// 프로덕션 nginx 설정 필요:
|
||||
// location /ext/treasury {
|
||||
// proxy_pass https://query1.finance.yahoo.com/v8/finance/chart/%5ETNX?interval=1d&range=1d;
|
||||
// proxy_set_header Host query1.finance.yahoo.com;
|
||||
// }
|
||||
'/ext/treasury': {
|
||||
target: 'https://query1.finance.yahoo.com',
|
||||
changeOrigin: true,
|
||||
secure: true,
|
||||
rewrite: () => '/v8/finance/chart/%5ETNX?interval=1d&range=1d',
|
||||
},
|
||||
// WTI 원유 선물 (CL=F)
|
||||
// WTI 원유 선물 (CL=F) — Yahoo Finance
|
||||
// 프로덕션 nginx 설정 필요:
|
||||
// location /ext/wti {
|
||||
// proxy_pass https://query1.finance.yahoo.com/v8/finance/chart/CL%3DF?interval=1d&range=1d;
|
||||
// proxy_set_header Host query1.finance.yahoo.com;
|
||||
// }
|
||||
'/ext/wti': {
|
||||
target: 'https://query1.finance.yahoo.com',
|
||||
changeOrigin: true,
|
||||
secure: true,
|
||||
rewrite: () => '/v8/finance/chart/CL%3DF?interval=1d&range=1d',
|
||||
},
|
||||
// Brent 원유 선물 (BZ=F)
|
||||
// Brent 원유 선물 (BZ=F) — Yahoo Finance
|
||||
// 프로덕션 nginx 설정 필요:
|
||||
// location /ext/brent {
|
||||
// proxy_pass https://query1.finance.yahoo.com/v8/finance/chart/BZ%3DF?interval=1d&range=1d;
|
||||
// proxy_set_header Host query1.finance.yahoo.com;
|
||||
// }
|
||||
'/ext/brent': {
|
||||
target: 'https://query1.finance.yahoo.com',
|
||||
changeOrigin: true,
|
||||
|
||||
Reference in New Issue
Block a user