..

pages/News.tsx

@@ -71,8 +71,34 @@ const News: React.FC<NewsProps> = ({ settings }) => {
     const headlines = news.slice(0, 10).map(n => n.title);
     
     try {
-      const result = await AiService.analyzeNewsSentiment(config, headlines);
-      setAnalysisResult(result);
+      const fullResult = await AiService.analyzeNewsSentiment(config, headlines);
+      const [report, metadataStr] = fullResult.split('---METADATA---');
+      
+      setAnalysisResult(report.trim());
+
+      if (metadataStr) {
+        try {
+          const metadata = JSON.parse(metadataStr.trim());
+          if (Array.isArray(metadata)) {
+            setNews(prev => {
+              const updated = [...prev];
+              metadata.forEach(item => {
+                if (updated[item.index]) {
+                  updated[item.index] = {
+                    ...updated[item.index],
+                    relatedThemes: item.themes,
+                    relatedStocks: item.stocks,
+                    sentiment: item.sentiment
+                  };
+                }
+              });
+              return updated;
+            });
+          }
+        } catch (e) {
+          console.error("메타데이터 파싱 실패:", e);
+        }
+      }
     } catch (e) {
       setAnalysisResult("AI 분석 중 오류가 발생했습니다. 설정을 확인해 주세요.");
     } finally {
@@ -86,30 +112,30 @@ const News: React.FC<NewsProps> = ({ settings }) => {
   );
 
   return (
-    <div className="space-y-12 max-w-6xl mx-auto animate-in slide-in-from-right-4 duration-500 pb-20">
+    <div className="space-y-6 w-full animate-in slide-in-from-right-4 duration-500 pb-20 pr-4">
       
       {/* 뉴스 스크랩 비활성 알림 */}
       {!settings.useNaverNews && (
-        <div className="bg-amber-50 border border-amber-100 p-8 rounded-[2.5rem] flex items-start gap-5 shadow-sm">
-          <AlertCircle className="text-amber-500 shrink-0" size={28} />
+        <div className="bg-amber-50 border border-amber-100 p-5 rounded-2xl flex items-start gap-3 shadow-sm">
+          <AlertCircle className="text-amber-500 shrink-0" size={20} />
           <div>
-            <h5 className="font-bold text-amber-900 mb-2 text-lg">뉴스 스크랩 비활성</h5>
-            <p className="text-base text-amber-700">네이버 뉴스 연동이 꺼져 있습니다. 설정 메뉴에서 Naver Client ID를 입력하세요.</p>
+            <h5 className="font-black text-amber-900 mb-1 text-sm uppercase tracking-tight">뉴스 스크랩 비활성</h5>
+            <p className="text-[14px] text-amber-700 font-medium">네이버 뉴스 연동이 꺼져 있습니다. 설정 메뉴에서 Naver Client ID를 입력하세요.</p>
           </div>
         </div>
       )}
 
       {/* 분석 결과 리포트 */}
       {analysisResult && (
-        <div className="bg-white p-10 rounded-[3rem] shadow-xl border-l-8 border-l-blue-600 animate-in fade-in zoom-in duration-300 relative group">
-          <button onClick={() => setAnalysisResult(null)} className="absolute top-6 right-6 p-2 hover:bg-slate-50 rounded-full text-slate-300 hover:text-slate-600 transition-all"><X size={20}/></button>
-          <div className="flex items-start gap-6">
-            <div className="p-4 bg-blue-50 text-blue-600 rounded-2xl">
-              <MessageSquareQuote size={28} />
+        <div className="bg-white p-6 rounded-2xl shadow-lg border-l-4 border-l-blue-600 animate-in fade-in zoom-in duration-300 relative group">
+          <button onClick={() => setAnalysisResult(null)} className="absolute top-4 right-4 p-1.5 hover:bg-slate-50 rounded-lg text-slate-300 hover:text-slate-600 transition-all"><X size={16}/></button>
+          <div className="flex items-start gap-4">
+            <div className="p-3 bg-blue-50 text-blue-600 rounded-xl">
+              <MessageSquareQuote size={20} />
             </div>
-            <div className="space-y-4 pr-10">
-               <h4 className="text-[11px] font-black text-blue-600 uppercase tracking-[0.2em]">AI Intelligence Report</h4>
-               <div className="text-slate-800 text-lg font-bold leading-relaxed whitespace-pre-wrap">
+            <div className="space-y-2 pr-6">
+               <h4 className="text-[10px] font-black text-blue-600 uppercase tracking-[0.2em]">AI Intelligence Report</h4>
+               <div className="text-slate-800 text-[15px] font-bold leading-relaxed whitespace-pre-wrap">
                   {analysisResult}
                </div>
             </div>
@@ -118,61 +144,78 @@ const News: React.FC<NewsProps> = ({ settings }) => {
       )}
 
       {/* 툴바: 검색 및 실행 버튼 */}
-      <div className="flex flex-col md:flex-row gap-8 items-center justify-between">
+      <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
          <div className="relative w-full md:flex-1">
-            <Search className="absolute left-6 top-1/2 -translate-y-1/2 text-slate-400" size={24} />
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
             <input 
               type="text" 
               placeholder="뉴스 검색..."
-              className="w-full pl-16 pr-6 py-5 bg-white border border-slate-200 rounded-[2rem] shadow-sm focus:ring-4 focus:ring-blue-50 outline-none text-base font-bold text-slate-800"
+              className="w-full pl-12 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl shadow-sm focus:ring-2 focus:ring-blue-100 outline-none text-[14px] font-black text-slate-800"
               value={filter}
               onChange={(e) => setFilter(e.target.value)}
             />
          </div>
-         <div className="flex gap-4 w-full md:w-auto">
+         <div className="flex gap-2 w-full md:w-auto">
             <button 
               onClick={handleAnalyze}
               disabled={isAnalyzing || news.length === 0}
-              className={`flex-1 md:shrink-0 px-8 py-5 bg-blue-600 text-white rounded-[2rem] shadow-xl font-black text-[12px] uppercase tracking-widest hover:bg-blue-700 flex items-center justify-center gap-4 transition-all active:scale-95 disabled:opacity-50`}
+              className={`flex-1 md:shrink-0 px-5 py-2.5 bg-blue-600 text-white rounded-xl shadow-md font-black text-[12px] uppercase tracking-wider hover:bg-blue-700 flex items-center justify-center gap-2 transition-all active:scale-95 disabled:opacity-50`}
             >
-              <Sparkles size={22} className={isAnalyzing ? 'animate-pulse' : ''} />
-              {isAnalyzing ? 'AI 분석 중...' : 'AI 브리핑'}
+              <Sparkles size={16} className={isAnalyzing ? 'animate-pulse' : ''} />
+              {isAnalyzing ? '분석 중...' : 'AI 브리핑'}
             </button>
             <button 
               onClick={handleRefresh}
               disabled={loading}
-              className={`flex-1 md:shrink-0 px-8 py-5 bg-slate-900 text-white rounded-[2rem] shadow-xl font-black text-[12px] uppercase tracking-widest hover:bg-slate-800 flex items-center justify-center gap-4 transition-all active:scale-95 ${loading ? 'opacity-50' : ''}`}
+              className={`flex-1 md:shrink-0 px-5 py-2.5 bg-slate-900 text-white rounded-xl shadow-md font-black text-[12px] uppercase tracking-wider hover:bg-slate-800 flex items-center justify-center gap-2 transition-all active:scale-95 ${loading ? 'opacity-50' : ''}`}
             >
-              <RefreshCw size={22} className={loading ? 'animate-spin' : ''} />
-              뉴스 새로고침
+              <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
+              새로고침
             </button>
          </div>
       </div>
 
       {/* 뉴스 리스트 */}
-      <div className="space-y-8">
+      <div className="grid grid-cols-1 gap-3">
         {filteredNews.map((item, idx) => (
-          <article key={idx} className="bg-white p-10 rounded-[3.5rem] shadow-sm border border-slate-100 flex flex-col md:flex-row gap-10 hover:shadow-2xl transition-all group">
-            <div className="w-20 h-20 bg-slate-50 rounded-3xl flex items-center justify-center flex-shrink-0 text-slate-900 group-hover:bg-slate-900 group-hover:text-white transition-all shadow-sm">
-               <Newspaper size={40} />
+          <article key={idx} className="bg-white p-4 rounded-2xl shadow-sm border border-slate-100 flex items-start gap-4 hover:border-blue-200 hover:shadow-md transition-all group">
+            <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 transition-all ${
+              item.sentiment === 'POSITIVE' ? 'bg-rose-50 text-rose-500' : 
+              item.sentiment === 'NEGATIVE' ? 'bg-blue-50 text-blue-500' : 
+              'bg-slate-50 text-slate-400 group-hover:bg-slate-900 group-hover:text-white'
+            }`}>
+               <Newspaper size={18} />
             </div>
-            <div className="flex-1 space-y-4">
-               <div className="flex justify-between items-start">
-                  <span className="text-[11px] font-black text-blue-600 uppercase tracking-[0.2em] bg-blue-50 px-4 py-1.5 rounded-full">Financial Market</span>
-                  <span className="text-sm text-slate-400 font-bold">{new Date(item.pubDate).toLocaleDateString('ko-KR')}</span>
+            <div className="flex-1 min-w-0">
+               <div className="flex justify-between items-center mb-1">
+                  <span className="text-[10px] font-black text-blue-500 uppercase tracking-widest">Financial Market</span>
+                  <span className="text-[11px] text-slate-400 font-bold">{new Date(item.pubDate).toLocaleDateString('ko-KR')}</span>
                </div>
-               <h3 className="text-2xl font-black text-slate-900 leading-tight group-hover:text-blue-600 transition-colors">
+               <h3 className="text-[16px] font-black text-slate-900 leading-tight mb-1 group-hover:text-blue-600 transition-colors truncate">
                   {item.title}
                </h3>
-               <p className="text-slate-500 text-base font-medium leading-relaxed line-clamp-2 opacity-80">
+               <p className="text-slate-500 text-[13px] font-medium leading-normal line-clamp-1 opacity-70">
                   {item.description}
                </p>
-               <div className="pt-6 flex items-center gap-8">
-                  <a href={item.link} target="_blank" rel="noopener noreferrer" className="text-[12px] font-black uppercase text-slate-900 hover:text-blue-600 flex items-center gap-2.5 tracking-tighter transition-colors">
-                    상세보기 <ExternalLink size={18} />
+               
+               {/* AI 분석 인사이트 태그 */}
+               {(item.relatedThemes || item.relatedStocks) && (
+                 <div className="mt-2 flex flex-wrap gap-1.5">
+                    {item.relatedThemes?.map(theme => (
+                      <span key={theme} className="text-[10px] font-black text-blue-600 bg-blue-50/50 px-1.5 py-0.5 rounded-md leading-none border border-blue-100/50">#{theme}</span>
+                    ))}
+                    {item.relatedStocks?.map(stock => (
+                      <span key={stock} className="text-[10px] font-black text-slate-500 bg-slate-50 px-1.5 py-0.5 rounded-md leading-none border border-slate-200/50">{stock}</span>
+                    ))}
+                 </div>
+               )}
+
+               <div className="mt-2 flex items-center gap-4">
+                  <a href={item.link} target="_blank" rel="noopener noreferrer" className="text-[11px] font-black uppercase text-blue-600 hover:underline flex items-center gap-1.5 tracking-tight transition-colors">
+                    기사보기 <ExternalLink size={12} />
                   </a>
                   <button className="text-slate-300 hover:text-amber-500 transition-colors">
-                    <Bookmark size={22} />
+                    <Bookmark size={14} />
                   </button>
                </div>
             </div>