297 lines
16 KiB
TypeScript
297 lines
16 KiB
TypeScript
|
|
import React, { useState, useMemo, useEffect } from 'react';
|
|
import {
|
|
Trophy, Flame, Users, Search, Info, MessageSquare, Sparkles, Zap,
|
|
Save, EyeOff, Eye, RefreshCw, FileText, StickyNote, History as HistoryIcon,
|
|
ArrowUpRight, ArrowDownRight
|
|
} from 'lucide-react';
|
|
import { StockItem, MarketType, OrderType, ApiSettings, TradeOrder } from '../types';
|
|
import StockDetailModal from '../components/StockDetailModal';
|
|
import TradeModal from '../components/TradeModal';
|
|
import { FilterChip, TabButton } from '../components/CommonUI';
|
|
import { StockRow } from '../components/StockRow';
|
|
import { AiService } from '../services/aiService';
|
|
|
|
interface DiscoveryProps {
|
|
stocks: StockItem[];
|
|
orders: TradeOrder[];
|
|
onUpdateStock: (code: string, updates: Partial<StockItem>) => void;
|
|
settings: ApiSettings;
|
|
}
|
|
|
|
const DISCOVERY_CATEGORIES = [
|
|
{ id: 'trading_value', name: '거래대금 상위', icon: <Flame size={16} /> },
|
|
{ id: 'gainers', name: '급상승 종목', icon: <Zap size={16} /> },
|
|
{ id: 'continuous_rise', name: '연속 상승세', icon: <Trophy size={16} />, isPending: true },
|
|
{ id: 'undervalued_growth', name: '저평가 성장주', icon: <Sparkles size={16} />, isPending: true },
|
|
{ id: 'cheap_value', name: '아직 저렴한 가치주', icon: <Sparkles size={16} />, isPending: true },
|
|
{ id: 'stable_dividends', name: '꾸준한 배당주', icon: <Sparkles size={16} />, isPending: true },
|
|
{ id: 'profitable_companies', name: '돈 잘버는 회사 찾기', icon: <Sparkles size={16} />, isPending: true },
|
|
{ id: 'undervalued_recovery', name: '저평가 탈출', icon: <Sparkles size={16} />, isPending: true },
|
|
{ id: 'future_dividend_kings', name: '미래의 배당왕 찾기', icon: <Sparkles size={16} />, isPending: true },
|
|
{ id: 'growth_prospects', name: '성장 기대주', icon: <Sparkles size={16} />, isPending: true },
|
|
{ id: 'buy_at_cheap', name: '싼값에 매수', icon: <Sparkles size={16} />, isPending: true },
|
|
{ id: 'high_yield_undervalued', name: '고수익 저평가', icon: <Sparkles size={16} />, isPending: true },
|
|
{ id: 'popular_growth', name: '인기 성장주', icon: <Sparkles size={16} />, isPending: true },
|
|
];
|
|
|
|
const Discovery: React.FC<DiscoveryProps> = ({ stocks, orders, onUpdateStock, settings }) => {
|
|
const [activeCategoryId, setActiveCategoryId] = useState<string>('trading_value');
|
|
const [marketFilter, setMarketFilter] = useState<'all' | 'domestic' | 'overseas'>('all');
|
|
const [selectedStockCode, setSelectedStockCode] = useState<string>(stocks[0]?.code || '');
|
|
|
|
const [detailStock, setDetailStock] = useState<StockItem | null>(null);
|
|
const [tradeContext, setTradeContext] = useState<{ stock: StockItem, type: OrderType } | null>(null);
|
|
|
|
const activeCategory = useMemo(() =>
|
|
DISCOVERY_CATEGORIES.find(c => c.id === activeCategoryId) || DISCOVERY_CATEGORIES[0]
|
|
, [activeCategoryId]);
|
|
|
|
const selectedStock = useMemo(() => {
|
|
return stocks.find(s => s.code === selectedStockCode) || null;
|
|
}, [stocks, selectedStockCode]);
|
|
|
|
const stockOrders = useMemo(() => {
|
|
return orders.filter(o => o.stockCode === selectedStockCode).sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
|
|
}, [orders, selectedStockCode]);
|
|
|
|
const [memo, setMemo] = useState('');
|
|
const [isAnalyzing, setIsAnalyzing] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (selectedStock) {
|
|
setMemo(selectedStock.memo || '');
|
|
}
|
|
}, [selectedStockCode, stocks]);
|
|
|
|
const enrichedStocks = useMemo(() => {
|
|
return stocks.filter(s => !s.isHidden).map((s) => ({
|
|
...s,
|
|
tradingValue: (s.volume * s.price) / (s.market === MarketType.DOMESTIC ? 100000000 : 1000000),
|
|
buyRatio: 50 + Math.floor(Math.random() * 45),
|
|
sellRatio: 100 - (50 + Math.floor(Math.random() * 45))
|
|
})).filter(s => {
|
|
if (marketFilter === 'domestic') return s.market === MarketType.DOMESTIC;
|
|
if (marketFilter === 'overseas') return s.market === MarketType.OVERSEAS;
|
|
return true;
|
|
}).sort((a, b) => {
|
|
// 메뉴별 기본 정렬 (사용자가 나중에 필터링 로직 제공하기 전까지는 기존 로직 활용)
|
|
if (activeCategoryId === 'gainers') return b.changePercent - a.changePercent;
|
|
return (b.tradingValue || 0) - (a.tradingValue || 0);
|
|
});
|
|
}, [stocks, marketFilter, activeCategoryId]);
|
|
|
|
const handleSaveMemo = () => {
|
|
if (selectedStock) {
|
|
onUpdateStock(selectedStock.code, { memo });
|
|
alert('메모가 저장되었습니다.');
|
|
}
|
|
};
|
|
|
|
const handleToggleHide = () => {
|
|
if (selectedStock) {
|
|
const newHidden = !selectedStock.isHidden;
|
|
onUpdateStock(selectedStock.code, { isHidden: newHidden });
|
|
if (newHidden) {
|
|
alert(`${selectedStock.name} 종목이 숨김 처리되었습니다.`);
|
|
const next = enrichedStocks.find(s => s.code !== selectedStock.code);
|
|
if (next) setSelectedStockCode(next.code);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleGenerateAnalysis = async () => {
|
|
if (!selectedStock) return;
|
|
const config = settings.aiConfigs.find(c => c.id === settings.preferredStockAiId) || settings.aiConfigs[0];
|
|
if (!config) return;
|
|
|
|
setIsAnalyzing(true);
|
|
try {
|
|
const prompt = `주식 전문가로서 ${selectedStock.name}(${selectedStock.code}) 리포트를 작성해줘.`;
|
|
const result = await AiService.analyzeNewsSentiment(config, [prompt]);
|
|
onUpdateStock(selectedStock.code, { aiAnalysis: result });
|
|
} catch (e) {
|
|
alert('AI 분석 생성 실패');
|
|
} finally {
|
|
setIsAnalyzing(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-full h-full flex flex-col lg:flex-row gap-6 animate-in fade-in duration-700 pb-10 pr-2">
|
|
{/* 1. 좌측 사이드바 메뉴 */}
|
|
<div className="w-full lg:w-[240px] shrink-0 space-y-8">
|
|
<div>
|
|
<h3 className="text-[12px] font-black text-slate-400 uppercase tracking-widest px-4 mb-4">주식 골라보기 목록</h3>
|
|
<div className="space-y-1">
|
|
<p className="text-[11px] font-black text-slate-300 px-4 mb-2 uppercase italic">내가 만든</p>
|
|
<button disabled className="w-full flex items-center gap-3 px-4 py-2 text-slate-300 font-bold text-[14px] cursor-not-allowed rounded-xl transition-all">
|
|
<div className="w-6 h-6 rounded-lg bg-slate-50 flex items-center justify-center">+</div>
|
|
직접 만들기 (대기)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-[11px] font-black text-slate-300 px-4 mb-3 uppercase italic">토스증권이 만든</p>
|
|
<div className="space-y-0.5">
|
|
{DISCOVERY_CATEGORIES.map(cat => (
|
|
<button
|
|
key={cat.id}
|
|
disabled={cat.isPending}
|
|
onClick={() => !cat.isPending && setActiveCategoryId(cat.id)}
|
|
className={`w-full flex items-center justify-between px-4 py-2.5 rounded-xl transition-all group ${activeCategoryId === cat.id ? 'bg-slate-900 text-white' : 'text-slate-600 hover:bg-slate-50'} ${cat.isPending ? 'opacity-40 cursor-not-allowed' : ''}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<span className={`${activeCategoryId === cat.id ? 'text-blue-400' : 'text-slate-400 group-hover:text-slate-900'}`}>{cat.icon}</span>
|
|
<span className="text-[14px] font-black tracking-tight">{cat.name}</span>
|
|
</div>
|
|
{cat.isPending ? (
|
|
<span className="text-[9px] px-1.5 py-0.5 rounded-md font-black bg-slate-100 text-slate-400 uppercase">대기</span>
|
|
) : cat.badge ? (
|
|
<span className={`text-[10px] px-1.5 py-0.5 rounded-md font-black italic ${activeCategoryId === cat.id ? 'bg-blue-500 text-white' : 'bg-blue-50 text-blue-500'}`}>
|
|
{cat.badge}
|
|
</span>
|
|
) : null}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 2. 중앙 목록 영역 */}
|
|
<div className="flex-1 space-y-6">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div>
|
|
<h2 className="text-2xl font-black text-slate-900 italic tracking-tighter">{activeCategory.name}</h2>
|
|
<p className="text-[12px] font-bold text-slate-400 mt-1 uppercase tracking-tight">수천 개의 주식 중 조건에 맞는 종목을 선별했습니다.</p>
|
|
</div>
|
|
<div className="flex gap-1.5 bg-slate-100 p-1 rounded-xl">
|
|
<FilterChip active={marketFilter === 'all'} onClick={() => setMarketFilter('all')} label="전체" />
|
|
<FilterChip active={marketFilter === 'domestic'} onClick={() => setMarketFilter('domestic')} label="국내" />
|
|
<FilterChip active={marketFilter === 'overseas'} onClick={() => setMarketFilter('overseas')} label="해외" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
|
|
<table className="w-full text-left">
|
|
<thead>
|
|
<tr className="text-[11px] font-black text-slate-400 uppercase tracking-widest border-b bg-slate-50/50">
|
|
<th className="pl-6 py-4 w-12 text-center">순위</th>
|
|
<th className="px-4 py-4">종목</th>
|
|
<th className="px-4 py-4 text-right">현재가</th>
|
|
<th className="px-4 py-4 text-right">등락률</th>
|
|
<th className="px-4 py-4 text-right w-36">매수/매도 비율</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-50">
|
|
{enrichedStocks.map((stock, idx) => (
|
|
<StockRow
|
|
key={stock.code}
|
|
stock={stock}
|
|
rank={idx + 1}
|
|
showRank={true}
|
|
showRatioBar={true}
|
|
onClick={() => setSelectedStockCode(stock.code)}
|
|
/>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 3. 우측 상세 패널 */}
|
|
<div className="w-full lg:w-[340px] shrink-0">
|
|
{selectedStock && (
|
|
<div className="bg-white p-5 rounded-2xl shadow-lg border border-slate-100 flex flex-col gap-5 sticky top-24 max-h-[85vh] overflow-y-auto scrollbar-hide">
|
|
<div className="flex justify-between items-start">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-slate-900 rounded-xl flex items-center justify-center text-white shadow-md text-sm">{selectedStock.name[0]}</div>
|
|
<div className="min-w-0">
|
|
<h4 className="text-lg font-black text-slate-900 italic tracking-tighter cursor-pointer hover:text-blue-600 leading-tight truncate" onClick={() => setDetailStock(selectedStock)}>{selectedStock.name}</h4>
|
|
<p className="text-[12px] font-black text-slate-400">{selectedStock.code}</p>
|
|
</div>
|
|
</div>
|
|
<button onClick={handleToggleHide} className={`p-2 rounded-xl transition-all shrink-0 ${selectedStock.isHidden ? 'bg-rose-50 text-rose-500' : 'bg-slate-50 text-slate-400 hover:text-rose-500'}`}>
|
|
{selectedStock.isHidden ? <Eye size={18} /> : <EyeOff size={18} />}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<button onClick={() => setTradeContext({stock: selectedStock, type: OrderType.BUY})} className="flex-1 py-3 bg-rose-500 text-white rounded-xl font-black text-sm shadow-md flex items-center justify-center gap-1.5 hover:bg-rose-600 transition-all">매수</button>
|
|
<button onClick={() => setTradeContext({stock: selectedStock, type: OrderType.SELL})} className="flex-1 py-3 bg-blue-600 text-white rounded-xl font-black text-sm shadow-md flex items-center justify-center gap-1.5 hover:bg-blue-600 transition-all">매도</button>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-1.5 text-[14px] font-black text-slate-800">
|
|
<StickyNote size={14} className="text-amber-500" /> 종목 메모
|
|
</div>
|
|
<button onClick={handleSaveMemo} className="text-[11px] font-black text-blue-600 hover:underline">저장</button>
|
|
</div>
|
|
<textarea
|
|
className="w-full h-20 p-4 bg-slate-50 border border-slate-100 rounded-2xl text-[13px] text-slate-600 font-medium resize-none focus:bg-white outline-none transition-all"
|
|
placeholder="메모를 입력하세요..."
|
|
value={memo}
|
|
onChange={(e) => setMemo(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-3 pt-4 border-t border-slate-50">
|
|
<div className="flex items-center gap-1.5 text-[14px] font-black text-slate-800">
|
|
<HistoryIcon size={14} className="text-blue-500" /> 거래 기록
|
|
</div>
|
|
<div className="space-y-2">
|
|
{stockOrders.length > 0 ? (
|
|
stockOrders.slice(0, 2).map((order) => (
|
|
<div key={order.id} className="p-3 bg-slate-50/50 border border-slate-100 rounded-xl flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className={`p-1.5 rounded-lg ${order.type === OrderType.BUY ? 'bg-rose-50 text-rose-500' : 'bg-blue-50 text-blue-600'}`}>
|
|
{order.type === OrderType.BUY ? <ArrowDownRight size={12} /> : <ArrowUpRight size={12} />}
|
|
</div>
|
|
<div>
|
|
<p className="text-[12px] font-black text-slate-800">{order.type === OrderType.BUY ? '매수' : '매도'} {order.quantity}주</p>
|
|
<p className="text-[10px] text-slate-400 font-bold">{new Date(order.timestamp).toLocaleDateString()}</p>
|
|
</div>
|
|
</div>
|
|
<p className="text-[12px] font-black text-slate-900">{order.price.toLocaleString()}원</p>
|
|
</div>
|
|
))
|
|
) : (
|
|
<p className="text-[11px] font-black text-slate-300 text-center py-4 italic">기록 없음</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3 pt-4 border-t border-slate-50">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-1.5 text-[14px] font-black text-slate-800">
|
|
<Sparkles size={14} className="text-purple-500" /> AI 분석
|
|
</div>
|
|
<button onClick={handleGenerateAnalysis} disabled={isAnalyzing} className="p-1.5 bg-purple-50 text-purple-600 rounded-lg shrink-0">
|
|
<RefreshCw size={12} className={isAnalyzing ? 'animate-spin' : ''} />
|
|
</button>
|
|
</div>
|
|
{selectedStock.aiAnalysis ? (
|
|
<div className="bg-slate-900 p-4 rounded-2xl text-slate-100 text-[12px] leading-relaxed font-medium italic">
|
|
{selectedStock.aiAnalysis}
|
|
</div>
|
|
) : (
|
|
<div className="p-6 border border-dashed border-slate-100 rounded-2xl flex flex-col items-center gap-2 opacity-30 text-center">
|
|
<p className="text-[11px] font-black uppercase">분석 데이터 없음</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 4. 모달들 */}
|
|
{detailStock && <StockDetailModal stock={detailStock} onClose={() => setDetailStock(null)} />}
|
|
{tradeContext && <TradeModal stock={tradeContext.stock} type={tradeContext.type} onClose={() => setTradeContext(null)} onExecute={async (o) => alert('주문 예약됨')} />}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Discovery;
|