Design/my page

src/components/Intro/ABTestResults.tsx

@@ -16,53 +16,41 @@ export default function ABTestResults() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.8, delay: 0.2 }}
-            className="text-3xl font-bold text-gray-900 mb-4"
+            className="text-3xl font-bold text-gray-900 mb-8"
           >
-            📊 LLM 기반 금융 분석 모델 A/B 테스트 결과
+            LLM 기반 금융 분석 모델 A/B 테스트 결과
           </motion.h2>
-          <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8, delay: 0.4 }}
-            className="text-lg text-gray-600 mb-8"
-          >
-            CoT/RAG 방식의 우수성을 과학적으로 검증했습니다
-          </motion.p>
 
           {/* 기술 스택 비교 */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.8, delay: 0.6 }}
-            className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-12"
+            className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-8"
           >
-            <div className="bg-white rounded-xl p-6 shadow-lg">
+            <div className="bg-white rounded-xl p-6 shadow-lg opacity-90">
               <h4 className="text-lg font-bold text-gray-500 mb-4 text-center">
                 Baseline
               </h4>
               <div className="text-center">
-                <div className="text-2xl font-bold text-gray-500 mb-2">
+                <div className="text-xl font-bold text-gray-500 mb-1">
                   GPT-4o
                 </div>
-                <div className="text-sm text-gray-600">기본 모델</div>
+                <div className="text-xs text-gray-500">기본 모델</div>
               </div>
             </div>
-            <div className="bg-white rounded-xl p-6 shadow-lg border-2 border-[#0A5C2B]">
+            <div className="bg-gradient-to-br from-white to-emerald-50 rounded-xl p-6 shadow-2xl border-2 border-[#0A5C2B] ring-4 ring-[#0A5C2B]/10">
               <h4 className="text-lg font-bold text-[#0A5C2B] mb-4 text-center">
                 Ours
               </h4>
               <div className="text-center">
-                <div className="text-2xl font-bold text-[#0A5C2B] mb-2">
-                  GPT-4o
-                </div>
-                <div className="text-sm text-gray-600 mb-2">
-                  + BarbellAI 기술
-                </div>
-                <div className="text-xs text-[#0A5C2B] font-medium">
+                <div className="text-2xl font-extrabold text-[#0A5C2B] tracking-tight">
                   Chain of Thought + RAG
                 </div>
+                <div className="text-xs text-gray-500 mt-2">
+                  기반 모델: GPT-4o
+                </div>
               </div>
             </div>
           </motion.div>
@@ -81,24 +69,24 @@ export default function ABTestResults() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.8, delay: 0.1 }}
-            className="bg-white rounded-xl p-8 shadow-lg mb-8"
+            className="bg-white rounded-xl p-8 shadow-lg mb-4"
           >
             <h3 className="text-xl font-bold text-[#0A5C2B] mb-6 text-center">
               🎯 종합 분석 평가 (깊이+근거+통찰력 평균)
             </h3>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div className="text-center">
-                <div className="text-3xl font-bold text-[#0A5C2B] mb-2">
-                  6.92
-                </div>
-                <div className="text-sm text-gray-600">CoT/RAG 평균 점수</div>
-              </div>
               <div className="text-center">
                 <div className="text-3xl font-bold text-gray-500 mb-2">
                   5.25
                 </div>
                 <div className="text-sm text-gray-600">Baseline 평균 점수</div>
               </div>
+              <div className="text-center">
+                <div className="text-3xl font-bold text-[#0A5C2B] mb-2">
+                  6.92
+                </div>
+                <div className="text-sm text-gray-600">CoT/RAG 평균 점수</div>
+              </div>
             </div>
             <div className="mt-6 text-center">
               <div className="text-2xl font-bold text-green-600 mb-2">
@@ -206,26 +194,6 @@ export default function ABTestResults() {
               </div>
             </motion.div>
           </div>
-
-          {/* 결론 */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8, delay: 0.5 }}
-            className="mt-8 text-center"
-          >
-            <div className="bg-[#0A5C2B] text-white rounded-xl p-6">
-              <h4 className="text-xl font-bold mb-2">🏆 결론</h4>
-              <p className="text-white/90">
-                CoT/RAG 방식이 모든 평가 항목에서 통계적으로 유의미하게 우수한
-                성능을 보여주었습니다.
-                <br />
-                <span className="font-semibold">p &lt; 0.001</span> 수준에서
-                통계적 유의성을 확인했습니다.
-              </p>
-            </div>
-          </motion.div>
         </motion.div>
       </div>
     </div>

src/components/chat/ChatWindow.tsx

@@ -174,7 +174,8 @@ export default function ChatWindow({ isOpen, onClose }: ChatWindowProps) {
   };
 
   const handleSubmit = useCallback(() => {
-    if (!message.trim() || isCreating) return;
+    if (((message ?? "").trim().length === 0 && !newsInfo) || isCreating)
+      return;
 
     // 뉴스 정보가 있으면 메시지에 포함
     let finalMessage = message;
@@ -212,10 +213,22 @@ ${newsInfo.impact ? `영향도: ${newsInfo.impact === "positive" ? "긍정" : ne
       return;
     }
 
-    // 현재 채팅방이 없으면 새로 생성
+    // 현재 채팅방이 없으면 새로 생성 후 즉시 전송
     const title = generateKoreanTimestamp();
-    createChatWithCallback(title);
-    setPendingMessage(finalMessage); // 새로 생성된 채팅방으로 메시지 전송을 위해 pendingMessage 설정
+    createChatWithCallback(
+      title,
+      (newId) => {
+        setCurrentChatId(newId);
+        sendMessage({ chatId: newId, message: finalMessage });
+        setMessage("");
+        setNewsInfo(null);
+        setShowHistory(false);
+      },
+      () => {
+        // 실패 시 기존 fallback 로직 유지
+        setPendingMessage(finalMessage);
+      }
+    );
   }, [
     message,
     isCreating,

src/components/stockDetail/TechnicalAnalysis.tsx

@@ -83,13 +83,27 @@ export default function TechnicalAnalysis({
   const volaData = analysis?.volatility_analysis_data;
   const volData = analysis?.volume_analysis_data;
 
-  const isAnalysisLoading = !analysis;
-
   // 기술적 지표 값 (실제 데이터 사용)
   const rsi = mainData?.rsi?.value ?? 28.4;
+  const macdValue: number | undefined =
+    typeof mainData?.macd?.value === "number" ? mainData.macd.value : undefined;
+  const macdDerivedStatus =
+    macdValue === undefined
+      ? undefined
+      : macdValue > 0
+        ? "상승"
+        : macdValue < 0
+          ? "하락"
+          : "중립";
+  const macdStatusText = mainData?.macd?.status ?? macdDerivedStatus;
   const dailyRange = volaData?.volatility?.value?.volatility_percent ?? 2.8;
   const avgVolatility =
-    volaData?.volatility?.value?.avg_volatility_percent ?? 2.8;
+    volaData?.volatility?.value?.avg50_volatility_percent ??
+    volaData?.volatility?.value?.avg_volatility_percent ??
+    2.8;
+  const volatilityAnalysisFromApi = volaData?.volatility?.analysis as
+    | string
+    | undefined;
   const currentVolume = toNum(volData?.volume?.value?.volume) || 15234567;
   const avgVolume = toNum(volData?.volume?.value?.avg_volume_20) || 12456789;
   const volumeRatio = (
@@ -98,8 +112,6 @@ export default function TechnicalAnalysis({
   ).toFixed(1);
   const mfiValue =
     typeof volData?.mfi?.value === "number" ? volData.mfi.value : undefined;
-  const obvValue = toNum(volData?.obv?.value?.obv);
-  const obvMa20Value = toNum(volData?.obv?.value?.obv_ma20);
 
   const tabs = [
     { id: "summary", label: "주요 지표", icon: Target },
@@ -207,16 +219,16 @@ export default function TechnicalAnalysis({
               >
                 <div className="flex items-center mb-3">
                   <span className="text-sm font-medium text-gray-700">
-                    종합 신호
+                    MACD
                   </span>
                 </div>
                 <div
-                  className={`text-lg font-bold ${statusColor(mainData?.macd?.status)}`}
+                  className={`text-lg font-bold ${statusColor(macdStatusText)}`}
                 >
                   {_isTechnicalLoading ? (
                     <SkeletonText widthClass="w-20" />
                   ) : (
-                    (mainData?.macd?.status ?? "중립")
+                    (macdStatusText ?? "중립")
                   )}
                 </div>
                 {hoveredKey === "summary_total" && (
@@ -274,7 +286,10 @@ export default function TechnicalAnalysis({
                 </div>
                 {hoveredKey === "vol_daily" && (
                   <div className="absolute z-50 pointer-events-none top-full left-0 right-0 mt-2 p-3 bg-gray-800 text-white text-xs rounded-lg shadow-lg">
-                    <div>일일 변동성 관련 참고 값</div>
+                    <div>
+                      {volatilityAnalysisFromApi ??
+                        "분석 정보를 불러오고 있습니다."}
+                    </div>
                     <div className="absolute bottom-full left-4 w-0 h-0 border-l-4 border-r-4 border-b-4 border-transparent border-b-gray-800"></div>
                   </div>
                 )}
@@ -302,7 +317,10 @@ export default function TechnicalAnalysis({
                 </div>
                 {hoveredKey === "vol_avg" && (
                   <div className="absolute z-50 pointer-events-none top-full left-0 right-0 mt-2 p-3 bg-gray-800 text-white text-xs rounded-lg shadow-lg">
-                    <div>RVI: - | ATR: -</div>
+                    <div>
+                      {volatilityAnalysisFromApi ??
+                        "분석 정보를 불러오고 있습니다."}
+                    </div>
                     <div className="absolute bottom-full left-4 w-0 h-0 border-l-4 border-r-4 border-b-4 border-transparent border-b-gray-800"></div>
                   </div>
                 )}
@@ -477,10 +495,6 @@ export default function TechnicalAnalysis({
                 </div>
                 {hoveredKey === "vol_obv_card" && (
                   <div className="absolute z-50 pointer-events-none top-full left-0 right-0 mt-2 p-3 bg-gray-800 text-white text-xs rounded-lg shadow-lg">
-                    <div>
-                      {obvValue ? obvValue.toLocaleString() : "-"} / MA20{" "}
-                      {obvMa20Value ? obvMa20Value.toLocaleString() : "-"}
-                    </div>
                     <div>{volData?.obv?.analysis ?? "OBV 분석 정보"}</div>
                     <div className="absolute bottom-full left-4 w-0 h-0 border-l-4 border-r-4 border-b-4 border-transparent border-b-gray-800"></div>
                   </div>

src/components/stockDetail/chart/PriceVolumeChart.tsx

@@ -72,7 +72,8 @@ const PriceVolumeChart = memo(function PriceVolumeChart({
         const { createChart, CandlestickSeries, HistogramSeries, LineSeries } =
           tv as any;
 
-        chart = createChart(tvContainerRef.current, {
+        const container = tvContainerRef.current;
+        chart = createChart(container, {
           layout: {
             textColor: "#334155",
             background: { type: "solid", color: "#ffffff" },
@@ -170,6 +171,34 @@ const PriceVolumeChart = memo(function PriceVolumeChart({
         }
 
         chart.timeScale().fitContent();
+
+        // 반응형: ResizeObserver로 컨테이너 크기 변경 시 차트 리사이즈
+        let resizeObserver: ResizeObserver | null = null;
+        if (typeof ResizeObserver !== "undefined") {
+          resizeObserver = new ResizeObserver(() => {
+            try {
+              const { clientWidth, clientHeight } = container;
+              if (clientWidth && clientHeight) {
+                chart.applyOptions({
+                  width: clientWidth,
+                  height: clientHeight,
+                });
+              }
+            } catch {}
+          });
+          resizeObserver.observe(container);
+        } else {
+          // 폴백: 윈도우 리사이즈
+          const onResize = () => {
+            try {
+              const { clientWidth, clientHeight } = container;
+              chart.applyOptions({ width: clientWidth, height: clientHeight });
+            } catch {}
+          };
+          window.addEventListener("resize", onResize);
+          // cleanup에서 제거
+          (chart as any).__onResize = onResize;
+        }
         setTvReady(true);
         setTvFailed(false);
         clearTimeout(timeoutId); // 성공 시 타임아웃 클리어
@@ -188,6 +217,13 @@ const PriceVolumeChart = memo(function PriceVolumeChart({
           chart.remove?.();
         } catch {}
       }
+      // 리사이즈 옵저버/리스너 정리
+      try {
+        const onResize = (chart as any)?.__onResize;
+        if (onResize) {
+          window.removeEventListener("resize", onResize);
+        }
+      } catch {}
     };
   }, [data, showMA, tvReady, tvFailed]);
 
@@ -301,7 +337,7 @@ const PriceVolumeChart = memo(function PriceVolumeChart({
           duration: 500, // 부드러운 전환을 위한 애니메이션
           easing: "easeInOutCubic",
         },
-        reflow: false, // 리플로우 비활성화
+        reflow: true, // 컨테이너 크기 변화에 반응
       },
       accessibility: { enabled: false },
       title: { text: "" },
@@ -428,16 +464,34 @@ const PriceVolumeChart = memo(function PriceVolumeChart({
     return (
       <div
         ref={tvContainerRef}
-        className="h-[500px] w-full transition-all duration-300 ease-in-out"
-        style={{ opacity: 1 }}
+        className="w-full transition-all duration-300 ease-in-out"
+        style={{
+          opacity: 1,
+          height:
+            typeof window !== "undefined" && window.innerWidth < 640
+              ? 360
+              : typeof window !== "undefined" && window.innerWidth < 1024
+                ? 420
+                : 500,
+        }}
       />
     );
   }
 
   // TradingView 실패 시 Highcharts 사용
   if (tvFailed && ready) {
     return (
-      <div className="transition-all duration-300 ease-in-out">
+      <div
+        className="transition-all duration-300 ease-in-out w-full overflow-hidden"
+        style={{
+          height:
+            typeof window !== "undefined" && window.innerWidth < 640
+              ? 360
+              : typeof window !== "undefined" && window.innerWidth < 1024
+                ? 420
+                : 500,
+        }}
+      >
         <HighchartsReact
           key={`${timeRange}-${ohlcData.length}`}
           highcharts={Highcharts}
@@ -451,7 +505,17 @@ const PriceVolumeChart = memo(function PriceVolumeChart({
   // TradingView 로딩 중이지만 데이터가 있으면 Highcharts로 폴백
   if (data.length > 0 && !tvReady && !tvFailed) {
     return (
-      <div className="transition-all duration-300 ease-in-out">
+      <div
+        className="transition-all duration-300 ease-in-out w-full overflow-hidden"
+        style={{
+          height:
+            typeof window !== "undefined" && window.innerWidth < 640
+              ? 360
+              : typeof window !== "undefined" && window.innerWidth < 1024
+                ? 420
+                : 500,
+        }}
+      >
         <HighchartsReact
           key={`${timeRange}-${ohlcData.length}`}
           highcharts={Highcharts}