stock 지표 수정 및 자산 분석 탭 항목 추가

2026-03-05 03:12:25 +09:00
parent c28bd9368c
commit fa696b0c90
4 changed files with 251 additions and 21 deletions
--- a/src/pages/stock/Stock.css
+++ b/src/pages/stock/Stock.css
@@ -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;
+    }
+}
--- a/src/pages/stock/Stock.jsx
+++ b/src/pages/stock/Stock.jsx
@@ -170,24 +170,29 @@ const Stock = () => {
    }, [autoRefreshMs]);

    useEffect(() => {
-        getFearAndGreed()
-            .then((data) => {
-                const fg = data?.fear_and_greed ?? data;
-                const score = typeof fg?.score === 'number' ? fg.score : parseFloat(fg?.score);
-                if (!isNaN(score)) {
-                    setFgData({ score, timestamp: fg?.timestamp ?? null });
-                }
-            })
-            .catch(() => { });
-        getVix().then(setVixData).catch(() => { });
-        Promise.allSettled([getTreasury10Y(), getWTI(), getBrent()])
-            .then(([t, w, b]) => {
-                setMacroData({
-                    treasury: t.status === 'fulfilled' ? t.value : null,
-                    wti: w.status === 'fulfilled' ? w.value : null,
-                    brent: b.status === 'fulfilled' ? b.value : null,
+        const loadSentiment = () => {
+            getFearAndGreed()
+                .then((data) => {
+                    const fg = data?.fear_and_greed ?? data;
+                    const score = typeof fg?.score === 'number' ? fg.score : parseFloat(fg?.score);
+                    if (!isNaN(score)) {
+                        setFgData({ score, timestamp: fg?.timestamp ?? null });
+                    }
+                })
+                .catch(() => { });
+            getVix().then(setVixData).catch(() => { });
+            Promise.allSettled([getTreasury10Y(), getWTI(), getBrent()])
+                .then(([t, w, b]) => {
+                    setMacroData({
+                        treasury: t.status === 'fulfilled' ? t.value : null,
+                        wti: w.status === 'fulfilled' ? w.value : null,
+                        brent: b.status === 'fulfilled' ? b.value : null,
+                    });
                });
-            });
+        };
+        loadSentiment();
+        const timer = window.setInterval(loadSentiment, 600000); // 10분마다 갱신
+        return () => window.clearInterval(timer);
    }, []);

    const indexOrder = [
--- a/src/pages/stock/StockTrade.jsx
+++ b/src/pages/stock/StockTrade.jsx
@@ -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>
                                            );
                                        })}
--- a/vite.config.js
+++ b/vite.config.js
@@ -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,