주식 잔고, 주문 창 업그레이드
- 잔고, 주문 창 분리 - full-width 섹션으로 쌓게 변경
This commit is contained in:
@@ -77,3 +77,11 @@ export function getStockHealth() {
|
|||||||
export function getStockIndices() {
|
export function getStockIndices() {
|
||||||
return apiGet("/api/stock/indices");
|
return apiGet("/api/stock/indices");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getTradeBalance() {
|
||||||
|
return apiGet("/api/trade/balance");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createTradeOrder(payload) {
|
||||||
|
return apiPost("/api/trade/order", payload);
|
||||||
|
}
|
||||||
|
|||||||
@@ -325,6 +325,87 @@
|
|||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.stock-trade {
|
||||||
|
display: grid;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-balance {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-balance__summary {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-balance__card {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 10px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-balance__card strong {
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-holdings {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-holdings__item {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 10px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 0.7fr));
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-holdings__name {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-holdings__code {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-order {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-order label {
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-order input,
|
||||||
|
.stock-order select {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
background: rgba(0, 0, 0, 0.25);
|
||||||
|
color: var(--text);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.stock-header {
|
.stock-header {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import React, { useEffect, useMemo, useState } from 'react';
|
import React, { useEffect, useMemo, useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
import {
|
import {
|
||||||
getStockHealth,
|
getStockHealth,
|
||||||
getStockIndices,
|
getStockIndices,
|
||||||
@@ -157,6 +158,9 @@ const Stock = () => {
|
|||||||
>
|
>
|
||||||
뉴스 새로고침
|
뉴스 새로고침
|
||||||
</button>
|
</button>
|
||||||
|
<Link className="button ghost" to="/stock/trade">
|
||||||
|
잔고/주문 화면
|
||||||
|
</Link>
|
||||||
<button
|
<button
|
||||||
className="button ghost"
|
className="button ghost"
|
||||||
onClick={onScrap}
|
onClick={onScrap}
|
||||||
|
|||||||
309
src/pages/stock/StockTrade.jsx
Normal file
309
src/pages/stock/StockTrade.jsx
Normal file
@@ -0,0 +1,309 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { createTradeOrder, getTradeBalance } from '../../api';
|
||||||
|
import './Stock.css';
|
||||||
|
|
||||||
|
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 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 loadBalance = async () => {
|
||||||
|
setBalanceLoading(true);
|
||||||
|
setBalanceError('');
|
||||||
|
try {
|
||||||
|
const data = await getTradeBalance();
|
||||||
|
setBalance(data);
|
||||||
|
} catch (err) {
|
||||||
|
setBalanceError(err?.message ?? String(err));
|
||||||
|
} finally {
|
||||||
|
setBalanceLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onOrderSubmit = async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
setOrderLoading(true);
|
||||||
|
setOrderMessage('');
|
||||||
|
setError('');
|
||||||
|
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();
|
||||||
|
} catch (err) {
|
||||||
|
setError(err?.message ?? String(err));
|
||||||
|
} finally {
|
||||||
|
setOrderLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadBalance();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="stock">
|
||||||
|
<header className="stock-header">
|
||||||
|
<div>
|
||||||
|
<p className="stock-kicker">Trade Desk</p>
|
||||||
|
<h1>Stock Trade</h1>
|
||||||
|
<p className="stock-sub">
|
||||||
|
잔고 확인과 매수/매도 주문을 한 화면에서 집중적으로 처리합니다.
|
||||||
|
</p>
|
||||||
|
<div className="stock-actions">
|
||||||
|
<Link className="button ghost" to="/stock">
|
||||||
|
스톡 홈으로
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="stock-card">
|
||||||
|
<p className="stock-card__title">거래 안내</p>
|
||||||
|
<div className="stock-status">
|
||||||
|
<div>
|
||||||
|
<span>주문 유형</span>
|
||||||
|
<strong>시장가/지정가</strong>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>시장가</span>
|
||||||
|
<strong>가격 0 입력</strong>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>안내</span>
|
||||||
|
<strong>주문 전 코드 확인</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{error ? <p className="stock-error">{error}</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>
|
||||||
|
{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>
|
||||||
|
{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>
|
||||||
|
) : (
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
) : null}
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default StockTrade;
|
||||||
@@ -4,6 +4,7 @@ import Blog from './pages/blog/Blog';
|
|||||||
import Lotto from './pages/lotto/Lotto';
|
import Lotto from './pages/lotto/Lotto';
|
||||||
import Travel from './pages/travel/Travel';
|
import Travel from './pages/travel/Travel';
|
||||||
import Stock from './pages/stock/Stock';
|
import Stock from './pages/stock/Stock';
|
||||||
|
import StockTrade from './pages/stock/StockTrade';
|
||||||
|
|
||||||
export const navLinks = [
|
export const navLinks = [
|
||||||
{
|
{
|
||||||
@@ -55,6 +56,10 @@ export const appRoutes = [
|
|||||||
path: 'stock',
|
path: 'stock',
|
||||||
element: <Stock />,
|
element: <Stock />,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'stock/trade',
|
||||||
|
element: <StockTrade />,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'travel',
|
path: 'travel',
|
||||||
element: <Travel />,
|
element: <Travel />,
|
||||||
|
|||||||
Reference in New Issue
Block a user