gahusb
d1ecf13400
- Gemini Pro 기반 AI 어드바이저 탭 추가 (TAB_ADVISOR) - 보유 종목 현재가 + 뉴스 → 종목별 매도/매수/분할매도 지침 - 5분 캐시, 강제 새로고침 버튼 - 경량 마크다운 렌더러 (AdvisorMarkdown) - 실현손익 수수료 → 수수료 & 세금으로 레이블 변경 - 총 자산 추이 그래프: 0 데이터 제외 (장 미개장일 필터) - Todo 완료 패널 하단 이동 + 날짜 필터 추가 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2894 lines
154 KiB
JavaScript
2894 lines
154 KiB
JavaScript
import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import {
|
||
createTradeOrder,
|
||
getTradeBalance,
|
||
getPortfolio,
|
||
addPortfolio,
|
||
updatePortfolio,
|
||
deletePortfolio,
|
||
upsertCash,
|
||
deleteCash,
|
||
getFearAndGreed,
|
||
getVix,
|
||
getTreasury10Y,
|
||
getWTI,
|
||
getAssetHistory,
|
||
saveAssetSnapshot,
|
||
getSellHistory,
|
||
addSellHistory,
|
||
updateSellHistory,
|
||
deleteSellHistory,
|
||
getAiAnalysis,
|
||
} from '../../api';
|
||
import Loading from '../../components/Loading';
|
||
import './Stock.css';
|
||
import {
|
||
PieChart, Pie, Cell,
|
||
BarChart, Bar, XAxis, YAxis, CartesianGrid,
|
||
Tooltip as ChartTooltip, Legend, ResponsiveContainer,
|
||
AreaChart, Area,
|
||
} from 'recharts';
|
||
|
||
/* ── helpers ─────────────────────────────────────────────────────── */
|
||
|
||
const formatNumber = (value) => {
|
||
if (value === null || value === undefined || value === '') return '-';
|
||
const numeric = Number(value);
|
||
if (Number.isNaN(numeric)) return value;
|
||
return new Intl.NumberFormat('ko-KR').format(numeric);
|
||
};
|
||
|
||
const formatPercent = (value) => {
|
||
if (value === null || value === undefined || value === '') return '-';
|
||
if (typeof value === 'string' && value.includes('%')) return value;
|
||
const numeric = Number(value);
|
||
if (Number.isNaN(numeric)) return value;
|
||
return `${numeric >= 0 ? '+' : ''}${numeric.toFixed(2)}%`;
|
||
};
|
||
|
||
const pickFirst = (...values) =>
|
||
values.find((value) => value !== undefined && value !== null && value !== '');
|
||
|
||
const getQty = (item) =>
|
||
pickFirst(item?.qty, item?.quantity, item?.holding, item?.hold_qty);
|
||
|
||
const getBuyPrice = (item) =>
|
||
pickFirst(
|
||
item?.buy_price,
|
||
item?.avg_price,
|
||
item?.avg,
|
||
item?.purchase_price,
|
||
item?.buyPrice,
|
||
item?.price
|
||
);
|
||
|
||
const getCurrentPrice = (item) =>
|
||
pickFirst(
|
||
item?.current_price,
|
||
item?.current,
|
||
item?.cur_price,
|
||
item?.now_price,
|
||
item?.market_price
|
||
);
|
||
|
||
const getProfitRate = (item) =>
|
||
pickFirst(
|
||
item?.profit_rate,
|
||
item?.profitRate,
|
||
item?.profit_pct,
|
||
item?.profitPercent,
|
||
item?.pnl_rate,
|
||
item?.return_rate,
|
||
item?.yield
|
||
);
|
||
|
||
const getProfitLoss = (item) =>
|
||
pickFirst(item?.profit_loss, item?.pnl, item?.profitLoss);
|
||
|
||
const toNumeric = (value) => {
|
||
if (value === null || value === undefined || value === '') return null;
|
||
const numeric = Number(String(value).replace(/[^0-9.-]/g, ''));
|
||
return Number.isNaN(numeric) ? null : numeric;
|
||
};
|
||
|
||
/* ── AdvisorMarkdown — 경량 마크다운 렌더러 ──────────────────────── */
|
||
|
||
const AdvisorMarkdown = ({ text }) => {
|
||
if (!text) return null;
|
||
const lines = text.split('\n');
|
||
const elements = [];
|
||
let i = 0;
|
||
while (i < lines.length) {
|
||
const line = lines[i];
|
||
if (line.startsWith('### ')) {
|
||
elements.push(<h4 key={i} className="adv-md-h3">{line.slice(4)}</h4>);
|
||
} else if (line.startsWith('## ')) {
|
||
elements.push(<h3 key={i} className="adv-md-h2">{line.slice(3)}</h3>);
|
||
} else if (line.startsWith('---')) {
|
||
elements.push(<hr key={i} className="adv-md-hr" />);
|
||
} else if (line.trim() === '') {
|
||
elements.push(<div key={i} className="adv-md-gap" />);
|
||
} else {
|
||
// 인라인 마크다운: **bold**, *italic*, 🎯 등 이모지 보존
|
||
const rendered = line
|
||
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
||
.replace(/\*(.+?)\*/g, '<em>$1</em>')
|
||
.replace(/`(.+?)`/g, '<code>$1</code>');
|
||
elements.push(
|
||
<p key={i} className="adv-md-p" dangerouslySetInnerHTML={{ __html: rendered }} />
|
||
);
|
||
}
|
||
i++;
|
||
}
|
||
return <div className="adv-md">{elements}</div>;
|
||
};
|
||
|
||
/* ── Chart colors ──────────────────────────────────────────────── */
|
||
|
||
const CHART_COLORS = ['#818cf8', '#fbbf24', '#34d399', '#f472b6', '#fb923c', '#a78bfa', '#38bdf8', '#4ade80'];
|
||
|
||
const profitColorClass = (numericValue) => {
|
||
if (numericValue > 0) return 'is-up';
|
||
if (numericValue < 0) return 'is-down';
|
||
if (numericValue === 0) return 'is-flat';
|
||
return '';
|
||
};
|
||
|
||
const getVixLabel = (vix) => {
|
||
if (vix < 12) return '극히 낮음 (안일 주의)';
|
||
if (vix < 20) return '정상 (안정적)';
|
||
if (vix < 30) return '주의 (불확실성 증가)';
|
||
if (vix < 40) return '높음 (극도의 공포)';
|
||
return '극단 (패닉)';
|
||
};
|
||
|
||
const getFgLabel = (score) => {
|
||
if (score <= 25) return '극단적 공포';
|
||
if (score <= 45) return '공포';
|
||
if (score <= 55) return '중립';
|
||
if (score <= 75) return '탐욕';
|
||
return '극단적 탐욕';
|
||
};
|
||
|
||
/* ── empty portfolio form ────────────────────────────────────────── */
|
||
|
||
const emptyPortfolioForm = {
|
||
broker: '',
|
||
ticker: '',
|
||
name: '',
|
||
quantity: '',
|
||
avg_price: '',
|
||
};
|
||
|
||
/* ── empty sell-history form ─────────────────────────────────────── */
|
||
|
||
const toLocalDatetimeValue = (isoStr) => {
|
||
if (!isoStr) return '';
|
||
const d = new Date(isoStr);
|
||
const pad = (n) => String(n).padStart(2, '0');
|
||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||
};
|
||
|
||
const emptySellForm = () => ({
|
||
broker: '',
|
||
ticker: '',
|
||
name: '',
|
||
quantity: '',
|
||
avg_price: '',
|
||
sell_price: '',
|
||
commission: '',
|
||
sold_at: toLocalDatetimeValue(new Date().toISOString()),
|
||
});
|
||
|
||
/* ── TAB IDs ─────────────────────────────────────────────────────── */
|
||
|
||
const TAB_PORTFOLIO = 'portfolio';
|
||
const TAB_AI = 'ai';
|
||
const TAB_REPORT = 'report';
|
||
const TAB_ADVISOR = 'advisor';
|
||
|
||
/* ── component ───────────────────────────────────────────────────── */
|
||
|
||
const StockTrade = () => {
|
||
/* Active tab */
|
||
const [activeTab, setActiveTab] = useState(TAB_REPORT);
|
||
|
||
/* ────────────────────────────────────────────────────────────── */
|
||
/* 쟁승토리 계좌 (Portfolio) state */
|
||
/* ────────────────────────────────────────────────────────────── */
|
||
const [portfolio, setPortfolio] = useState(null);
|
||
const [portfolioLoading, setPortfolioLoading] = useState(false);
|
||
const [portfolioError, setPortfolioError] = useState('');
|
||
const [portfolioLoaded, setPortfolioLoaded] = useState(false);
|
||
|
||
/* Portfolio add form */
|
||
const [addForm, setAddForm] = useState({ ...emptyPortfolioForm });
|
||
const [addFormOpen, setAddFormOpen] = useState(false);
|
||
const [addLoading, setAddLoading] = useState(false);
|
||
const [addError, setAddError] = useState('');
|
||
|
||
/* Portfolio edit */
|
||
const [editingId, setEditingId] = useState(null);
|
||
const [editForm, setEditForm] = useState({});
|
||
const [editLoading, setEditLoading] = useState(false);
|
||
const editOrigRef = useRef({});
|
||
|
||
/* Portfolio delete */
|
||
const [deleteConfirmId, setDeleteConfirmId] = useState(null);
|
||
|
||
/* Portfolio sell */
|
||
const [sellConfirmId, setSellConfirmId] = useState(null);
|
||
const [sellLoading, setSellLoading] = useState(false);
|
||
|
||
/* 실현손익 내역 */
|
||
const [sellHistory, setSellHistory] = useState([]);
|
||
const [sellHistoryLoading, setSellHistoryLoading] = useState(false);
|
||
const [sellHistoryBroker, setSellHistoryBroker] = useState('ALL');
|
||
const [sellHistoryPeriod, setSellHistoryPeriod] = useState('3M');
|
||
|
||
/* 실현손익 드로어 */
|
||
const [sellDrawerOpen, setSellDrawerOpen] = useState(false);
|
||
|
||
/* 실현손익 수동 추가/수정 폼 */
|
||
const [sellFormOpen, setSellFormOpen] = useState(false);
|
||
const [sellEditId, setSellEditId] = useState(null); // null = 추가, number = 수정 중 id
|
||
const [sellForm, setSellForm] = useState(emptySellForm());
|
||
const [sellFormSaving, setSellFormSaving] = useState(false);
|
||
const [sellFormError, setSellFormError] = useState('');
|
||
|
||
/* AI 전문가 분석 (Gemini Pro Advisor) */
|
||
const [advisorData, setAdvisorData] = useState(null); // { analysis, generated_at, cached, holdings_count }
|
||
const [advisorLoading, setAdvisorLoading] = useState(false);
|
||
const [advisorError, setAdvisorError] = useState('');
|
||
|
||
/* Cash (예수금) form */
|
||
const [cashForm, setCashForm] = useState({ broker: '', cash: '' });
|
||
const [cashSaving, setCashSaving] = useState(false);
|
||
const [cashError, setCashError] = useState('');
|
||
|
||
/* Cash inline edit */
|
||
const [cashEditingBroker, setCashEditingBroker] = useState(null);
|
||
const [cashEditingValue, setCashEditingValue] = useState('');
|
||
const [cashEditSaving, setCashEditSaving] = useState(false);
|
||
|
||
/* ────────────────────────────────────────────────────────────── */
|
||
/* 자산 추이 state */
|
||
/* ────────────────────────────────────────────────────────────── */
|
||
const [assetHistory, setAssetHistory] = useState(null);
|
||
const [assetHistoryLoading, setAssetHistoryLoading] = useState(false);
|
||
const [assetHistoryDays, setAssetHistoryDays] = useState(30);
|
||
const [snapshotSaving, setSnapshotSaving] = useState(false);
|
||
|
||
/* ────────────────────────────────────────────────────────────── */
|
||
/* 리포트 탭 state */
|
||
/* ────────────────────────────────────────────────────────────── */
|
||
const [reportSortField, setReportSortField] = useState('profit_rate');
|
||
const [reportSortDir, setReportSortDir] = useState('desc');
|
||
|
||
/* AI Coach */
|
||
const [aiApiKey, setAiApiKey] = useState('');
|
||
const [aiModel, setAiModel] = useState('claude-haiku-4-5-20251001');
|
||
const [aiResult, setAiResult] = useState(null);
|
||
const [aiLoading, setAiLoading] = useState(false);
|
||
const [aiError, setAiError] = useState('');
|
||
const [marketCtx, setMarketCtx] = useState(null);
|
||
|
||
/* ────────────────────────────────────────────────────────────── */
|
||
/* AI 투자 (Balance) state */
|
||
/* ────────────────────────────────────────────────────────────── */
|
||
const [balance, setBalance] = useState(null);
|
||
const [balanceLoading, setBalanceLoading] = useState(false);
|
||
const [balanceError, setBalanceError] = useState('');
|
||
const [balanceLoaded, setBalanceLoaded] = useState(false);
|
||
|
||
/* Manual order state */
|
||
const [manualForm, setManualForm] = useState({
|
||
code: '',
|
||
qty: 1,
|
||
price: 0,
|
||
type: 'buy',
|
||
});
|
||
const [manualLoading, setManualLoading] = useState(false);
|
||
const [manualError, setManualError] = useState('');
|
||
const [manualResult, setManualResult] = useState(null);
|
||
const [kisModal, setKisModal] = useState('');
|
||
|
||
/* ── loaders ─────────────────────────────────────────────────── */
|
||
|
||
const loadPortfolio = useCallback(async () => {
|
||
setPortfolioLoading(true);
|
||
setPortfolioError('');
|
||
try {
|
||
const data = await getPortfolio();
|
||
setPortfolio(data);
|
||
setPortfolioLoaded(true);
|
||
} catch (err) {
|
||
setPortfolioError(err?.message ?? String(err));
|
||
} finally {
|
||
setPortfolioLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
const loadSellHistory = useCallback(async () => {
|
||
setSellHistoryLoading(true);
|
||
try {
|
||
const data = await getSellHistory();
|
||
setSellHistory(data?.records ?? (Array.isArray(data) ? data : []));
|
||
} catch {
|
||
/* 백엔드 미구현 시 빈 배열 유지 */
|
||
} finally {
|
||
setSellHistoryLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
const loadAdvisorAnalysis = useCallback(async (force = false) => {
|
||
setAdvisorLoading(true);
|
||
setAdvisorError('');
|
||
try {
|
||
const data = await getAiAnalysis(force);
|
||
if (data?.error) throw new Error(data.error);
|
||
setAdvisorData(data);
|
||
} catch (err) {
|
||
setAdvisorError(err?.message ?? '분석 중 오류가 발생했습니다.');
|
||
} finally {
|
||
setAdvisorLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
const loadBalance = useCallback(async () => {
|
||
setBalanceLoading(true);
|
||
setBalanceError('');
|
||
try {
|
||
const data = await getTradeBalance();
|
||
setBalance(data);
|
||
setBalanceLoaded(true);
|
||
} catch (err) {
|
||
setBalanceError(err?.message ?? String(err));
|
||
} finally {
|
||
setBalanceLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
const loadAssetHistory = useCallback(async (days) => {
|
||
setAssetHistoryLoading(true);
|
||
try {
|
||
const data = await getAssetHistory(days);
|
||
// 백엔드 응답 키: snapshots 또는 history 모두 허용
|
||
const raw = data?.snapshots ?? data?.history ?? (Array.isArray(data) ? data : []);
|
||
// 날짜 → total_assets 맵
|
||
const byDate = {};
|
||
for (const item of raw) {
|
||
byDate[item.date] = item.total_assets ?? 0;
|
||
}
|
||
// days > 0: 오늘 기준으로 days일치 전체 날짜 생성 후 없는 날은 0 채움
|
||
// days = 0(전체): 받은 데이터만 날짜순 정렬
|
||
const toLocalDate = (d) => {
|
||
const y = d.getFullYear();
|
||
const m = String(d.getMonth() + 1).padStart(2, '0');
|
||
const day = String(d.getDate()).padStart(2, '0');
|
||
return `${y}-${m}-${day}`;
|
||
};
|
||
let filled;
|
||
if (days > 0) {
|
||
const today = new Date();
|
||
filled = Array.from({ length: days }, (_, i) => {
|
||
const d = new Date(today);
|
||
d.setDate(today.getDate() - (days - 1 - i));
|
||
const dateStr = toLocalDate(d);
|
||
const val = byDate[dateStr];
|
||
return val > 0 ? { date: dateStr, total_assets: val } : null;
|
||
}).filter(Boolean);
|
||
} else {
|
||
filled = Object.entries(byDate)
|
||
.filter(([, total_assets]) => total_assets > 0)
|
||
.map(([date, total_assets]) => ({ date, total_assets }))
|
||
.sort((a, b) => a.date.localeCompare(b.date));
|
||
}
|
||
setAssetHistory(filled);
|
||
} catch {
|
||
setAssetHistory([]);
|
||
} finally {
|
||
setAssetHistoryLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
const handleSaveSnapshot = async () => {
|
||
setSnapshotSaving(true);
|
||
try {
|
||
await saveAssetSnapshot(totalAssets != null ? Number(totalAssets) : undefined);
|
||
await loadAssetHistory(assetHistoryDays);
|
||
} catch (err) {
|
||
alert('스냅샷 저장 실패: ' + (err?.message ?? String(err)));
|
||
} finally {
|
||
setSnapshotSaving(false);
|
||
}
|
||
};
|
||
|
||
/* Lazy load: 탭 전환 시 해당 API만 호출 */
|
||
useEffect(() => {
|
||
if (activeTab === TAB_PORTFOLIO && !portfolioLoaded) {
|
||
loadPortfolio();
|
||
loadSellHistory();
|
||
} else if (activeTab === TAB_AI && !balanceLoaded) {
|
||
loadBalance();
|
||
} else if (activeTab === TAB_REPORT && !portfolioLoaded) {
|
||
loadPortfolio();
|
||
} else if (activeTab === TAB_ADVISOR && !advisorData) {
|
||
loadAdvisorAnalysis();
|
||
}
|
||
}, [activeTab, portfolioLoaded, balanceLoaded, advisorData, loadPortfolio, loadBalance, loadSellHistory, loadAdvisorAnalysis]);
|
||
|
||
/* 자산 추이: 포트폴리오 탭 첫 진입 또는 기간 변경 시 로드 */
|
||
useEffect(() => {
|
||
if (activeTab === TAB_PORTFOLIO) {
|
||
loadAssetHistory(assetHistoryDays);
|
||
}
|
||
}, [activeTab, assetHistoryDays, loadAssetHistory]);
|
||
|
||
/* AI Coach: 마운트 시 localStorage에서 API Key + 오늘 캐시 복원 */
|
||
useEffect(() => {
|
||
const savedKey = localStorage.getItem('ai_coach_key') ?? '';
|
||
const savedModel = localStorage.getItem('ai_coach_model') ?? 'claude-haiku-4-5-20251001';
|
||
setAiApiKey(savedKey);
|
||
setAiModel(savedModel);
|
||
const today = new Date().toISOString().slice(0, 10);
|
||
const cached = localStorage.getItem(`ai_coach_${today}`);
|
||
if (cached) {
|
||
try { setAiResult({ ...JSON.parse(cached), cached: true }); } catch { /* ignore */ }
|
||
}
|
||
}, []);
|
||
|
||
/* 리포트 탭 진입 시 시장 컨텍스트(VIX, F&G, 국채, WTI) 한 번 로드 */
|
||
useEffect(() => {
|
||
if (activeTab !== TAB_REPORT || marketCtx !== null) return;
|
||
Promise.allSettled([getFearAndGreed(), getVix(), getTreasury10Y(), getWTI()])
|
||
.then(([fg, vix, t, w]) => {
|
||
const fgRaw = fg.status === 'fulfilled' ? fg.value : null;
|
||
const fgScore = fgRaw?.fear_and_greed?.score ?? fgRaw?.score;
|
||
setMarketCtx({
|
||
fg: fgScore != null ? Math.round(Number(fgScore)) : null,
|
||
vix: vix.status === 'fulfilled' ? (vix.value?.value ?? null) : null,
|
||
treasury: t.status === 'fulfilled' ? (t.value?.value ?? null) : null,
|
||
wti: w.status === 'fulfilled' ? (w.value?.value ?? null) : null,
|
||
});
|
||
});
|
||
}, [activeTab, marketCtx]);
|
||
|
||
/* Auto-refresh portfolio every 3 min (포트폴리오 탭 활성 시) */
|
||
useEffect(() => {
|
||
if (activeTab !== TAB_PORTFOLIO) return;
|
||
const timer = window.setInterval(loadPortfolio, 180000);
|
||
return () => window.clearInterval(timer);
|
||
}, [activeTab, loadPortfolio]);
|
||
|
||
/* ── portfolio actions ───────────────────────────────────────── */
|
||
|
||
const handleAddSubmit = async (e) => {
|
||
e.preventDefault();
|
||
setAddLoading(true);
|
||
setAddError('');
|
||
try {
|
||
await addPortfolio({
|
||
broker: addForm.broker.trim(),
|
||
ticker: addForm.ticker.trim(),
|
||
name: addForm.name.trim(),
|
||
quantity: Number(addForm.quantity),
|
||
avg_price: Number(addForm.avg_price),
|
||
});
|
||
setAddForm({ ...emptyPortfolioForm });
|
||
setAddFormOpen(false);
|
||
await loadPortfolio();
|
||
} catch (err) {
|
||
setAddError(err?.message ?? String(err));
|
||
} finally {
|
||
setAddLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleEditStart = (item) => {
|
||
setEditingId(item.id);
|
||
setEditForm({
|
||
quantity: item.quantity,
|
||
avg_price: item.avg_price,
|
||
broker: item.broker,
|
||
name: item.name,
|
||
});
|
||
editOrigRef.current = {
|
||
quantity: item.quantity,
|
||
avg_price: item.avg_price,
|
||
broker: item.broker,
|
||
name: item.name,
|
||
};
|
||
};
|
||
|
||
const handleEditSave = async (id) => {
|
||
setEditLoading(true);
|
||
try {
|
||
const orig = editOrigRef.current ?? {};
|
||
const diff = {};
|
||
for (const key of Object.keys(editForm)) {
|
||
if (editForm[key] !== orig[key]) {
|
||
diff[key] = editForm[key];
|
||
}
|
||
}
|
||
if (Object.keys(diff).length === 0) {
|
||
setEditingId(null);
|
||
return;
|
||
}
|
||
await updatePortfolio(id, diff);
|
||
setEditingId(null);
|
||
await loadPortfolio();
|
||
} catch (err) {
|
||
const msg = err?.message ?? String(err);
|
||
if (msg.includes('404') || msg.includes('not found')) {
|
||
alert('해당 종목을 찾을 수 없습니다. 이미 삭제되었을 수 있습니다.');
|
||
await loadPortfolio();
|
||
} else {
|
||
alert('수정 실패: ' + msg);
|
||
}
|
||
} finally {
|
||
setEditLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleDelete = async (id) => {
|
||
try {
|
||
await deletePortfolio(id);
|
||
setDeleteConfirmId(null);
|
||
await loadPortfolio();
|
||
} catch (err) {
|
||
const msg = err?.message ?? String(err);
|
||
if (msg.includes('404') || msg.includes('not found')) {
|
||
alert('해당 종목을 찾을 수 없습니다. 이미 삭제되었을 수 있습니다.');
|
||
setDeleteConfirmId(null);
|
||
await loadPortfolio();
|
||
} else {
|
||
alert('삭제 실패: ' + msg);
|
||
}
|
||
}
|
||
};
|
||
|
||
/* ── cash (예수금) actions ──────────────────────────────────── */
|
||
|
||
const handleCashSave = async (e) => {
|
||
e.preventDefault();
|
||
if (!cashForm.broker.trim() || cashForm.cash === '') return;
|
||
setCashSaving(true);
|
||
setCashError('');
|
||
try {
|
||
await upsertCash(cashForm.broker.trim(), Number(cashForm.cash));
|
||
setCashForm({ broker: '', cash: '' });
|
||
await loadPortfolio();
|
||
} catch (err) {
|
||
setCashError(err?.message ?? String(err));
|
||
} finally {
|
||
setCashSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleCashDelete = async (broker) => {
|
||
try {
|
||
await deleteCash(broker);
|
||
await loadPortfolio();
|
||
} catch (err) {
|
||
alert('예수금 삭제 실패: ' + (err?.message ?? String(err)));
|
||
}
|
||
};
|
||
|
||
const handleCashInlineEdit = (item) => {
|
||
setCashEditingBroker(item.broker);
|
||
setCashEditingValue(String(item.cash ?? ''));
|
||
};
|
||
|
||
const handleCashInlineSave = async (broker) => {
|
||
if (cashEditingValue === '') return;
|
||
setCashEditSaving(true);
|
||
try {
|
||
await upsertCash(broker, Number(cashEditingValue));
|
||
setCashEditingBroker(null);
|
||
setCashEditingValue('');
|
||
await loadPortfolio();
|
||
} catch (err) {
|
||
alert('예수금 수정 실패: ' + (err?.message ?? String(err)));
|
||
} finally {
|
||
setCashEditSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleCashInlineCancel = () => {
|
||
setCashEditingBroker(null);
|
||
setCashEditingValue('');
|
||
};
|
||
|
||
/* ── sell (현재가 매도) ───────────────────────────────────────── */
|
||
|
||
const handleSell = async (item) => {
|
||
const sellPrice = item.current_price ?? item.avg_price;
|
||
const avgPrice = item.avg_price ?? 0;
|
||
const qty = item.quantity ?? 0;
|
||
const saleAmount = sellPrice * qty;
|
||
const buyAmount = avgPrice * qty;
|
||
const realizedProfit = saleAmount - buyAmount;
|
||
const realizedRate = buyAmount > 0 ? (realizedProfit / buyAmount) * 100 : 0;
|
||
const broker = item.broker ?? '';
|
||
|
||
setSellLoading(true);
|
||
try {
|
||
// 기존 예수금에 판매금액 합산
|
||
const existing = cashList.find((c) => c.broker === broker);
|
||
const newCash = (existing?.cash ?? 0) + saleAmount;
|
||
await upsertCash(broker, newCash);
|
||
await deletePortfolio(item.id);
|
||
|
||
// 실현손익 기록 저장 (백엔드)
|
||
const record = {
|
||
broker,
|
||
ticker: item.ticker ?? '',
|
||
name: item.name ?? item.ticker ?? 'N/A',
|
||
quantity: qty,
|
||
avg_price: avgPrice,
|
||
sell_price: sellPrice,
|
||
buy_amount: buyAmount,
|
||
sell_amount: saleAmount,
|
||
realized_profit: realizedProfit,
|
||
realized_rate: realizedRate,
|
||
sold_at: new Date().toISOString(),
|
||
};
|
||
try {
|
||
const saved = await addSellHistory(record);
|
||
setSellHistory((prev) => [saved ?? record, ...prev]);
|
||
} catch {
|
||
/* 백엔드 미구현 시 낙관적 UI 유지 */
|
||
setSellHistory((prev) => [{ ...record, id: Date.now() }, ...prev]);
|
||
}
|
||
|
||
setSellConfirmId(null);
|
||
await loadPortfolio();
|
||
} catch (err) {
|
||
alert('매도 처리 실패: ' + (err?.message ?? String(err)));
|
||
} finally {
|
||
setSellLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleDeleteSellRecord = async (id) => {
|
||
setSellHistory((prev) => prev.filter((r) => r.id !== id));
|
||
try {
|
||
await deleteSellHistory(id);
|
||
} catch {
|
||
/* 실패 시 목록 재로드로 복구 */
|
||
loadSellHistory();
|
||
}
|
||
};
|
||
|
||
/* 수동 추가 폼 열기 */
|
||
const handleSellFormOpen = () => {
|
||
setSellEditId(null);
|
||
setSellForm(emptySellForm());
|
||
setSellFormError('');
|
||
setSellFormOpen(true);
|
||
};
|
||
|
||
/* 수정 폼 열기 */
|
||
const handleSellEditStart = (record) => {
|
||
setSellEditId(record.id);
|
||
setSellForm({
|
||
broker: record.broker ?? '',
|
||
ticker: record.ticker ?? '',
|
||
name: record.name ?? '',
|
||
quantity: String(record.quantity ?? ''),
|
||
avg_price: String(record.avg_price ?? ''),
|
||
sell_price: String(record.sell_price ?? ''),
|
||
commission: String(record.commission ?? ''),
|
||
sold_at: toLocalDatetimeValue(record.sold_at),
|
||
});
|
||
setSellFormError('');
|
||
setSellFormOpen(true);
|
||
};
|
||
|
||
/* 폼 닫기 */
|
||
const handleSellFormClose = () => {
|
||
setSellFormOpen(false);
|
||
setSellEditId(null);
|
||
setSellFormError('');
|
||
};
|
||
|
||
/* 폼 제출 (추가 or 수정) */
|
||
const handleSellFormSubmit = async (e) => {
|
||
e.preventDefault();
|
||
setSellFormSaving(true);
|
||
setSellFormError('');
|
||
|
||
const qty = Number(sellForm.quantity);
|
||
const avgPrice = Number(sellForm.avg_price);
|
||
const sellPrice = Number(sellForm.sell_price);
|
||
const commission = Number(sellForm.commission) || 0;
|
||
const buyAmount = avgPrice * qty;
|
||
const sellAmount = sellPrice * qty;
|
||
const realizedProfit = sellAmount - buyAmount - commission;
|
||
const realizedRate = buyAmount > 0 ? (realizedProfit / buyAmount) * 100 : 0;
|
||
|
||
const payload = {
|
||
broker: sellForm.broker.trim(),
|
||
ticker: sellForm.ticker.trim(),
|
||
name: sellForm.name.trim(),
|
||
quantity: qty,
|
||
avg_price: avgPrice,
|
||
sell_price: sellPrice,
|
||
commission,
|
||
buy_amount: buyAmount,
|
||
sell_amount: sellAmount,
|
||
realized_profit: realizedProfit,
|
||
realized_rate: realizedRate,
|
||
sold_at: sellForm.sold_at ? new Date(sellForm.sold_at).toISOString() : new Date().toISOString(),
|
||
};
|
||
|
||
try {
|
||
if (sellEditId != null) {
|
||
const updated = await updateSellHistory(sellEditId, payload);
|
||
setSellHistory((prev) =>
|
||
prev.map((r) => (r.id === sellEditId ? (updated ?? { ...payload, id: sellEditId }) : r))
|
||
);
|
||
} else {
|
||
const saved = await addSellHistory(payload);
|
||
setSellHistory((prev) => [saved ?? { ...payload, id: Date.now() }, ...prev]);
|
||
}
|
||
handleSellFormClose();
|
||
} catch (err) {
|
||
setSellFormError(err?.message ?? String(err));
|
||
} finally {
|
||
setSellFormSaving(false);
|
||
}
|
||
};
|
||
|
||
/* ── report sort ─────────────────────────────────────────────── */
|
||
|
||
const handleReportSort = (field) => {
|
||
if (reportSortField === field) {
|
||
setReportSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
|
||
} else {
|
||
setReportSortField(field);
|
||
setReportSortDir('desc');
|
||
}
|
||
};
|
||
|
||
/* ── AI coach ────────────────────────────────────────────────── */
|
||
|
||
const handleAiCoach = async () => {
|
||
if (!aiApiKey.trim() || portfolioHoldings.length === 0) return;
|
||
|
||
const today = new Date().toISOString().slice(0, 10);
|
||
const cacheKey = `ai_coach_${today}`;
|
||
const cached = localStorage.getItem(cacheKey);
|
||
if (cached) {
|
||
try { setAiResult({ ...JSON.parse(cached), cached: true }); return; } catch { /* invalid cache */ }
|
||
}
|
||
|
||
setAiLoading(true);
|
||
setAiError('');
|
||
|
||
const holdingsText = portfolioHoldings
|
||
.map((item) =>
|
||
`- ${item.name ?? item.ticker}(${item.ticker ?? ''}): ${item.quantity}주, 매입가 ${formatNumber(item.avg_price)}원, 현재가 ${item.current_price != null ? formatNumber(item.current_price) + '원' : '미조회'}, 수익률 ${item.profit_rate != null ? formatPercent(item.profit_rate) : '미조회'}`
|
||
)
|
||
.join('\n');
|
||
|
||
const marketText = marketCtx
|
||
? `\n[현재 시장 환경]\nVIX: ${marketCtx.vix != null ? `${marketCtx.vix} (${getVixLabel(marketCtx.vix)})` : '데이터 없음'}\nFear & Greed: ${marketCtx.fg != null ? `${marketCtx.fg}점 (${getFgLabel(marketCtx.fg)})` : '데이터 없음'}\n미국 10년물 국채: ${marketCtx.treasury != null ? `${marketCtx.treasury}%` : '데이터 없음'}\nWTI 유가: ${marketCtx.wti != null ? `$${marketCtx.wti}` : '데이터 없음'}`
|
||
: '';
|
||
|
||
const prompt = `당신은 한국 주식 전문 투자 코치입니다. 아래 포트폴리오와 시장 환경을 종합 분석하여 JSON으로만 답하세요.
|
||
|
||
분석 일자: ${today}
|
||
총 매입금액: ${formatNumber(portfolioSummary.total_buy)}원
|
||
총 평가금액: ${formatNumber(portfolioSummary.total_eval)}원
|
||
총 손익: ${formatNumber(portfolioSummary.total_profit)}원 (수익률: ${formatPercent(portfolioSummary.total_profit_rate)})
|
||
예수금 합계: ${totalCash != null ? formatNumber(totalCash) + '원' : '미입력'}
|
||
총 자산: ${totalAssets != null ? formatNumber(totalAssets) + '원' : '미집계'}
|
||
보유 종목 수: ${portfolioHoldings.length}개
|
||
보유 종목:
|
||
${holdingsText}${marketText}
|
||
|
||
반드시 아래 JSON 형식으로만 응답하세요 (코드블록 없이, 모든 텍스트는 한국어로):
|
||
{
|
||
"score": 85,
|
||
"grade": "A",
|
||
"summary": "30자 이내 한줄 평가",
|
||
"evaluation": "200자 이내 상세 평가",
|
||
"advice": [
|
||
{ "title": "조언 제목", "body": "50자 이내 조언 내용" },
|
||
{ "title": "조언 제목", "body": "50자 이내 조언 내용" },
|
||
{ "title": "조언 제목", "body": "50자 이내 조언 내용" }
|
||
]
|
||
}`;
|
||
|
||
try {
|
||
const res = await fetch('https://api.anthropic.com/v1/messages', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'x-api-key': aiApiKey.trim(),
|
||
'anthropic-version': '2023-06-01',
|
||
'anthropic-dangerous-direct-browser-access': 'true',
|
||
},
|
||
body: JSON.stringify({
|
||
model: aiModel,
|
||
max_tokens: 1024,
|
||
messages: [{ role: 'user', content: prompt }],
|
||
}),
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const text = await res.text().catch(() => '');
|
||
throw new Error(`Claude API 오류 (${res.status}): ${text.slice(0, 200)}`);
|
||
}
|
||
|
||
const data = await res.json();
|
||
const text = data.content?.[0]?.text ?? '';
|
||
const jsonMatch = text.match(/\{[\s\S]*\}/);
|
||
if (!jsonMatch) throw new Error('AI 응답에서 JSON을 파싱할 수 없습니다.');
|
||
const result = JSON.parse(jsonMatch[0]);
|
||
const final = { ...result, generated_at: new Date().toISOString(), cached: false };
|
||
localStorage.setItem(cacheKey, JSON.stringify(final));
|
||
setAiResult(final);
|
||
} catch (err) {
|
||
setAiError(err?.message ?? String(err));
|
||
} finally {
|
||
setAiLoading(false);
|
||
}
|
||
};
|
||
|
||
/* ── manual order ────────────────────────────────────────────── */
|
||
|
||
const submitManualOrder = async (event) => {
|
||
event.preventDefault();
|
||
setManualLoading(true);
|
||
setManualError('');
|
||
setManualResult(null);
|
||
try {
|
||
const payload = {
|
||
ticker: manualForm.code.trim(),
|
||
action: manualForm.type === 'sell' ? 'SELL' : 'BUY',
|
||
quantity: Number(manualForm.qty),
|
||
price: Number(manualForm.price),
|
||
};
|
||
const result = await createTradeOrder(payload);
|
||
setManualResult(result ?? { ok: true });
|
||
if (result?.kis_result !== undefined) {
|
||
const message =
|
||
typeof result.kis_result === 'string'
|
||
? result.kis_result
|
||
: JSON.stringify(result.kis_result, null, 2);
|
||
setKisModal(message);
|
||
}
|
||
await loadBalance();
|
||
} catch (err) {
|
||
setManualError(err?.message ?? String(err));
|
||
} finally {
|
||
setManualLoading(false);
|
||
}
|
||
};
|
||
|
||
/* ── derived: AI balance ──────────────────────────────────────── */
|
||
|
||
const holdings = useMemo(() => {
|
||
if (!balance) return [];
|
||
if (Array.isArray(balance.holdings)) return balance.holdings;
|
||
if (Array.isArray(balance.positions)) return balance.positions;
|
||
if (Array.isArray(balance.items)) return balance.items;
|
||
return [];
|
||
}, [balance]);
|
||
const summary = balance?.summary ?? {};
|
||
const totalEval =
|
||
summary.total_eval ?? balance?.total_eval ?? balance?.total_value;
|
||
const deposit =
|
||
summary.deposit ?? balance?.deposit ?? balance?.available_cash;
|
||
|
||
/* ── derived: Portfolio ───────────────────────────────────────── */
|
||
|
||
const portfolioHoldings = portfolio?.holdings ?? [];
|
||
const portfolioSummary = portfolio?.summary ?? {};
|
||
const cashList = portfolio?.cash ?? [];
|
||
const totalCash = portfolioSummary.total_cash ?? null;
|
||
const totalAssets = portfolioSummary.total_assets ?? null;
|
||
const brokerGroups = useMemo(() => {
|
||
const map = {};
|
||
for (const item of portfolioHoldings) {
|
||
const broker = item.broker || '기타';
|
||
if (!map[broker]) map[broker] = [];
|
||
map[broker].push(item);
|
||
}
|
||
return Object.entries(map).sort(([a], [b]) => a.localeCompare(b));
|
||
}, [portfolioHoldings]);
|
||
|
||
const getBrokerSummary = (items) => {
|
||
let totalBuy = 0;
|
||
let totalEvalAmt = 0;
|
||
let hasNullPrice = false;
|
||
for (const item of items) {
|
||
totalBuy += (item.avg_price ?? 0) * (item.quantity ?? 0);
|
||
if (item.eval_amount != null) {
|
||
totalEvalAmt += item.eval_amount;
|
||
} else {
|
||
hasNullPrice = true;
|
||
}
|
||
}
|
||
const totalProfit = totalEvalAmt - totalBuy;
|
||
const totalProfitRate = totalBuy > 0 ? (totalProfit / totalBuy) * 100 : 0;
|
||
return { totalBuy, totalEval: totalEvalAmt, totalProfit, totalProfitRate, hasNullPrice };
|
||
};
|
||
|
||
const brokerColors = useMemo(() => {
|
||
const palette = [
|
||
{ border: 'rgba(129,140,248,0.5)', bg: 'rgba(129,140,248,0.06)' },
|
||
{ border: 'rgba(251,191,36,0.5)', bg: 'rgba(251,191,36,0.06)' },
|
||
{ border: 'rgba(52,211,153,0.5)', bg: 'rgba(52,211,153,0.06)' },
|
||
{ border: 'rgba(244,114,182,0.5)', bg: 'rgba(244,114,182,0.06)' },
|
||
{ border: 'rgba(251,146,60,0.5)', bg: 'rgba(251,146,60,0.06)' },
|
||
{ border: 'rgba(139,92,246,0.5)', bg: 'rgba(139,92,246,0.06)' },
|
||
];
|
||
const map = {};
|
||
brokerGroups.forEach(([broker], i) => {
|
||
map[broker] = palette[i % palette.length];
|
||
});
|
||
return map;
|
||
}, [brokerGroups]);
|
||
|
||
/* ── derived: Report ──────────────────────────────────────────── */
|
||
|
||
const brokerPieData = useMemo(() =>
|
||
brokerGroups
|
||
.map(([broker, items]) => ({ name: broker, value: getBrokerSummary(items).totalEval }))
|
||
.filter((d) => d.value > 0),
|
||
[brokerGroups]
|
||
);
|
||
|
||
const profitBarData = useMemo(() =>
|
||
portfolioHoldings
|
||
.filter((item) => item.profit_rate != null)
|
||
.map((item) => ({
|
||
name: item.ticker ?? (item.name ?? 'N/A').slice(0, 5),
|
||
fullName: item.name ?? item.ticker ?? 'N/A',
|
||
rate: toNumeric(item.profit_rate) ?? 0,
|
||
}))
|
||
.sort((a, b) => b.rate - a.rate),
|
||
[portfolioHoldings]
|
||
);
|
||
|
||
const maxAbsRate = useMemo(() =>
|
||
Math.max(1, ...portfolioHoldings.map((h) => Math.abs(toNumeric(h.profit_rate) ?? 0))),
|
||
[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) {
|
||
case 'profit_rate': return toNumeric(item.profit_rate) ?? -Infinity;
|
||
case 'profit_amount': return toNumeric(item.profit_amount) ?? -Infinity;
|
||
case 'eval_amount': {
|
||
const ea = toNumeric(item.eval_amount);
|
||
if (ea != null) return ea;
|
||
const cp = toNumeric(item.current_price);
|
||
const qty = toNumeric(item.quantity);
|
||
return cp != null && qty != null ? cp * qty : -Infinity;
|
||
}
|
||
default: return 0;
|
||
}
|
||
};
|
||
return [...portfolioHoldings].sort((a, b) => {
|
||
if (reportSortField === 'name')
|
||
return reportSortDir === 'asc'
|
||
? (a.name ?? '').localeCompare(b.name ?? '')
|
||
: (b.name ?? '').localeCompare(a.name ?? '');
|
||
if (reportSortField === 'broker')
|
||
return reportSortDir === 'asc'
|
||
? (a.broker ?? '').localeCompare(b.broker ?? '')
|
||
: (b.broker ?? '').localeCompare(a.broker ?? '');
|
||
const av = getVal(a);
|
||
const bv = getVal(b);
|
||
return reportSortDir === 'asc' ? av - bv : bv - av;
|
||
});
|
||
}, [portfolioHoldings, reportSortField, reportSortDir]);
|
||
|
||
/* ── derived: 실현손익 필터 ────────────────────────────────────── */
|
||
|
||
const sellHistoryBrokers = useMemo(() => {
|
||
const set = new Set(sellHistory.map((r) => r.broker).filter(Boolean));
|
||
return ['ALL', ...Array.from(set).sort()];
|
||
}, [sellHistory]);
|
||
|
||
const filteredSellHistory = useMemo(() => {
|
||
const now = new Date();
|
||
const periodMs = {
|
||
'1M': 30 * 86400000,
|
||
'3M': 90 * 86400000,
|
||
'6M': 180 * 86400000,
|
||
'1Y': 365 * 86400000,
|
||
'ALL': Infinity,
|
||
}[sellHistoryPeriod] ?? Infinity;
|
||
return sellHistory.filter((r) => {
|
||
if (sellHistoryBroker !== 'ALL' && r.broker !== sellHistoryBroker) return false;
|
||
const diff = now - new Date(r.sold_at);
|
||
return diff <= periodMs;
|
||
});
|
||
}, [sellHistory, sellHistoryBroker, sellHistoryPeriod]);
|
||
|
||
const sellHistorySummary = useMemo(() => {
|
||
const totalProfit = filteredSellHistory.reduce((s, r) => s + (r.realized_profit ?? 0), 0);
|
||
const totalSell = filteredSellHistory.reduce((s, r) => s + (r.sell_amount ?? 0), 0);
|
||
const totalBuy = filteredSellHistory.reduce((s, r) => s + (r.buy_amount ?? 0), 0);
|
||
const totalCommission = filteredSellHistory.reduce((s, r) => s + (r.commission ?? 0), 0);
|
||
const rate = totalBuy > 0 ? (totalProfit / totalBuy) * 100 : 0;
|
||
return { totalProfit, totalSell, totalBuy, totalCommission, rate, count: filteredSellHistory.length };
|
||
}, [filteredSellHistory]);
|
||
|
||
/* ── render ───────────────────────────────────────────────────── */
|
||
|
||
return (
|
||
<div className="stock">
|
||
{/* ── Header ──────────────────────────────────────────── */}
|
||
<header className="stock-header">
|
||
<div>
|
||
<p className="stock-kicker">거래 데스크</p>
|
||
<h1>거래 데스크</h1>
|
||
<p className="stock-sub">
|
||
실제 계좌와 AI 모의투자를 한 곳에서 관리하세요.
|
||
</p>
|
||
<div className="stock-actions">
|
||
<Link className="button ghost" to="/stock">
|
||
주식 랩으로 돌아가기
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
<div className="stock-card">
|
||
<p className="stock-card__title">
|
||
{activeTab === TAB_AI ? 'AI 투자 요약' : '쟁승토리 계좌 요약'}
|
||
</p>
|
||
{activeTab === TAB_PORTFOLIO || activeTab === TAB_REPORT ? (
|
||
/* Portfolio summary */
|
||
<div className="stock-status">
|
||
<div>
|
||
<span>총 매입</span>
|
||
<strong>{formatNumber(portfolioSummary.total_buy)}</strong>
|
||
</div>
|
||
<div>
|
||
<span>총 평가</span>
|
||
<strong>{formatNumber(portfolioSummary.total_eval)}</strong>
|
||
</div>
|
||
<div>
|
||
<span>총 손익</span>
|
||
<strong
|
||
className={`stock-profit ${profitColorClass(
|
||
toNumeric(portfolioSummary.total_profit)
|
||
)}`}
|
||
>
|
||
{formatNumber(portfolioSummary.total_profit)}
|
||
{portfolioSummary.total_profit_rate != null && (
|
||
<small style={{ marginLeft: 4, fontSize: 11 }}>
|
||
({formatPercent(portfolioSummary.total_profit_rate)})
|
||
</small>
|
||
)}
|
||
</strong>
|
||
</div>
|
||
<div>
|
||
<span>보유 종목</span>
|
||
<strong>{portfolioHoldings.length}</strong>
|
||
</div>
|
||
{totalCash != null && (
|
||
<div>
|
||
<span>예수금 합계</span>
|
||
<strong style={{ color: '#93c5fd' }}>
|
||
{formatNumber(totalCash)}원
|
||
</strong>
|
||
</div>
|
||
)}
|
||
{totalAssets != null && (
|
||
<div>
|
||
<span>총 자산</span>
|
||
<strong style={{ fontWeight: 700 }}>
|
||
{formatNumber(totalAssets)}원
|
||
</strong>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
/* AI balance summary */
|
||
<div className="stock-status">
|
||
<div>
|
||
<span>총 평가금액</span>
|
||
<strong>{formatNumber(totalEval)}</strong>
|
||
</div>
|
||
<div>
|
||
<span>예수금</span>
|
||
<strong>{formatNumber(deposit)}</strong>
|
||
</div>
|
||
<div>
|
||
<span>보유 종목</span>
|
||
<strong>{holdings.length}</strong>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{activeTab === TAB_AI && summary.note ? (
|
||
<p className="stock-status__note">{summary.note}</p>
|
||
) : null}
|
||
</div>
|
||
</header>
|
||
|
||
{/* ── Main Tabs ───────────────────────────────────────── */}
|
||
<div className="stock-main-tabs">
|
||
<button
|
||
type="button"
|
||
className={`stock-main-tab ${activeTab === TAB_PORTFOLIO ? 'is-active' : ''}`}
|
||
onClick={() => setActiveTab(TAB_PORTFOLIO)}
|
||
>
|
||
<span className="stock-main-tab__icon">💼</span>
|
||
<span className="stock-main-tab__label">쟁승토리 계좌</span>
|
||
{portfolioHoldings.length > 0 && (
|
||
<span className="stock-main-tab__badge">
|
||
{portfolioHoldings.length}
|
||
</span>
|
||
)}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`stock-main-tab ${activeTab === TAB_AI ? 'is-active' : ''}`}
|
||
onClick={() => setActiveTab(TAB_AI)}
|
||
>
|
||
<span className="stock-main-tab__icon">🤖</span>
|
||
<span className="stock-main-tab__label">AI 투자</span>
|
||
<span className="stock-main-tab__sub">모의투자</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`stock-main-tab ${activeTab === TAB_REPORT ? 'is-active' : ''}`}
|
||
onClick={() => setActiveTab(TAB_REPORT)}
|
||
>
|
||
<span className="stock-main-tab__icon">📊</span>
|
||
<span className="stock-main-tab__label">리포트</span>
|
||
<span className="stock-main-tab__sub">분석·AI코치</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`stock-main-tab stock-main-tab--advisor ${activeTab === TAB_ADVISOR ? 'is-active' : ''}`}
|
||
onClick={() => setActiveTab(TAB_ADVISOR)}
|
||
>
|
||
<span className="stock-main-tab__icon">🧠</span>
|
||
<span className="stock-main-tab__label">AI 어드바이저</span>
|
||
<span className="stock-main-tab__sub">Gemini Pro</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* ════════════════════════════════════════════════════════
|
||
TAB 1: 쟁승토리 계좌
|
||
════════════════════════════════════════════════════════ */}
|
||
{activeTab === TAB_PORTFOLIO && (
|
||
<>
|
||
{portfolioError ? (
|
||
<p className="stock-error">{portfolioError}</p>
|
||
) : null}
|
||
|
||
{/* 포트폴리오 관리 헤더 + 추가 폼 */}
|
||
<section className="stock-panel stock-panel--wide pf-section">
|
||
<div className="stock-panel__head">
|
||
<div>
|
||
<p className="stock-panel__eyebrow">포트폴리오</p>
|
||
<h3>수동 입력 종목 관리</h3>
|
||
<p className="stock-panel__sub">
|
||
증권사별 보유 종목을 수동 등록하면 현재가를 자동 조회합니다. (3분 캐시)
|
||
</p>
|
||
</div>
|
||
<div className="stock-panel__actions">
|
||
{portfolioLoading ? (
|
||
<Loading type="spinner" message="" />
|
||
) : null}
|
||
<button
|
||
className="button ghost small"
|
||
onClick={loadPortfolio}
|
||
disabled={portfolioLoading}
|
||
>
|
||
새로고침
|
||
</button>
|
||
<button
|
||
className="button primary small"
|
||
onClick={() => setAddFormOpen((v) => !v)}
|
||
>
|
||
{addFormOpen ? '취소' : '+ 종목 추가'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Add form */}
|
||
{addFormOpen && (
|
||
<form className="pf-add-form" onSubmit={handleAddSubmit}>
|
||
<label>
|
||
증권사
|
||
<input
|
||
type="text"
|
||
value={addForm.broker}
|
||
onChange={(e) =>
|
||
setAddForm((p) => ({ ...p, broker: e.target.value }))
|
||
}
|
||
placeholder="KB증권"
|
||
required
|
||
/>
|
||
</label>
|
||
<label>
|
||
종목코드
|
||
<input
|
||
type="text"
|
||
value={addForm.ticker}
|
||
onChange={(e) =>
|
||
setAddForm((p) => ({ ...p, ticker: e.target.value }))
|
||
}
|
||
placeholder="005930"
|
||
required
|
||
maxLength={6}
|
||
/>
|
||
</label>
|
||
<label>
|
||
종목명
|
||
<input
|
||
type="text"
|
||
value={addForm.name}
|
||
onChange={(e) =>
|
||
setAddForm((p) => ({ ...p, name: e.target.value }))
|
||
}
|
||
placeholder="삼성전자"
|
||
required
|
||
/>
|
||
</label>
|
||
<label>
|
||
수량
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
step={1}
|
||
value={addForm.quantity}
|
||
onChange={(e) =>
|
||
setAddForm((p) => ({ ...p, quantity: e.target.value }))
|
||
}
|
||
required
|
||
/>
|
||
</label>
|
||
<label>
|
||
평균 매입가 (원)
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
step={1}
|
||
value={addForm.avg_price}
|
||
onChange={(e) =>
|
||
setAddForm((p) => ({ ...p, avg_price: e.target.value }))
|
||
}
|
||
required
|
||
/>
|
||
</label>
|
||
<button
|
||
className="button primary"
|
||
type="submit"
|
||
disabled={addLoading}
|
||
>
|
||
{addLoading ? '등록 중...' : '종목 등록'}
|
||
</button>
|
||
{addError && <p className="stock-error">{addError}</p>}
|
||
</form>
|
||
)}
|
||
|
||
{/* Portfolio total summary */}
|
||
{portfolioHoldings.length > 0 && (
|
||
<div className="pf-total-summary">
|
||
{[
|
||
{ label: '총 매입', value: portfolioSummary.total_buy },
|
||
{ label: '총 평가', value: portfolioSummary.total_eval },
|
||
{ label: '총 손익', value: portfolioSummary.total_profit, isProfit: true },
|
||
{ label: '수익률', value: portfolioSummary.total_profit_rate, isRate: true },
|
||
].map((s) => (
|
||
<div key={s.label} className="pf-total-summary__card">
|
||
<span>{s.label}</span>
|
||
<strong
|
||
className={
|
||
s.isProfit || s.isRate
|
||
? `stock-profit ${profitColorClass(toNumeric(s.value))}`
|
||
: ''
|
||
}
|
||
>
|
||
{s.isRate ? formatPercent(s.value) : formatNumber(s.value)}
|
||
</strong>
|
||
</div>
|
||
))}
|
||
{totalCash != null && (
|
||
<div className="pf-total-summary__card is-cash">
|
||
<span>예수금 합계</span>
|
||
<strong>{formatNumber(totalCash)}원</strong>
|
||
</div>
|
||
)}
|
||
{totalAssets != null && (
|
||
<div className="pf-total-summary__card is-assets">
|
||
<span>총 자산</span>
|
||
<strong>{formatNumber(totalAssets)}원</strong>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
{/* 자산 추이 차트 */}
|
||
<div className="pf-asset-history">
|
||
<div className="pf-asset-history__head">
|
||
<p className="pf-asset-history__title">총 자산 추이</p>
|
||
<div className="pf-asset-history__controls">
|
||
{[
|
||
{ label: '7일', value: 7 },
|
||
{ label: '30일', value: 30 },
|
||
{ label: '90일', value: 90 },
|
||
{ label: '전체', value: 0 },
|
||
].map(({ label, value }) => (
|
||
<button
|
||
key={value}
|
||
type="button"
|
||
className={`pf-asset-period-btn ${assetHistoryDays === value ? 'is-active' : ''}`}
|
||
onClick={() => setAssetHistoryDays(value)}
|
||
>
|
||
{label}
|
||
</button>
|
||
))}
|
||
<button
|
||
type="button"
|
||
className="button ghost small"
|
||
onClick={handleSaveSnapshot}
|
||
disabled={snapshotSaving || totalAssets == null}
|
||
title="현재 총 자산을 오늘 날짜로 저장"
|
||
>
|
||
{snapshotSaving ? '저장 중...' : '📸 스냅샷'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{assetHistoryLoading ? (
|
||
<div className="pf-asset-history__empty">
|
||
<Loading type="spinner" message="" />
|
||
</div>
|
||
) : Array.isArray(assetHistory) && assetHistory.length >= 1 ? (
|
||
<ResponsiveContainer width="100%" height={180}>
|
||
<AreaChart
|
||
data={assetHistory}
|
||
margin={{ top: 8, right: 12, left: 0, bottom: 0 }}
|
||
>
|
||
<defs>
|
||
<linearGradient id="assetGrad" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="5%" stopColor="#38bdf8" stopOpacity={0.25} />
|
||
<stop offset="95%" stopColor="#38bdf8" stopOpacity={0} />
|
||
</linearGradient>
|
||
</defs>
|
||
<XAxis
|
||
dataKey="date"
|
||
tick={{ fill: 'var(--text-muted)', fontSize: 10 }}
|
||
tickFormatter={(v) => v?.slice(5)}
|
||
tickLine={false}
|
||
axisLine={false}
|
||
interval="preserveStartEnd"
|
||
/>
|
||
<YAxis
|
||
hide
|
||
domain={['auto', 'auto']}
|
||
/>
|
||
<ChartTooltip
|
||
contentStyle={{
|
||
background: 'var(--surface)',
|
||
border: '1px solid var(--line)',
|
||
borderRadius: 8,
|
||
fontSize: 12,
|
||
}}
|
||
labelStyle={{ color: 'var(--text-dim)', marginBottom: 4 }}
|
||
formatter={(v) => [`${new Intl.NumberFormat('ko-KR').format(v)}원`, '총 자산']}
|
||
/>
|
||
<Area
|
||
type="monotone"
|
||
dataKey="total_assets"
|
||
stroke="#38bdf8"
|
||
strokeWidth={2}
|
||
fill="url(#assetGrad)"
|
||
dot={false}
|
||
activeDot={{ r: 4, fill: '#38bdf8' }}
|
||
/>
|
||
</AreaChart>
|
||
</ResponsiveContainer>
|
||
) : (
|
||
<div className="pf-asset-history__empty">
|
||
저장된 자산 추이 데이터가 없습니다. 📸 스냅샷 버튼으로 오늘 자산을 기록하세요.
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
{/* 예수금 패널 */}
|
||
<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">
|
||
증권사별 예수금을 입력하면 총 자산에 자동 반영됩니다.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{cashList.length > 0 && (
|
||
<div className="pf-cash-table">
|
||
{cashList.map((item) => {
|
||
const isEditing = cashEditingBroker === item.broker;
|
||
return (
|
||
<div key={item.id ?? item.broker} className="pf-cash-row">
|
||
<span className="pf-cash-broker">{item.broker}</span>
|
||
{isEditing ? (
|
||
<input
|
||
className="pf-cash-edit-input"
|
||
type="number"
|
||
min={0}
|
||
step={1}
|
||
value={cashEditingValue}
|
||
onChange={(e) => setCashEditingValue(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') handleCashInlineSave(item.broker);
|
||
if (e.key === 'Escape') handleCashInlineCancel();
|
||
}}
|
||
autoFocus
|
||
/>
|
||
) : (
|
||
<strong className="pf-cash-amount">
|
||
{formatNumber(item.cash)}원
|
||
</strong>
|
||
)}
|
||
<span className="pf-cash-date">
|
||
{item.updated_at
|
||
? new Date(item.updated_at).toLocaleDateString('ko-KR')
|
||
: ''}
|
||
</span>
|
||
{isEditing ? (
|
||
<>
|
||
<button
|
||
className="button primary small"
|
||
onClick={() => handleCashInlineSave(item.broker)}
|
||
disabled={cashEditSaving}
|
||
>
|
||
{cashEditSaving ? '저장 중' : '저장'}
|
||
</button>
|
||
<button
|
||
className="button ghost small"
|
||
onClick={handleCashInlineCancel}
|
||
disabled={cashEditSaving}
|
||
>
|
||
취소
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<button
|
||
className="button ghost small"
|
||
onClick={() => handleCashInlineEdit(item)}
|
||
title="수정"
|
||
>
|
||
✏️
|
||
</button>
|
||
<button
|
||
className="button ghost small pf-btn-danger"
|
||
onClick={() => handleCashDelete(item.broker)}
|
||
title="삭제"
|
||
>
|
||
🗑️
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
{cashList.length === 0 && (
|
||
<p className="stock-empty" style={{ fontSize: 13 }}>
|
||
등록된 예수금이 없습니다.
|
||
</p>
|
||
)}
|
||
|
||
<form className="pf-cash-form" onSubmit={handleCashSave}>
|
||
<label>
|
||
증권사명
|
||
<input
|
||
type="text"
|
||
value={cashForm.broker}
|
||
onChange={(e) =>
|
||
setCashForm((p) => ({ ...p, broker: e.target.value }))
|
||
}
|
||
placeholder="KB증권"
|
||
required
|
||
/>
|
||
</label>
|
||
<label>
|
||
예수금 (원)
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
step={1}
|
||
value={cashForm.cash}
|
||
onChange={(e) =>
|
||
setCashForm((p) => ({ ...p, cash: e.target.value }))
|
||
}
|
||
placeholder="1500000"
|
||
required
|
||
/>
|
||
</label>
|
||
<button
|
||
className="button primary"
|
||
type="submit"
|
||
disabled={cashSaving}
|
||
>
|
||
{cashSaving ? '저장 중...' : '저장'}
|
||
</button>
|
||
{cashError && <p className="stock-error">{cashError}</p>}
|
||
</form>
|
||
</section>
|
||
|
||
{/* Broker cards stacked */}
|
||
{brokerGroups.map(([broker, items]) => {
|
||
const bSummary = getBrokerSummary(items);
|
||
const color = brokerColors[broker];
|
||
return (
|
||
<section
|
||
key={broker}
|
||
className="stock-panel stock-panel--wide pf-broker-section"
|
||
style={{
|
||
borderColor: color?.border,
|
||
background: color?.bg,
|
||
}}
|
||
>
|
||
<div className="stock-panel__head">
|
||
<div>
|
||
<p
|
||
className="stock-panel__eyebrow"
|
||
style={{ color: color?.border }}
|
||
>
|
||
{broker}
|
||
</p>
|
||
<h3>{broker} 보유 현황</h3>
|
||
<p className="stock-panel__sub">
|
||
{items.length}종목 · 평가{' '}
|
||
{formatNumber(bSummary.totalEval)} · 손익{' '}
|
||
<span
|
||
className={`stock-profit ${profitColorClass(
|
||
bSummary.totalProfit
|
||
)}`}
|
||
>
|
||
{formatNumber(bSummary.totalProfit)} (
|
||
{formatPercent(bSummary.totalProfitRate)})
|
||
</span>
|
||
{(() => {
|
||
const bc = cashList.find(
|
||
(c) => c.broker === broker
|
||
);
|
||
return bc ? (
|
||
<span className="pf-cash-badge">
|
||
예수금 {formatNumber(bc.cash)}원
|
||
</span>
|
||
) : null;
|
||
})()}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="stock-holdings">
|
||
{items.map((item) => {
|
||
const profitAmt = item.profit_amount;
|
||
const profitRate = item.profit_rate;
|
||
const profitAmtN = toNumeric(profitAmt);
|
||
const profitRateN = toNumeric(profitRate);
|
||
const isEditing = editingId === item.id;
|
||
const isDeleting = deleteConfirmId === item.id;
|
||
const isSelling = sellConfirmId === item.id;
|
||
const sellPrice = item.current_price ?? item.avg_price;
|
||
const saleAmount = sellPrice != null ? sellPrice * (item.quantity ?? 0) : null;
|
||
|
||
return (
|
||
<div
|
||
key={item.id}
|
||
className="stock-holdings__item pf-item"
|
||
>
|
||
{isEditing ? (
|
||
<div className="pf-edit-row">
|
||
<div className="pf-edit-fields">
|
||
<label>
|
||
수량
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
value={editForm.quantity ?? ''}
|
||
onChange={(e) =>
|
||
setEditForm((p) => ({
|
||
...p,
|
||
quantity: Number(e.target.value),
|
||
}))
|
||
}
|
||
/>
|
||
</label>
|
||
<label>
|
||
평균매입가
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
value={editForm.avg_price ?? ''}
|
||
onChange={(e) =>
|
||
setEditForm((p) => ({
|
||
...p,
|
||
avg_price: Number(e.target.value),
|
||
}))
|
||
}
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div className="pf-edit-actions">
|
||
<button
|
||
className="button primary small"
|
||
onClick={() => handleEditSave(item.id)}
|
||
disabled={editLoading}
|
||
>
|
||
{editLoading ? '저장 중...' : '저장'}
|
||
</button>
|
||
<button
|
||
className="button ghost small"
|
||
onClick={() => setEditingId(null)}
|
||
>
|
||
취소
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div>
|
||
<p className="stock-holdings__name">
|
||
{item.name ?? item.ticker ?? 'N/A'}
|
||
</p>
|
||
<span className="stock-holdings__code">
|
||
{item.ticker ?? ''}
|
||
</span>
|
||
</div>
|
||
<div className="stock-holdings__metric">
|
||
<span>수량</span>
|
||
<strong>{formatNumber(item.quantity)}</strong>
|
||
</div>
|
||
<div className="stock-holdings__metric">
|
||
<span>매입가</span>
|
||
<strong>{formatNumber(item.avg_price)}</strong>
|
||
</div>
|
||
<div className="stock-holdings__metric">
|
||
<span>현재가</span>
|
||
<strong
|
||
className={item.current_price == null ? 'pf-null-price' : ''}
|
||
>
|
||
{item.current_price != null
|
||
? formatNumber(item.current_price)
|
||
: '조회 실패'}
|
||
</strong>
|
||
</div>
|
||
<div className="stock-holdings__metric">
|
||
<span>평가금액</span>
|
||
<strong>
|
||
{item.current_price != null && item.quantity != null
|
||
? formatNumber(item.current_price * item.quantity)
|
||
: '-'}
|
||
</strong>
|
||
</div>
|
||
<div className="stock-holdings__metric">
|
||
<span>수익률</span>
|
||
<strong
|
||
className={`stock-profit ${profitColorClass(profitRateN)}`}
|
||
>
|
||
{profitRate != null
|
||
? formatPercent(profitRate)
|
||
: '-'}
|
||
</strong>
|
||
</div>
|
||
<div className="stock-holdings__metric">
|
||
<span>평가손익</span>
|
||
<strong
|
||
className={`stock-profit ${profitColorClass(profitAmtN)}`}
|
||
>
|
||
{profitAmt != null
|
||
? formatNumber(profitAmt)
|
||
: '-'}
|
||
</strong>
|
||
</div>
|
||
<div className="pf-item-actions">
|
||
{!isSelling && !isDeleting && (
|
||
<button
|
||
className="button ghost small"
|
||
onClick={() => handleEditStart(item)}
|
||
title="수정"
|
||
>
|
||
✏️
|
||
</button>
|
||
)}
|
||
{isSelling ? (
|
||
<div className="pf-sell-confirm">
|
||
<span className="pf-sell-confirm__msg">
|
||
{item.current_price == null && (
|
||
<small className="pf-sell-confirm__warn">현재가 미조회 — 매입가 기준</small>
|
||
)}
|
||
{saleAmount != null
|
||
? `${formatNumber(saleAmount)}원 매도 후 예수금 반영`
|
||
: '매도 처리'}
|
||
</span>
|
||
<button
|
||
className="button small pf-btn-sell"
|
||
onClick={() => handleSell(item)}
|
||
disabled={sellLoading}
|
||
>
|
||
{sellLoading ? '처리 중...' : '매도 확인'}
|
||
</button>
|
||
<button
|
||
className="button ghost small"
|
||
onClick={() => setSellConfirmId(null)}
|
||
disabled={sellLoading}
|
||
>
|
||
취소
|
||
</button>
|
||
</div>
|
||
) : isDeleting ? (
|
||
<>
|
||
<button
|
||
className="button ghost small pf-btn-danger"
|
||
onClick={() => handleDelete(item.id)}
|
||
>
|
||
확인
|
||
</button>
|
||
<button
|
||
className="button ghost small"
|
||
onClick={() => setDeleteConfirmId(null)}
|
||
>
|
||
취소
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<button
|
||
className="button ghost small pf-btn-sell"
|
||
onClick={() => {
|
||
setSellConfirmId(item.id);
|
||
setDeleteConfirmId(null);
|
||
}}
|
||
title="매도"
|
||
>
|
||
매도
|
||
</button>
|
||
<button
|
||
className="button ghost small"
|
||
onClick={() => {
|
||
setDeleteConfirmId(item.id);
|
||
setSellConfirmId(null);
|
||
}}
|
||
title="삭제"
|
||
>
|
||
🗑️
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
);
|
||
})}
|
||
|
||
{portfolioLoaded && portfolioHoldings.length === 0 && !portfolioError && (
|
||
<section className="stock-panel stock-panel--wide">
|
||
<p className="stock-empty" style={{ textAlign: 'center', padding: 24 }}>
|
||
등록된 종목이 없습니다. 상단의 <strong>+ 종목 추가</strong> 버튼으로 보유 종목을 등록하세요.
|
||
</p>
|
||
</section>
|
||
)}
|
||
|
||
{/* sell history → 드로어로 이동됨 */}
|
||
</>
|
||
)}
|
||
|
||
{/* ════════════════════════════════════════════════════════
|
||
TAB 2: AI 투자 (모의투자)
|
||
════════════════════════════════════════════════════════ */}
|
||
{activeTab === TAB_AI && (
|
||
<>
|
||
{balanceError ? <p className="stock-error">{balanceError}</p> : null}
|
||
|
||
{/* AI Balance section */}
|
||
<section className="stock-panel stock-panel--wide">
|
||
<div className="stock-panel__head">
|
||
<div>
|
||
<p className="stock-panel__eyebrow">AI 모의투자</p>
|
||
<h3>보유 현황</h3>
|
||
<p className="stock-panel__sub">
|
||
AI가 운용 중인 모의투자 계좌의 잔고와 보유 종목을 확인합니다.
|
||
</p>
|
||
</div>
|
||
<div className="stock-panel__actions">
|
||
{balanceLoading ? (
|
||
<span className="stock-chip">조회 중</span>
|
||
) : null}
|
||
<button
|
||
className="button ghost small"
|
||
onClick={loadBalance}
|
||
disabled={balanceLoading}
|
||
>
|
||
새로고침
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="stock-balance">
|
||
<div className="stock-balance__summary">
|
||
{[
|
||
{ label: '총 평가', value: totalEval },
|
||
{ label: '예수금', value: deposit },
|
||
].map((item) => (
|
||
<div
|
||
key={item.label}
|
||
className="stock-balance__card"
|
||
>
|
||
<span>{item.label}</span>
|
||
<strong>{formatNumber(item.value)}</strong>
|
||
</div>
|
||
))}
|
||
</div>
|
||
{holdings.length ? (
|
||
<div className="stock-holdings">
|
||
{holdings.map((item, idx) => {
|
||
const profitLoss = getProfitLoss(item);
|
||
const profitLossNumeric = toNumeric(profitLoss);
|
||
const profitClass = profitColorClass(profitLossNumeric);
|
||
const profitRate = getProfitRate(item);
|
||
const profitRateNumeric = toNumeric(profitRate);
|
||
const profitRateClass = profitColorClass(profitRateNumeric);
|
||
return (
|
||
<div
|
||
key={item.code ?? `${item.name}-${idx}`}
|
||
className="stock-holdings__item"
|
||
>
|
||
<div>
|
||
<p className="stock-holdings__name">
|
||
{item.name ?? item.code ?? 'N/A'}
|
||
</p>
|
||
<span className="stock-holdings__code">
|
||
{item.code ?? ''}
|
||
</span>
|
||
</div>
|
||
<div className="stock-holdings__metric">
|
||
<span>수량</span>
|
||
<strong>
|
||
{formatNumber(getQty(item))}
|
||
</strong>
|
||
</div>
|
||
<div className="stock-holdings__metric">
|
||
<span>매입가</span>
|
||
<strong>
|
||
{formatNumber(getBuyPrice(item))}
|
||
</strong>
|
||
</div>
|
||
<div className="stock-holdings__metric">
|
||
<span>현재가</span>
|
||
<strong>
|
||
{formatNumber(getCurrentPrice(item))}
|
||
</strong>
|
||
</div>
|
||
<div className="stock-holdings__metric">
|
||
<span>평가금액</span>
|
||
<strong>
|
||
{getCurrentPrice(item) != null && getQty(item) != null
|
||
? formatNumber(toNumeric(getCurrentPrice(item)) * toNumeric(getQty(item)))
|
||
: '-'}
|
||
</strong>
|
||
</div>
|
||
<div className="stock-holdings__metric">
|
||
<span>수익률</span>
|
||
<strong
|
||
className={`stock-profit ${profitRateClass}`}
|
||
>
|
||
{formatPercent(profitRate)}
|
||
</strong>
|
||
</div>
|
||
<div className="stock-holdings__metric">
|
||
<span>평가손익</span>
|
||
<strong
|
||
className={`stock-profit ${profitClass}`}
|
||
>
|
||
{formatNumber(profitLoss)}
|
||
</strong>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
) : (
|
||
<p className="stock-empty">보유 종목이 없습니다.</p>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Manual order section */}
|
||
<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">
|
||
종목명 또는 종목코드를 입력하고 매수/매도 주문을 요청합니다.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<form className="stock-order" onSubmit={submitManualOrder}>
|
||
<label>
|
||
종목명/코드
|
||
<input
|
||
type="text"
|
||
value={manualForm.code}
|
||
onChange={(event) =>
|
||
setManualForm((prev) => ({
|
||
...prev,
|
||
code: event.target.value,
|
||
}))
|
||
}
|
||
placeholder="005930 또는 삼성전자"
|
||
required
|
||
/>
|
||
</label>
|
||
<label>
|
||
매수/매도
|
||
<select
|
||
value={manualForm.type}
|
||
onChange={(event) =>
|
||
setManualForm((prev) => ({
|
||
...prev,
|
||
type: event.target.value,
|
||
}))
|
||
}
|
||
>
|
||
<option value="buy">매수</option>
|
||
<option value="sell">매도</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
수량
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
step={1}
|
||
value={manualForm.qty}
|
||
onChange={(event) =>
|
||
setManualForm((prev) => ({
|
||
...prev,
|
||
qty: Number(event.target.value),
|
||
}))
|
||
}
|
||
required
|
||
/>
|
||
</label>
|
||
<label>
|
||
금액(원)
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
step={1}
|
||
value={manualForm.price}
|
||
onChange={(event) =>
|
||
setManualForm((prev) => ({
|
||
...prev,
|
||
price: Number(event.target.value),
|
||
}))
|
||
}
|
||
/>
|
||
</label>
|
||
<button
|
||
className="button primary"
|
||
type="submit"
|
||
disabled={manualLoading}
|
||
>
|
||
{manualLoading ? '요청 중...' : '주문 요청'}
|
||
</button>
|
||
{manualError ? (
|
||
<p className="stock-error">{manualError}</p>
|
||
) : null}
|
||
{manualResult ? (
|
||
<div className="stock-result">
|
||
<p className="stock-result__title">요청 결과</p>
|
||
<pre>
|
||
{typeof manualResult === 'string'
|
||
? manualResult
|
||
: JSON.stringify(manualResult, null, 2)}
|
||
</pre>
|
||
</div>
|
||
) : null}
|
||
</form>
|
||
</section>
|
||
</>
|
||
)}
|
||
|
||
{/* ════════════════════════════════════════════════════════
|
||
TAB 4: AI 어드바이저 (Gemini Pro)
|
||
════════════════════════════════════════════════════════ */}
|
||
{activeTab === TAB_ADVISOR && (
|
||
<section className="stock-panel stock-panel--wide advisor-panel">
|
||
{/* 헤더 */}
|
||
<div className="advisor-panel__head">
|
||
<div className="advisor-panel__title-block">
|
||
<span className="advisor-panel__badge">Gemini Pro</span>
|
||
<h3 className="advisor-panel__title">AI 전문가 분석</h3>
|
||
<p className="advisor-panel__sub">
|
||
보유 종목 현재가와 오늘의 뉴스를 기반으로 전문가 관점의 매매 조언을 제공합니다.
|
||
</p>
|
||
</div>
|
||
<div className="advisor-panel__actions">
|
||
{advisorData && (
|
||
<span className="advisor-panel__timestamp">
|
||
{advisorData.cached ? '🗂 캐시' : '✨ 신규'} ·{' '}
|
||
{new Date(advisorData.generated_at).toLocaleTimeString('ko-KR', {
|
||
hour: '2-digit', minute: '2-digit',
|
||
})} 기준
|
||
</span>
|
||
)}
|
||
<button
|
||
className="button ghost small"
|
||
onClick={() => loadAdvisorAnalysis(true)}
|
||
disabled={advisorLoading}
|
||
>
|
||
{advisorLoading ? '분석 중...' : '🔄 새로 분석'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 로딩 */}
|
||
{advisorLoading && (
|
||
<div className="advisor-panel__loading">
|
||
<div className="advisor-loading-spinner" />
|
||
<div className="advisor-loading-text">
|
||
<p>Gemini Pro가 포트폴리오를 분석 중입니다...</p>
|
||
<p className="advisor-loading-sub">현재가 조회 · 뉴스 분석 · 전략 수립</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 에러 */}
|
||
{!advisorLoading && advisorError && (
|
||
<div className="advisor-panel__error">
|
||
<span>⚠️ {advisorError}</span>
|
||
<button className="button ghost small" onClick={() => loadAdvisorAnalysis(true)}>
|
||
다시 시도
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* 분석 결과 */}
|
||
{!advisorLoading && !advisorError && advisorData && (
|
||
<div className="advisor-panel__body">
|
||
<AdvisorMarkdown text={advisorData.analysis} />
|
||
<p className="advisor-panel__disclaimer">
|
||
※ 이 분석은 AI가 생성한 참고 자료이며 투자 결정은 본인의 판단과 책임 하에 이루어져야 합니다.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* 초기 상태 */}
|
||
{!advisorLoading && !advisorError && !advisorData && (
|
||
<div className="advisor-panel__empty">
|
||
<span className="advisor-panel__empty-icon">🧠</span>
|
||
<p>아직 분석 결과가 없습니다.</p>
|
||
<button className="button primary" onClick={() => loadAdvisorAnalysis()}>
|
||
분석 시작
|
||
</button>
|
||
</div>
|
||
)}
|
||
</section>
|
||
)}
|
||
|
||
{/* ════════════════════════════════════════════════════════
|
||
TAB 3: 리포트 + AI 코치
|
||
════════════════════════════════════════════════════════ */}
|
||
{activeTab === TAB_REPORT && (
|
||
<>
|
||
{portfolioLoading && (
|
||
<div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
|
||
<Loading type="spinner" message="포트폴리오 로딩 중..." />
|
||
</div>
|
||
)}
|
||
{portfolioError && <p className="stock-error">{portfolioError}</p>}
|
||
|
||
{/* ── 자산 배분 + 수익률 차트 ────────────────────── */}
|
||
{portfolioHoldings.length > 0 && (
|
||
<section className="stock-panel stock-panel--wide">
|
||
<div className="stock-panel__head">
|
||
<div>
|
||
<p className="stock-panel__eyebrow">포트폴리오 분석</p>
|
||
<h3>자산 배분 현황</h3>
|
||
</div>
|
||
</div>
|
||
<div className="report-charts-row">
|
||
<div className="report-chart-box">
|
||
<p className="report-chart-title">증권사별 자산 배분</p>
|
||
<ResponsiveContainer width="100%" height={220}>
|
||
<PieChart>
|
||
<Pie
|
||
data={brokerPieData}
|
||
cx="50%"
|
||
cy="50%"
|
||
innerRadius={52}
|
||
outerRadius={84}
|
||
dataKey="value"
|
||
paddingAngle={2}
|
||
>
|
||
{brokerPieData.map((_, i) => (
|
||
<Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
|
||
))}
|
||
</Pie>
|
||
<ChartTooltip
|
||
formatter={(v) => [formatNumber(v) + '원', '평가금액']}
|
||
contentStyle={{ background: '#1e293b', border: 'none', borderRadius: 8, fontSize: 12 }}
|
||
/>
|
||
<Legend
|
||
iconType="circle"
|
||
iconSize={8}
|
||
formatter={(v) => <span style={{ color: '#9ca3af', fontSize: 12 }}>{v}</span>}
|
||
/>
|
||
</PieChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
<div className="report-chart-box">
|
||
<p className="report-chart-title">종목별 수익률 (%)</p>
|
||
<ResponsiveContainer width="100%" height={220}>
|
||
<BarChart data={profitBarData} margin={{ top: 0, right: 8, left: -16, bottom: 48 }}>
|
||
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
|
||
<XAxis
|
||
dataKey="name"
|
||
tick={{ fill: '#9ca3af', fontSize: 10 }}
|
||
angle={-40}
|
||
textAnchor="end"
|
||
interval={0}
|
||
/>
|
||
<YAxis
|
||
tick={{ fill: '#9ca3af', fontSize: 10 }}
|
||
tickFormatter={(v) => `${v}%`}
|
||
/>
|
||
<ChartTooltip
|
||
formatter={(v, _n, props) => [`${v.toFixed(2)}%`, props.payload.fullName]}
|
||
contentStyle={{ background: '#1e293b', border: 'none', borderRadius: 8, fontSize: 12 }}
|
||
/>
|
||
<Bar dataKey="rate" radius={[4, 4, 0, 0]}>
|
||
{profitBarData.map((entry, i) => (
|
||
<Cell key={i} fill={entry.rate >= 0 ? '#34d399' : '#f87171'} />
|
||
))}
|
||
</Bar>
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
</div>
|
||
</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">
|
||
<div className="stock-panel__head">
|
||
<div>
|
||
<p className="stock-panel__eyebrow">수익률 랭킹</p>
|
||
<h3>종목별 상세 현황</h3>
|
||
<p className="stock-panel__sub">헤더 클릭으로 정렬 · 비중은 총 평가금액 대비</p>
|
||
</div>
|
||
</div>
|
||
<div className="report-table-wrapper">
|
||
<table className="report-table">
|
||
<thead>
|
||
<tr>
|
||
{[
|
||
{ key: 'name', label: '종목명' },
|
||
{ key: 'broker', label: '증권사' },
|
||
{ key: 'profit_rate', label: '수익률' },
|
||
{ key: 'profit_amount', label: '평가손익' },
|
||
{ key: 'eval_amount', label: '평가금액' },
|
||
].map(({ key, label }) => (
|
||
<th key={key} onClick={() => handleReportSort(key)}>
|
||
{label}{' '}
|
||
<span className="report-sort-icon">
|
||
{reportSortField === key
|
||
? reportSortDir === 'asc' ? '↑' : '↓'
|
||
: '↕'}
|
||
</span>
|
||
</th>
|
||
))}
|
||
<th style={{ cursor: 'default' }}>비중</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{sortedHoldings.map((item) => {
|
||
const rateN = toNumeric(item.profit_rate);
|
||
const pnlN = toNumeric(item.profit_amount);
|
||
const evalAmt = item.eval_amount != null
|
||
? item.eval_amount
|
||
: 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>
|
||
<p className="report-table-name">{item.name ?? item.ticker ?? 'N/A'}</p>
|
||
<span className="report-table-code">{item.ticker ?? ''}</span>
|
||
</td>
|
||
<td className="report-td-muted">{item.broker ?? '-'}</td>
|
||
<td className={`stock-profit ${profitColorClass(rateN)}`}>
|
||
<div className="report-rate-cell">
|
||
<span>{item.profit_rate != null ? formatPercent(item.profit_rate) : '-'}</span>
|
||
{rateN != null && (
|
||
<div className="report-rate-bar">
|
||
<div
|
||
className={`report-rate-bar__fill ${rateN >= 0 ? 'is-up' : 'is-down'}`}
|
||
style={{ width: `${maxAbsRate > 0 ? Math.abs(rateN) / maxAbsRate * 100 : 0}%` }}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</td>
|
||
<td className={`stock-profit ${profitColorClass(pnlN)}`}>
|
||
{item.profit_amount != null ? formatNumber(item.profit_amount) : '-'}
|
||
</td>
|
||
<td className="report-td-muted">
|
||
{evalAmt != null ? formatNumber(evalAmt) : '-'}
|
||
</td>
|
||
<td className="report-td-muted">
|
||
{weight != null ? `${weight.toFixed(1)}%` : '-'}
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{portfolioLoaded && portfolioHoldings.length === 0 && !portfolioError && (
|
||
<section className="stock-panel stock-panel--wide">
|
||
<p className="stock-empty" style={{ textAlign: 'center', padding: 24 }}>
|
||
등록된 종목이 없습니다. <strong>쟁승토리 계좌</strong> 탭에서 종목을 먼저 등록하세요.
|
||
</p>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── AI 투자 코치 ───────────────────────────────── */}
|
||
<section className="stock-panel stock-panel--wide">
|
||
<div className="stock-panel__head">
|
||
<div>
|
||
<p className="stock-panel__eyebrow">AI 투자 코치</p>
|
||
<h3>오늘의 투자 평가</h3>
|
||
<p className="stock-panel__sub">
|
||
포트폴리오를 AI가 분석하여 성취도 등급과 내일을 위한 투자 조언을 드립니다.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 시장 컨텍스트 미니 패널 */}
|
||
{marketCtx && (
|
||
<div className="ai-market-ctx">
|
||
<span className="ai-market-ctx__label">시장 환경</span>
|
||
<div className="ai-market-ctx__chips">
|
||
{marketCtx.vix != null && (
|
||
<span className="ai-market-chip">
|
||
VIX <strong>{marketCtx.vix}</strong>
|
||
<em>{getVixLabel(marketCtx.vix)}</em>
|
||
</span>
|
||
)}
|
||
{marketCtx.fg != null && (
|
||
<span className="ai-market-chip">
|
||
F&G <strong>{marketCtx.fg}</strong>
|
||
<em>{getFgLabel(marketCtx.fg)}</em>
|
||
</span>
|
||
)}
|
||
{marketCtx.treasury != null && (
|
||
<span className="ai-market-chip">
|
||
10년물 <strong>{marketCtx.treasury}%</strong>
|
||
</span>
|
||
)}
|
||
{marketCtx.wti != null && (
|
||
<span className="ai-market-chip">
|
||
WTI <strong>${marketCtx.wti}</strong>
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* API Key 설정 */}
|
||
<div className="ai-coach-settings">
|
||
<label>
|
||
Anthropic API Key
|
||
<div className="ai-coach-key-row">
|
||
<input
|
||
type="password"
|
||
className="ai-coach-key-input"
|
||
value={aiApiKey}
|
||
onChange={(e) => setAiApiKey(e.target.value)}
|
||
placeholder="sk-ant-api03-..."
|
||
/>
|
||
<button
|
||
className="button ghost small"
|
||
type="button"
|
||
onClick={() => {
|
||
localStorage.setItem('ai_coach_key', aiApiKey);
|
||
localStorage.setItem('ai_coach_model', aiModel);
|
||
}}
|
||
>
|
||
저장
|
||
</button>
|
||
</div>
|
||
</label>
|
||
<label>
|
||
AI 모델
|
||
<select
|
||
value={aiModel}
|
||
onChange={(e) => {
|
||
setAiModel(e.target.value);
|
||
localStorage.setItem('ai_coach_model', e.target.value);
|
||
}}
|
||
>
|
||
<option value="claude-haiku-4-5-20251001">Claude Haiku (빠름·저렴)</option>
|
||
<option value="claude-sonnet-4-6">Claude Sonnet (고성능)</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
|
||
<div className="ai-coach-actions">
|
||
<button
|
||
className="button primary"
|
||
type="button"
|
||
onClick={handleAiCoach}
|
||
disabled={aiLoading || !aiApiKey.trim() || portfolioHoldings.length === 0}
|
||
>
|
||
{aiLoading ? 'AI 분석 중...' : '오늘 투자 평가 받기'}
|
||
</button>
|
||
{portfolioHoldings.length === 0 && (
|
||
<span className="ai-coach-note">종목 등록 후 이용 가능합니다.</span>
|
||
)}
|
||
{aiResult?.generated_at && (
|
||
<span className="ai-coach-note">
|
||
{aiResult.cached ? '오늘 캐시 결과 · ' : ''}
|
||
{new Date(aiResult.generated_at).toLocaleTimeString('ko-KR')} 생성
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{aiError && <p className="stock-error" style={{ marginTop: 8 }}>{aiError}</p>}
|
||
|
||
{aiResult && !aiLoading && (
|
||
<div className="ai-coach-result">
|
||
<div className="ai-coach-header">
|
||
<div className={`ai-grade-badge grade-${(aiResult.grade ?? 'c').toLowerCase()}`}>
|
||
{aiResult.grade ?? '?'}
|
||
</div>
|
||
<div className="ai-score-wrap">
|
||
<span className="ai-score-num">{aiResult.score ?? 0}</span>
|
||
<span className="ai-score-unit">/ 100</span>
|
||
</div>
|
||
<p className="ai-summary-text">{aiResult.summary}</p>
|
||
</div>
|
||
<p className="ai-evaluation-text">{aiResult.evaluation}</p>
|
||
{aiResult.advice?.length > 0 && (
|
||
<div className="ai-advice-list">
|
||
{aiResult.advice.map((a, i) => (
|
||
<div key={i} className="ai-advice-card">
|
||
<p className="ai-advice-title">{a.title}</p>
|
||
<p className="ai-advice-body">{a.body}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
<button
|
||
className="button ghost small"
|
||
type="button"
|
||
style={{ marginTop: 16, fontSize: 11 }}
|
||
onClick={() => {
|
||
const today = new Date().toISOString().slice(0, 10);
|
||
localStorage.removeItem(`ai_coach_${today}`);
|
||
setAiResult(null);
|
||
}}
|
||
>
|
||
다시 평가받기 (캐시 삭제)
|
||
</button>
|
||
</div>
|
||
)}
|
||
</section>
|
||
</>
|
||
)}
|
||
|
||
{/* KIS modal */}
|
||
{kisModal ? (
|
||
<div className="stock-modal" role="dialog" aria-modal="true">
|
||
<div
|
||
className="stock-modal__backdrop"
|
||
onClick={() => setKisModal('')}
|
||
/>
|
||
<div className="stock-modal__card">
|
||
<div className="stock-modal__head">
|
||
<h4>주문 결과</h4>
|
||
<button
|
||
type="button"
|
||
className="button ghost small"
|
||
onClick={() => setKisModal('')}
|
||
>
|
||
닫기
|
||
</button>
|
||
</div>
|
||
<pre>{kisModal}</pre>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
{/* ── 실현손익 floating 토글 버튼 (마우스 추적) ────────── */}
|
||
{!sellDrawerOpen && (
|
||
<button
|
||
type="button"
|
||
className="sh-floating-toggle"
|
||
onClick={() => {
|
||
setSellDrawerOpen(true);
|
||
loadSellHistory();
|
||
}}
|
||
title="실현손익 내역"
|
||
>
|
||
<span className="sh-floating-toggle__icon">💹</span>
|
||
<span className="sh-floating-toggle__label">실현손익</span>
|
||
{sellHistory.length > 0 && (
|
||
<span className="sh-floating-toggle__badge">{sellHistory.length}</span>
|
||
)}
|
||
</button>
|
||
)}
|
||
|
||
{/* ════════════════════════════════════════════════════════
|
||
실현손익 드로어
|
||
════════════════════════════════════════════════════════ */}
|
||
{sellDrawerOpen && (
|
||
<div
|
||
className="sh-backdrop"
|
||
onClick={() => { setSellDrawerOpen(false); handleSellFormClose(); }}
|
||
/>
|
||
)}
|
||
<aside className={`sh-drawer ${sellDrawerOpen ? 'is-open' : ''}`}>
|
||
{/* 드로어 헤더 */}
|
||
<div className="sh-drawer__header">
|
||
<div>
|
||
<p className="sh-drawer__eyebrow">실현손익</p>
|
||
<h3 className="sh-drawer__title">매도 거래 내역</h3>
|
||
</div>
|
||
<div className="sh-drawer__header-actions">
|
||
{sellHistoryLoading && <Loading type="spinner" message="" />}
|
||
<button
|
||
className="button ghost small"
|
||
onClick={loadSellHistory}
|
||
disabled={sellHistoryLoading}
|
||
>
|
||
새로고침
|
||
</button>
|
||
<button
|
||
className="button primary small"
|
||
onClick={sellFormOpen && sellEditId == null ? handleSellFormClose : handleSellFormOpen}
|
||
>
|
||
{sellFormOpen && sellEditId == null ? '취소' : '+ 추가'}
|
||
</button>
|
||
<button
|
||
className="sh-drawer__close"
|
||
type="button"
|
||
onClick={() => { setSellDrawerOpen(false); handleSellFormClose(); }}
|
||
aria-label="닫기"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 수동 추가 / 수정 폼 */}
|
||
{sellFormOpen && (
|
||
<form className="sh-form" onSubmit={handleSellFormSubmit}>
|
||
<div className="sh-form__title">
|
||
{sellEditId != null ? '거래 내역 수정' : '매도 내역 수동 추가'}
|
||
</div>
|
||
<div className="sh-form__grid">
|
||
<label>
|
||
증권사
|
||
<input
|
||
type="text"
|
||
value={sellForm.broker}
|
||
onChange={(e) => setSellForm((p) => ({ ...p, broker: e.target.value }))}
|
||
placeholder="KB증권"
|
||
required
|
||
/>
|
||
</label>
|
||
<label>
|
||
종목코드
|
||
<input
|
||
type="text"
|
||
value={sellForm.ticker}
|
||
onChange={(e) => setSellForm((p) => ({ ...p, ticker: e.target.value }))}
|
||
placeholder="005930"
|
||
/>
|
||
</label>
|
||
<label>
|
||
종목명
|
||
<input
|
||
type="text"
|
||
value={sellForm.name}
|
||
onChange={(e) => setSellForm((p) => ({ ...p, name: e.target.value }))}
|
||
placeholder="삼성전자"
|
||
required
|
||
/>
|
||
</label>
|
||
<label>
|
||
수량
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
step={1}
|
||
value={sellForm.quantity}
|
||
onChange={(e) => setSellForm((p) => ({ ...p, quantity: e.target.value }))}
|
||
placeholder="10"
|
||
required
|
||
/>
|
||
</label>
|
||
<label>
|
||
평균 매입가 (원)
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
step={1}
|
||
value={sellForm.avg_price}
|
||
onChange={(e) => setSellForm((p) => ({ ...p, avg_price: e.target.value }))}
|
||
placeholder="58000"
|
||
required
|
||
/>
|
||
</label>
|
||
<label>
|
||
매도가 (원)
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
step={1}
|
||
value={sellForm.sell_price}
|
||
onChange={(e) => setSellForm((p) => ({ ...p, sell_price: e.target.value }))}
|
||
placeholder="62000"
|
||
required
|
||
/>
|
||
</label>
|
||
<label>
|
||
수수료 & 세금 (원)
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
step={1}
|
||
value={sellForm.commission}
|
||
onChange={(e) => setSellForm((p) => ({ ...p, commission: e.target.value }))}
|
||
placeholder="0"
|
||
/>
|
||
</label>
|
||
<label className="sh-form__datetime">
|
||
매도 일시
|
||
<input
|
||
type="datetime-local"
|
||
value={sellForm.sold_at}
|
||
onChange={(e) => setSellForm((p) => ({ ...p, sold_at: e.target.value }))}
|
||
required
|
||
/>
|
||
</label>
|
||
</div>
|
||
{sellForm.quantity && sellForm.avg_price && sellForm.sell_price && (() => {
|
||
const qty = Number(sellForm.quantity);
|
||
const buy = Number(sellForm.avg_price) * qty;
|
||
const sell = Number(sellForm.sell_price) * qty;
|
||
const commission = Number(sellForm.commission) || 0;
|
||
const profit = sell - buy - commission;
|
||
const rate = buy > 0 ? (profit / buy) * 100 : 0;
|
||
return (
|
||
<div className="sh-form__preview">
|
||
<span>매도금액 <strong>{formatNumber(Math.round(sell))}원</strong></span>
|
||
{commission > 0 && (
|
||
<span>수수료 & 세금 <strong className="stock-profit is-negative">-{formatNumber(Math.round(commission))}원</strong></span>
|
||
)}
|
||
<span>실현손익 <strong className={`stock-profit ${profitColorClass(profit)}`}>{formatNumber(Math.round(profit))}원</strong></span>
|
||
<span>수익률 <strong className={`stock-profit ${profitColorClass(rate)}`}>{formatPercent(rate)}</strong></span>
|
||
</div>
|
||
);
|
||
})()}
|
||
<div className="sh-form__actions">
|
||
<button className="button primary" type="submit" disabled={sellFormSaving}>
|
||
{sellFormSaving ? '저장 중...' : (sellEditId != null ? '수정 저장' : '추가')}
|
||
</button>
|
||
<button className="button ghost" type="button" onClick={handleSellFormClose} disabled={sellFormSaving}>
|
||
취소
|
||
</button>
|
||
{sellFormError && <p className="stock-error">{sellFormError}</p>}
|
||
</div>
|
||
</form>
|
||
)}
|
||
|
||
{/* 필터 바 */}
|
||
<div className="sell-history__filters">
|
||
<div className="sell-history__filter-group">
|
||
<span className="sell-history__filter-label">계좌</span>
|
||
{sellHistoryBrokers.map((b) => (
|
||
<button
|
||
key={b}
|
||
type="button"
|
||
className={`sell-history__filter-btn ${sellHistoryBroker === b ? 'is-active' : ''}`}
|
||
onClick={() => setSellHistoryBroker(b)}
|
||
>
|
||
{b === 'ALL' ? '전체' : b}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="sell-history__filter-group">
|
||
<span className="sell-history__filter-label">기간</span>
|
||
{[
|
||
{ label: '1개월', value: '1M' },
|
||
{ label: '3개월', value: '3M' },
|
||
{ label: '6개월', value: '6M' },
|
||
{ label: '1년', value: '1Y' },
|
||
{ label: '전체', value: 'ALL' },
|
||
].map(({ label, value }) => (
|
||
<button
|
||
key={value}
|
||
type="button"
|
||
className={`sell-history__filter-btn ${sellHistoryPeriod === value ? 'is-active' : ''}`}
|
||
onClick={() => setSellHistoryPeriod(value)}
|
||
>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 요약 카드 */}
|
||
{filteredSellHistory.length > 0 && (
|
||
<div className="sell-history__summary">
|
||
<div className="sell-history__summary-card">
|
||
<span>거래 횟수</span>
|
||
<strong>{sellHistorySummary.count}건</strong>
|
||
</div>
|
||
<div className="sell-history__summary-card">
|
||
<span>총 매도금액</span>
|
||
<strong>{formatNumber(sellHistorySummary.totalSell)}원</strong>
|
||
</div>
|
||
<div className="sell-history__summary-card">
|
||
<span>총 수수료 & 세금</span>
|
||
<strong className="stock-profit is-negative">
|
||
-{formatNumber(Math.round(sellHistorySummary.totalCommission))}원
|
||
</strong>
|
||
</div>
|
||
<div className="sell-history__summary-card">
|
||
<span>실현손익 합계</span>
|
||
<strong className={`stock-profit ${profitColorClass(sellHistorySummary.totalProfit)}`}>
|
||
{formatNumber(Math.round(sellHistorySummary.totalProfit))}원
|
||
</strong>
|
||
</div>
|
||
<div className="sell-history__summary-card">
|
||
<span>평균 수익률</span>
|
||
<strong className={`stock-profit ${profitColorClass(sellHistorySummary.rate)}`}>
|
||
{formatPercent(sellHistorySummary.rate)}
|
||
</strong>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 거래 내역 목록 */}
|
||
{filteredSellHistory.length > 0 ? (
|
||
<div className="sh-drawer__list">
|
||
{filteredSellHistory.map((r) => {
|
||
const profitN = r.realized_profit ?? 0;
|
||
const rateN = r.realized_rate ?? 0;
|
||
return (
|
||
<div key={r.id} className="sh-drawer__item">
|
||
<div className="sh-drawer__item-top">
|
||
<div className="sh-drawer__item-name">
|
||
<span>{r.name}</span>
|
||
{r.ticker && <code>{r.ticker}</code>}
|
||
</div>
|
||
<div className="sh-drawer__item-actions">
|
||
<button
|
||
type="button"
|
||
className="button ghost small"
|
||
onClick={() => handleSellEditStart(r)}
|
||
title="수정"
|
||
>
|
||
✏️
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="button ghost small pf-btn-danger"
|
||
onClick={() => handleDeleteSellRecord(r.id)}
|
||
title="삭제"
|
||
>
|
||
🗑️
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="sh-drawer__item-meta">
|
||
<span className="sell-history__broker">{r.broker}</span>
|
||
<span className="sell-history__date">
|
||
{new Date(r.sold_at).toLocaleString('ko-KR', {
|
||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||
hour: '2-digit', minute: '2-digit',
|
||
})}
|
||
</span>
|
||
</div>
|
||
<div className="sh-drawer__item-metrics">
|
||
<div>
|
||
<span>수량</span>
|
||
<strong>{formatNumber(r.quantity)}</strong>
|
||
</div>
|
||
<div>
|
||
<span>매입가</span>
|
||
<strong>{formatNumber(r.avg_price)}</strong>
|
||
</div>
|
||
<div>
|
||
<span>매도가</span>
|
||
<strong>{formatNumber(r.sell_price)}</strong>
|
||
</div>
|
||
<div>
|
||
<span>매도금액</span>
|
||
<strong>{formatNumber(Math.round(r.sell_amount))}</strong>
|
||
</div>
|
||
{(r.commission > 0) && (
|
||
<div>
|
||
<span>수수료 & 세금</span>
|
||
<strong className="stock-profit is-negative">
|
||
-{formatNumber(Math.round(r.commission))}
|
||
</strong>
|
||
</div>
|
||
)}
|
||
<div>
|
||
<span>실현손익</span>
|
||
<strong className={`stock-profit ${profitColorClass(profitN)}`}>
|
||
{formatNumber(Math.round(profitN))}
|
||
</strong>
|
||
</div>
|
||
<div>
|
||
<span>수익률</span>
|
||
<strong className={`stock-profit ${profitColorClass(rateN)}`}>
|
||
{formatPercent(rateN)}
|
||
</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
) : (
|
||
<p className="stock-empty sh-drawer__empty">
|
||
{sellHistory.length === 0
|
||
? '아직 매도 기록이 없습니다.'
|
||
: '필터 조건에 맞는 기록이 없습니다.'}
|
||
</p>
|
||
)}
|
||
</aside>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default StockTrade;
|