주식 매매 프로그램 연동 및 페이지 개발 구체화
This commit is contained in:
12
src/api.js
12
src/api.js
@@ -66,14 +66,6 @@ export function getStockNews(limit = 20, category) {
|
||||
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() {
|
||||
return apiGet("/api/stock/indices");
|
||||
}
|
||||
@@ -82,6 +74,6 @@ export function getTradeBalance() {
|
||||
return apiGet("/api/trade/balance");
|
||||
}
|
||||
|
||||
export function createTradeOrder(payload) {
|
||||
return apiPost("/api/trade/order", payload);
|
||||
export function requestAutoTrade(payload) {
|
||||
return apiPost("/api/trade/auto", payload);
|
||||
}
|
||||
|
||||
@@ -367,7 +367,7 @@
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
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;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
@@ -384,6 +384,55 @@
|
||||
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 {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
|
||||
@@ -1,19 +1,18 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
getStockHealth,
|
||||
getStockIndices,
|
||||
getStockNews,
|
||||
triggerStockScrap,
|
||||
} from '../../api';
|
||||
import { getStockIndices, getStockNews } from '../../api';
|
||||
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) => {
|
||||
if (!value) return null;
|
||||
const normalized = value.replace(' ', 'T').replace(/\./g, '-');
|
||||
const date = new Date(normalized);
|
||||
const date = new Date(value);
|
||||
return Number.isNaN(date.getTime()) ? null : date;
|
||||
};
|
||||
|
||||
@@ -26,36 +25,52 @@ const getLatestBy = (items, key) => {
|
||||
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 [newsDomestic, setNewsDomestic] = useState([]);
|
||||
const [newsOverseas, setNewsOverseas] = useState([]);
|
||||
const [newsCategory, setNewsCategory] = useState('domestic');
|
||||
const [limit, setLimit] = useState(20);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [scraping, setScraping] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [newsError, setNewsError] = useState('');
|
||||
const [indicesError, setIndicesError] = useState('');
|
||||
const [scrapMessage, setScrapMessage] = useState('');
|
||||
const [health, setHealth] = useState({
|
||||
status: 'unknown',
|
||||
message: '',
|
||||
});
|
||||
const [indices, setIndices] = useState([]);
|
||||
const [indicesLoading, setIndicesLoading] = useState(false);
|
||||
const [indicesAt, setIndicesAt] = useState('');
|
||||
const [autoRefreshMs] = useState(180000);
|
||||
|
||||
const combinedNews = useMemo(
|
||||
() => [...newsDomestic, ...newsOverseas],
|
||||
[newsDomestic, newsOverseas]
|
||||
);
|
||||
const latestCrawled = useMemo(
|
||||
() => getLatestBy(combinedNews, 'crawled_at'),
|
||||
[combinedNews]
|
||||
);
|
||||
const latestPublished = useMemo(
|
||||
() => getLatestBy(combinedNews, 'pub_date'),
|
||||
() => getLatestBy(combinedNews, 'published_at'),
|
||||
[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 () => {
|
||||
setIndicesLoading(true);
|
||||
setIndicesError('');
|
||||
try {
|
||||
const data = await getStockIndices();
|
||||
setIndices(Array.isArray(data?.indices) ? data.indices : []);
|
||||
setIndicesAt(data?.crawled_at ?? '');
|
||||
setIndices(normalizeIndices(data));
|
||||
} catch (err) {
|
||||
setIndicesError(err?.message ?? String(err));
|
||||
} 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(() => {
|
||||
loadNews();
|
||||
}, [limit]);
|
||||
|
||||
useEffect(() => {
|
||||
loadHealth();
|
||||
loadIndices();
|
||||
const timer = window.setInterval(() => {
|
||||
loadIndices();
|
||||
}, autoRefreshMs);
|
||||
const timer = window.setInterval(loadIndices, autoRefreshMs);
|
||||
return () => window.clearInterval(timer);
|
||||
}, [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 (
|
||||
<div className="stock">
|
||||
<header className="stock-header">
|
||||
<div>
|
||||
<p className="stock-kicker">Market Lab</p>
|
||||
<h1>Stock Lab</h1>
|
||||
<p className="stock-kicker">마켓 랩</p>
|
||||
<h1>주식 랩</h1>
|
||||
<p className="stock-sub">
|
||||
매일 오전 8시에 주식 트렌드 기사를 스크랩하고 요약해, 거래 전
|
||||
빠르게 흐름을 파악할 수 있게 구성했습니다.
|
||||
최신 시장 뉴스와 주요 지수 흐름을 한눈에 확인하세요.
|
||||
</p>
|
||||
<div className="stock-actions">
|
||||
<button
|
||||
@@ -159,110 +152,76 @@ const Stock = () => {
|
||||
뉴스 새로고침
|
||||
</button>
|
||||
<Link className="button ghost" to="/stock/trade">
|
||||
잔고/주문 화면
|
||||
거래 데스크
|
||||
</Link>
|
||||
<button
|
||||
className="button ghost"
|
||||
onClick={onScrap}
|
||||
disabled={scraping}
|
||||
>
|
||||
{scraping ? '스크랩 중...' : '스크랩 즉시 실행'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stock-card">
|
||||
<p className="stock-card__title">오늘의 상태</p>
|
||||
<p className="stock-card__title">뉴스 요약</p>
|
||||
<div className="stock-status">
|
||||
<div>
|
||||
<span>Health</span>
|
||||
<span className={`stock-pill is-${health.status}`}>
|
||||
{health.status}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>최근 스크랩</span>
|
||||
<strong>{formatDate(latestCrawled)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>최근 발행</span>
|
||||
<span>최신 발행</span>
|
||||
<strong>{formatDate(latestPublished)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>기사 수</span>
|
||||
<strong>{combinedNews.length}건</strong>
|
||||
<span>국내</span>
|
||||
<strong>{newsDomestic.length}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>해외</span>
|
||||
<strong>{newsOverseas.length}</strong>
|
||||
</div>
|
||||
</div>
|
||||
{health.message ? (
|
||||
<p className="stock-status__note">{health.message}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{error ? <p className="stock-error">{error}</p> : null}
|
||||
{scrapMessage ? (
|
||||
<p className="stock-success">{scrapMessage}</p>
|
||||
) : null}
|
||||
|
||||
<section className="stock-grid">
|
||||
<div className="stock-panel">
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">Snapshot</p>
|
||||
<h3>시장 스냅샷</h3>
|
||||
<p className="stock-panel__eyebrow">스냅샷</p>
|
||||
<h3>주요 지수</h3>
|
||||
<p className="stock-panel__sub">
|
||||
주요 지표의 현재가와 등락을 빠르게 확인합니다.
|
||||
주요 지수 값과 등락을 함께 확인합니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="stock-panel__actions">
|
||||
{indicesLoading ? (
|
||||
<span className="stock-chip">갱신 중</span>
|
||||
) : null}
|
||||
{indicesAt ? (
|
||||
<span className="stock-chip">{indicesAt}</span>
|
||||
<span className="stock-chip">불러오는 중</span>
|
||||
) : null}
|
||||
<button
|
||||
className="button ghost small"
|
||||
onClick={loadIndices}
|
||||
disabled={indicesLoading}
|
||||
>
|
||||
지표 새로고침
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stock-snapshot">
|
||||
{indicesError ? (
|
||||
<p className="stock-empty">{indicesError}</p>
|
||||
) : indices.length === 0 ? (
|
||||
<p className="stock-empty">지표 데이터를 불러오지 못했습니다.</p>
|
||||
) : sortedIndices.length === 0 ? (
|
||||
<p className="stock-empty">
|
||||
지수 데이터가 없습니다.
|
||||
</p>
|
||||
) : (
|
||||
[...indices]
|
||||
.sort((a, b) => {
|
||||
const typeOrder = ['domestic', 'overseas'];
|
||||
const order = {
|
||||
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 aOrder =
|
||||
order[a.type]?.indexOf(a.name) ?? 999;
|
||||
const bOrder =
|
||||
order[b.type]?.indexOf(b.name) ?? 999;
|
||||
return aOrder - bOrder;
|
||||
})
|
||||
.map((item) => (
|
||||
sortedIndices.map((item) => {
|
||||
const direction = getDirection(
|
||||
item.change,
|
||||
item.percent
|
||||
);
|
||||
const changeText = [
|
||||
item.change,
|
||||
item.percent,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
return (
|
||||
<div
|
||||
key={item.name}
|
||||
className={`stock-snapshot__card ${
|
||||
['KOSPI200', 'NASDAQ', 'NAS'].includes(
|
||||
item.name?.toUpperCase?.() ?? ''
|
||||
)
|
||||
highlighted.has(item.name)
|
||||
? 'is-highlight'
|
||||
: ''
|
||||
}`}
|
||||
@@ -271,23 +230,18 @@ const Stock = () => {
|
||||
<strong>{item.value ?? '--'}</strong>
|
||||
<span
|
||||
className={`stock-snapshot__change ${
|
||||
item.direction === 'red'
|
||||
direction === 'up'
|
||||
? 'is-up'
|
||||
: item.direction === 'blue'
|
||||
: direction === 'down'
|
||||
? 'is-down'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{item.direction === 'red'
|
||||
? '▲'
|
||||
: item.direction === 'blue'
|
||||
? '▼'
|
||||
: '■'}{' '}
|
||||
{item.change_value ?? '--'}{' '}
|
||||
{item.change_percent ?? ''}
|
||||
{changeText || '--'}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -295,10 +249,10 @@ const Stock = () => {
|
||||
<div className="stock-panel">
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">Filter</p>
|
||||
<p className="stock-panel__eyebrow">필터</p>
|
||||
<h3>뉴스 필터</h3>
|
||||
<p className="stock-panel__sub">
|
||||
표시 개수를 조정해 빠르게 훑어볼 수 있습니다.
|
||||
표시할 뉴스 개수를 조정합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -313,13 +267,13 @@ const Stock = () => {
|
||||
>
|
||||
{[10, 20, 30, 40].map((value) => (
|
||||
<option key={value} value={value}>
|
||||
{value}개
|
||||
{value}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<p className="stock-filter__note">
|
||||
최신 기사부터 정렬됩니다.
|
||||
최신 뉴스가 먼저 표시됩니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -328,20 +282,20 @@ const Stock = () => {
|
||||
<section className="stock-panel stock-panel--wide">
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">Headlines</p>
|
||||
<h3>트렌드 기사</h3>
|
||||
<p className="stock-panel__eyebrow">헤드라인</p>
|
||||
<h3>시장 뉴스</h3>
|
||||
<p className="stock-panel__sub">
|
||||
스크랩된 뉴스 요약을 바로 확인할 수 있습니다.
|
||||
Stock Lab API에서 최신 뉴스를 불러옵니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="stock-panel__actions">
|
||||
{loading ? (
|
||||
<span className="stock-chip">불러오는 중</span>
|
||||
) : null}
|
||||
<span className="stock-chip">
|
||||
국내 {newsDomestic.length} · 해외{' '}
|
||||
{newsOverseas.length}
|
||||
</span>
|
||||
<span className="stock-chip">
|
||||
국내 {newsDomestic.length} / 해외{' '}
|
||||
{newsOverseas.length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -350,7 +304,7 @@ const Stock = () => {
|
||||
) : newsError ? (
|
||||
<p className="stock-empty">{newsError}</p>
|
||||
) : combinedNews.length === 0 ? (
|
||||
<p className="stock-empty">표시할 뉴스가 없습니다.</p>
|
||||
<p className="stock-empty">뉴스가 없습니다.</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="stock-tabs">
|
||||
@@ -363,7 +317,7 @@ const Stock = () => {
|
||||
}`}
|
||||
onClick={() => setNewsCategory('domestic')}
|
||||
>
|
||||
국내 뉴스
|
||||
국내
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -374,33 +328,34 @@ const Stock = () => {
|
||||
}`}
|
||||
onClick={() => setNewsCategory('overseas')}
|
||||
>
|
||||
해외 뉴스
|
||||
해외
|
||||
</button>
|
||||
</div>
|
||||
{newsCategory === 'overseas' &&
|
||||
newsOverseas.length === 0 ? (
|
||||
<p className="stock-empty">해외 뉴스 없음</p>
|
||||
{activeNews.length === 0 ? (
|
||||
<p className="stock-empty">
|
||||
해당 카테고리 뉴스가 없습니다.
|
||||
</p>
|
||||
) : (
|
||||
<div className="stock-news">
|
||||
{(newsCategory === 'domestic'
|
||||
? newsDomestic
|
||||
: newsOverseas
|
||||
).map((item) => (
|
||||
{activeNews.map((item) => (
|
||||
<article
|
||||
key={item.id}
|
||||
key={item.id ?? item.link}
|
||||
className="stock-news__item"
|
||||
>
|
||||
<div>
|
||||
<p className="stock-news__title">
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="stock-news__summary">
|
||||
{item.summary}
|
||||
</p>
|
||||
</div>
|
||||
<div className="stock-news__meta">
|
||||
<span>{item.press}</span>
|
||||
<span>{item.pub_date}</span>
|
||||
<span>
|
||||
{formatDate(item.published_at)}
|
||||
</span>
|
||||
{item.sentiment ? (
|
||||
<span className="stock-chip">
|
||||
{item.sentiment}
|
||||
</span>
|
||||
) : null}
|
||||
<a
|
||||
href={item.link}
|
||||
target="_blank"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { createTradeOrder, getTradeBalance } from '../../api';
|
||||
import { getTradeBalance, requestAutoTrade } from '../../api';
|
||||
import './Stock.css';
|
||||
|
||||
const formatNumber = (value) => {
|
||||
@@ -10,19 +10,21 @@ const formatNumber = (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.toFixed(2)}%`;
|
||||
};
|
||||
|
||||
const StockTrade = () => {
|
||||
const [balance, setBalance] = useState(null);
|
||||
const [balanceLoading, setBalanceLoading] = useState(false);
|
||||
const [balanceError, setBalanceError] = useState('');
|
||||
const [orderForm, setOrderForm] = useState({
|
||||
code: '',
|
||||
qty: 1,
|
||||
price: 0,
|
||||
type: 'buy',
|
||||
});
|
||||
const [orderLoading, setOrderLoading] = useState(false);
|
||||
const [orderMessage, setOrderMessage] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [autoLoading, setAutoLoading] = useState(false);
|
||||
const [autoError, setAutoError] = useState('');
|
||||
const [autoResult, setAutoResult] = useState(null);
|
||||
|
||||
const loadBalance = async () => {
|
||||
setBalanceLoading(true);
|
||||
@@ -37,25 +39,20 @@ const StockTrade = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const onOrderSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
setOrderLoading(true);
|
||||
setOrderMessage('');
|
||||
setError('');
|
||||
const runAutoTrade = async () => {
|
||||
setAutoLoading(true);
|
||||
setAutoError('');
|
||||
setAutoResult(null);
|
||||
try {
|
||||
const payload = {
|
||||
code: orderForm.code.trim(),
|
||||
qty: Number(orderForm.qty),
|
||||
price: Number(orderForm.price),
|
||||
type: orderForm.type,
|
||||
};
|
||||
const result = await createTradeOrder(payload);
|
||||
setOrderMessage(result?.message ?? '주문이 접수되었습니다.');
|
||||
await loadBalance();
|
||||
const result = await requestAutoTrade();
|
||||
setAutoResult(result);
|
||||
if (result?.status === 'success') {
|
||||
await loadBalance();
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err?.message ?? String(err));
|
||||
setAutoError(err?.message ?? String(err));
|
||||
} finally {
|
||||
setOrderLoading(false);
|
||||
setAutoLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -63,244 +60,233 @@ const StockTrade = () => {
|
||||
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 (
|
||||
<div className="stock">
|
||||
<header className="stock-header">
|
||||
<div>
|
||||
<p className="stock-kicker">Trade Desk</p>
|
||||
<h1>Stock Trade</h1>
|
||||
<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">거래 안내</p>
|
||||
<p className="stock-card__title">계좌 요약</p>
|
||||
<div className="stock-status">
|
||||
<div>
|
||||
<span>주문 유형</span>
|
||||
<strong>시장가/지정가</strong>
|
||||
<span>총 평가금액</span>
|
||||
<strong>{formatNumber(summary.total_eval)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>시장가</span>
|
||||
<strong>가격 0 입력</strong>
|
||||
<span>예수금</span>
|
||||
<strong>{formatNumber(summary.deposit)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>안내</span>
|
||||
<strong>주문 전 코드 확인</strong>
|
||||
<span>보유 종목</span>
|
||||
<strong>{holdings.length}</strong>
|
||||
</div>
|
||||
</div>
|
||||
{summary.note ? (
|
||||
<p className="stock-status__note">{summary.note}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</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">
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">Balance</p>
|
||||
<h3>잔고</h3>
|
||||
<p className="stock-panel__sub">
|
||||
보유 잔고와 보유 종목을 확인합니다.
|
||||
</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 className="stock-panel__head">
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">잔고</p>
|
||||
<h3>보유 현황</h3>
|
||||
<p className="stock-panel__sub">
|
||||
연결 계좌의 실시간 잔고와 보유 종목을 확인합니다.
|
||||
</p>
|
||||
</div>
|
||||
{balanceError ? (
|
||||
<p className="stock-empty">{balanceError}</p>
|
||||
) : (
|
||||
<div className="stock-balance">
|
||||
<div className="stock-balance__summary">
|
||||
{[
|
||||
{
|
||||
label: '예수금',
|
||||
value:
|
||||
balance?.cash ??
|
||||
balance?.available_cash ??
|
||||
balance?.deposit,
|
||||
},
|
||||
{
|
||||
label: '총평가',
|
||||
value:
|
||||
balance?.total_eval ??
|
||||
balance?.total_value ??
|
||||
balance?.evaluation,
|
||||
},
|
||||
{
|
||||
label: '손익',
|
||||
value:
|
||||
balance?.pnl ??
|
||||
balance?.profit_loss ??
|
||||
balance?.total_pnl,
|
||||
},
|
||||
]
|
||||
.filter((item) => item.value !== undefined)
|
||||
.map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className="stock-balance__card"
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
<strong>{formatNumber(item.value)}</strong>
|
||||
</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: summary.total_eval,
|
||||
},
|
||||
{
|
||||
label: '예수금',
|
||||
value: summary.deposit,
|
||||
},
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className="stock-balance__card"
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
<strong>{formatNumber(item.value)}</strong>
|
||||
</div>
|
||||
{Array.isArray(
|
||||
balance?.holdings ??
|
||||
balance?.positions ??
|
||||
balance?.items
|
||||
) &&
|
||||
(balance?.holdings ??
|
||||
balance?.positions ??
|
||||
balance?.items).length ? (
|
||||
<div className="stock-holdings">
|
||||
{(balance?.holdings ??
|
||||
balance?.positions ??
|
||||
balance?.items
|
||||
).map((item, idx) => (
|
||||
<div
|
||||
key={
|
||||
item.code ??
|
||||
item.symbol ??
|
||||
`${item.name ?? 'item'}-${idx}`
|
||||
}
|
||||
className="stock-holdings__item"
|
||||
>
|
||||
<div>
|
||||
<p className="stock-holdings__name">
|
||||
{item.name ?? item.code ?? '종목'}
|
||||
</p>
|
||||
<span className="stock-holdings__code">
|
||||
{item.code ?? item.symbol ?? ''}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>수량</span>
|
||||
<strong>
|
||||
{formatNumber(
|
||||
item.qty ??
|
||||
item.quantity ??
|
||||
item.holding
|
||||
)}
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>평균단가</span>
|
||||
<strong>
|
||||
{formatNumber(
|
||||
item.avg_price ??
|
||||
item.avg ??
|
||||
item.price
|
||||
)}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
{holdings.length ? (
|
||||
<div className="stock-holdings">
|
||||
{holdings.map((item, idx) => (
|
||||
<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>
|
||||
<span>수량</span>
|
||||
<strong>
|
||||
{formatNumber(item.qty)}
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>매입가</span>
|
||||
<strong>
|
||||
{formatNumber(item.buy_price)}
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>현재가</span>
|
||||
<strong>
|
||||
{formatNumber(item.current_price)}
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>수익률</span>
|
||||
<strong>
|
||||
{formatPercent(item.profit_rate)}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="stock-empty">보유 종목 없음</p>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="stock-empty">보유 종목이 없습니다.</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="stock-panel stock-panel--wide">
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">Order</p>
|
||||
<h3>주문 (매수/매도)</h3>
|
||||
<p className="stock-panel__sub">
|
||||
종목 코드, 수량, 가격을 입력해 주문을 전송합니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">자동 매매</p>
|
||||
<h3>AI 매매 판단</h3>
|
||||
<p className="stock-panel__sub">
|
||||
분석에 몇 초 걸릴 수 있습니다. 결과는 아래에
|
||||
표시됩니다.
|
||||
</p>
|
||||
</div>
|
||||
<form className="stock-order" onSubmit={onOrderSubmit}>
|
||||
<label>
|
||||
종목 코드
|
||||
<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>
|
||||
<div className="stock-panel__actions">
|
||||
{autoLoading ? (
|
||||
<span className="stock-chip">분석 중</span>
|
||||
) : 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>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user