주식 트레이딩 페이지 고도화
This commit is contained in:
@@ -45,6 +45,15 @@
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.stock-ideas {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.stock-card__title {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
@@ -133,6 +142,18 @@
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.stock-filter-row {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.stock-filter-row .stock-panel {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.stock-panel__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -367,44 +388,66 @@
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 0.6fr));
|
||||
grid-template-columns: minmax(0, 1.2fr) repeat(5, minmax(0, 0.6fr));
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stock-holdings__name {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.stock-holdings__code {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stock-holdings__metric {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.stock-holdings__metric span {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.stock-ai {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
.stock-holdings__metric strong {
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.stock-ai__grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
.stock-profit {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.stock-ai__card {
|
||||
.stock-profit.is-up {
|
||||
color: #f3a7a7;
|
||||
}
|
||||
|
||||
.stock-profit.is-down {
|
||||
color: #9fc5ff;
|
||||
}
|
||||
|
||||
.stock-profit.is-flat {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.stock-result {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.stock-ai__title {
|
||||
.stock-result__title {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
@@ -412,22 +455,53 @@
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.stock-ai__reason {
|
||||
margin: 0;
|
||||
.stock-result pre {
|
||||
margin: 8px 0 0;
|
||||
white-space: pre-wrap;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.stock-ai__raw {
|
||||
.stock-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.stock-modal__backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.stock-modal__card {
|
||||
position: relative;
|
||||
width: min(520px, 90vw);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
padding: 12px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 16px;
|
||||
background: var(--surface);
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.stock-ai__raw pre {
|
||||
margin: 8px 0 0;
|
||||
.stock-modal__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stock-modal__head h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.stock-modal pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
|
||||
@@ -30,7 +30,7 @@ const normalizeIndices = (data) => {
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
return data.map((item) => ({
|
||||
name: item?.name ?? '-',
|
||||
name: item?.name ?? item?.key ?? '-',
|
||||
value: item?.value ?? '-',
|
||||
change: item?.change_value ?? item?.change ?? '',
|
||||
percent: item?.change_percent ?? item?.percent ?? '',
|
||||
@@ -40,7 +40,7 @@ const normalizeIndices = (data) => {
|
||||
|
||||
if (Array.isArray(data?.indices)) {
|
||||
return data.indices.map((item) => ({
|
||||
name: item?.name ?? '-',
|
||||
name: item?.name ?? item?.key ?? '-',
|
||||
value: item?.value ?? '-',
|
||||
change: item?.change_value ?? item?.change ?? '',
|
||||
percent: item?.change_percent ?? item?.percent ?? '',
|
||||
@@ -146,9 +146,10 @@ const Stock = () => {
|
||||
'KOSPI',
|
||||
'KOSDAQ',
|
||||
'KOSPI200',
|
||||
'USD/KRW',
|
||||
'NASDAQ',
|
||||
'다우산업',
|
||||
'나스닥',
|
||||
'S&P500',
|
||||
'원달러 환율',
|
||||
];
|
||||
const sortedIndices = [...indices].sort((a, b) => {
|
||||
const aIndex = indexOrder.indexOf(a.name);
|
||||
@@ -158,7 +159,7 @@ const Stock = () => {
|
||||
}
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
const highlighted = new Set(['KOSPI', 'KOSDAQ', 'USD/KRW']);
|
||||
const highlighted = new Set(['KOSPI', 'KOSDAQ', '원달러 환율']);
|
||||
const activeNews =
|
||||
newsCategory === 'domestic' ? newsDomestic : newsOverseas;
|
||||
|
||||
@@ -185,97 +186,85 @@ const Stock = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="stock-card">
|
||||
<p className="stock-card__title">뉴스 요약</p>
|
||||
<div className="stock-status">
|
||||
<div>
|
||||
<span>최신 발행</span>
|
||||
<strong>{formatDate(latestPublished)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>국내</span>
|
||||
<strong>{newsDomestic.length}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>해외</span>
|
||||
<strong>{newsOverseas.length}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<p className="stock-card__title">다음 업데이트 아이디어</p>
|
||||
<ul className="stock-ideas">
|
||||
<li>관심 종목 실적 캘린더/일정 보기</li>
|
||||
<li>뉴스 감성 요약 및 키워드 트렌드</li>
|
||||
<li>보유 종목 알림(수익률/목표가)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="stock-grid">
|
||||
<div className="stock-panel">
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<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}
|
||||
<button
|
||||
className="button ghost small"
|
||||
onClick={loadIndices}
|
||||
disabled={indicesLoading}
|
||||
>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
<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 className="stock-snapshot">
|
||||
{indicesError ? (
|
||||
<p className="stock-empty">{indicesError}</p>
|
||||
) : sortedIndices.length === 0 ? (
|
||||
<p className="stock-empty">
|
||||
지수 데이터가 없습니다.
|
||||
</p>
|
||||
) : (
|
||||
sortedIndices.map((item) => {
|
||||
const direction = getDirection(
|
||||
item.change,
|
||||
item.percent,
|
||||
item.direction
|
||||
);
|
||||
const changeText = [
|
||||
item.change,
|
||||
item.percent,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
return (
|
||||
<div
|
||||
key={item.name}
|
||||
className={`stock-snapshot__card ${
|
||||
highlighted.has(item.name)
|
||||
? 'is-highlight'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<p>{item.name}</p>
|
||||
<strong>{item.value ?? '--'}</strong>
|
||||
<span
|
||||
className={`stock-snapshot__change ${
|
||||
direction === 'up'
|
||||
? 'is-up'
|
||||
: direction === 'down'
|
||||
? 'is-down'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{changeText || '--'}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
<div className="stock-panel__actions">
|
||||
{indicesLoading ? (
|
||||
<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>
|
||||
) : sortedIndices.length === 0 ? (
|
||||
<p className="stock-empty">
|
||||
지수 데이터가 없습니다.
|
||||
</p>
|
||||
) : (
|
||||
sortedIndices.map((item) => {
|
||||
const direction = getDirection(
|
||||
item.change,
|
||||
item.percent,
|
||||
item.direction
|
||||
);
|
||||
const changeText = [item.change, item.percent]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
return (
|
||||
<div
|
||||
key={item.name}
|
||||
className={`stock-snapshot__card ${
|
||||
highlighted.has(item.name)
|
||||
? 'is-highlight'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<p>{item.name}</p>
|
||||
<strong>{item.value ?? '--'}</strong>
|
||||
<span
|
||||
className={`stock-snapshot__change ${
|
||||
direction === 'up'
|
||||
? 'is-up'
|
||||
: direction === 'down'
|
||||
? 'is-down'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{changeText || '--'}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="stock-panel">
|
||||
<section className="stock-filter-row">
|
||||
<div className="stock-panel stock-panel--compact">
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">필터</p>
|
||||
@@ -306,6 +295,31 @@ const Stock = () => {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stock-panel stock-panel--compact">
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">요약</p>
|
||||
<h3>뉴스 요약</h3>
|
||||
<p className="stock-panel__sub">
|
||||
최신 발행 시각과 기사 수를 확인합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stock-status">
|
||||
<div>
|
||||
<span>최신 발행</span>
|
||||
<strong>{formatDate(latestPublished)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>국내</span>
|
||||
<strong>{newsDomestic.length}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>해외</span>
|
||||
<strong>{newsOverseas.length}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="stock-panel stock-panel--wide">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { getTradeBalance, requestAutoTrade } from '../../api';
|
||||
import { createTradeOrder, getTradeBalance } from '../../api';
|
||||
import './Stock.css';
|
||||
|
||||
const formatNumber = (value) => {
|
||||
@@ -29,6 +29,7 @@ const getBuyPrice = (item) =>
|
||||
item?.buy_price,
|
||||
item?.avg_price,
|
||||
item?.avg,
|
||||
item?.purchase_price,
|
||||
item?.buyPrice,
|
||||
item?.price
|
||||
);
|
||||
@@ -49,16 +50,33 @@ const getProfitRate = (item) =>
|
||||
item?.profit_pct,
|
||||
item?.profitPercent,
|
||||
item?.pnl_rate,
|
||||
item?.return_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;
|
||||
};
|
||||
|
||||
const StockTrade = () => {
|
||||
const [balance, setBalance] = useState(null);
|
||||
const [balanceLoading, setBalanceLoading] = useState(false);
|
||||
const [balanceError, setBalanceError] = useState('');
|
||||
const [autoLoading, setAutoLoading] = useState(false);
|
||||
const [autoError, setAutoError] = useState('');
|
||||
const [autoResult, setAutoResult] = useState(null);
|
||||
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('');
|
||||
|
||||
const loadBalance = async () => {
|
||||
setBalanceLoading(true);
|
||||
@@ -73,20 +91,32 @@ const StockTrade = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const runAutoTrade = async () => {
|
||||
setAutoLoading(true);
|
||||
setAutoError('');
|
||||
setAutoResult(null);
|
||||
const submitManualOrder = async (event) => {
|
||||
event.preventDefault();
|
||||
setManualLoading(true);
|
||||
setManualError('');
|
||||
setManualResult(null);
|
||||
try {
|
||||
const result = await requestAutoTrade();
|
||||
setAutoResult(result);
|
||||
if (result?.status === 'success' || result?.status === 'completed') {
|
||||
await loadBalance();
|
||||
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) {
|
||||
setAutoError(err?.message ?? String(err));
|
||||
setManualError(err?.message ?? String(err));
|
||||
} finally {
|
||||
setAutoLoading(false);
|
||||
setManualLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -104,23 +134,8 @@ const StockTrade = () => {
|
||||
const summary = balance?.summary ?? {};
|
||||
const totalEval =
|
||||
summary.total_eval ?? balance?.total_eval ?? balance?.total_value;
|
||||
const deposit = summary.deposit ?? balance?.deposit ?? balance?.available_cash;
|
||||
const autoStatus = autoResult?.status ?? '';
|
||||
const decision = autoResult?.decision ?? autoResult?.ai_response ?? null;
|
||||
const tradeResult = autoResult?.trade_result ?? null;
|
||||
const execution = autoResult?.execution ?? tradeResult?.execution ?? '';
|
||||
const statusLabel =
|
||||
tradeResult?.success === true
|
||||
? '성공'
|
||||
: tradeResult?.success === false
|
||||
? '실패'
|
||||
: autoStatus === 'completed'
|
||||
? '완료'
|
||||
: autoStatus === 'success'
|
||||
? '성공'
|
||||
: autoStatus
|
||||
? autoStatus
|
||||
: '대기';
|
||||
const deposit =
|
||||
summary.deposit ?? balance?.deposit ?? balance?.available_cash;
|
||||
|
||||
return (
|
||||
<div className="stock">
|
||||
@@ -129,8 +144,7 @@ const StockTrade = () => {
|
||||
<p className="stock-kicker">거래 데스크</p>
|
||||
<h1>주식 거래</h1>
|
||||
<p className="stock-sub">
|
||||
연결된 계좌 잔고를 확인하고 AI 자동 매매 판단을
|
||||
요청하세요.
|
||||
연결된 계좌 잔고를 확인하고 필요한 주문을 요청하세요.
|
||||
</p>
|
||||
<div className="stock-actions">
|
||||
<Link className="button ghost" to="/stock">
|
||||
@@ -161,7 +175,6 @@ const StockTrade = () => {
|
||||
</header>
|
||||
|
||||
{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">
|
||||
@@ -208,45 +221,79 @@ const StockTrade = () => {
|
||||
</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>
|
||||
{holdings.map((item, idx) => {
|
||||
const profitLoss = getProfitLoss(item);
|
||||
const profitLossNumeric = toNumeric(profitLoss);
|
||||
const profitClass =
|
||||
profitLossNumeric > 0
|
||||
? 'is-up'
|
||||
: profitLossNumeric < 0
|
||||
? 'is-down'
|
||||
: profitLossNumeric === 0
|
||||
? 'is-flat'
|
||||
: '';
|
||||
const profitRate = getProfitRate(item);
|
||||
const profitRateNumeric = toNumeric(profitRate);
|
||||
const profitRateClass =
|
||||
profitRateNumeric > 0
|
||||
? 'is-up'
|
||||
: profitRateNumeric < 0
|
||||
? 'is-down'
|
||||
: profitRateNumeric === 0
|
||||
? 'is-flat'
|
||||
: '';
|
||||
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
|
||||
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>
|
||||
<span>수량</span>
|
||||
<strong>
|
||||
{formatNumber(getQty(item))}
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>매입가</span>
|
||||
<strong>
|
||||
{formatNumber(getBuyPrice(item))}
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>현재가</span>
|
||||
<strong>
|
||||
{formatNumber(getCurrentPrice(item))}
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>수익률</span>
|
||||
<strong>
|
||||
{formatPercent(getProfitRate(item))}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="stock-empty">보유 종목이 없습니다.</p>
|
||||
@@ -257,94 +304,119 @@ const StockTrade = () => {
|
||||
<section className="stock-panel stock-panel--wide">
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">자동 매매</p>
|
||||
<h3>AI 매매 판단</h3>
|
||||
<p className="stock-panel__eyebrow">수동 주문</p>
|
||||
<h3>직접 매수/매도</h3>
|
||||
<p className="stock-panel__sub">
|
||||
분석에 몇 초 걸릴 수 있습니다. 결과는 아래에
|
||||
표시됩니다.
|
||||
종목명 또는 종목코드를 입력하고 매수/매도 주문을
|
||||
요청합니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="stock-panel__actions">
|
||||
{autoLoading ? (
|
||||
<span className="stock-chip">분석 중</span>
|
||||
) : null}
|
||||
<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>
|
||||
<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>
|
||||
{autoResult?.raw_response ??
|
||||
'원문 응답이 없습니다.'}
|
||||
{typeof manualResult === 'string'
|
||||
? manualResult
|
||||
: JSON.stringify(manualResult, null, 2)}
|
||||
</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 ??
|
||||
decision?.decision ??
|
||||
'-'}
|
||||
</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>{statusLabel}</strong>
|
||||
</div>
|
||||
{execution ? (
|
||||
<div>
|
||||
<span>실행</span>
|
||||
<strong>{execution}</strong>
|
||||
</div>
|
||||
) : null}
|
||||
<div>
|
||||
<span>주문번호</span>
|
||||
<strong>
|
||||
{tradeResult?.order_no ?? '-'}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</form>
|
||||
</section>
|
||||
{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}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user