주식 트레이딩 페이지 고도화

src/api.js

@@ -99,6 +99,6 @@ export function getTradeBalance() {
   return apiGet("/api/trade/balance");
 }
 
-export function requestAutoTrade(payload) {
+export function createTradeOrder(payload) {
-  return apiPost("/api/trade/auto", payload);
+  return apiPost("/api/trade/order", payload);
 }

src/pages/stock/Stock.css

@@ -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 {
+.stock-holdings__metric strong {
-    display: grid;
+    font-size: 14px;
-    gap: 12px;
+    color: var(--text);
 }
 
-.stock-ai__grid {
+.stock-profit {
-    display: grid;
+    color: var(--text);
-    gap: 12px;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
-.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 {
+.stock-result pre {
-    margin: 0;
+    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;
+    border-radius: 16px;
-    padding: 12px;
+    background: var(--surface);
-    background: rgba(0, 0, 0, 0.2);
+    padding: 16px;
+    display: grid;
+    gap: 12px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
 }
 
-.stock-ai__raw pre {
+.stock-modal__head {
-    margin: 8px 0 0;
+    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);

src/pages/stock/Stock.jsx

@@ -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>
+                    <p className="stock-card__title">다음 업데이트 아이디어</p>
-                    <div className="stock-status">
+                    <ul className="stock-ideas">
-                        <div>
+                        <li>관심 종목 실적 캘린더/일정 보기</li>
-                            <span>최신 발행</span>
+                        <li>뉴스 감성 요약 및 키워드 트렌드</li>
-                            <strong>{formatDate(latestPublished)}</strong>
+                        <li>보유 종목 알림(수익률/목표가)</li>
-                        </div>
+                    </ul>
-                        <div>
-                            <span>국내</span>
-                            <strong>{newsDomestic.length}</strong>
-                        </div>
-                        <div>
-                            <span>해외</span>
-                            <strong>{newsOverseas.length}</strong>
-                        </div>
-                    </div>
                 </div>
             </header>
 
-            <section className="stock-grid">
+            <section className="stock-panel stock-panel--wide">
-                <div className="stock-panel">
+                <div className="stock-panel__head">
-                    <div className="stock-panel__head">
+                    <div>
-                        <div>
+                        <p className="stock-panel__eyebrow">스냅샷</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 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">
+                    <div className="stock-panel__actions">
-                        {indicesError ? (
+                        {indicesLoading ? (
-                            <p className="stock-empty">{indicesError}</p>
+                            <span className="stock-chip">불러오는 중</span>
-                        ) : sortedIndices.length === 0 ? (
+                        ) : null}
-                            <p className="stock-empty">
+                        <button
-                                지수 데이터가 없습니다.
+                            className="button ghost small"
-                            </p>
+                            onClick={loadIndices}
-                        ) : (
+                            disabled={indicesLoading}
-                            sortedIndices.map((item) => {
+                        >
-                                const direction = getDirection(
+                            새로고침
-                                    item.change,
+                        </button>
-                                    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>
                 </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">

src/pages/stock/StockTrade.jsx

@@ -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 [manualForm, setManualForm] = useState({
-    const [autoError, setAutoError] = useState('');
+        code: '',
-    const [autoResult, setAutoResult] = useState(null);
+        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 () => {
+    const submitManualOrder = async (event) => {
-        setAutoLoading(true);
+        event.preventDefault();
-        setAutoError('');
+        setManualLoading(true);
-        setAutoResult(null);
+        setManualError('');
+        setManualResult(null);
         try {
-            const result = await requestAutoTrade();
+            const payload = {
-            setAutoResult(result);
+                ticker: manualForm.code.trim(),
-            if (result?.status === 'success' || result?.status === 'completed') {
+                action: manualForm.type === 'sell' ? 'SELL' : 'BUY',
-                await loadBalance();
+                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 deposit =
-    const autoStatus = autoResult?.status ?? '';
+        summary.deposit ?? balance?.deposit ?? balance?.available_cash;
-    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
-                    : '대기';
 
     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) => (
+                            {holdings.map((item, idx) => {
-                                <div
+                                const profitLoss = getProfitLoss(item);
-                                    key={item.code ?? `${item.name}-${idx}`}
+                                const profitLossNumeric = toNumeric(profitLoss);
-                                    className="stock-holdings__item"
+                                const profitClass =
-                                >
+                                    profitLossNumeric > 0
-                                    <div>
+                                        ? 'is-up'
-                                        <p className="stock-holdings__name">
+                                        : profitLossNumeric < 0
-                                            {item.name ?? item.code ?? 'N/A'}
+                                          ? 'is-down'
-                                        </p>
+                                          : profitLossNumeric === 0
-                                        <span className="stock-holdings__code">
+                                            ? 'is-flat'
-                                            {item.code ?? ''}
+                                            : '';
-                                        </span>
+                                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>
+                        <p className="stock-panel__eyebrow">수동 주문</p>
-                        <h3>AI 매매 판단</h3>
+                        <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">
+                <form className="stock-order" onSubmit={submitManualOrder}>
-                    {!autoResult ? (
+                    <label>
-                        <p className="stock-empty">
+                        종목명/코드
-                            아직 자동 매매 요청이 없습니다.
+                        <input
-                        </p>
+                            type="text"
-                    ) : autoStatus === 'failed_parse' ? (
+                            value={manualForm.code}
-                        <div className="stock-ai__raw">
+                            onChange={(event) =>
-                            <p className="stock-ai__title">원문 응답</p>
+                                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>
-                    ) : (
+                    ) : null}
-                        <div className="stock-ai__grid">
+                </form>
-                            <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>
             </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>
     );
 };