From 22897c3eb6b79f57972698e80cffe42e879ef7cb Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Mon, 26 Jan 2026 22:47:18 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A3=BC=EC=8B=9D=20=EC=9E=94=EA=B3=A0,=20?=
 =?UTF-8?q?=EC=A3=BC=EB=AC=B8=20=EC=B0=BD=20=EC=97=85=EA=B7=B8=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=20=20-=20=EC=9E=94=EA=B3=A0,=20=EC=A3=BC?=
 =?UTF-8?q?=EB=AC=B8=20=EC=B0=BD=20=EB=B6=84=EB=A6=AC=20=20-=20full-width?=
 =?UTF-8?q?=20=EC=84=B9=EC=85=98=EC=9C=BC=EB=A1=9C=20=EC=8C=93=EA=B2=8C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api.js                     |   8 +
 src/pages/stock/Stock.css      |  81 +++++++++
 src/pages/stock/Stock.jsx      |   4 +
 src/pages/stock/StockTrade.jsx | 309 +++++++++++++++++++++++++++++++++
 src/routes.jsx                 |   5 +
 5 files changed, 407 insertions(+)
 create mode 100644 src/pages/stock/StockTrade.jsx

diff --git a/src/api.js b/src/api.js
index b3d361f..2b32633 100644
--- a/src/api.js
+++ b/src/api.js
@@ -77,3 +77,11 @@ export function getStockHealth() {
 export function getStockIndices() {
   return apiGet("/api/stock/indices");
 }
+
+export function getTradeBalance() {
+  return apiGet("/api/trade/balance");
+}
+
+export function createTradeOrder(payload) {
+  return apiPost("/api/trade/order", payload);
+}
diff --git a/src/pages/stock/Stock.css b/src/pages/stock/Stock.css
index 43b5451..96c4bd1 100644
--- a/src/pages/stock/Stock.css
+++ b/src/pages/stock/Stock.css
@@ -325,6 +325,87 @@
     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) {
     .stock-header {
         grid-template-columns: 1fr;
diff --git a/src/pages/stock/Stock.jsx b/src/pages/stock/Stock.jsx
index 9c65ce3..d79f329 100644
--- a/src/pages/stock/Stock.jsx
+++ b/src/pages/stock/Stock.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
 import {
     getStockHealth,
     getStockIndices,
@@ -157,6 +158,9 @@ const Stock = () => {
                         >
                             뉴스 새로고침
                         </button>
+                        <Link className="button ghost" to="/stock/trade">
+                            잔고/주문 화면
+                        </Link>
                         <button
                             className="button ghost"
                             onClick={onScrap}
diff --git a/src/pages/stock/StockTrade.jsx b/src/pages/stock/StockTrade.jsx
new file mode 100644
index 0000000..9f0acec
--- /dev/null
+++ b/src/pages/stock/StockTrade.jsx
@@ -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;
diff --git a/src/routes.jsx b/src/routes.jsx
index d6a3859..c16387c 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -4,6 +4,7 @@ import Blog from './pages/blog/Blog';
 import Lotto from './pages/lotto/Lotto';
 import Travel from './pages/travel/Travel';
 import Stock from './pages/stock/Stock';
+import StockTrade from './pages/stock/StockTrade';
 
 export const navLinks = [
     {
@@ -55,6 +56,10 @@ export const appRoutes = [
         path: 'stock',
         element: <Stock />,
     },
+    {
+        path: 'stock/trade',
+        element: <StockTrade />,
+    },
     {
         path: 'travel',
         element: <Travel />,