주식 실 계좌 정보 가져오기 추가
This commit is contained in:
@@ -1,8 +1,18 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { createTradeOrder, getTradeBalance } from '../../api';
|
||||
import {
|
||||
createTradeOrder,
|
||||
getTradeBalance,
|
||||
getPortfolio,
|
||||
addPortfolio,
|
||||
updatePortfolio,
|
||||
deletePortfolio,
|
||||
} from '../../api';
|
||||
import Loading from '../../components/Loading';
|
||||
import './Stock.css';
|
||||
|
||||
/* ── helpers ─────────────────────────────────────────────────────── */
|
||||
|
||||
const formatNumber = (value) => {
|
||||
if (value === null || value === undefined || value === '') return '-';
|
||||
const numeric = Number(value);
|
||||
@@ -15,7 +25,7 @@ const formatPercent = (value) => {
|
||||
if (typeof value === 'string' && value.includes('%')) return value;
|
||||
const numeric = Number(value);
|
||||
if (Number.isNaN(numeric)) return value;
|
||||
return `${numeric.toFixed(2)}%`;
|
||||
return `${numeric >= 0 ? '+' : ''}${numeric.toFixed(2)}%`;
|
||||
};
|
||||
|
||||
const pickFirst = (...values) =>
|
||||
@@ -63,10 +73,52 @@ const toNumeric = (value) => {
|
||||
return Number.isNaN(numeric) ? null : numeric;
|
||||
};
|
||||
|
||||
const profitColorClass = (numericValue) => {
|
||||
if (numericValue > 0) return 'is-up';
|
||||
if (numericValue < 0) return 'is-down';
|
||||
if (numericValue === 0) return 'is-flat';
|
||||
return '';
|
||||
};
|
||||
|
||||
/* ── empty portfolio form ────────────────────────────────────────── */
|
||||
|
||||
const emptyPortfolioForm = {
|
||||
broker: '',
|
||||
ticker: '',
|
||||
name: '',
|
||||
quantity: '',
|
||||
avg_price: '',
|
||||
};
|
||||
|
||||
/* ── component ───────────────────────────────────────────────────── */
|
||||
|
||||
const StockTrade = () => {
|
||||
/* Balance state */
|
||||
const [balance, setBalance] = useState(null);
|
||||
const [balanceLoading, setBalanceLoading] = useState(false);
|
||||
const [balanceError, setBalanceError] = useState('');
|
||||
|
||||
/* Portfolio state */
|
||||
const [portfolio, setPortfolio] = useState(null);
|
||||
const [portfolioLoading, setPortfolioLoading] = useState(false);
|
||||
const [portfolioError, setPortfolioError] = useState('');
|
||||
|
||||
/* Portfolio add form */
|
||||
const [addForm, setAddForm] = useState({ ...emptyPortfolioForm });
|
||||
const [addFormOpen, setAddFormOpen] = useState(false);
|
||||
const [addLoading, setAddLoading] = useState(false);
|
||||
const [addError, setAddError] = useState('');
|
||||
|
||||
/* Portfolio edit */
|
||||
const [editingId, setEditingId] = useState(null);
|
||||
const [editForm, setEditForm] = useState({});
|
||||
const [editLoading, setEditLoading] = useState(false);
|
||||
const editOrigRef = useRef({});
|
||||
|
||||
/* Portfolio delete */
|
||||
const [deleteConfirmId, setDeleteConfirmId] = useState(null);
|
||||
|
||||
/* Manual order state */
|
||||
const [manualForm, setManualForm] = useState({
|
||||
code: '',
|
||||
qty: 1,
|
||||
@@ -78,7 +130,9 @@ const StockTrade = () => {
|
||||
const [manualResult, setManualResult] = useState(null);
|
||||
const [kisModal, setKisModal] = useState('');
|
||||
|
||||
const loadBalance = async () => {
|
||||
/* ── loaders ─────────────────────────────────────────────────── */
|
||||
|
||||
const loadBalance = useCallback(async () => {
|
||||
setBalanceLoading(true);
|
||||
setBalanceError('');
|
||||
try {
|
||||
@@ -89,8 +143,123 @@ const StockTrade = () => {
|
||||
} finally {
|
||||
setBalanceLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadPortfolio = useCallback(async () => {
|
||||
setPortfolioLoading(true);
|
||||
setPortfolioError('');
|
||||
try {
|
||||
const data = await getPortfolio();
|
||||
setPortfolio(data);
|
||||
} catch (err) {
|
||||
setPortfolioError(err?.message ?? String(err));
|
||||
} finally {
|
||||
setPortfolioLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadBalance();
|
||||
loadPortfolio();
|
||||
}, [loadBalance, loadPortfolio]);
|
||||
|
||||
/* Auto-refresh portfolio every 3 min */
|
||||
useEffect(() => {
|
||||
const timer = window.setInterval(loadPortfolio, 180000);
|
||||
return () => window.clearInterval(timer);
|
||||
}, [loadPortfolio]);
|
||||
|
||||
/* ── portfolio actions ───────────────────────────────────────── */
|
||||
|
||||
const handleAddSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setAddLoading(true);
|
||||
setAddError('');
|
||||
try {
|
||||
await addPortfolio({
|
||||
broker: addForm.broker.trim(),
|
||||
ticker: addForm.ticker.trim(),
|
||||
name: addForm.name.trim(),
|
||||
quantity: Number(addForm.quantity),
|
||||
avg_price: Number(addForm.avg_price),
|
||||
});
|
||||
setAddForm({ ...emptyPortfolioForm });
|
||||
setAddFormOpen(false);
|
||||
await loadPortfolio();
|
||||
} catch (err) {
|
||||
setAddError(err?.message ?? String(err));
|
||||
} finally {
|
||||
setAddLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditStart = (item) => {
|
||||
setEditingId(item.id);
|
||||
setEditForm({
|
||||
quantity: item.quantity,
|
||||
avg_price: item.avg_price,
|
||||
broker: item.broker,
|
||||
name: item.name,
|
||||
});
|
||||
/* 원본 값을 기억해서 diff 비교용 */
|
||||
editOrigRef.current = {
|
||||
quantity: item.quantity,
|
||||
avg_price: item.avg_price,
|
||||
broker: item.broker,
|
||||
name: item.name,
|
||||
};
|
||||
};
|
||||
|
||||
const handleEditSave = async (id) => {
|
||||
setEditLoading(true);
|
||||
try {
|
||||
/* 변경된 필드만 추출하여 부분 수정 */
|
||||
const orig = editOrigRef.current ?? {};
|
||||
const diff = {};
|
||||
for (const key of Object.keys(editForm)) {
|
||||
if (editForm[key] !== orig[key]) {
|
||||
diff[key] = editForm[key];
|
||||
}
|
||||
}
|
||||
if (Object.keys(diff).length === 0) {
|
||||
setEditingId(null);
|
||||
return;
|
||||
}
|
||||
await updatePortfolio(id, diff);
|
||||
setEditingId(null);
|
||||
await loadPortfolio();
|
||||
} catch (err) {
|
||||
const msg = err?.message ?? String(err);
|
||||
if (msg.includes('404') || msg.includes('not found')) {
|
||||
alert('해당 종목을 찾을 수 없습니다. 이미 삭제되었을 수 있습니다.');
|
||||
await loadPortfolio();
|
||||
} else {
|
||||
alert('수정 실패: ' + msg);
|
||||
}
|
||||
} finally {
|
||||
setEditLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
await deletePortfolio(id);
|
||||
setDeleteConfirmId(null);
|
||||
await loadPortfolio();
|
||||
} catch (err) {
|
||||
const msg = err?.message ?? String(err);
|
||||
if (msg.includes('404') || msg.includes('not found')) {
|
||||
alert('해당 종목을 찾을 수 없습니다. 이미 삭제되었을 수 있습니다.');
|
||||
setDeleteConfirmId(null);
|
||||
await loadPortfolio();
|
||||
} else {
|
||||
alert('삭제 실패: ' + msg);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/* ── manual order ────────────────────────────────────────────── */
|
||||
|
||||
const submitManualOrder = async (event) => {
|
||||
event.preventDefault();
|
||||
setManualLoading(true);
|
||||
@@ -120,9 +289,7 @@ const StockTrade = () => {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadBalance();
|
||||
}, []);
|
||||
/* ── derived data ────────────────────────────────────────────── */
|
||||
|
||||
const holdings = useMemo(() => {
|
||||
if (!balance) return [];
|
||||
@@ -137,6 +304,56 @@ const StockTrade = () => {
|
||||
const deposit =
|
||||
summary.deposit ?? balance?.deposit ?? balance?.available_cash;
|
||||
|
||||
/* Portfolio grouped by broker */
|
||||
const portfolioHoldings = portfolio?.holdings ?? [];
|
||||
const portfolioSummary = portfolio?.summary ?? {};
|
||||
const brokerGroups = useMemo(() => {
|
||||
const map = {};
|
||||
for (const item of portfolioHoldings) {
|
||||
const broker = item.broker || '기타';
|
||||
if (!map[broker]) map[broker] = [];
|
||||
map[broker].push(item);
|
||||
}
|
||||
return Object.entries(map).sort(([a], [b]) => a.localeCompare(b));
|
||||
}, [portfolioHoldings]);
|
||||
|
||||
/* broker-level summary (eval_amount가 null인 종목은 안전하게 건너뜀) */
|
||||
const getBrokerSummary = (items) => {
|
||||
let totalBuy = 0;
|
||||
let totalEvalAmt = 0;
|
||||
let hasNullPrice = false;
|
||||
for (const item of items) {
|
||||
totalBuy += (item.avg_price ?? 0) * (item.quantity ?? 0);
|
||||
if (item.eval_amount != null) {
|
||||
totalEvalAmt += item.eval_amount;
|
||||
} else {
|
||||
hasNullPrice = true;
|
||||
}
|
||||
}
|
||||
const totalProfit = totalEvalAmt - totalBuy;
|
||||
const totalProfitRate = totalBuy > 0 ? (totalProfit / totalBuy) * 100 : 0;
|
||||
return { totalBuy, totalEval: totalEvalAmt, totalProfit, totalProfitRate, hasNullPrice };
|
||||
};
|
||||
|
||||
/* ── broker color accents (deterministic from name) ──────────── */
|
||||
const brokerColors = useMemo(() => {
|
||||
const palette = [
|
||||
{ border: 'rgba(129,140,248,0.5)', bg: 'rgba(129,140,248,0.06)' },
|
||||
{ border: 'rgba(251,191,36,0.5)', bg: 'rgba(251,191,36,0.06)' },
|
||||
{ border: 'rgba(52,211,153,0.5)', bg: 'rgba(52,211,153,0.06)' },
|
||||
{ border: 'rgba(244,114,182,0.5)', bg: 'rgba(244,114,182,0.06)' },
|
||||
{ border: 'rgba(251,146,60,0.5)', bg: 'rgba(251,146,60,0.06)' },
|
||||
{ border: 'rgba(139,92,246,0.5)', bg: 'rgba(139,92,246,0.06)' },
|
||||
];
|
||||
const map = {};
|
||||
brokerGroups.forEach(([broker], i) => {
|
||||
map[broker] = palette[i % palette.length];
|
||||
});
|
||||
return map;
|
||||
}, [brokerGroups]);
|
||||
|
||||
/* ── render ───────────────────────────────────────────────────── */
|
||||
|
||||
return (
|
||||
<div className="stock">
|
||||
<header className="stock-header">
|
||||
@@ -167,6 +384,33 @@ const StockTrade = () => {
|
||||
<span>보유 종목</span>
|
||||
<strong>{holdings.length}</strong>
|
||||
</div>
|
||||
{portfolioHoldings.length > 0 && (
|
||||
<>
|
||||
<div style={{ borderTop: '1px solid var(--line)', paddingTop: 8 }}>
|
||||
<span>포트폴리오 종목</span>
|
||||
<strong>{portfolioHoldings.length}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>포트폴리오 평가</span>
|
||||
<strong>{formatNumber(portfolioSummary.total_eval)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>포트폴리오 손익</span>
|
||||
<strong
|
||||
className={`stock-profit ${profitColorClass(
|
||||
toNumeric(portfolioSummary.total_profit)
|
||||
)}`}
|
||||
>
|
||||
{formatNumber(portfolioSummary.total_profit)}
|
||||
{portfolioSummary.total_profit_rate != null && (
|
||||
<small style={{ marginLeft: 4, fontSize: 11 }}>
|
||||
({formatPercent(portfolioSummary.total_profit_rate)})
|
||||
</small>
|
||||
)}
|
||||
</strong>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{summary.note ? (
|
||||
<p className="stock-status__note">{summary.note}</p>
|
||||
@@ -174,6 +418,341 @@ const StockTrade = () => {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ── Portfolio sections (broker별) ─────────────────────── */}
|
||||
{portfolioError ? (
|
||||
<p className="stock-error">{portfolioError}</p>
|
||||
) : null}
|
||||
|
||||
{/* 총 포트폴리오 요약 + 종목 추가 */}
|
||||
<section className="stock-panel stock-panel--wide pf-section">
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">포트폴리오</p>
|
||||
<h3>수동 입력 종목 관리</h3>
|
||||
<p className="stock-panel__sub">
|
||||
증권사별 보유 종목을 수동 등록하면 현재가를 자동 조회합니다. (3분 캐시)
|
||||
</p>
|
||||
</div>
|
||||
<div className="stock-panel__actions">
|
||||
{portfolioLoading ? (
|
||||
<Loading type="spinner" message="" />
|
||||
) : null}
|
||||
<button
|
||||
className="button ghost small"
|
||||
onClick={loadPortfolio}
|
||||
disabled={portfolioLoading}
|
||||
>
|
||||
새로고침
|
||||
</button>
|
||||
<button
|
||||
className="button primary small"
|
||||
onClick={() => setAddFormOpen((v) => !v)}
|
||||
>
|
||||
{addFormOpen ? '취소' : '+ 종목 추가'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add form */}
|
||||
{addFormOpen && (
|
||||
<form className="pf-add-form" onSubmit={handleAddSubmit}>
|
||||
<label>
|
||||
증권사
|
||||
<input
|
||||
type="text"
|
||||
value={addForm.broker}
|
||||
onChange={(e) =>
|
||||
setAddForm((p) => ({ ...p, broker: e.target.value }))
|
||||
}
|
||||
placeholder="KB증권"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
종목코드
|
||||
<input
|
||||
type="text"
|
||||
value={addForm.ticker}
|
||||
onChange={(e) =>
|
||||
setAddForm((p) => ({ ...p, ticker: e.target.value }))
|
||||
}
|
||||
placeholder="005930"
|
||||
required
|
||||
maxLength={6}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
종목명
|
||||
<input
|
||||
type="text"
|
||||
value={addForm.name}
|
||||
onChange={(e) =>
|
||||
setAddForm((p) => ({ ...p, name: e.target.value }))
|
||||
}
|
||||
placeholder="삼성전자"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
수량
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
step={1}
|
||||
value={addForm.quantity}
|
||||
onChange={(e) =>
|
||||
setAddForm((p) => ({ ...p, quantity: e.target.value }))
|
||||
}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
평균 매입가 (원)
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
value={addForm.avg_price}
|
||||
onChange={(e) =>
|
||||
setAddForm((p) => ({ ...p, avg_price: e.target.value }))
|
||||
}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
className="button primary"
|
||||
type="submit"
|
||||
disabled={addLoading}
|
||||
>
|
||||
{addLoading ? '등록 중...' : '종목 등록'}
|
||||
</button>
|
||||
{addError && <p className="stock-error">{addError}</p>}
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Portfolio total summary */}
|
||||
{portfolioHoldings.length > 0 && (
|
||||
<div className="pf-total-summary">
|
||||
{[
|
||||
{ label: '총 매입', value: portfolioSummary.total_buy },
|
||||
{ label: '총 평가', value: portfolioSummary.total_eval },
|
||||
{ label: '총 손익', value: portfolioSummary.total_profit, isProfit: true },
|
||||
{ label: '수익률', value: portfolioSummary.total_profit_rate, isRate: true },
|
||||
].map((s) => (
|
||||
<div key={s.label} className="pf-total-summary__card">
|
||||
<span>{s.label}</span>
|
||||
<strong
|
||||
className={
|
||||
s.isProfit || s.isRate
|
||||
? `stock-profit ${profitColorClass(toNumeric(s.value))}`
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{s.isRate ? formatPercent(s.value) : formatNumber(s.value)}
|
||||
</strong>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Each broker gets a stacked card */}
|
||||
{brokerGroups.map(([broker, items]) => {
|
||||
const bSummary = getBrokerSummary(items);
|
||||
const color = brokerColors[broker];
|
||||
return (
|
||||
<section
|
||||
key={broker}
|
||||
className="stock-panel stock-panel--wide pf-broker-section"
|
||||
style={{
|
||||
borderColor: color?.border,
|
||||
background: color?.bg,
|
||||
}}
|
||||
>
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<p
|
||||
className="stock-panel__eyebrow"
|
||||
style={{ color: color?.border }}
|
||||
>
|
||||
{broker}
|
||||
</p>
|
||||
<h3>{broker} 보유 현황</h3>
|
||||
<p className="stock-panel__sub">
|
||||
{items.length}종목 · 평가{' '}
|
||||
{formatNumber(bSummary.totalEval)} · 손익{' '}
|
||||
<span
|
||||
className={`stock-profit ${profitColorClass(
|
||||
bSummary.totalProfit
|
||||
)}`}
|
||||
>
|
||||
{formatNumber(bSummary.totalProfit)} (
|
||||
{formatPercent(bSummary.totalProfitRate)})
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stock-holdings">
|
||||
{items.map((item) => {
|
||||
const profitAmt = item.profit_amount;
|
||||
const profitRate = item.profit_rate;
|
||||
const profitAmtN = toNumeric(profitAmt);
|
||||
const profitRateN = toNumeric(profitRate);
|
||||
const isEditing = editingId === item.id;
|
||||
const isDeleting = deleteConfirmId === item.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className="stock-holdings__item pf-item"
|
||||
>
|
||||
{isEditing ? (
|
||||
/* Edit mode */
|
||||
<div className="pf-edit-row">
|
||||
<div className="pf-edit-fields">
|
||||
<label>
|
||||
수량
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
value={editForm.quantity ?? ''}
|
||||
onChange={(e) =>
|
||||
setEditForm((p) => ({
|
||||
...p,
|
||||
quantity: Number(e.target.value),
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
평균매입가
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={editForm.avg_price ?? ''}
|
||||
onChange={(e) =>
|
||||
setEditForm((p) => ({
|
||||
...p,
|
||||
avg_price: Number(e.target.value),
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="pf-edit-actions">
|
||||
<button
|
||||
className="button primary small"
|
||||
onClick={() => handleEditSave(item.id)}
|
||||
disabled={editLoading}
|
||||
>
|
||||
{editLoading ? '저장 중...' : '저장'}
|
||||
</button>
|
||||
<button
|
||||
className="button ghost small"
|
||||
onClick={() => setEditingId(null)}
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* Normal display */
|
||||
<>
|
||||
<div>
|
||||
<p className="stock-holdings__name">
|
||||
{item.name ?? item.ticker ?? 'N/A'}
|
||||
</p>
|
||||
<span className="stock-holdings__code">
|
||||
{item.ticker ?? ''}
|
||||
</span>
|
||||
</div>
|
||||
<div className="stock-holdings__metric">
|
||||
<span>수량</span>
|
||||
<strong>{formatNumber(item.quantity)}</strong>
|
||||
</div>
|
||||
<div className="stock-holdings__metric">
|
||||
<span>매입가</span>
|
||||
<strong>{formatNumber(item.avg_price)}</strong>
|
||||
</div>
|
||||
<div className="stock-holdings__metric">
|
||||
<span>현재가</span>
|
||||
<strong
|
||||
className={item.current_price == null ? 'pf-null-price' : ''}
|
||||
>
|
||||
{item.current_price != null
|
||||
? formatNumber(item.current_price)
|
||||
: '조회 실패'}
|
||||
</strong>
|
||||
</div>
|
||||
<div className="stock-holdings__metric">
|
||||
<span>수익률</span>
|
||||
<strong
|
||||
className={`stock-profit ${profitColorClass(profitRateN)}`}
|
||||
>
|
||||
{profitRate != null
|
||||
? formatPercent(profitRate)
|
||||
: '-'}
|
||||
</strong>
|
||||
</div>
|
||||
<div className="stock-holdings__metric">
|
||||
<span>평가손익</span>
|
||||
<strong
|
||||
className={`stock-profit ${profitColorClass(profitAmtN)}`}
|
||||
>
|
||||
{profitAmt != null
|
||||
? formatNumber(profitAmt)
|
||||
: '-'}
|
||||
</strong>
|
||||
</div>
|
||||
{/* action buttons */}
|
||||
<div className="pf-item-actions">
|
||||
<button
|
||||
className="button ghost small"
|
||||
onClick={() => handleEditStart(item)}
|
||||
title="수정"
|
||||
>
|
||||
✏️
|
||||
</button>
|
||||
{isDeleting ? (
|
||||
<>
|
||||
<button
|
||||
className="button ghost small pf-btn-danger"
|
||||
onClick={() => handleDelete(item.id)}
|
||||
>
|
||||
확인
|
||||
</button>
|
||||
<button
|
||||
className="button ghost small"
|
||||
onClick={() =>
|
||||
setDeleteConfirmId(null)
|
||||
}
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
className="button ghost small"
|
||||
onClick={() =>
|
||||
setDeleteConfirmId(item.id)
|
||||
}
|
||||
title="삭제"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* ── Existing balance section ─────────────────────────── */}
|
||||
{balanceError ? <p className="stock-error">{balanceError}</p> : null}
|
||||
|
||||
<section className="stock-panel stock-panel--wide">
|
||||
@@ -224,24 +803,10 @@ const StockTrade = () => {
|
||||
{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 profitClass = profitColorClass(profitLossNumeric);
|
||||
const profitRate = getProfitRate(item);
|
||||
const profitRateNumeric = toNumeric(profitRate);
|
||||
const profitRateClass =
|
||||
profitRateNumeric > 0
|
||||
? 'is-up'
|
||||
: profitRateNumeric < 0
|
||||
? 'is-down'
|
||||
: profitRateNumeric === 0
|
||||
? 'is-flat'
|
||||
: '';
|
||||
const profitRateClass = profitColorClass(profitRateNumeric);
|
||||
return (
|
||||
<div
|
||||
key={item.code ?? `${item.name}-${idx}`}
|
||||
@@ -301,6 +866,7 @@ const StockTrade = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Manual order section ─────────────────────────────── */}
|
||||
<section className="stock-panel stock-panel--wide">
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
@@ -396,6 +962,8 @@ const StockTrade = () => {
|
||||
) : null}
|
||||
</form>
|
||||
</section>
|
||||
|
||||
{/* KIS modal */}
|
||||
{kisModal ? (
|
||||
<div className="stock-modal" role="dialog" aria-modal="true">
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user