511 lines
30 KiB
TypeScript
511 lines
30 KiB
TypeScript
|
|
import React, { useState, useEffect, useMemo } from 'react';
|
|
import { X, RotateCcw, ChevronDown, Zap, Plus, Minus, Calendar, ToggleLeft, ToggleRight, CheckSquare, Square, TrendingUp, TrendingDown, Wallet, Target, ShieldAlert, BadgePercent, Save, PlayCircle, Info, BarChart3, Maximize2, Circle, CheckCircle2 } from 'lucide-react';
|
|
import { StockItem, OrderType, MarketType, ReservedOrder, TradeOrder } from '../types';
|
|
import { DbService, HoldingItem } from '../services/dbService';
|
|
|
|
interface TradeModalProps {
|
|
stock: StockItem;
|
|
type: OrderType;
|
|
onClose: () => void;
|
|
onExecute: (order: Omit<ReservedOrder, 'id' | 'status' | 'createdAt'>) => Promise<void>;
|
|
onImmediateOrder?: (order: Omit<TradeOrder, 'id' | 'timestamp' | 'status'>) => Promise<void>;
|
|
}
|
|
|
|
type StrategyType = 'NONE' | 'PROFIT' | 'LOSS' | 'TRAILING_STOP';
|
|
|
|
const TradeModal: React.FC<TradeModalProps> = ({ stock, type: initialType, onClose, onExecute, onImmediateOrder }) => {
|
|
const [orderType, setOrderType] = useState<OrderType>(initialType);
|
|
const isBuyMode = orderType === OrderType.BUY;
|
|
|
|
const [holding, setHolding] = useState<HoldingItem | null>(null);
|
|
const [buyingPower, setBuyingPower] = useState(0);
|
|
const dbService = useMemo(() => new DbService(), []);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
const holdings = await dbService.getHoldings();
|
|
const currentHolding = holdings.find(h => h.code === stock.code) || null;
|
|
setHolding(currentHolding);
|
|
|
|
const summary = await dbService.getAccountSummary();
|
|
setBuyingPower(summary.buyingPower);
|
|
};
|
|
fetchData();
|
|
}, [stock.code, dbService, orderType]);
|
|
|
|
const plInfo = useMemo(() => {
|
|
if (!holding) return null;
|
|
const pl = (stock.price - holding.avgPrice) * holding.quantity;
|
|
const percent = ((stock.price - holding.avgPrice) / holding.avgPrice) * 100;
|
|
return { pl, percent };
|
|
}, [holding, stock.price]);
|
|
|
|
const [monitoringEnabled, setMonitoringEnabled] = useState(false);
|
|
const [immediateStart, setImmediateStart] = useState(true);
|
|
|
|
// 전략 선택 (라디오 버튼 방식)
|
|
const [activeStrategy, setActiveStrategy] = useState<StrategyType>(isBuyMode ? 'TRAILING_STOP' : 'NONE');
|
|
|
|
// TS 설정
|
|
const [tsValue, setTsValue] = useState<number>(3);
|
|
const [tsUnit, setTsUnit] = useState<'PERCENT' | 'TICK' | 'AMOUNT'>('PERCENT');
|
|
|
|
// TS 내부 감시 시작 조건 (Trigger)
|
|
const [triggerEnabled, setTriggerEnabled] = useState(false);
|
|
const [triggerType, setTriggerType] = useState<'CURRENT' | 'HIGH' | 'LOW' | 'VOLUME'>('CURRENT');
|
|
const [triggerValue, setTriggerValue] = useState<number>(stock.price);
|
|
const [monCondition, setMonCondition] = useState<'ABOVE' | 'BELOW'>(isBuyMode ? 'BELOW' : 'ABOVE');
|
|
|
|
// 자동 조건 결정 로직
|
|
const applyAutoCondition = (type: string, buyMode: boolean) => {
|
|
if (!buyMode) {
|
|
setMonCondition('ABOVE'); // 매도시에는 현재/고/저/거래량 모두 이상
|
|
} else {
|
|
// 매수시
|
|
if (type === 'CURRENT' || type === 'HIGH') {
|
|
setMonCondition('BELOW'); // 현재가, 고가는 이하
|
|
} else {
|
|
setMonCondition('ABOVE'); // 저가, 거래량은 이상
|
|
}
|
|
}
|
|
};
|
|
|
|
// 모드 변경 시 전략 및 조건 초기화
|
|
useEffect(() => {
|
|
if (isBuyMode) {
|
|
setActiveStrategy('TRAILING_STOP');
|
|
} else {
|
|
setActiveStrategy('NONE');
|
|
}
|
|
applyAutoCondition(triggerType, isBuyMode);
|
|
if (triggerType !== 'VOLUME') {
|
|
setTriggerValue(stock.price);
|
|
}
|
|
}, [isBuyMode, stock.price]);
|
|
|
|
const [monTargetUnit, setMonTargetUnit] = useState<'PRICE' | 'PERCENT' | 'AMOUNT'>('PRICE');
|
|
const [profitValue, setProfitValue] = useState<number>(stock.price * 1.1);
|
|
const [lossValue, setLossValue] = useState<number>(stock.price * 0.9);
|
|
|
|
const [expiryDays, setExpiryDays] = useState<number>(1);
|
|
const [customExpiryDate, setCustomExpiryDate] = useState<string>(
|
|
new Date(Date.now() + 86400000).toISOString().split('T')[0]
|
|
);
|
|
|
|
const [priceMethod, setPriceMethod] = useState<'CURRENT' | 'MARKET' | 'HIGH' | 'LOW'>('CURRENT');
|
|
const [tickOffset, setTickOffset] = useState<number>(0);
|
|
const [quantityMode, setQuantityMode] = useState<'DIRECT' | 'RATIO'>('DIRECT');
|
|
const [quantity, setQuantity] = useState<number>(1);
|
|
const [quantityRatio, setQuantityRatio] = useState<number>(isBuyMode ? 10 : 100);
|
|
|
|
const currencySymbol = stock.market === MarketType.DOMESTIC ? '원' : '$';
|
|
|
|
const handleMaxQuantity = () => {
|
|
if (quantityMode === 'RATIO') {
|
|
setQuantityRatio(100);
|
|
} else {
|
|
if (isBuyMode) {
|
|
const maxQty = Math.floor(buyingPower / stock.price);
|
|
setQuantity(maxQty > 0 ? maxQty : 1);
|
|
} else if (holding) {
|
|
setQuantity(holding.quantity);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setMonitoringEnabled(false);
|
|
setImmediateStart(true);
|
|
setActiveStrategy(isBuyMode ? 'TRAILING_STOP' : 'NONE');
|
|
setTriggerEnabled(false);
|
|
setTriggerType('CURRENT');
|
|
setTriggerValue(stock.price);
|
|
applyAutoCondition('CURRENT', isBuyMode);
|
|
setPriceMethod('CURRENT');
|
|
setTickOffset(0);
|
|
setQuantity(1);
|
|
setQuantityRatio(isBuyMode ? 10 : 100);
|
|
setExpiryDays(1);
|
|
};
|
|
|
|
const finalQuantity = useMemo(() => {
|
|
if (quantityMode === 'RATIO') {
|
|
if (isBuyMode) {
|
|
const targetBudget = buyingPower * (quantityRatio / 100);
|
|
return Math.floor(targetBudget / stock.price) || 0;
|
|
} else if (holding) {
|
|
return Math.floor(holding.quantity * (quantityRatio / 100));
|
|
}
|
|
}
|
|
return quantity;
|
|
}, [isBuyMode, quantityMode, quantity, quantityRatio, holding, buyingPower, stock.price]);
|
|
|
|
const handleExecute = () => {
|
|
if (monitoringEnabled) {
|
|
let finalExpiry = new Date();
|
|
if (expiryDays > 0) finalExpiry.setDate(finalExpiry.getDate() + expiryDays);
|
|
else finalExpiry = new Date(customExpiryDate);
|
|
|
|
onExecute({
|
|
stockCode: stock.code,
|
|
stockName: stock.name,
|
|
type: orderType,
|
|
quantity: finalQuantity,
|
|
monitoringType: activeStrategy === 'TRAILING_STOP' ? 'TRAILING_STOP' : 'PRICE_TRIGGER',
|
|
triggerPrice: triggerEnabled ? triggerValue : stock.price,
|
|
trailingType: tsUnit === 'PERCENT' ? 'PERCENT' : 'AMOUNT',
|
|
trailingValue: tsValue,
|
|
market: stock.market,
|
|
expiryDate: finalExpiry
|
|
});
|
|
} else {
|
|
if (onImmediateOrder) {
|
|
onImmediateOrder({
|
|
stockCode: stock.code,
|
|
stockName: stock.name,
|
|
type: orderType,
|
|
price: priceMethod === 'MARKET' ? 0 : stock.price,
|
|
quantity: finalQuantity
|
|
});
|
|
}
|
|
}
|
|
onClose();
|
|
};
|
|
|
|
const StrategyRadio = ({ type, label, icon: Icon }: { type: StrategyType, label: string, icon: any }) => {
|
|
const isSelected = activeStrategy === type;
|
|
return (
|
|
<div
|
|
onClick={() => setActiveStrategy(type)}
|
|
className={`p-4 rounded-2xl border-2 transition-all cursor-pointer flex items-center justify-between ${isSelected ? 'bg-amber-50/40 border-amber-300 shadow-sm' : 'bg-transparent border-slate-100 opacity-60'}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
{isSelected ? <CheckCircle2 className="text-amber-600" size={18} /> : <Circle className="text-slate-300" size={18} />}
|
|
<Icon className={isSelected ? 'text-amber-600' : 'text-slate-300'} size={18} />
|
|
<span className="text-[13px] font-black text-slate-800 uppercase tracking-tight">{label}</span>
|
|
</div>
|
|
|
|
{isSelected && type === 'TRAILING_STOP' && (
|
|
<div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
|
|
<input type="number" className="w-16 p-2 bg-white rounded-xl text-center font-black text-[14px] border border-amber-200 shadow-inner outline-none" value={tsValue} onChange={(e) => setTsValue(Number(e.target.value))} />
|
|
<select value={tsUnit} onChange={(e) => setTsUnit(e.target.value as any)} className="bg-transparent font-black text-[12px] text-amber-600 outline-none">
|
|
<option value="PERCENT">%</option>
|
|
<option value="TICK">틱</option>
|
|
<option value="AMOUNT">{currencySymbol}</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
{isSelected && type === 'PROFIT' && (
|
|
<div className="flex items-center gap-2" onClick={e => e.stopPropagation()}>
|
|
<input type="number" className="w-20 p-2 bg-white rounded-xl text-center font-black text-[14px] border border-rose-200 shadow-inner outline-none" value={profitValue} onChange={e => setProfitValue(Number(e.target.value))} />
|
|
<span className="text-[12px] font-black text-rose-500">{monTargetUnit === 'PERCENT' ? '%' : currencySymbol}</span>
|
|
</div>
|
|
)}
|
|
|
|
{isSelected && type === 'LOSS' && (
|
|
<div className="flex items-center gap-2" onClick={e => e.stopPropagation()}>
|
|
<input type="number" className="w-20 p-2 bg-white rounded-xl text-center font-black text-[14px] border border-blue-200 shadow-inner outline-none" value={lossValue} onChange={e => setLossValue(Number(e.target.value))} />
|
|
<span className="text-[12px] font-black text-blue-500">{monTargetUnit === 'PERCENT' ? '%' : currencySymbol}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[300] bg-slate-900/60 backdrop-blur-md flex items-center justify-center p-4">
|
|
<div className="bg-white w-full max-w-5xl rounded-3xl shadow-2xl animate-in zoom-in-95 duration-200 flex flex-col max-h-[90vh] overflow-hidden border border-slate-200">
|
|
|
|
{/* 헤더 */}
|
|
<div className="px-6 py-3 flex justify-between items-center bg-white border-b border-slate-100 shrink-0">
|
|
<button onClick={handleReset} className="flex items-center gap-1.5 text-slate-400 hover:text-slate-600 transition-colors">
|
|
<RotateCcw size={16} />
|
|
<span className="text-[11px] font-black uppercase tracking-wider">전체 초기화</span>
|
|
</button>
|
|
|
|
<div className="flex bg-slate-100 p-1 rounded-xl border border-slate-200 shadow-inner">
|
|
<button onClick={() => setOrderType(OrderType.BUY)} className={`px-10 py-1.5 rounded-lg text-[11px] font-black transition-all ${isBuyMode ? 'bg-rose-500 text-white shadow-md' : 'text-slate-400 hover:text-slate-600'}`}>매수설정</button>
|
|
<button onClick={() => setOrderType(OrderType.SELL)} className={`px-10 py-1.5 rounded-lg text-[11px] font-black transition-all ${!isBuyMode ? 'bg-blue-600 text-white shadow-md' : 'text-slate-400 hover:text-slate-600'}`}>매도설정</button>
|
|
</div>
|
|
|
|
<button onClick={onClose} className="p-1.5 hover:bg-slate-100 rounded-full transition-colors text-slate-400"><X size={24} /></button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto custom-scrollbar bg-slate-50/20">
|
|
{/* 상단 통합 정보 */}
|
|
<div className="px-8 py-6 bg-white border-b border-slate-100 grid grid-cols-1 lg:grid-cols-2 gap-6 items-center">
|
|
<div className="flex items-center gap-6">
|
|
<div className="w-16 h-16 bg-slate-900 rounded-2xl flex items-center justify-center text-white font-black italic text-[20px] shadow-lg">{stock.name[0]}</div>
|
|
<div className="space-y-0.5">
|
|
<h3 className="text-xl font-black text-slate-900 tracking-tighter flex items-center gap-1.5">{stock.name} <ChevronDown size={18} className="text-slate-200" /></h3>
|
|
<div className="flex items-center gap-2.5 text-[11px] font-black uppercase text-slate-400">
|
|
<span className="bg-slate-100 px-2 py-0.5 rounded-md border border-slate-200 text-slate-600">{stock.market === MarketType.DOMESTIC ? 'KRX' : 'NYSE'}</span>
|
|
<span className="tracking-widest">{stock.code}</span>
|
|
</div>
|
|
</div>
|
|
<div className="ml-4 border-l border-slate-100 pl-6 space-y-0.5 flex flex-col justify-center">
|
|
<p className={`text-2xl font-black font-mono tracking-tighter leading-none ${stock.changePercent >= 0 ? 'text-rose-500' : 'text-blue-600'}`}>
|
|
{stock.market === MarketType.DOMESTIC ? stock.price.toLocaleString() : `$${stock.price}`}
|
|
</p>
|
|
<div className={`text-[12px] font-black flex items-center gap-1.5 ${stock.changePercent >= 0 ? 'text-rose-500' : 'text-blue-600'}`}>
|
|
{stock.changePercent >= 0 ? <TrendingUp size={14} /> : <TrendingDown size={14} />}
|
|
{Math.abs(stock.changePercent)}%
|
|
</div>
|
|
</div>
|
|
<div className="ml-4 border-l border-slate-100 pl-6 flex flex-col justify-center gap-1">
|
|
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest leading-none">거래량</p>
|
|
<p className="text-[14px] font-black font-mono text-slate-900 leading-none">{stock.volume.toLocaleString()}</p>
|
|
<div className="flex items-center gap-1 text-[10px] font-black text-rose-500">
|
|
<TrendingUp size={10} /> +5.2%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4 bg-slate-50 p-4 rounded-2xl border border-slate-100 shadow-sm">
|
|
<div className="space-y-0.5 pr-4 border-r border-slate-200">
|
|
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-1.5"><Wallet size={12} className="text-blue-500" /> 사용가능 예수금</p>
|
|
<p className="text-[14px] font-black font-mono text-slate-900">{buyingPower.toLocaleString()}{currencySymbol}</p>
|
|
</div>
|
|
{holding ? (
|
|
<div className="flex flex-col gap-1.5">
|
|
<div className="flex justify-between items-center">
|
|
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest">보유수량</p>
|
|
<p className="text-[12px] font-black font-mono text-slate-900">{holding.quantity} <span className="text-[9px] text-slate-400">EA</span></p>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest">평가수익금</p>
|
|
<p className={`text-[12px] font-black font-mono ${plInfo!.pl >= 0 ? 'text-rose-500' : 'text-blue-600'}`}>
|
|
{plInfo!.pl > 0 ? '+' : ''}{plInfo!.pl.toLocaleString()} <span className="text-[10px]">({plInfo!.percent.toFixed(2)}%)</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-center opacity-20">
|
|
<p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">미보유 종목</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-px bg-slate-200">
|
|
<div className={`bg-white p-8 space-y-6 transition-all duration-300 ${!monitoringEnabled ? 'opacity-40 grayscale-[0.5]' : ''}`}>
|
|
<div className="flex items-center justify-between">
|
|
<h4 className="text-[14px] font-black text-slate-800 uppercase tracking-tight flex items-center gap-2">
|
|
<ShieldAlert size={18} className={monitoringEnabled ? 'text-rose-500' : 'text-slate-300'} />
|
|
1. 자동 감시 전략
|
|
</h4>
|
|
<button
|
|
onClick={() => setMonitoringEnabled(!monitoringEnabled)}
|
|
className={`flex items-center gap-2 px-4 py-1.5 rounded-full text-[10px] font-black transition-all border shadow-sm ${monitoringEnabled ? 'bg-slate-900 border-slate-900 text-white' : 'bg-white border-slate-200 text-slate-400 hover:border-slate-300'}`}
|
|
>
|
|
{monitoringEnabled ? <ToggleRight size={18} /> : <ToggleLeft size={18} />}
|
|
{monitoringEnabled ? '감시 중' : '비활성'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{!isBuyMode ? (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between pl-1">
|
|
<label className="text-[11px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-1.5">
|
|
<TrendingUp size={14} /> 스마트 수익/손실 관리
|
|
</label>
|
|
<div className="flex gap-1 bg-slate-100 p-0.5 rounded-lg border border-slate-200">
|
|
{['PRICE', 'PERCENT', 'AMOUNT'].map(unit => (
|
|
<button key={unit} onClick={() => setMonTargetUnit(unit as any)} className={`text-[9px] font-black px-2 py-1 rounded-md transition-all ${monTargetUnit === unit ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}>
|
|
{unit === 'PRICE' ? '현재가' : unit === 'PERCENT' ? '수익률(%)' : '수익금액'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<StrategyRadio type="PROFIT" label="이익실현 (TAKE PROFIT)" icon={Target} />
|
|
<StrategyRadio type="LOSS" label="손실제한 (STOP LOSS)" icon={ShieldAlert} />
|
|
<StrategyRadio type="TRAILING_STOP" label="반등 시 주문 (TRAILING STOP)" icon={PlayCircle} />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
<StrategyRadio type="TRAILING_STOP" label="반등 시 주문 (TRAILING STOP)" icon={PlayCircle} />
|
|
</div>
|
|
)}
|
|
|
|
{/* TS 내부 감시 시작 조건 설정 (TS 선택 시에만 표시) */}
|
|
{activeStrategy === 'TRAILING_STOP' && (
|
|
<div className="mt-3 p-4 rounded-2xl border border-amber-100 bg-amber-50/20 space-y-3 animate-in slide-in-from-top-1">
|
|
<div className="flex items-center justify-between">
|
|
<div
|
|
onClick={() => setTriggerEnabled(!triggerEnabled)}
|
|
className="flex items-center gap-2 cursor-pointer group"
|
|
>
|
|
{triggerEnabled ? <CheckSquare size={16} className="text-amber-600" /> : <Square size={16} className="text-slate-300" />}
|
|
<span className="text-[11px] font-black text-amber-700/80 uppercase tracking-widest">목표가 설정</span>
|
|
</div>
|
|
</div>
|
|
|
|
{triggerEnabled && (
|
|
<div className="flex items-center gap-1.5 bg-white/70 p-2 rounded-xl border border-amber-100 shadow-sm overflow-hidden">
|
|
<select
|
|
value={triggerType}
|
|
onChange={(e) => {
|
|
const newType = e.target.value as any;
|
|
setTriggerType(newType);
|
|
applyAutoCondition(newType, isBuyMode);
|
|
if (newType === 'VOLUME') {
|
|
setTriggerValue(100000);
|
|
} else {
|
|
setTriggerValue(stock.price);
|
|
}
|
|
}}
|
|
className="bg-white p-2 rounded-lg font-black text-[10px] outline-none text-slate-700 w-32 border border-slate-100 shadow-sm shrink-0"
|
|
>
|
|
<option value="CURRENT">현재가(\)</option>
|
|
<option value="HIGH">고가(\)</option>
|
|
<option value="LOW">저가(\)</option>
|
|
<option value="VOLUME">거래량(주)</option>
|
|
</select>
|
|
<input
|
|
type="number"
|
|
className="flex-1 min-w-0 p-2 rounded-lg font-black text-[14px] text-center outline-none bg-white border border-slate-100 focus:border-amber-300 transition-all shadow-sm"
|
|
value={triggerValue}
|
|
onChange={(e) => setTriggerValue(Number(e.target.value))}
|
|
/>
|
|
<select
|
|
value={monCondition}
|
|
onChange={(e) => setMonCondition(e.target.value as any)}
|
|
className={`p-2 rounded-lg font-black text-[10px] outline-none border border-slate-100 shadow-sm w-16 shrink-0 transition-colors ${monCondition === 'ABOVE' ? 'bg-blue-50 text-blue-600' : 'bg-rose-50 text-rose-500'}`}
|
|
>
|
|
<option value="ABOVE">이상</option>
|
|
<option value="BELOW">이하</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
{!triggerEnabled && (
|
|
<p className="text-[10px] font-bold text-amber-600/60 pl-1 italic">※ 조건 미설정 시 현재 시점부터 즉시 반등 감시를 시작합니다.</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-4 pt-4 border-t border-slate-100">
|
|
<span className="text-[11px] font-black text-slate-400 uppercase tracking-widest whitespace-nowrap">유효기간</span>
|
|
<div className="flex flex-1 gap-2">
|
|
{[1, 5, 30].map(d => (
|
|
<button key={d} onClick={() => setExpiryDays(d)} className={`flex-1 py-2 rounded-xl text-[11px] font-black transition-all ${expiryDays === d ? 'bg-slate-900 text-white shadow-md' : 'bg-slate-100 border border-slate-200 text-slate-400 hover:border-slate-300'}`}>
|
|
{d}일
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white p-8 space-y-6">
|
|
<h4 className="text-[14px] font-black text-slate-800 uppercase tracking-tight flex items-center gap-2">
|
|
<Zap size={18} className="text-blue-500" />
|
|
2. 매매 실행 조건
|
|
</h4>
|
|
|
|
<div className="space-y-8">
|
|
<div className="space-y-3">
|
|
<label className="text-[11px] font-black text-slate-400 uppercase tracking-widest pl-1">주문 가격 유형</label>
|
|
<div className="grid grid-cols-4 gap-2 bg-slate-50 p-1 rounded-2xl border border-slate-100">
|
|
{['CURRENT', 'MARKET', 'HIGH', 'LOW'].map((method) => (
|
|
<button key={method} onClick={() => { setPriceMethod(method as any); if (method === 'MARKET') setTickOffset(0); }} className={`py-2 rounded-xl text-[11px] font-black transition-all border ${priceMethod === method ? 'bg-white text-slate-900 border-slate-200 shadow-md' : 'bg-transparent text-slate-400 border-transparent hover:text-slate-600'}`}>
|
|
{method === 'CURRENT' ? '현재' : method === 'MARKET' ? '시장' : method === 'HIGH' ? '고가' : '저가'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="space-y-3">
|
|
<label className="text-[11px] font-black text-slate-400 uppercase tracking-widest pl-1">가격 조정 (틱)</label>
|
|
<div className="flex items-center gap-4 bg-slate-50 p-1.5 rounded-2xl border border-slate-100">
|
|
<button disabled={priceMethod === 'MARKET'} onClick={() => setTickOffset(prev => prev - 1)} className="p-2.5 bg-white rounded-xl text-slate-400 hover:text-blue-500 disabled:opacity-20 shadow-sm transition-all"><Minus size={18} /></button>
|
|
<div className="flex-1 text-center font-black font-mono text-[18px] text-slate-800">{tickOffset > 0 ? `+${tickOffset}` : tickOffset}</div>
|
|
<button disabled={priceMethod === 'MARKET'} onClick={() => setTickOffset(prev => prev + 1)} className="p-2.5 bg-white rounded-xl text-slate-400 hover:text-blue-500 disabled:opacity-20 shadow-sm transition-all"><Plus size={18} /></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between pl-1">
|
|
<label className="text-[11px] font-black text-slate-400 uppercase tracking-widest">주문 수량</label>
|
|
<span className="text-[9px] font-bold text-blue-500 bg-blue-50 px-2 py-0.5 rounded-full">
|
|
{isBuyMode ? `예수금` : `보유수량`}
|
|
</span>
|
|
</div>
|
|
<div className="bg-slate-50 p-3 rounded-2xl border border-slate-100 space-y-4">
|
|
<div className="flex items-center gap-1.5 bg-white/60 p-1 rounded-xl border border-slate-100 shadow-inner">
|
|
<button onClick={() => setQuantityMode('DIRECT')} className={`flex-1 py-2 rounded-lg text-[10px] font-black transition-all ${quantityMode === 'DIRECT' ? 'bg-white text-slate-900 shadow-sm border border-slate-200' : 'text-slate-400 hover:text-slate-600'}`}>직접입력</button>
|
|
<button onClick={() => setQuantityMode('RATIO')} className={`flex-1 py-2 rounded-lg text-[10px] font-black transition-all ${quantityMode === 'RATIO' ? 'bg-white text-slate-900 shadow-sm border border-slate-200' : 'text-slate-400 hover:text-slate-600'}`}>비중(%)</button>
|
|
</div>
|
|
<div className="flex items-center gap-3 px-2 pb-1 relative">
|
|
{quantityMode === 'DIRECT' ? (
|
|
<div className="flex items-center w-full gap-2 group">
|
|
<input type="number" min="1" className="flex-1 bg-transparent text-center font-black text-[24px] outline-none placeholder:text-slate-200 text-slate-900 min-w-0" placeholder="0" value={quantity} onChange={e => setQuantity(Math.max(1, parseInt(e.target.value) || 0))} />
|
|
<div className="flex flex-col items-center gap-1">
|
|
<button onClick={handleMaxQuantity} className="px-3 py-1 bg-blue-600 text-white rounded-lg font-black text-[9px] uppercase tracking-tighter hover:bg-blue-700 transition-all shadow-md">MAX</button>
|
|
<div className="px-2 py-1 bg-slate-900 text-white rounded-lg font-black text-[9px] uppercase tracking-wider shrink-0">EA / UNIT</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center w-full gap-2">
|
|
<input type="number" min="0" max="100" className="flex-1 bg-transparent text-center font-black text-[24px] outline-none text-slate-900 min-w-0" value={quantityRatio} onChange={e => setQuantityRatio(Math.min(100, Math.max(0, parseInt(e.target.value) || 0)))} />
|
|
<div className="flex flex-col items-center gap-1">
|
|
<button onClick={handleMaxQuantity} className="px-3 py-1 bg-blue-600 text-white rounded-lg font-black text-[9px] uppercase tracking-tighter hover:bg-blue-700 transition-all shadow-md">MAX</button>
|
|
<div className={`px-2 py-1 text-white rounded-lg font-black text-[9px] uppercase tracking-wider flex items-center gap-1 shrink-0 ${isBuyMode ? 'bg-rose-500' : 'bg-blue-600'}`}>
|
|
<BadgePercent size={12} /> PERCENT
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 bg-slate-900/5 rounded-2xl border border-slate-100 text-center">
|
|
<p className="text-[12px] font-black text-slate-600 leading-tight">
|
|
<span className={`${isBuyMode ? 'text-rose-500' : 'text-blue-600'}`}>{finalQuantity}주</span>를 {isBuyMode ? '매수' : '매도'}합니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 푸터 */}
|
|
<div className="px-8 py-6 bg-white border-t border-slate-100 flex items-center justify-between shrink-0 gap-6">
|
|
{monitoringEnabled && (
|
|
<div className="flex items-center gap-3 bg-slate-50 px-4 py-2 rounded-2xl border border-slate-200 shadow-sm">
|
|
<div className="flex flex-col">
|
|
<span className="text-[10px] font-black text-slate-800 uppercase tracking-tight leading-none">즉시 실행</span>
|
|
<span className="text-[8px] text-slate-400 font-bold leading-none mt-1">엔진 자동 가동</span>
|
|
</div>
|
|
<button
|
|
onClick={() => setImmediateStart(!immediateStart)}
|
|
className={`relative inline-flex h-6 w-10 items-center rounded-full transition-all focus:outline-none shadow-inner ${immediateStart ? 'bg-emerald-500' : 'bg-slate-300'}`}
|
|
>
|
|
<span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-md ${immediateStart ? 'translate-x-5' : 'translate-x-1'}`} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
onClick={handleExecute}
|
|
className={`flex-1 py-4 rounded-2xl font-black text-[16px] text-white shadow-xl transition-all active:scale-[0.98] flex items-center justify-center gap-3 ${monitoringEnabled ? (isBuyMode ? 'bg-rose-500' : 'bg-blue-600') : 'bg-slate-900 hover:bg-slate-800'}`}
|
|
>
|
|
{monitoringEnabled ? <><Save className="w-5 h-5" /> 전략 저장 및 {immediateStart ? '즉시 활성화' : '대기 저장'}</> : <><Zap size={22} fill="currentColor" /> {isBuyMode ? '매수' : '매도'} 주문 즉시 전송</>}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TradeModal;
|