309 lines
16 KiB
TypeScript
309 lines
16 KiB
TypeScript
|
|
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
BrainCircuit,
|
|
Sparkles,
|
|
RefreshCw,
|
|
Search,
|
|
TrendingUp,
|
|
MessageSquareQuote,
|
|
Zap,
|
|
ChevronRight,
|
|
Target,
|
|
BarChart4,
|
|
Cpu,
|
|
ShieldCheck,
|
|
AlertCircle
|
|
} from 'lucide-react';
|
|
import { ApiSettings, StockItem, NewsItem, AiConfig } from '../types';
|
|
import { NaverService } from '../services/naverService';
|
|
import { AiService } from '../services/aiService';
|
|
|
|
interface AiInsightsProps {
|
|
stocks: StockItem[];
|
|
settings: ApiSettings;
|
|
onUpdateSettings: (settings: ApiSettings) => void;
|
|
}
|
|
|
|
const AiInsights: React.FC<AiInsightsProps> = ({ stocks, settings, onUpdateSettings }) => {
|
|
// 뉴스 분석 상태
|
|
const [news, setNews] = useState<NewsItem[]>([]);
|
|
const [isNewsLoading, setIsNewsLoading] = useState(false);
|
|
const [selectedNewsAiId, setSelectedNewsAiId] = useState<string>(settings.preferredNewsAiId || settings.aiConfigs[0]?.id || 'none');
|
|
const [newsAnalysis, setNewsAnalysis] = useState<string | null>(null);
|
|
const [isNewsAnalyzing, setIsNewsAnalyzing] = useState(false);
|
|
|
|
// 종목 분석 상태
|
|
const [search, setSearch] = useState('');
|
|
const [selectedStock, setSelectedStock] = useState<StockItem | null>(null);
|
|
const [selectedStockAiId, setSelectedStockAiId] = useState<string>(settings.preferredStockAiId || settings.aiConfigs[0]?.id || 'none');
|
|
const [stockAnalysis, setStockAnalysis] = useState<string | null>(null);
|
|
const [isStockAnalyzing, setIsStockAnalyzing] = useState(false);
|
|
|
|
const naverService = new NaverService(settings);
|
|
|
|
useEffect(() => {
|
|
fetchInitialNews();
|
|
}, []);
|
|
|
|
const fetchInitialNews = async () => {
|
|
setIsNewsLoading(true);
|
|
if (settings.useNaverNews) {
|
|
const result = await naverService.fetchNews("주식 시장 전망");
|
|
setNews(result);
|
|
}
|
|
setIsNewsLoading(false);
|
|
};
|
|
|
|
const handleNewsAnalysis = async () => {
|
|
const config = settings.aiConfigs.find(c => c.id === selectedNewsAiId);
|
|
if (!config) return;
|
|
|
|
setIsNewsAnalyzing(true);
|
|
const headlines = news.map(n => n.title);
|
|
try {
|
|
const result = await AiService.analyzeNewsSentiment(config, headlines);
|
|
setNewsAnalysis(result);
|
|
// 선호 엔진 업데이트
|
|
onUpdateSettings({ ...settings, preferredNewsAiId: selectedNewsAiId });
|
|
} catch (e) {
|
|
setNewsAnalysis("분석 실패: API 설정을 확인해주세요.");
|
|
} finally {
|
|
setIsNewsAnalyzing(false);
|
|
}
|
|
};
|
|
|
|
const handleStockAnalysis = async () => {
|
|
if (!selectedStock) return;
|
|
const config = settings.aiConfigs.find(c => c.id === selectedStockAiId);
|
|
if (!config) return;
|
|
|
|
setIsStockAnalyzing(true);
|
|
const context = `종목명: ${selectedStock.name}, 현재가: ${selectedStock.price}, 등락률: ${selectedStock.changePercent}%, PER: ${selectedStock.per}, PBR: ${selectedStock.pbr}, ROE: ${selectedStock.roe}%`;
|
|
const prompt = `주식 전문가로서 다음 데이터를 바탕으로 ${selectedStock.name}에 대한 매수/매도 의견과 향후 일주일간의 대응 전략을 아주 구체적으로 제안해 주세요. 데이터: ${context}`;
|
|
|
|
try {
|
|
// AiService에 범용 호출 메서드가 없으므로 analyzeNewsSentiment를 차용하거나 직접 fetch 가능
|
|
// 여기서는 규칙에 따라 aiService의 call 메카니즘을 활용하도록 시뮬레이션
|
|
const result = await AiService.analyzeNewsSentiment(config, [prompt]);
|
|
setStockAnalysis(result);
|
|
onUpdateSettings({ ...settings, preferredStockAiId: selectedStockAiId });
|
|
} catch (e) {
|
|
setStockAnalysis("분석 실패: API 연결을 확인하세요.");
|
|
} finally {
|
|
setIsStockAnalyzing(false);
|
|
}
|
|
};
|
|
|
|
const filteredStocks = stocks.filter(s =>
|
|
s.name.includes(search) || s.code.toLowerCase().includes(search.toLowerCase())
|
|
).slice(0, 5);
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto space-y-12 pb-32 animate-in fade-in duration-700">
|
|
|
|
{/* Header Banner */}
|
|
<div className="relative bg-slate-900 rounded-[4rem] p-16 overflow-hidden border border-white/5 shadow-2xl">
|
|
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-gradient-to-br from-blue-600/20 to-purple-600/20 rounded-full blur-[100px] -mr-64 -mt-64"></div>
|
|
<div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-10">
|
|
<div className="space-y-6 max-w-2xl">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-4 bg-blue-600 text-white rounded-[1.5rem] shadow-lg shadow-blue-500/30">
|
|
<BrainCircuit size={40} />
|
|
</div>
|
|
<h2 className="text-4xl font-black text-white italic tracking-tighter">AI INTELLIGENCE CENTER</h2>
|
|
</div>
|
|
<p className="text-lg text-slate-400 font-medium leading-relaxed">
|
|
사용자가 직접 등록한 멀티 AI 엔진을 활용하여 시장의 거시적 흐름과 <br/>
|
|
개별 종목의 미시적 데이터를 입체적으로 분석합니다.
|
|
</p>
|
|
<div className="flex items-center gap-6 pt-4">
|
|
<div className="flex items-center gap-2 px-5 py-2.5 bg-white/5 rounded-full border border-white/10">
|
|
<ShieldCheck className="text-emerald-500" size={18} />
|
|
<span className="text-[11px] font-black text-slate-300 uppercase tracking-widest">Secure AI Tunneling</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 px-5 py-2.5 bg-white/5 rounded-full border border-white/10">
|
|
<Cpu className="text-blue-400" size={18} />
|
|
<span className="text-[11px] font-black text-slate-300 uppercase tracking-widest">{settings.aiConfigs.length} Engines Connected</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="hidden lg:block relative">
|
|
<div className="w-64 h-64 bg-slate-800 rounded-[3rem] border border-white/5 flex items-center justify-center animate-pulse">
|
|
<Sparkles size={80} className="text-blue-500/40" />
|
|
</div>
|
|
<div className="absolute -top-4 -right-4 p-4 bg-blue-600 rounded-2xl shadow-xl">
|
|
<Target size={24} className="text-white" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
|
|
{/* News Intelligence Panel */}
|
|
<div className="space-y-8">
|
|
<div className="bg-white p-12 rounded-[3.5rem] shadow-sm border border-slate-100 h-full flex flex-col">
|
|
<div className="flex justify-between items-start mb-10">
|
|
<div className="flex items-center gap-5">
|
|
<div className="p-4 bg-emerald-50 text-emerald-600 rounded-2xl">
|
|
<TrendingUp size={28} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-2xl font-black text-slate-900 tracking-tight">MARKET SENTIMENT</h3>
|
|
<p className="text-[11px] text-slate-400 font-black uppercase tracking-widest mt-1">실시간 뉴스 기반 시장 심리 분석</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<select
|
|
value={selectedNewsAiId}
|
|
onChange={(e) => setSelectedNewsAiId(e.target.value)}
|
|
className="p-3.5 bg-slate-50 border border-slate-100 rounded-xl text-xs font-black outline-none focus:border-blue-500 transition-all cursor-pointer"
|
|
>
|
|
{settings.aiConfigs.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
|
</select>
|
|
<button
|
|
onClick={handleNewsAnalysis}
|
|
disabled={isNewsAnalyzing || news.length === 0}
|
|
className="p-3.5 bg-slate-900 text-white rounded-xl hover:bg-slate-800 transition-all disabled:opacity-30"
|
|
>
|
|
{isNewsAnalyzing ? <RefreshCw size={18} className="animate-spin" /> : <Sparkles size={18} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-8 overflow-y-auto pr-2 scrollbar-hide">
|
|
{newsAnalysis ? (
|
|
<div className="p-8 bg-slate-900 rounded-[2.5rem] text-white shadow-2xl animate-in zoom-in-95 duration-500">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<MessageSquareQuote size={24} className="text-emerald-400" />
|
|
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Analysis Result</span>
|
|
</div>
|
|
<div className="text-base font-medium leading-relaxed opacity-90 whitespace-pre-wrap font-sans">
|
|
{newsAnalysis}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4 opacity-50">
|
|
{news.slice(0, 3).map((n, i) => (
|
|
<div key={i} className="p-6 bg-slate-50 rounded-2xl border border-slate-100 flex items-center justify-between">
|
|
<p className="font-bold text-slate-800 truncate pr-4">{n.title}</p>
|
|
<ChevronRight size={16} className="text-slate-300 shrink-0" />
|
|
</div>
|
|
))}
|
|
{news.length === 0 && (
|
|
<div className="py-20 text-center flex flex-col items-center gap-4">
|
|
<AlertCircle className="text-slate-200" size={48} />
|
|
<p className="text-sm font-black text-slate-300 uppercase">뉴스 데이터를 불러오는 중이거나 <br/>설정이 꺼져있습니다.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stock Deep Analysis Panel */}
|
|
<div className="space-y-8">
|
|
<div className="bg-white p-12 rounded-[3.5rem] shadow-sm border border-slate-100 h-full flex flex-col">
|
|
<div className="flex justify-between items-start mb-10">
|
|
<div className="flex items-center gap-5">
|
|
<div className="p-4 bg-purple-50 text-purple-600 rounded-2xl">
|
|
<BarChart4 size={28} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-2xl font-black text-slate-900 tracking-tight">STOCK DEEP DIVE</h3>
|
|
<p className="text-[11px] text-slate-400 font-black uppercase tracking-widest mt-1">데이터 기반 종목 맞춤형 전략 수립</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<select
|
|
value={selectedStockAiId}
|
|
onChange={(e) => setSelectedStockAiId(e.target.value)}
|
|
className="p-3.5 bg-slate-50 border border-slate-100 rounded-xl text-xs font-black outline-none focus:border-blue-500 transition-all cursor-pointer"
|
|
>
|
|
{settings.aiConfigs.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative mb-8">
|
|
<Search className="absolute left-6 top-1/2 -translate-y-1/2 text-slate-400" size={24} />
|
|
<input
|
|
type="text"
|
|
placeholder="분석할 종목 검색..."
|
|
className="w-full pl-16 pr-6 py-5 bg-slate-50 border-2 border-transparent rounded-[2rem] focus:border-blue-500 focus:bg-white outline-none text-base font-bold text-slate-800 transition-all shadow-inner"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
{search && filteredStocks.length > 0 && (
|
|
<div className="absolute top-full left-0 right-0 mt-3 bg-white border border-slate-100 shadow-2xl rounded-[2.5rem] overflow-hidden z-[50]">
|
|
{filteredStocks.map(s => (
|
|
<div
|
|
key={s.code}
|
|
onClick={() => { setSelectedStock(s); setSearch(''); setStockAnalysis(null); }}
|
|
className="p-6 hover:bg-purple-50 cursor-pointer flex justify-between items-center border-b last:border-none border-slate-50 group"
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-slate-100 rounded-2xl flex items-center justify-center font-black text-slate-400 text-xs">{s.code.substring(0,2)}</div>
|
|
<div>
|
|
<p className="font-black text-slate-800 text-base">{s.name}</p>
|
|
<p className="text-[11px] font-mono text-slate-400 font-bold tracking-widest">{s.code}</p>
|
|
</div>
|
|
</div>
|
|
<ChevronRight className="text-slate-200 group-hover:text-purple-500 transition-colors" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-8 overflow-y-auto pr-2 scrollbar-hide">
|
|
{selectedStock ? (
|
|
<div className="space-y-8 animate-in slide-in-from-bottom-4 duration-500">
|
|
<div className="p-8 bg-purple-50 rounded-[2.5rem] border border-purple-100 flex items-center justify-between">
|
|
<div className="flex items-center gap-5">
|
|
<div className="w-16 h-16 bg-white rounded-3xl flex items-center justify-center text-purple-600 shadow-sm">
|
|
<Zap size={32} fill="currentColor" />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-2xl font-black text-slate-900 tracking-tighter italic">{selectedStock.name}</h4>
|
|
<p className="text-sm font-mono text-slate-500 font-bold">{selectedStock.code}</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleStockAnalysis}
|
|
disabled={isStockAnalyzing}
|
|
className="px-8 py-4 bg-purple-600 text-white rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-purple-700 transition-all shadow-xl shadow-purple-200"
|
|
>
|
|
{isStockAnalyzing ? <RefreshCw className="animate-spin" size={20} /> : "전략 분석 요청"}
|
|
</button>
|
|
</div>
|
|
|
|
{stockAnalysis && (
|
|
<div className="p-10 bg-white border-2 border-purple-100 rounded-[3rem] shadow-xl animate-in fade-in zoom-in-95 duration-500 relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 p-4 opacity-5">
|
|
<BrainCircuit size={120} />
|
|
</div>
|
|
<div className="relative z-10 text-slate-800 text-base font-medium leading-relaxed whitespace-pre-wrap">
|
|
{stockAnalysis}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="h-full flex flex-col items-center justify-center py-20 opacity-30">
|
|
<Search size={64} strokeWidth={1} className="text-slate-300 mb-6" />
|
|
<p className="text-sm font-black text-slate-400 uppercase tracking-widest">분석을 위해 상단에서 종목을 검색하세요</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AiInsights;
|