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

주식 매매 프로그램 연동 및 페이지 개발 구체화

Browse Source
This commit is contained in:
gahusb
2026-01-27 02:03:04 +09:00
parent 22897c3eb6
commit 9ab45b64b6
4 changed files with 394 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/api.js
View File

@@ -66,14 +66,6 @@ export function getStockNews(limit = 20, category) {
return apiGet(`/api/stock/news?${qs.toString()}`); return apiGet(`/api/stock/news?${qs.toString()}`);
} }
export function triggerStockScrap() {
return apiPost("/api/stock/scrap");
}
export function getStockHealth() {
return apiGet("/api/stock/health");
}
export function getStockIndices() { export function getStockIndices() {
return apiGet("/api/stock/indices"); return apiGet("/api/stock/indices");
} }
@@ -82,6 +74,6 @@ export function getTradeBalance() {
return apiGet("/api/trade/balance"); return apiGet("/api/trade/balance");
} }
export function createTradeOrder(payload) { export function requestAutoTrade(payload) {
return apiPost("/api/trade/order", payload); return apiPost("/api/trade/auto", payload);
} }

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

@@ -367,7 +367,7 @@
border-radius: 12px; border-radius: 12px;
padding: 10px; padding: 10px;
display: grid; display: grid;
grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 0.7fr)); grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 0.6fr));
gap: 10px; gap: 10px;
font-size: 12px; font-size: 12px;
color: var(--muted); color: var(--muted);
@@ -384,6 +384,55 @@
font-size: 11px; font-size: 11px;
} }
.stock-ai {
display: grid;
gap: 12px;
}
.stock-ai__grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stock-ai__card {
border: 1px solid var(--line);
border-radius: 14px;
padding: 12px;
display: grid;
gap: 10px;
background: rgba(0, 0, 0, 0.2);
}
.stock-ai__title {
margin: 0;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.stock-ai__reason {
margin: 0;
font-size: 12px;
color: var(--muted);
line-height: 1.4;
}
.stock-ai__raw {
border: 1px solid var(--line);
border-radius: 14px;
padding: 12px;
background: rgba(0, 0, 0, 0.2);
}
.stock-ai__raw pre {
margin: 8px 0 0;
white-space: pre-wrap;
font-size: 12px;
color: var(--muted);
}
.stock-order { .stock-order {
display: grid; display: grid;
gap: 10px; gap: 10px;

289
src/pages/stock/Stock.jsx
View File

@@ -1,19 +1,18 @@
import React, { useEffect, useMemo, useState } from 'react'; import React, { useEffect, useMemo, useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import { getStockIndices, getStockNews } from '../../api';
getStockHealth,
getStockIndices,
getStockNews,
triggerStockScrap,
} from '../../api';
import './Stock.css'; import './Stock.css';
const formatDate = (value) => value ?? '-'; const formatDate = (value) => {
if (!value) return '-';
const date = new Date(value);
if (Number.isNaN(date.getTime())) return value;
return date.toLocaleString('sv-SE');
};
const toDateValue = (value) => { const toDateValue = (value) => {
if (!value) return null; if (!value) return null;
const normalized = value.replace(' ', 'T').replace(/\./g, '-'); const date = new Date(value);
const date = new Date(normalized);
return Number.isNaN(date.getTime()) ? null : date; return Number.isNaN(date.getTime()) ? null : date;
}; };
@@ -26,36 +25,52 @@ const getLatestBy = (items, key) => {
return filtered[0]?.[key] ?? null; return filtered[0]?.[key] ?? null;
}; };
const normalizeIndices = (data) => {
if (!data || typeof data !== 'object' || Array.isArray(data)) return [];
return Object.entries(data)
.filter(([, value]) => value && typeof value === 'object')
.map(([name, value]) => ({
name,
value: value?.value ?? '-',
change: value?.change ?? '',
percent: value?.percent ?? '',
}));
};
const getDirection = (change, percent) => {
const pick = (value) =>
value === undefined || value === null || value === '' ? null : value;
const raw = pick(change) ?? pick(percent);
if (!raw) return '';
const str = String(raw).trim();
if (str.startsWith('-')) return 'down';
if (str.startsWith('+')) return 'up';
const numeric = Number(str.replace(/[^0-9.-]/g, ''));
if (Number.isFinite(numeric)) {
if (numeric > 0) return 'up';
if (numeric < 0) return 'down';
}
return '';
};
const Stock = () => { const Stock = () => {
const [newsDomestic, setNewsDomestic] = useState([]); const [newsDomestic, setNewsDomestic] = useState([]);
const [newsOverseas, setNewsOverseas] = useState([]); const [newsOverseas, setNewsOverseas] = useState([]);
const [newsCategory, setNewsCategory] = useState('domestic'); const [newsCategory, setNewsCategory] = useState('domestic');
const [limit, setLimit] = useState(20); const [limit, setLimit] = useState(20);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [scraping, setScraping] = useState(false);
const [error, setError] = useState('');
const [newsError, setNewsError] = useState(''); const [newsError, setNewsError] = useState('');
const [indicesError, setIndicesError] = useState(''); const [indicesError, setIndicesError] = useState('');
const [scrapMessage, setScrapMessage] = useState('');
const [health, setHealth] = useState({
status: 'unknown',
message: '',
});
const [indices, setIndices] = useState([]); const [indices, setIndices] = useState([]);
const [indicesLoading, setIndicesLoading] = useState(false); const [indicesLoading, setIndicesLoading] = useState(false);
const [indicesAt, setIndicesAt] = useState('');
const [autoRefreshMs] = useState(180000); const [autoRefreshMs] = useState(180000);
const combinedNews = useMemo( const combinedNews = useMemo(
() => [...newsDomestic, ...newsOverseas], () => [...newsDomestic, ...newsOverseas],
[newsDomestic, newsOverseas] [newsDomestic, newsOverseas]
); );
const latestCrawled = useMemo(
() => getLatestBy(combinedNews, 'crawled_at'),
[combinedNews]
);
const latestPublished = useMemo( const latestPublished = useMemo(
() => getLatestBy(combinedNews, 'pub_date'), () => getLatestBy(combinedNews, 'published_at'),
[combinedNews] [combinedNews]
); );
@@ -76,32 +91,12 @@ const Stock = () => {
} }
}; };
const loadHealth = async () => {
try {
const data = await getStockHealth();
setHealth({
status: data?.ok ? 'ok' : 'warn',
message: data?.message ?? '',
});
} catch (err) {
const rawMessage = err?.message ?? String(err);
const message = rawMessage.includes('404')
? '헬스 체크 엔드포인트가 아직 준비되지 않았습니다.'
: rawMessage;
setHealth({
status: 'unknown',
message,
});
}
};
const loadIndices = async () => { const loadIndices = async () => {
setIndicesLoading(true); setIndicesLoading(true);
setIndicesError(''); setIndicesError('');
try { try {
const data = await getStockIndices(); const data = await getStockIndices();
setIndices(Array.isArray(data?.indices) ? data.indices : []); setIndices(normalizeIndices(data));
setIndicesAt(data?.crawled_at ?? '');
} catch (err) { } catch (err) {
setIndicesError(err?.message ?? String(err)); setIndicesError(err?.message ?? String(err));
} finally { } finally {
@@ -109,46 +104,44 @@ const Stock = () => {
} }
}; };
const onScrap = async () => {
setScraping(true);
setError('');
setScrapMessage('');
try {
const result = await triggerStockScrap();
if (!result?.ok) {
throw new Error('스크랩 요청이 실패했습니다.');
}
setScrapMessage('스크랩 요청 완료');
await loadNews();
} catch (err) {
setError(err?.message ?? String(err));
} finally {
setScraping(false);
}
};
useEffect(() => { useEffect(() => {
loadNews(); loadNews();
}, [limit]); }, [limit]);
useEffect(() => { useEffect(() => {
loadHealth();
loadIndices(); loadIndices();
const timer = window.setInterval(() => { const timer = window.setInterval(loadIndices, autoRefreshMs);
loadIndices();
}, autoRefreshMs);
return () => window.clearInterval(timer); return () => window.clearInterval(timer);
}, [autoRefreshMs]); }, [autoRefreshMs]);
const indexOrder = [
'KOSPI',
'KOSDAQ',
'KOSPI200',
'USD/KRW',
'NASDAQ',
'S&P500',
];
const sortedIndices = [...indices].sort((a, b) => {
const aIndex = indexOrder.indexOf(a.name);
const bIndex = indexOrder.indexOf(b.name);
if (aIndex !== -1 || bIndex !== -1) {
return (aIndex === -1 ? 999 : aIndex) - (bIndex === -1 ? 999 : bIndex);
}
return a.name.localeCompare(b.name);
});
const highlighted = new Set(['KOSPI', 'KOSDAQ', 'USD/KRW']);
const activeNews =
newsCategory === 'domestic' ? newsDomestic : newsOverseas;
return ( return (
<div className="stock"> <div className="stock">
<header className="stock-header"> <header className="stock-header">
<div> <div>
<p className="stock-kicker">Market Lab</p> <p className="stock-kicker">마켓 랩</p>
<h1>Stock Lab</h1> <h1>주식 랩</h1>
<p className="stock-sub"> <p className="stock-sub">
매일 오전 8시에 주식 트렌드 기사를 스크랩하고 요약해, 거래 전 최신 시장 뉴스와 주요 지수 흐름을 한눈에 확인하세요.
빠르게 흐름을 파악할 수 있게 구성했습니다.
</p> </p>
<div className="stock-actions"> <div className="stock-actions">
<button <button
@@ -159,110 +152,76 @@ const Stock = () => {
뉴스 새로고침 뉴스 새로고침
</button> </button>
<Link className="button ghost" to="/stock/trade"> <Link className="button ghost" to="/stock/trade">
잔고/주문 화면 거래 데스크
</Link> </Link>
<button
className="button ghost"
onClick={onScrap}
disabled={scraping}
>
{scraping ? '스크랩 중...' : '스크랩 즉시 실행'}
</button>
</div> </div>
</div> </div>
<div className="stock-card"> <div className="stock-card">
<p className="stock-card__title">오늘의 상태</p> <p className="stock-card__title">뉴스 요약</p>
<div className="stock-status"> <div className="stock-status">
<div> <div>
<span>Health</span> <span>최신 발행</span>
<span className={`stock-pill is-${health.status}`}>
{health.status}
</span>
</div>
<div>
<span>최근 스크랩</span>
<strong>{formatDate(latestCrawled)}</strong>
</div>
<div>
<span>최근 발행</span>
<strong>{formatDate(latestPublished)}</strong> <strong>{formatDate(latestPublished)}</strong>
</div> </div>
<div> <div>
<span>기사 수</span> <span>국내</span>
<strong>{combinedNews.length}건</strong> <strong>{newsDomestic.length}</strong>
</div>
<div>
<span>해외</span>
<strong>{newsOverseas.length}</strong>
</div> </div>
</div> </div>
{health.message ? (
<p className="stock-status__note">{health.message}</p>
) : null}
</div> </div>
</header> </header>
{error ? <p className="stock-error">{error}</p> : null}
{scrapMessage ? (
<p className="stock-success">{scrapMessage}</p>
) : null}
<section className="stock-grid"> <section className="stock-grid">
<div className="stock-panel"> <div className="stock-panel">
<div className="stock-panel__head"> <div className="stock-panel__head">
<div> <div>
<p className="stock-panel__eyebrow">Snapshot</p> <p className="stock-panel__eyebrow">스냅샷</p>
<h3>시장 스냅샷</h3> <h3>주요 지수</h3>
<p className="stock-panel__sub"> <p className="stock-panel__sub">
주요 지표의 현재가와 등락을 빠르게 확인합니다. 주요 지수 값과 등락을 함께 확인합니다.
</p> </p>
</div> </div>
<div className="stock-panel__actions"> <div className="stock-panel__actions">
{indicesLoading ? ( {indicesLoading ? (
<span className="stock-chip">갱신 중</span> <span className="stock-chip">불러오는 중</span>
) : null}
{indicesAt ? (
<span className="stock-chip">{indicesAt}</span>
) : null} ) : null}
<button <button
className="button ghost small" className="button ghost small"
onClick={loadIndices} onClick={loadIndices}
disabled={indicesLoading} disabled={indicesLoading}
> >
지표 새로고침 새로고침
</button> </button>
</div> </div>
</div> </div>
<div className="stock-snapshot"> <div className="stock-snapshot">
{indicesError ? ( {indicesError ? (
<p className="stock-empty">{indicesError}</p> <p className="stock-empty">{indicesError}</p>
) : indices.length === 0 ? ( ) : sortedIndices.length === 0 ? (
<p className="stock-empty">지표 데이터를 불러오지 못했습니다.</p> <p className="stock-empty">
지수 데이터가 없습니다.
</p>
) : ( ) : (
[...indices] sortedIndices.map((item) => {
.sort((a, b) => { const direction = getDirection(
const typeOrder = ['domestic', 'overseas']; item.change,
const order = { item.percent
domestic: ['KOSPI', 'KOSDAQ', 'KOSPI200'],
overseas: ['NASDAQ', 'NAS', 'S&P500'],
};
const aTypeIdx = typeOrder.indexOf(a.type);
const bTypeIdx = typeOrder.indexOf(b.type);
if (aTypeIdx !== bTypeIdx) {
return (
(aTypeIdx === -1 ? 99 : aTypeIdx) -
(bTypeIdx === -1 ? 99 : bTypeIdx)
); );
} const changeText = [
const aOrder = item.change,
order[a.type]?.indexOf(a.name) ?? 999; item.percent,
const bOrder = ]
order[b.type]?.indexOf(b.name) ?? 999; .filter(Boolean)
return aOrder - bOrder; .join(' ');
}) return (
.map((item) => (
<div <div
key={item.name} key={item.name}
className={`stock-snapshot__card ${ className={`stock-snapshot__card ${
['KOSPI200', 'NASDAQ', 'NAS'].includes( highlighted.has(item.name)
item.name?.toUpperCase?.() ?? ''
)
? 'is-highlight' ? 'is-highlight'
: '' : ''
}`} }`}
@@ -271,23 +230,18 @@ const Stock = () => {
<strong>{item.value ?? '--'}</strong> <strong>{item.value ?? '--'}</strong>
<span <span
className={`stock-snapshot__change ${ className={`stock-snapshot__change ${
item.direction === 'red' direction === 'up'
? 'is-up' ? 'is-up'
: item.direction === 'blue' : direction === 'down'
? 'is-down' ? 'is-down'
: '' : ''
}`} }`}
> >
{item.direction === 'red' {changeText || '--'}
? '▲'
: item.direction === 'blue'
? '▼'
: '■'}{' '}
{item.change_value ?? '--'}{' '}
{item.change_percent ?? ''}
</span> </span>
</div> </div>
)) );
})
)} )}
</div> </div>
</div> </div>
@@ -295,10 +249,10 @@ const Stock = () => {
<div className="stock-panel"> <div className="stock-panel">
<div className="stock-panel__head"> <div className="stock-panel__head">
<div> <div>
<p className="stock-panel__eyebrow">Filter</p> <p className="stock-panel__eyebrow">필터</p>
<h3>뉴스 필터</h3> <h3>뉴스 필터</h3>
<p className="stock-panel__sub"> <p className="stock-panel__sub">
표시 개수를 조정해 빠르게 훑어볼 수 있습니다. 표시할 뉴스 개수를 조정합니다.
</p> </p>
</div> </div>
</div> </div>
@@ -313,13 +267,13 @@ const Stock = () => {
> >
{[10, 20, 30, 40].map((value) => ( {[10, 20, 30, 40].map((value) => (
<option key={value} value={value}> <option key={value} value={value}>
{value}개 {value}
</option> </option>
))} ))}
</select> </select>
</label> </label>
<p className="stock-filter__note"> <p className="stock-filter__note">
최신 기사부터 정렬됩니다. 최신 뉴스가 먼저 표시됩니다.
</p> </p>
</div> </div>
</div> </div>
@@ -328,10 +282,10 @@ const Stock = () => {
<section className="stock-panel stock-panel--wide"> <section className="stock-panel stock-panel--wide">
<div className="stock-panel__head"> <div className="stock-panel__head">
<div> <div>
<p className="stock-panel__eyebrow">Headlines</p> <p className="stock-panel__eyebrow">헤드라인</p>
<h3>트렌드 기사</h3> <h3>시장 뉴스</h3>
<p className="stock-panel__sub"> <p className="stock-panel__sub">
스크랩된 뉴스 요약을 바로 확인할 수 있습니다. Stock Lab API에서 최신 뉴스를 불러옵니다.
</p> </p>
</div> </div>
<div className="stock-panel__actions"> <div className="stock-panel__actions">
@@ -339,7 +293,7 @@ const Stock = () => {
<span className="stock-chip">불러오는 중</span> <span className="stock-chip">불러오는 중</span>
) : null} ) : null}
<span className="stock-chip"> <span className="stock-chip">
국내 {newsDomestic.length} · 해외{' '} 국내 {newsDomestic.length} / 해외{' '}
{newsOverseas.length} {newsOverseas.length}
</span> </span>
</div> </div>
@@ -350,7 +304,7 @@ const Stock = () => {
) : newsError ? ( ) : newsError ? (
<p className="stock-empty">{newsError}</p> <p className="stock-empty">{newsError}</p>
) : combinedNews.length === 0 ? ( ) : combinedNews.length === 0 ? (
<p className="stock-empty">표시할 뉴스가 없습니다.</p> <p className="stock-empty">뉴스가 없습니다.</p>
) : ( ) : (
<> <>
<div className="stock-tabs"> <div className="stock-tabs">
@@ -363,7 +317,7 @@ const Stock = () => {
}`} }`}
onClick={() => setNewsCategory('domestic')} onClick={() => setNewsCategory('domestic')}
> >
국내 뉴스 국내
</button> </button>
<button <button
type="button" type="button"
@@ -374,33 +328,34 @@ const Stock = () => {
}`} }`}
onClick={() => setNewsCategory('overseas')} onClick={() => setNewsCategory('overseas')}
> >
해외 뉴스 해외
</button> </button>
</div> </div>
{newsCategory === 'overseas' && {activeNews.length === 0 ? (
newsOverseas.length === 0 ? ( <p className="stock-empty">
<p className="stock-empty">해외 뉴스 없음</p> 해당 카테고리 뉴스가 없습니다.
</p>
) : ( ) : (
<div className="stock-news"> <div className="stock-news">
{(newsCategory === 'domestic' {activeNews.map((item) => (
? newsDomestic
: newsOverseas
).map((item) => (
<article <article
key={item.id} key={item.id ?? item.link}
className="stock-news__item" className="stock-news__item"
> >
<div> <div>
<p className="stock-news__title"> <p className="stock-news__title">
{item.title} {item.title}
</p> </p>
<p className="stock-news__summary">
{item.summary}
</p>
</div> </div>
<div className="stock-news__meta"> <div className="stock-news__meta">
<span>{item.press}</span> <span>
<span>{item.pub_date}</span> {formatDate(item.published_at)}
</span>
{item.sentiment ? (
<span className="stock-chip">
{item.sentiment}
</span>
) : null}
<a <a
href={item.link} href={item.link}
target="_blank" target="_blank"

328
src/pages/stock/StockTrade.jsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useMemo, useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { createTradeOrder, getTradeBalance } from '../../api'; import { getTradeBalance, requestAutoTrade } from '../../api';
import './Stock.css'; import './Stock.css';
const formatNumber = (value) => { const formatNumber = (value) => {
@@ -10,19 +10,21 @@ const formatNumber = (value) => {
return new Intl.NumberFormat('ko-KR').format(numeric); 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.toFixed(2)}%`;
};
const StockTrade = () => { const StockTrade = () => {
const [balance, setBalance] = useState(null); const [balance, setBalance] = useState(null);
const [balanceLoading, setBalanceLoading] = useState(false); const [balanceLoading, setBalanceLoading] = useState(false);
const [balanceError, setBalanceError] = useState(''); const [balanceError, setBalanceError] = useState('');
const [orderForm, setOrderForm] = useState({ const [autoLoading, setAutoLoading] = useState(false);
code: '', const [autoError, setAutoError] = useState('');
qty: 1, const [autoResult, setAutoResult] = useState(null);
price: 0,
type: 'buy',
});
const [orderLoading, setOrderLoading] = useState(false);
const [orderMessage, setOrderMessage] = useState('');
const [error, setError] = useState('');
const loadBalance = async () => { const loadBalance = async () => {
setBalanceLoading(true); setBalanceLoading(true);
@@ -37,25 +39,20 @@ const StockTrade = () => {
} }
}; };
const onOrderSubmit = async (event) => { const runAutoTrade = async () => {
event.preventDefault(); setAutoLoading(true);
setOrderLoading(true); setAutoError('');
setOrderMessage(''); setAutoResult(null);
setError('');
try { try {
const payload = { const result = await requestAutoTrade();
code: orderForm.code.trim(), setAutoResult(result);
qty: Number(orderForm.qty), if (result?.status === 'success') {
price: Number(orderForm.price),
type: orderForm.type,
};
const result = await createTradeOrder(payload);
setOrderMessage(result?.message ?? '주문이 접수되었습니다.');
await loadBalance(); await loadBalance();
}
} catch (err) { } catch (err) {
setError(err?.message ?? String(err)); setAutoError(err?.message ?? String(err));
} finally { } finally {
setOrderLoading(false); setAutoLoading(false);
} }
}; };
@@ -63,49 +60,63 @@ const StockTrade = () => {
loadBalance(); loadBalance();
}, []); }, []);
const holdings = useMemo(
() => (Array.isArray(balance?.holdings) ? balance.holdings : []),
[balance]
);
const summary = balance?.summary ?? {};
const autoStatus = autoResult?.status ?? '';
const decision = autoResult?.decision ?? null;
const tradeResult = autoResult?.trade_result ?? null;
return ( return (
<div className="stock"> <div className="stock">
<header className="stock-header"> <header className="stock-header">
<div> <div>
<p className="stock-kicker">Trade Desk</p> <p className="stock-kicker">거래 데스크</p>
<h1>Stock Trade</h1> <h1>주식 거래</h1>
<p className="stock-sub"> <p className="stock-sub">
잔고 확인과 매수/매도 주문을 한 화면에서 집중적으로 처리합니다. 연결된 계좌 잔고를 확인하고 AI 자동 매매 판단을
요청하세요.
</p> </p>
<div className="stock-actions"> <div className="stock-actions">
<Link className="button ghost" to="/stock"> <Link className="button ghost" to="/stock">
스톡 홈으로 주식 랩으로 돌아가기
</Link> </Link>
</div> </div>
</div> </div>
<div className="stock-card"> <div className="stock-card">
<p className="stock-card__title">거래 안내</p> <p className="stock-card__title">계좌 요약</p>
<div className="stock-status"> <div className="stock-status">
<div> <div>
<span>주문 유형</span> <span>총 평가금액</span>
<strong>시장가/지정가</strong> <strong>{formatNumber(summary.total_eval)}</strong>
</div> </div>
<div> <div>
<span>시장가</span> <span>예수금</span>
<strong>가격 0 입력</strong> <strong>{formatNumber(summary.deposit)}</strong>
</div> </div>
<div> <div>
<span>안내</span> <span>보유 종목</span>
<strong>주문 전 코드 확인</strong> <strong>{holdings.length}</strong>
</div> </div>
</div> </div>
{summary.note ? (
<p className="stock-status__note">{summary.note}</p>
) : null}
</div> </div>
</header> </header>
{error ? <p className="stock-error">{error}</p> : null} {balanceError ? <p className="stock-error">{balanceError}</p> : null}
{autoError ? <p className="stock-error">{autoError}</p> : null}
<section className="stock-panel stock-panel--wide"> <section className="stock-panel stock-panel--wide">
<div className="stock-panel__head"> <div className="stock-panel__head">
<div> <div>
<p className="stock-panel__eyebrow">Balance</p> <p className="stock-panel__eyebrow">잔고</p>
<h3>잔고</h3> <h3>보유 현황</h3>
<p className="stock-panel__sub"> <p className="stock-panel__sub">
보유 잔고와 보유 종목을 확인합니다. 연결 계좌의 실시간 잔고와 보유 종목을 확인합니다.
</p> </p>
</div> </div>
<div className="stock-panel__actions"> <div className="stock-panel__actions">
@@ -117,40 +128,22 @@ const StockTrade = () => {
onClick={loadBalance} onClick={loadBalance}
disabled={balanceLoading} disabled={balanceLoading}
> >
잔고 새로고침 새로고침
</button> </button>
</div> </div>
</div> </div>
{balanceError ? (
<p className="stock-empty">{balanceError}</p>
) : (
<div className="stock-balance"> <div className="stock-balance">
<div className="stock-balance__summary"> <div className="stock-balance__summary">
{[ {[
{
label: '예수금',
value:
balance?.cash ??
balance?.available_cash ??
balance?.deposit,
},
{ {
label: '총 평가', label: '총 평가',
value: value: summary.total_eval,
balance?.total_eval ??
balance?.total_value ??
balance?.evaluation,
}, },
{ {
label: '손익', label: '예수금',
value: value: summary.deposit,
balance?.pnl ??
balance?.profit_loss ??
balance?.total_pnl,
}, },
] ].map((item) => (
.filter((item) => item.value !== undefined)
.map((item) => (
<div <div
key={item.label} key={item.label}
className="stock-balance__card" className="stock-balance__card"
@@ -160,147 +153,140 @@ const StockTrade = () => {
</div> </div>
))} ))}
</div> </div>
{Array.isArray( {holdings.length ? (
balance?.holdings ??
balance?.positions ??
balance?.items
) &&
(balance?.holdings ??
balance?.positions ??
balance?.items).length ? (
<div className="stock-holdings"> <div className="stock-holdings">
{(balance?.holdings ?? {holdings.map((item, idx) => (
balance?.positions ??
balance?.items
).map((item, idx) => (
<div <div
key={ key={item.code ?? `${item.name}-${idx}`}
item.code ??
item.symbol ??
`${item.name ?? 'item'}-${idx}`
}
className="stock-holdings__item" className="stock-holdings__item"
> >
<div> <div>
<p className="stock-holdings__name"> <p className="stock-holdings__name">
{item.name ?? item.code ?? '종목'} {item.name ?? item.code ?? 'N/A'}
</p> </p>
<span className="stock-holdings__code"> <span className="stock-holdings__code">
{item.code ?? item.symbol ?? ''} {item.code ?? ''}
</span> </span>
</div> </div>
<div> <div>
<span>수량</span> <span>수량</span>
<strong> <strong>
{formatNumber( {formatNumber(item.qty)}
item.qty ??
item.quantity ??
item.holding
)}
</strong> </strong>
</div> </div>
<div> <div>
<span>평균단가</span> <span>매입가</span>
<strong> <strong>
{formatNumber( {formatNumber(item.buy_price)}
item.avg_price ?? </strong>
item.avg ?? </div>
item.price <div>
)} <span>현재가</span>
<strong>
{formatNumber(item.current_price)}
</strong>
</div>
<div>
<span>수익률</span>
<strong>
{formatPercent(item.profit_rate)}
</strong> </strong>
</div> </div>
</div> </div>
))} ))}
</div> </div>
) : ( ) : (
<p className="stock-empty">보유 종목 없음</p> <p className="stock-empty">보유 종목이 없습니다.</p>
)} )}
</div> </div>
)}
</section> </section>
<section className="stock-panel stock-panel--wide"> <section className="stock-panel stock-panel--wide">
<div className="stock-panel__head"> <div className="stock-panel__head">
<div> <div>
<p className="stock-panel__eyebrow">Order</p> <p className="stock-panel__eyebrow">자동 매매</p>
<h3>주문 (매수/매도)</h3> <h3>AI 매매 판단</h3>
<p className="stock-panel__sub"> <p className="stock-panel__sub">
종목 코드, 수량, 가격을 입력해 주문을 전송합니다. 분석에 몇 초 걸릴 수 있습니다. 결과는 아래에
표시됩니다.
</p> </p>
</div> </div>
</div> <div className="stock-panel__actions">
<form className="stock-order" onSubmit={onOrderSubmit}> {autoLoading ? (
<label> <span className="stock-chip">분석 중</span>
종목 코드
<input
type="text"
value={orderForm.code}
onChange={(event) =>
setOrderForm((prev) => ({
...prev,
code: event.target.value,
}))
}
placeholder="005930"
required
/>
</label>
<label>
수량
<input
type="number"
min={1}
step={1}
value={orderForm.qty}
onChange={(event) =>
setOrderForm((prev) => ({
...prev,
qty: Number(event.target.value),
}))
}
/>
</label>
<label>
가격 (0=시장가)
<input
type="number"
min={0}
step={1}
value={orderForm.price}
onChange={(event) =>
setOrderForm((prev) => ({
...prev,
price: Number(event.target.value),
}))
}
/>
</label>
<label>
주문 타입
<select
value={orderForm.type}
onChange={(event) =>
setOrderForm((prev) => ({
...prev,
type: event.target.value,
}))
}
>
<option value="buy">매수</option>
<option value="sell">매도</option>
</select>
</label>
<button
className="button primary"
type="submit"
disabled={orderLoading}
>
{orderLoading ? '주문 중...' : '주문 실행'}
</button>
{orderMessage ? (
<p className="stock-success">{orderMessage}</p>
) : null} ) : null}
</form> <button
className="button primary small"
onClick={runAutoTrade}
disabled={autoLoading}
>
요청
</button>
</div>
</div>
<div className="stock-ai">
{!autoResult ? (
<p className="stock-empty">
아직 자동 매매 요청이 없습니다.
</p>
) : autoStatus === 'failed_parse' ? (
<div className="stock-ai__raw">
<p className="stock-ai__title">원문 응답</p>
<pre>
{autoResult?.raw_response ??
'원문 응답이 없습니다.'}
</pre>
</div>
) : (
<div className="stock-ai__grid">
<div className="stock-ai__card">
<p className="stock-ai__title">판단</p>
<div className="stock-status">
<div>
<span>액션</span>
<strong>{decision?.action ?? '-'}</strong>
</div>
<div>
<span>종목코드</span>
<strong>{decision?.ticker ?? '-'}</strong>
</div>
<div>
<span>수량</span>
<strong>
{formatNumber(decision?.quantity)}
</strong>
</div>
</div>
{decision?.reason ? (
<p className="stock-ai__reason">
{decision.reason}
</p>
) : null}
</div>
<div className="stock-ai__card">
<p className="stock-ai__title">주문 결과</p>
<div className="stock-status">
<div>
<span>상태</span>
<strong>
{tradeResult?.success === true
? '성공'
: tradeResult?.success === false
? '실패'
: '대기'}
</strong>
</div>
<div>
<span>주문번호</span>
<strong>
{tradeResult?.order_no ?? '-'}
</strong>
</div>
</div>
</div>
</div>
)}
</div>
</section> </section>
</div> </div>
); );