From b01206e9e3d91fc8ffeaab4d9e249a9902381aa9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B2=9C=EC=84=B1=EC=9C=A4?= <1112csy@naver.com>
Date: Wed, 3 Sep 2025 21:46:43 +0900
Subject: [PATCH 1/7] =?UTF-8?q?=E2=9C=A8:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Header.tsx | 14 +++++++++++++-
 src/pages/myPage/index.tsx       | 29 ++++++++++++++++++++++++++---
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index bad8298..5ae666d 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import BALLFiNLogo from "../../assets/BALLFiN.svg";
 import { Link, useLocation } from "react-router-dom";
 import { Menu, X, LogOut, User, Settings } from "lucide-react";
@@ -40,6 +40,7 @@ const Header = () => {
     message: string;
     type: "success" | "error";
   }>({ show: false, message: "", type: "success" });
+  const wasLoggedInRef = useRef(false);
 
   useEffect(() => {
     // 로그인 상태 및 사용자 정보 확인
@@ -47,6 +48,15 @@ const Header = () => {
       const token = localStorage.getItem("access_token");
 
       if (token) {
+        // 로그인 전환 토스트
+        if (!wasLoggedInRef.current) {
+          setToast({
+            show: true,
+            message: "로그인되었습니다.",
+            type: "success",
+          });
+        }
+        wasLoggedInRef.current = true;
         setIsLoggedIn(true);
 
         // 먼저 localStorage에서 사용자 정보 확인
@@ -81,11 +91,13 @@ const Header = () => {
           setIsLoggedIn(false);
           setUserName("");
           setUserEmail("");
+          wasLoggedInRef.current = false;
         }
       } else {
         setIsLoggedIn(false);
         setUserName("");
         setUserEmail("");
+        wasLoggedInRef.current = false;
       }
     };
 
diff --git a/src/pages/myPage/index.tsx b/src/pages/myPage/index.tsx
index 31a268f..6f5bf18 100644
--- a/src/pages/myPage/index.tsx
+++ b/src/pages/myPage/index.tsx
@@ -11,6 +11,7 @@ import {
   LogOut,
   Edit3,
 } from "lucide-react";
+import Toast from "@/components/common/Toast";
 
 export default function MyPage() {
   const [user] = useState({
@@ -21,6 +22,10 @@ export default function MyPage() {
     membership: "프리미엄",
     joinDate: "2024년 1월",
   });
+  const [toast, setToast] = useState<{
+    message: string;
+    type: "success" | "error";
+  } | null>(null);
 
   const menuItems = [
     {
@@ -61,13 +66,31 @@ export default function MyPage() {
     },
   ];
 
-  const handleLogout = () => {
-    // 로그아웃 로직
-    console.log("로그아웃");
+  const handleLogout = async () => {
+    const { logout } = await import("@/api/auth/logoutApi");
+    try {
+      await logout();
+      setToast({ message: "로그아웃 되었습니다.", type: "success" });
+    } catch (_) {
+      setToast({ message: "로그아웃 중 오류가 발생했습니다.", type: "error" });
+    } finally {
+      localStorage.removeItem("access_token");
+      setTimeout(() => {
+        window.location.href = "/";
+      }, 800);
+    }
   };
 
   return (
     <div className="min-h-screen bg-gray-50">
+      {toast && (
+        <Toast
+          message={toast.message}
+          type={toast.type}
+          onClose={() => setToast(null)}
+          duration={1500}
+        />
+      )}
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 lg:py-10 space-y-6 sm:space-y-8 lg:space-y-10">
         {/* 프로필 카드 */}
         <motion.div

From fec72684aa95146f39fca38afc9c7a1b7057c374 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B2=9C=EC=84=B1=EC=9C=A4?= <1112csy@naver.com>
Date: Wed, 3 Sep 2025 22:00:59 +0900
Subject: [PATCH 2/7] =?UTF-8?q?=E2=9C=A8:=20=ED=97=A4=EB=8D=94=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EA=B8=B0?=
 =?UTF-8?q?=ED=9A=8C=201=EC=9C=BC=EB=A1=9C=20=EC=A0=9C=ED=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth/loginApi.ts         | 3 +++
 src/components/layout/Header.tsx | 6 ++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/api/auth/loginApi.ts b/src/api/auth/loginApi.ts
index 7686e89..001b6d3 100644
--- a/src/api/auth/loginApi.ts
+++ b/src/api/auth/loginApi.ts
@@ -68,6 +68,9 @@ export const login = async (
       ? responseData.access_token
       : `Bearer ${responseData.access_token}`;
 
+    // 헤더에서 첫 로그인만 토스트를 띄우기 위한 플래그
+    sessionStorage.setItem("just_logged_in", "1");
+
     return {
       token,
       user: responseData.user,
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 5ae666d..619f93f 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -48,13 +48,15 @@ const Header = () => {
       const token = localStorage.getItem("access_token");
 
       if (token) {
-        // 로그인 전환 토스트
-        if (!wasLoggedInRef.current) {
+        // 첫 로그인 플래그 확인
+        const justLoggedIn = sessionStorage.getItem("just_logged_in");
+        if (justLoggedIn) {
           setToast({
             show: true,
             message: "로그인되었습니다.",
             type: "success",
           });
+          sessionStorage.removeItem("just_logged_in");
         }
         wasLoggedInRef.current = true;
         setIsLoggedIn(true);

From d304084f76ff48d5a31c790106088467ee257035 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B2=9C=EC=84=B1=EC=9C=A4?= <1112csy@naver.com>
Date: Thu, 4 Sep 2025 03:05:15 +0900
Subject: [PATCH 3/7] =?UTF-8?q?=E2=9C=A8:=20=EA=B8=B0=EC=88=A0=EC=A0=81?=
 =?UTF-8?q?=EB=B6=84=EC=84=9D,=20=EC=9E=AC=EB=AC=B4=EB=B6=84=EC=84=9D=20ll?=
 =?UTF-8?q?m=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=84=9C=EB=B9=99=20api=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/stock/detail.ts                       |  21 ++++
 .../stockDetail/FinancialStatement.tsx        |   7 +-
 .../stockDetail/TechnicalAnalysis.tsx         | 103 +++++++++---------
 src/lib/axiosInstance.ts                      |   2 +-
 src/pages/stock/StockDetailPage.tsx           |  85 ++++++++++++---
 5 files changed, 147 insertions(+), 71 deletions(-)

diff --git a/src/api/stock/detail.ts b/src/api/stock/detail.ts
index 7eb88ba..ffe7b1b 100644
--- a/src/api/stock/detail.ts
+++ b/src/api/stock/detail.ts
@@ -40,3 +40,24 @@ export async function getStockChart(
   );
   return data;
 }
+
+// Total analysis (LLM) API
+export interface TotalAnalysisResponse {
+  main_analysis?: string;
+  volatility_analysis?: string;
+  volume_analysis?: string;
+  fin_total_analysis?: string;
+  company_analysis?: string;
+  total_analysis?: string;
+  combined_technical_analysis?: string;
+}
+
+export async function getTotalAnalysis(
+  stockCode: string
+): Promise<TotalAnalysisResponse> {
+  const { data } = await axiosInstance.get(
+    `/api/info/total_analysis/${encodeURIComponent(stockCode)}`,
+    { timeout: 60000 } // LLM 분석은 60초 타임아웃
+  );
+  return data;
+}
diff --git a/src/components/stockDetail/FinancialStatement.tsx b/src/components/stockDetail/FinancialStatement.tsx
index 5938328..e930314 100644
--- a/src/components/stockDetail/FinancialStatement.tsx
+++ b/src/components/stockDetail/FinancialStatement.tsx
@@ -33,7 +33,7 @@ export default function FinancialStatement({
 }: FinancialStatementProps) {
   const [hoveredIndicator, setHoveredIndicator] = useState<string | null>(null);
 
-  const company = analysis?.company_analysis;
+  const company = analysis?.company_data; // 재무 데이터
   const isAnalysisLoading = !company;
 
   // 간단 스켈레톤 텍스트
@@ -303,7 +303,10 @@ export default function FinancialStatement({
           </div>
         ) : (
           <p className="text-sm text-blue-700 leading-relaxed">
-            {safeText(company?.total_analysis)}
+            {safeText(
+              analysis?.company_analysis ??
+                "재무 분석 정보를 불러오고 있습니다."
+            )}
           </p>
         )}
       </div>
diff --git a/src/components/stockDetail/TechnicalAnalysis.tsx b/src/components/stockDetail/TechnicalAnalysis.tsx
index 1bcb525..736b924 100644
--- a/src/components/stockDetail/TechnicalAnalysis.tsx
+++ b/src/components/stockDetail/TechnicalAnalysis.tsx
@@ -68,26 +68,34 @@ export default function TechnicalAnalysis({
     return "text-blue-600";
   };
 
-  const main = analysis?.main_analysis;
-  const vola = analysis?.volatility_analysis;
-  const vol = analysis?.volume_analysis;
+  // API 응답이 문자열이므로 직접 사용
+  const mainAnalysisText = analysis?.main_analysis;
+  const volatilityAnalysisText = analysis?.volatility_analysis;
+  const volumeAnalysisText = analysis?.volume_analysis;
+  const combinedAnalysisText = analysis?.combined_technical_analysis;
+
+  // 기존 기술적 지표 데이터
+  const mainData = analysis?.main_analysis_data;
+  const volaData = analysis?.volatility_analysis_data;
+  const volData = analysis?.volume_analysis_data;
 
   const isAnalysisLoading = !analysis;
 
-  // 기술적 지표 값 (없으면 기본값)
-  const rsi = main?.rsi?.value ?? 28.4;
-  const dailyRange = vola?.volatility?.value?.volatility_percent ?? 2.8;
-  const avgVolatility = vola?.volatility?.value?.avg_volatility_percent ?? 2.8;
-  const currentVolume = toNum(vol?.volume?.value?.volume) || 15234567;
-  const avgVolume = toNum(vol?.volume?.value?.avg_volume_20) || 12456789;
+  // 기술적 지표 값 (실제 데이터 사용)
+  const rsi = mainData?.rsi?.value ?? 28.4;
+  const dailyRange = volaData?.volatility?.value?.volatility_percent ?? 2.8;
+  const avgVolatility =
+    volaData?.volatility?.value?.avg_volatility_percent ?? 2.8;
+  const currentVolume = toNum(volData?.volume?.value?.volume) || 15234567;
+  const avgVolume = toNum(volData?.volume?.value?.avg_volume_20) || 12456789;
   const volumeRatio = (
     ((currentVolume - avgVolume) / (avgVolume || 1)) *
     100
   ).toFixed(1);
   const mfiValue =
-    typeof vol?.mfi?.value === "number" ? vol.mfi.value : undefined;
-  const obvValue = toNum(vol?.obv?.value?.obv);
-  const obvMa20Value = toNum(vol?.obv?.value?.obv_ma20);
+    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 },
@@ -113,20 +121,21 @@ export default function TechnicalAnalysis({
                   </span>
                 </div>
                 <div
-                  className={`text-lg font-bold ${statusColor(main?.moving_average?.arrangement?.status)}`}
+                  className={`text-lg font-bold ${statusColor(mainData?.moving_average?.arrangement?.status)}`}
                 >
                   {isAnalysisLoading ? (
                     <SkeletonText widthClass="w-28" />
                   ) : (
-                    (main?.moving_average?.arrangement?.status ?? "정보 없음")
+                    (mainData?.moving_average?.arrangement?.status ??
+                    "정보 없음")
                   )}
                 </div>
                 {hoveredKey === "summary_ma" && (
                   <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>
-                      {main?.moving_average?.arrangement?.description ??
-                        main?.moving_average?.price_vs_ma20?.description ??
-                        ""}
+                      {mainData?.moving_average?.arrangement?.description ??
+                        mainData?.moving_average?.price_vs_ma20?.description ??
+                        "이동평균선 분석 정보"}
                     </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>
@@ -144,17 +153,19 @@ export default function TechnicalAnalysis({
                   </span>
                 </div>
                 <div
-                  className={`text-lg font-bold ${statusColor(main?.stochastic?.status)}`}
+                  className={`text-lg font-bold ${statusColor(mainData?.stochastic?.status)}`}
                 >
                   {isAnalysisLoading ? (
                     <SkeletonText widthClass="w-20" />
                   ) : (
-                    (main?.stochastic?.status ?? "정보 없음")
+                    (mainData?.stochastic?.status ?? "정보 없음")
                   )}
                 </div>
                 {hoveredKey === "summary_stoch" && (
                   <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>{main?.stochastic?.analysis ?? ""}</div>
+                    <div>
+                      {mainData?.stochastic?.analysis ?? "스토캐스틱 분석 정보"}
+                    </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>
                 )}
@@ -169,12 +180,12 @@ export default function TechnicalAnalysis({
                   <span className="text-sm font-medium text-gray-700">RSI</span>
                 </div>
                 <div
-                  className={`text-lg font-bold ${statusColor(main?.rsi?.status)}`}
+                  className={`text-lg font-bold ${statusColor(mainData?.rsi?.status)}`}
                 >
                   {isAnalysisLoading ? (
                     <SkeletonText widthClass="w-16" />
                   ) : (
-                    (main?.rsi?.status ?? "중립")
+                    (mainData?.rsi?.status ?? "중립")
                   )}
                 </div>
                 {hoveredKey === "summary_rsi" && (
@@ -196,17 +207,17 @@ export default function TechnicalAnalysis({
                   </span>
                 </div>
                 <div
-                  className={`text-lg font-bold ${statusColor(main?.rsi?.status)}`}
+                  className={`text-lg font-bold ${statusColor(mainData?.macd?.status)}`}
                 >
                   {isAnalysisLoading ? (
                     <SkeletonText widthClass="w-20" />
                   ) : (
-                    (main?.rsi?.status ?? "중립")
+                    (mainData?.macd?.status ?? "중립")
                   )}
                 </div>
                 {hoveredKey === "summary_total" && (
                   <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>{main?.macd?.analysis ?? ""}</div>
+                    <div>{mainData?.macd?.analysis ?? "종합 신호 분석"}</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>
                 )}
@@ -225,7 +236,7 @@ export default function TechnicalAnalysis({
                 </div>
               ) : (
                 <p className="text-sm text-blue-800 leading-relaxed">
-                  {main?.total_analysis ?? "분석 정보를 불러오고 있습니다."}
+                  {mainAnalysisText ?? "분석 정보를 불러오고 있습니다."}
                 </p>
               )}
             </div>
@@ -287,13 +298,7 @@ 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:{" "}
-                      {typeof vola?.rvi?.value?.rvi === "number"
-                        ? vola.rvi.value.rvi.toFixed(4)
-                        : "-"}{" "}
-                      | ATR: {vola?.atr?.value?.atr ?? "-"}
-                    </div>
+                    <div>RVI: - | ATR: -</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>
                 )}
@@ -311,17 +316,17 @@ export default function TechnicalAnalysis({
                   ATR
                 </div>
                 <div
-                  className={`text-base font-semibold ${statusColor(vola?.atr?.status)}`}
+                  className={`text-base font-semibold ${statusColor(volaData?.atr?.status)}`}
                 >
                   {isAnalysisLoading ? (
                     <SkeletonText widthClass="w-16" />
                   ) : (
-                    (vola?.atr?.status ?? "정보 없음")
+                    (volaData?.atr?.status ?? "정보 없음")
                   )}
                 </div>
                 {hoveredKey === "vol_atr" && (
                   <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>{vola?.atr?.analysis ?? ""}</div>
+                    <div>{volaData?.atr?.analysis ?? "ATR 분석 정보"}</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>
                 )}
@@ -336,17 +341,17 @@ export default function TechnicalAnalysis({
                   RVI
                 </div>
                 <div
-                  className={`text-base font-semibold ${statusColor(vola?.rvi?.status)}`}
+                  className={`text-base font-semibold ${statusColor(volaData?.rvi?.status)}`}
                 >
                   {isAnalysisLoading ? (
                     <SkeletonText widthClass="w-16" />
                   ) : (
-                    (vola?.rvi?.status ?? "정보 없음")
+                    (volaData?.rvi?.status ?? "정보 없음")
                   )}
                 </div>
                 {hoveredKey === "vol_rvi" && (
                   <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>{vola?.rvi?.analysis ?? ""}</div>
+                    <div>{volaData?.rvi?.analysis ?? "RVI 분석 정보"}</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>
                 )}
@@ -366,8 +371,7 @@ export default function TechnicalAnalysis({
                 </div>
               ) : (
                 <p className="text-sm text-blue-800 leading-relaxed">
-                  {vola?.total_analysis ??
-                    vola?.volatility?.analysis ??
+                  {volatilityAnalysisText ??
                     "변동성 분석 정보를 불러오고 있습니다."}
                 </p>
               )}
@@ -429,12 +433,12 @@ export default function TechnicalAnalysis({
                   MFI
                 </div>
                 <div
-                  className={`text-lg font-bold ${statusColor(vol?.mfi?.status)}`}
+                  className={`text-lg font-bold ${statusColor(volData?.mfi?.status)}`}
                 >
                   {isAnalysisLoading ? (
                     <SkeletonText widthClass="w-16" />
                   ) : (
-                    (vol?.mfi?.status ?? "정보 없음")
+                    (volData?.mfi?.status ?? "정보 없음")
                   )}
                 </div>
                 {hoveredKey === "vol_mfi_card" && (
@@ -444,7 +448,7 @@ export default function TechnicalAnalysis({
                         ? `값 ${mfiValue.toFixed(2)}`
                         : ""}
                     </div>
-                    <div>{vol?.mfi?.analysis ?? ""}</div>
+                    <div>{volData?.mfi?.analysis ?? "MFI 분석 정보"}</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>
                 )}
@@ -459,12 +463,12 @@ export default function TechnicalAnalysis({
                   OBV
                 </div>
                 <div
-                  className={`text-lg font-bold ${statusColor(vol?.obv?.status)}`}
+                  className={`text-lg font-bold ${statusColor(volData?.obv?.status)}`}
                 >
                   {isAnalysisLoading ? (
                     <SkeletonText widthClass="w-16" />
                   ) : (
-                    (vol?.obv?.status ?? "정보 없음")
+                    (volData?.obv?.status ?? "정보 없음")
                   )}
                 </div>
                 {hoveredKey === "vol_obv_card" && (
@@ -473,7 +477,7 @@ export default function TechnicalAnalysis({
                       {obvValue ? obvValue.toLocaleString() : "-"} / MA20{" "}
                       {obvMa20Value ? obvMa20Value.toLocaleString() : "-"}
                     </div>
-                    <div>{vol?.obv?.analysis ?? ""}</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>
                 )}
@@ -493,8 +497,7 @@ export default function TechnicalAnalysis({
                 </div>
               ) : (
                 <p className="text-sm text-blue-800 leading-relaxed">
-                  {vol?.total_analysis ??
-                    vol?.volume?.analysis ??
+                  {volumeAnalysisText ??
                     `평균 대비 ${volumeRatio}% 수준의 거래량입니다.`}
                 </p>
               )}
@@ -519,7 +522,7 @@ export default function TechnicalAnalysis({
                 </div>
               ) : (
                 <p className="text-sm text-green-800 leading-relaxed">
-                  {analysis?.fin_total_analysis ??
+                  {combinedAnalysisText ??
                     "종합 분석 정보를 불러오고 있습니다."}
                 </p>
               )}
diff --git a/src/lib/axiosInstance.ts b/src/lib/axiosInstance.ts
index b3d75d0..7151fc8 100644
--- a/src/lib/axiosInstance.ts
+++ b/src/lib/axiosInstance.ts
@@ -7,7 +7,7 @@ const baseURL = import.meta.env.DEV
 
 export const axiosInstance = axios.create({
   baseURL,
-  timeout: 15000,
+  timeout: 30000, // 30초로 증가
   headers: {
     "Content-Type": "application/json",
   },
diff --git a/src/pages/stock/StockDetailPage.tsx b/src/pages/stock/StockDetailPage.tsx
index 6e120c8..7ca8622 100644
--- a/src/pages/stock/StockDetailPage.tsx
+++ b/src/pages/stock/StockDetailPage.tsx
@@ -10,6 +10,7 @@ import {
   getStockInfoByCode,
   getCompanyInfoByCode,
   getStockChart,
+  getTotalAnalysis,
 } from "@/api/stock";
 import { getNewsByCompany } from "@/api/news";
 
@@ -185,24 +186,74 @@ export default function StockDetailPage() {
 
         if (!cancelled) setStock(mapped);
 
-        // 기술적/재무 데이터 매핑
-        if (!cancelled && companyInfo) {
-          // setTechSummary(companyInfo.main_analysis ?? null);
-          setCompanyAnalysis(companyInfo);
-          setFinancialData({
-            revenue:
-              (companyInfo.company_analysis?.["매출액"] ?? 0) * 1_000_000_000,
-            netIncome:
-              (companyInfo.company_analysis?.["순이익"] ?? 0) * 1_000_000_000,
-            debtRatio: companyInfo.company_analysis?.["부채비율"] ?? 0,
-            roe: companyInfo.company_analysis?.ROE ?? 0,
-            per: companyInfo.company_analysis?.PER ?? 0,
-            pbr: companyInfo.company_analysis?.PBR ?? 0,
-            dividendYield: 0,
-          });
+        // LLM 종합 분석 요청
+        try {
+          const totalAnalysis = await getTotalAnalysis(code);
+          console.log("Total Analysis Response:", totalAnalysis);
+
+          // 기술적/재무 데이터 매핑
+          if (!cancelled && companyInfo) {
+            const mergedAnalysis = {
+              ...totalAnalysis,
+              company_analysis: totalAnalysis.company_analysis, // API에서 받은 재무 분석 텍스트
+              company_data: companyInfo.company_analysis ?? companyInfo, // 기업 재무 데이터
+              main_analysis: totalAnalysis.main_analysis,
+              volume_analysis: totalAnalysis.volume_analysis,
+              volatility_analysis: totalAnalysis.volatility_analysis,
+              combined_technical_analysis:
+                totalAnalysis.combined_technical_analysis,
+              fin_total_analysis: totalAnalysis.fin_total_analysis,
+              // 기존 기술적 지표 데이터도 포함
+              main_analysis_data: companyInfo.main_analysis,
+              volatility_analysis_data: companyInfo.volatility_analysis,
+              volume_analysis_data: companyInfo.volume_analysis,
+            };
+            setCompanyAnalysis(mergedAnalysis);
+            setFinancialData({
+              revenue:
+                (companyInfo.company_analysis?.["매출액"] ?? 0) * 1_000_000_000,
+              netIncome:
+                (companyInfo.company_analysis?.["순이익"] ?? 0) * 1_000_000_000,
+              debtRatio: companyInfo.company_analysis?.["부채비율"] ?? 0,
+              roe: companyInfo.company_analysis?.ROE ?? 0,
+              per: companyInfo.company_analysis?.PER ?? 0,
+              pbr: companyInfo.company_analysis?.PBR ?? 0,
+              dividendYield: 0,
+            });
+          }
+        } catch (error) {
+          console.error("Total Analysis API Error:", error);
+          // API 실패 시에도 기본 분석 데이터 설정
+          if (!cancelled && companyInfo) {
+            const fallbackAnalysis = {
+              company_analysis: "재무 분석 정보를 불러오고 있습니다.",
+              company_data: companyInfo.company_analysis ?? companyInfo,
+              main_analysis: "분석 정보를 불러오고 있습니다.",
+              volume_analysis: "분석 정보를 불러오고 있습니다.",
+              volatility_analysis: "분석 정보를 불러오고 있습니다.",
+              combined_technical_analysis: "분석 정보를 불러오고 있습니다.",
+              fin_total_analysis: "분석 정보를 불러오고 있습니다.",
+              // 기존 기술적 지표 데이터도 포함
+              main_analysis_data: companyInfo.main_analysis,
+              volatility_analysis_data: companyInfo.volatility_analysis,
+              volume_analysis_data: companyInfo.volume_analysis,
+            };
+            setCompanyAnalysis(fallbackAnalysis);
+            setFinancialData({
+              revenue:
+                (companyInfo.company_analysis?.["매출액"] ?? 0) * 1_000_000_000,
+              netIncome:
+                (companyInfo.company_analysis?.["순이익"] ?? 0) * 1_000_000_000,
+              debtRatio: companyInfo.company_analysis?.["부채비율"] ?? 0,
+              roe: companyInfo.company_analysis?.ROE ?? 0,
+              per: companyInfo.company_analysis?.PER ?? 0,
+              pbr: companyInfo.company_analysis?.PBR ?? 0,
+              dividendYield: 0,
+            });
+          }
         }
 
-        // 차트 데이터 API 연동 (일봉 180개 기본)
+        // 차트, 뉴스
         const chartRes = await getStockChart(code, "D", 180);
         const chartData: HistoricalData[] = chartRes.candles.map((c) => ({
           date: c.date,
@@ -213,7 +264,6 @@ export default function StockDetailPage() {
           volume: c.volume,
         }));
 
-        // 기업 뉴스 API 연동
         const companyNews = await getNewsByCompany(code, 10);
         const mappedNews: NewsListItem[] = companyNews.map((n) => ({
           id: n.id,
@@ -237,7 +287,6 @@ export default function StockDetailPage() {
           setHistoricalData(chartData);
           setNews(mappedNews);
           setIsChartLoading(false);
-          // financialData는 company API에서 세팅됨 (실패 시에만 목데이터 유지)
           if (!financialData) setFinancialData(mockFinancialData);
         }
       } catch {

From acaeed092499d58b8361a3e05e612893257608ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B2=9C=EC=84=B1=EC=9C=A4?= <1112csy@naver.com>
Date: Thu, 4 Sep 2025 03:11:07 +0900
Subject: [PATCH 4/7] =?UTF-8?q?=E2=9C=A8:=20=EC=A3=BC=EC=8B=9D=EC=84=B8?=
 =?UTF-8?q?=EB=B6=80=20api=20=EB=A1=9C=EB=94=A9=20=EC=88=9C=EC=84=9C=20?=
 =?UTF-8?q?=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stockDetail/FinancialStatement.tsx        |   4 +-
 .../stockDetail/TechnicalAnalysis.tsx         |  28 +--
 src/pages/stock/StockDetailPage.tsx           | 178 ++++++++++--------
 3 files changed, 116 insertions(+), 94 deletions(-)

diff --git a/src/components/stockDetail/FinancialStatement.tsx b/src/components/stockDetail/FinancialStatement.tsx
index e930314..319c9f1 100644
--- a/src/components/stockDetail/FinancialStatement.tsx
+++ b/src/components/stockDetail/FinancialStatement.tsx
@@ -14,6 +14,7 @@ interface FinancialData {
 interface FinancialStatementProps {
   data: FinancialData;
   analysis?: any; // /info/company/{code} 응답 객체 (company_analysis 포함)
+  isAnalysisLoading?: boolean; // LLM 분석 로딩 상태
 }
 
 interface FinancialIndicator {
@@ -30,6 +31,7 @@ interface FinancialIndicator {
 export default function FinancialStatement({
   data,
   analysis,
+  isAnalysisLoading: _isAnalysisLoading = false,
 }: FinancialStatementProps) {
   const [hoveredIndicator, setHoveredIndicator] = useState<string | null>(null);
 
@@ -296,7 +298,7 @@ export default function FinancialStatement({
           <DollarSign className="w-5 h-5 text-blue-600 mr-2" />
           <h4 className="font-semibold text-blue-800">종합 해석</h4>
         </div>
-        {isAnalysisLoading ? (
+        {_isAnalysisLoading ? (
           <div className="space-y-2">
             <SkeletonText widthClass="w-10/12" />
             <SkeletonText widthClass="w-6/12" />
diff --git a/src/components/stockDetail/TechnicalAnalysis.tsx b/src/components/stockDetail/TechnicalAnalysis.tsx
index 736b924..2640924 100644
--- a/src/components/stockDetail/TechnicalAnalysis.tsx
+++ b/src/components/stockDetail/TechnicalAnalysis.tsx
@@ -34,6 +34,8 @@ interface TechnicalAnalysisProps {
   stock: StockDetail;
   historicalData: HistoricalData[];
   analysis?: any; // /info/company/{code} 응답 전체 또는 필요한 섹션 포함 객체
+  isAnalysisLoading?: boolean; // LLM 분석 로딩 상태
+  isTechnicalLoading?: boolean; // 기술적 분석 데이터 로딩 상태
 }
 
 type TabType = "summary" | "volatility" | "volume" | "overview";
@@ -42,6 +44,8 @@ export default function TechnicalAnalysis({
   stock: _stock,
   historicalData: _historicalData,
   analysis,
+  isAnalysisLoading: _isAnalysisLoading = false,
+  isTechnicalLoading: _isTechnicalLoading = true,
 }: TechnicalAnalysisProps) {
   const [activeTab, setActiveTab] = useState<TabType>("summary");
   const [hoveredKey, setHoveredKey] = useState<string | null>(null);
@@ -123,7 +127,7 @@ export default function TechnicalAnalysis({
                 <div
                   className={`text-lg font-bold ${statusColor(mainData?.moving_average?.arrangement?.status)}`}
                 >
-                  {isAnalysisLoading ? (
+                  {_isTechnicalLoading ? (
                     <SkeletonText widthClass="w-28" />
                   ) : (
                     (mainData?.moving_average?.arrangement?.status ??
@@ -155,7 +159,7 @@ export default function TechnicalAnalysis({
                 <div
                   className={`text-lg font-bold ${statusColor(mainData?.stochastic?.status)}`}
                 >
-                  {isAnalysisLoading ? (
+                  {_isTechnicalLoading ? (
                     <SkeletonText widthClass="w-20" />
                   ) : (
                     (mainData?.stochastic?.status ?? "정보 없음")
@@ -182,7 +186,7 @@ export default function TechnicalAnalysis({
                 <div
                   className={`text-lg font-bold ${statusColor(mainData?.rsi?.status)}`}
                 >
-                  {isAnalysisLoading ? (
+                  {_isTechnicalLoading ? (
                     <SkeletonText widthClass="w-16" />
                   ) : (
                     (mainData?.rsi?.status ?? "중립")
@@ -209,7 +213,7 @@ export default function TechnicalAnalysis({
                 <div
                   className={`text-lg font-bold ${statusColor(mainData?.macd?.status)}`}
                 >
-                  {isAnalysisLoading ? (
+                  {_isTechnicalLoading ? (
                     <SkeletonText widthClass="w-20" />
                   ) : (
                     (mainData?.macd?.status ?? "중립")
@@ -229,7 +233,7 @@ export default function TechnicalAnalysis({
                 <Activity className="w-4 h-4 text-blue-600 mr-2" />
                 <span className="font-medium text-blue-900">주요지표 분석</span>
               </div>
-              {isAnalysisLoading ? (
+              {_isAnalysisLoading ? (
                 <div className="space-y-2">
                   <SkeletonText widthClass="w-5/6" />
                   <SkeletonText widthClass="w-3/6" />
@@ -318,7 +322,7 @@ export default function TechnicalAnalysis({
                 <div
                   className={`text-base font-semibold ${statusColor(volaData?.atr?.status)}`}
                 >
-                  {isAnalysisLoading ? (
+                  {_isTechnicalLoading ? (
                     <SkeletonText widthClass="w-16" />
                   ) : (
                     (volaData?.atr?.status ?? "정보 없음")
@@ -343,7 +347,7 @@ export default function TechnicalAnalysis({
                 <div
                   className={`text-base font-semibold ${statusColor(volaData?.rvi?.status)}`}
                 >
-                  {isAnalysisLoading ? (
+                  {_isTechnicalLoading ? (
                     <SkeletonText widthClass="w-16" />
                   ) : (
                     (volaData?.rvi?.status ?? "정보 없음")
@@ -364,7 +368,7 @@ export default function TechnicalAnalysis({
                 <Activity className="w-4 h-4 text-blue-600 mr-2" />
                 <span className="font-medium text-blue-900">변동성 분석</span>
               </div>
-              {isAnalysisLoading ? (
+              {_isAnalysisLoading ? (
                 <div className="space-y-2">
                   <SkeletonText widthClass="w-5/6" />
                   <SkeletonText widthClass="w-4/6" />
@@ -435,7 +439,7 @@ export default function TechnicalAnalysis({
                 <div
                   className={`text-lg font-bold ${statusColor(volData?.mfi?.status)}`}
                 >
-                  {isAnalysisLoading ? (
+                  {_isTechnicalLoading ? (
                     <SkeletonText widthClass="w-16" />
                   ) : (
                     (volData?.mfi?.status ?? "정보 없음")
@@ -465,7 +469,7 @@ export default function TechnicalAnalysis({
                 <div
                   className={`text-lg font-bold ${statusColor(volData?.obv?.status)}`}
                 >
-                  {isAnalysisLoading ? (
+                  {_isTechnicalLoading ? (
                     <SkeletonText widthClass="w-16" />
                   ) : (
                     (volData?.obv?.status ?? "정보 없음")
@@ -490,7 +494,7 @@ export default function TechnicalAnalysis({
                 <div className="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
                 <span className="font-medium text-blue-900">거래량 분석</span>
               </div>
-              {isAnalysisLoading ? (
+              {_isAnalysisLoading ? (
                 <div className="space-y-2">
                   <SkeletonText widthClass="w-5/6" />
                   <SkeletonText widthClass="w-2/6" />
@@ -515,7 +519,7 @@ export default function TechnicalAnalysis({
                   기술적 분석 종합 해석
                 </span>
               </div>
-              {isAnalysisLoading ? (
+              {_isAnalysisLoading ? (
                 <div className="space-y-2">
                   <SkeletonText widthClass="w-5/6" />
                   <SkeletonText widthClass="w-4/6" />
diff --git a/src/pages/stock/StockDetailPage.tsx b/src/pages/stock/StockDetailPage.tsx
index 7ca8622..66fb2dc 100644
--- a/src/pages/stock/StockDetailPage.tsx
+++ b/src/pages/stock/StockDetailPage.tsx
@@ -89,6 +89,7 @@ export default function StockDetailPage() {
     null
   );
   const [companyAnalysis, setCompanyAnalysis] = useState<any | null>(null);
+  const [isAnalysisLoading, setIsAnalysisLoading] = useState(true);
   // const [techSummary, setTechSummary] = useState<any | null>(null);
 
   // 기술적 분석을 로딩 중에도 렌더링하기 위한 기본 스톡 값
@@ -106,7 +107,9 @@ export default function StockDetailPage() {
   };
 
   // 섹션별 로딩 상태
+  const [isHeaderLoading, setIsHeaderLoading] = useState(true);
   const [isChartLoading, setIsChartLoading] = useState(true);
+  const [isTechnicalLoading, setIsTechnicalLoading] = useState(true);
   const isNewsLoading = news.length === 0;
   const isFinancialLoading = financialData == null;
 
@@ -127,6 +130,9 @@ export default function StockDetailPage() {
     const run = async () => {
       try {
         if (!code) return;
+
+        // 1단계: Stock Header 데이터 로딩
+        console.log("1단계: Stock Header 로딩 시작");
         const [priceInfo, companyInfo] = await Promise.all([
           getStockInfoByCode(code),
           getCompanyInfoByCode(code),
@@ -184,76 +190,14 @@ export default function StockDetailPage() {
           prediction: { targetPrice: 0, confidence: 0, recommendation: "hold" },
         };
 
-        if (!cancelled) setStock(mapped);
-
-        // LLM 종합 분석 요청
-        try {
-          const totalAnalysis = await getTotalAnalysis(code);
-          console.log("Total Analysis Response:", totalAnalysis);
-
-          // 기술적/재무 데이터 매핑
-          if (!cancelled && companyInfo) {
-            const mergedAnalysis = {
-              ...totalAnalysis,
-              company_analysis: totalAnalysis.company_analysis, // API에서 받은 재무 분석 텍스트
-              company_data: companyInfo.company_analysis ?? companyInfo, // 기업 재무 데이터
-              main_analysis: totalAnalysis.main_analysis,
-              volume_analysis: totalAnalysis.volume_analysis,
-              volatility_analysis: totalAnalysis.volatility_analysis,
-              combined_technical_analysis:
-                totalAnalysis.combined_technical_analysis,
-              fin_total_analysis: totalAnalysis.fin_total_analysis,
-              // 기존 기술적 지표 데이터도 포함
-              main_analysis_data: companyInfo.main_analysis,
-              volatility_analysis_data: companyInfo.volatility_analysis,
-              volume_analysis_data: companyInfo.volume_analysis,
-            };
-            setCompanyAnalysis(mergedAnalysis);
-            setFinancialData({
-              revenue:
-                (companyInfo.company_analysis?.["매출액"] ?? 0) * 1_000_000_000,
-              netIncome:
-                (companyInfo.company_analysis?.["순이익"] ?? 0) * 1_000_000_000,
-              debtRatio: companyInfo.company_analysis?.["부채비율"] ?? 0,
-              roe: companyInfo.company_analysis?.ROE ?? 0,
-              per: companyInfo.company_analysis?.PER ?? 0,
-              pbr: companyInfo.company_analysis?.PBR ?? 0,
-              dividendYield: 0,
-            });
-          }
-        } catch (error) {
-          console.error("Total Analysis API Error:", error);
-          // API 실패 시에도 기본 분석 데이터 설정
-          if (!cancelled && companyInfo) {
-            const fallbackAnalysis = {
-              company_analysis: "재무 분석 정보를 불러오고 있습니다.",
-              company_data: companyInfo.company_analysis ?? companyInfo,
-              main_analysis: "분석 정보를 불러오고 있습니다.",
-              volume_analysis: "분석 정보를 불러오고 있습니다.",
-              volatility_analysis: "분석 정보를 불러오고 있습니다.",
-              combined_technical_analysis: "분석 정보를 불러오고 있습니다.",
-              fin_total_analysis: "분석 정보를 불러오고 있습니다.",
-              // 기존 기술적 지표 데이터도 포함
-              main_analysis_data: companyInfo.main_analysis,
-              volatility_analysis_data: companyInfo.volatility_analysis,
-              volume_analysis_data: companyInfo.volume_analysis,
-            };
-            setCompanyAnalysis(fallbackAnalysis);
-            setFinancialData({
-              revenue:
-                (companyInfo.company_analysis?.["매출액"] ?? 0) * 1_000_000_000,
-              netIncome:
-                (companyInfo.company_analysis?.["순이익"] ?? 0) * 1_000_000_000,
-              debtRatio: companyInfo.company_analysis?.["부채비율"] ?? 0,
-              roe: companyInfo.company_analysis?.ROE ?? 0,
-              per: companyInfo.company_analysis?.PER ?? 0,
-              pbr: companyInfo.company_analysis?.PBR ?? 0,
-              dividendYield: 0,
-            });
-          }
+        if (!cancelled) {
+          setStock(mapped);
+          setIsHeaderLoading(false);
+          console.log("1단계: Stock Header 로딩 완료");
         }
 
-        // 차트, 뉴스
+        // 2단계: 차트 데이터 로딩
+        console.log("2단계: 차트 데이터 로딩 시작");
         const chartRes = await getStockChart(code, "D", 180);
         const chartData: HistoricalData[] = chartRes.candles.map((c) => ({
           date: c.date,
@@ -264,6 +208,46 @@ export default function StockDetailPage() {
           volume: c.volume,
         }));
 
+        if (!cancelled) {
+          setHistoricalData(chartData);
+          setIsChartLoading(false);
+          console.log("2단계: 차트 데이터 로딩 완료");
+        }
+
+        // 3단계: 기술적 분석 데이터 로딩
+        console.log("3단계: 기술적 분석 데이터 로딩 시작");
+        if (!cancelled && companyInfo) {
+          const initialAnalysis = {
+            company_analysis: "재무 분석 정보를 불러오고 있습니다.",
+            company_data: companyInfo.company_analysis ?? companyInfo,
+            main_analysis: "분석 정보를 불러오고 있습니다.",
+            volume_analysis: "분석 정보를 불러오고 있습니다.",
+            volatility_analysis: "분석 정보를 불러오고 있습니다.",
+            combined_technical_analysis: "분석 정보를 불러오고 있습니다.",
+            fin_total_analysis: "분석 정보를 불러오고 있습니다.",
+            // 기존 기술적 지표 데이터도 포함
+            main_analysis_data: companyInfo.main_analysis,
+            volatility_analysis_data: companyInfo.volatility_analysis,
+            volume_analysis_data: companyInfo.volume_analysis,
+          };
+          setCompanyAnalysis(initialAnalysis);
+          setFinancialData({
+            revenue:
+              (companyInfo.company_analysis?.["매출액"] ?? 0) * 1_000_000_000,
+            netIncome:
+              (companyInfo.company_analysis?.["순이익"] ?? 0) * 1_000_000_000,
+            debtRatio: companyInfo.company_analysis?.["부채비율"] ?? 0,
+            roe: companyInfo.company_analysis?.ROE ?? 0,
+            per: companyInfo.company_analysis?.PER ?? 0,
+            pbr: companyInfo.company_analysis?.PBR ?? 0,
+            dividendYield: 0,
+          });
+          setIsTechnicalLoading(false);
+          console.log("3단계: 기술적 분석 데이터 로딩 완료");
+        }
+
+        // 4단계: 뉴스 데이터 로딩 (백그라운드)
+        console.log("4단계: 뉴스 데이터 로딩 시작");
         const companyNews = await getNewsByCompany(code, 10);
         const mappedNews: NewsListItem[] = companyNews.map((n) => ({
           id: n.id,
@@ -273,22 +257,49 @@ export default function StockDetailPage() {
           sentiment: (n.impact as any) ?? "neutral",
         }));
 
-        const mockFinancialData: FinancialData = {
-          revenue: 279600000000000,
-          netIncome: 15400000000000,
-          debtRatio: 23.4,
-          roe: 15.8,
-          per: 12.3,
-          pbr: 1.2,
-          dividendYield: 2.1,
-        };
-
         if (!cancelled) {
-          setHistoricalData(chartData);
           setNews(mappedNews);
-          setIsChartLoading(false);
-          if (!financialData) setFinancialData(mockFinancialData);
+          console.log("4단계: 뉴스 데이터 로딩 완료");
         }
+
+        // 5단계: LLM 종합 분석 요청 (비동기로 별도 처리)
+        const loadAnalysis = async () => {
+          try {
+            console.log("5단계: LLM 분석 로딩 시작");
+            const totalAnalysis = await getTotalAnalysis(code);
+            console.log("Total Analysis Response:", totalAnalysis);
+
+            if (!cancelled && companyInfo) {
+              const mergedAnalysis = {
+                ...totalAnalysis,
+                company_analysis: totalAnalysis.company_analysis, // API에서 받은 재무 분석 텍스트
+                company_data: companyInfo.company_analysis ?? companyInfo, // 기업 재무 데이터
+                main_analysis: totalAnalysis.main_analysis,
+                volume_analysis: totalAnalysis.volume_analysis,
+                volatility_analysis: totalAnalysis.volatility_analysis,
+                combined_technical_analysis:
+                  totalAnalysis.combined_technical_analysis,
+                fin_total_analysis: totalAnalysis.fin_total_analysis,
+                // 기존 기술적 지표 데이터도 포함
+                main_analysis_data: companyInfo.main_analysis,
+                volatility_analysis_data: companyInfo.volatility_analysis,
+                volume_analysis_data: companyInfo.volume_analysis,
+              };
+              setCompanyAnalysis(mergedAnalysis);
+              console.log("5단계: LLM 분석 로딩 완료");
+            }
+          } catch (error) {
+            console.error("Total Analysis API Error:", error);
+            // API 실패 시에도 기본 분석 데이터는 유지
+          } finally {
+            if (!cancelled) {
+              setIsAnalysisLoading(false);
+            }
+          }
+        };
+
+        // LLM 분석을 별도로 실행
+        loadAnalysis();
       } catch {
         // 실패 시에도 목데이터로 모든 섹션 채워서 UI가 비지 않도록 처리
         if (!cancelled) {
@@ -309,6 +320,7 @@ export default function StockDetailPage() {
             },
           } as StockDetail;
           setStock(fallback);
+          setIsHeaderLoading(false);
 
           const mockHistoricalData: HistoricalData[] = Array.from(
             { length: 30 },
@@ -356,6 +368,7 @@ export default function StockDetailPage() {
             dividendYield: 2.1,
           };
           setFinancialData(mockFinancialData);
+          setIsTechnicalLoading(false);
         }
       }
     };
@@ -409,6 +422,8 @@ export default function StockDetailPage() {
               stock={stock ?? placeholderStock}
               historicalData={historicalData}
               analysis={companyAnalysis}
+              isAnalysisLoading={isAnalysisLoading}
+              isTechnicalLoading={isTechnicalLoading}
             />
           </div>
         </div>
@@ -474,6 +489,7 @@ export default function StockDetailPage() {
               <FinancialStatement
                 data={financialData}
                 analysis={companyAnalysis}
+                isAnalysisLoading={isAnalysisLoading}
               />
             )}
           </div>

From 7e56e5c7532756b2f280f8d7b024585d5c83377c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B2=9C=EC=84=B1=EC=9C=A4?= <1112csy@naver.com>
Date: Thu, 4 Sep 2025 13:48:28 +0900
Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=8E=A8:=20=20=EC=B0=A8=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B0=84=20=ED=95=84=ED=84=B0=EB=A7=81=20=EB=B3=80=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/stock/detail.ts                       |   3 +-
 .../stockDetail/chart/PriceVolumeChart.tsx    | 143 +++++++++++++-----
 .../stockDetail/chart/StockChartHeader.tsx    |  59 +++++---
 src/components/stockDetail/chart/index.tsx    |  86 ++++++++---
 src/pages/stock/StockDetailPage.tsx           |  47 +++---
 5 files changed, 235 insertions(+), 103 deletions(-)

diff --git a/src/api/stock/detail.ts b/src/api/stock/detail.ts
index ffe7b1b..4115980 100644
--- a/src/api/stock/detail.ts
+++ b/src/api/stock/detail.ts
@@ -56,8 +56,7 @@ export async function getTotalAnalysis(
   stockCode: string
 ): Promise<TotalAnalysisResponse> {
   const { data } = await axiosInstance.get(
-    `/api/info/total_analysis/${encodeURIComponent(stockCode)}`,
-    { timeout: 60000 } // LLM 분석은 60초 타임아웃
+    `/api/info/total_analysis/${encodeURIComponent(stockCode)}`
   );
   return data;
 }
diff --git a/src/components/stockDetail/chart/PriceVolumeChart.tsx b/src/components/stockDetail/chart/PriceVolumeChart.tsx
index dea63a2..1e3c1ca 100644
--- a/src/components/stockDetail/chart/PriceVolumeChart.tsx
+++ b/src/components/stockDetail/chart/PriceVolumeChart.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, memo } from "react";
 import Highcharts from "highcharts/highstock";
 import HighchartsReact from "highcharts-react-official";
 import { TimeRangePT } from ".";
@@ -12,38 +12,40 @@ export interface PriceVolumeChartProps {
   showMA: Record<"ma5" | "ma20" | "ma60" | "ma120", boolean>;
 }
 
-export default function PriceVolumeChart({
+const PriceVolumeChart = memo(function PriceVolumeChart({
   data,
   timeRange,
   showMA,
 }: PriceVolumeChartProps) {
-  // 초기부터 렌더링하여 차트가 안 보이는 문제 방지
-  const [ready, setReady] = useState(true);
+  // TradingView 차트 우선 사용
+  const [ready, setReady] = useState(false);
   const tvContainerRef = useRef<HTMLDivElement | null>(null);
   const [tvReady, setTvReady] = useState(false);
+  const [tvFailed, setTvFailed] = useState(false);
 
-  // Annotations 모듈 안전 로딩 (환경별 export 방식 대응)
+  // TradingView 실패 시에만 Highcharts 모듈 로딩
   useEffect(() => {
-    (async () => {
-      try {
-        const mod: any = await import("highcharts/modules/annotations");
-        const initFn =
-          typeof mod === "function"
-            ? mod
-            : typeof mod?.default === "function"
-              ? mod.default
-              : null;
-        if (initFn) {
-          initFn(Highcharts);
+    if (tvFailed) {
+      (async () => {
+        try {
+          const mod: any = await import("highcharts/modules/annotations");
+          const initFn =
+            typeof mod === "function"
+              ? mod
+              : typeof mod?.default === "function"
+                ? mod.default
+                : null;
+          if (initFn) {
+            initFn(Highcharts);
+          }
+        } catch (_) {
+          // 실패해도 치명적이지 않음
+        } finally {
+          setReady(true);
         }
-      } catch (_) {
-        // 실패해도 치명적이지 않음
-      } finally {
-        // 모듈 로딩 실패/성공과 무관하게 이미 렌더링 중
-        setReady(true);
-      }
-    })();
-  }, []);
+      })();
+    }
+  }, [tvFailed]);
 
   // TradingView Lightweight Charts 렌더링 (가능하면 우선 사용)
   useEffect(() => {
@@ -55,6 +57,14 @@ export default function PriceVolumeChart({
     let ma60Series: any | null = null;
     let ma120Series: any | null = null;
 
+    // TradingView 로딩 타임아웃 (3초)
+    const timeoutId = setTimeout(() => {
+      if (!tvReady && !tvFailed) {
+        console.log("TradingView 차트 로딩 타임아웃, Highcharts로 폴백");
+        setTvFailed(true);
+      }
+    }, 3000);
+
     (async () => {
       if (!tvContainerRef.current) return;
       try {
@@ -161,19 +171,25 @@ export default function PriceVolumeChart({
 
         chart.timeScale().fitContent();
         setTvReady(true);
-      } catch {
+        setTvFailed(false);
+        clearTimeout(timeoutId); // 성공 시 타임아웃 클리어
+      } catch (error) {
+        console.error("TradingView 차트 로딩 실패:", error);
         setTvReady(false);
+        setTvFailed(true);
+        clearTimeout(timeoutId); // 실패 시 타임아웃 클리어
       }
     })();
 
     return () => {
+      clearTimeout(timeoutId); // 컴포넌트 언마운트 시 타임아웃 클리어
       if (chart && tvContainerRef.current) {
         try {
           chart.remove?.();
         } catch {}
       }
     };
-  }, [data, showMA]);
+  }, [data, showMA, tvReady, tvFailed]);
 
   //  timeRange 에 따른 데이터 필터링 및 Point 생성
   const {
@@ -274,28 +290,36 @@ export default function PriceVolumeChart({
     };
   }, [data, timeRange]);
 
-  // 3) 차트 옵션
+  // 3) 차트 옵션 (최적화)
   const options: Highcharts.Options = useMemo(() => {
     return {
       chart: {
         zoomType: "x",
         backgroundColor: "#ffffff",
         height: 500,
+        animation: {
+          duration: 500, // 부드러운 전환을 위한 애니메이션
+          easing: "easeInOutCubic",
+        },
+        reflow: false, // 리플로우 비활성화
       },
       accessibility: { enabled: false },
       title: { text: "" },
       xAxis: {
         type: "datetime",
-        crosshair: true,
+        crosshair: false, // 크로스헤어 비활성화로 성능 향상
         gridLineWidth: 1,
         gridLineColor: "#f1f5f9",
+        labels: {
+          step: Math.max(1, Math.floor(ohlcData.length / 10)), // 라벨 수 줄이기
+        },
       },
       yAxis: [
         {
           title: { text: "" },
           height: "65%",
           lineWidth: 2,
-          crosshair: true,
+          crosshair: false, // 크로스헤어 비활성화
           opposite: true,
           gridLineColor: "#eef2f7",
           labels: { style: { color: "#475569" } },
@@ -314,6 +338,7 @@ export default function PriceVolumeChart({
       tooltip: {
         shared: false,
         split: true,
+        animation: false, // 툴팁 애니메이션 비활성화
       },
       series: [
         {
@@ -328,6 +353,11 @@ export default function PriceVolumeChart({
           upLineColor: "#16a34a",
           pointPadding: 0,
           dataGrouping: { enabled: false },
+          animation: {
+            duration: 500,
+            easing: "easeInOutCubic",
+          }, // 시리즈 애니메이션 활성화
+          enableMouseTracking: true,
         },
         {
           type: "column",
@@ -393,18 +423,49 @@ export default function PriceVolumeChart({
     lastClose,
   ]);
 
-  if (!ready) {
-    return <div className="h-[500px] bg-gray-100 rounded" />;
+  // TradingView 차트 우선 렌더링
+  if (tvReady) {
+    return (
+      <div
+        ref={tvContainerRef}
+        className="h-[500px] w-full transition-all duration-300 ease-in-out"
+        style={{ opacity: 1 }}
+      />
+    );
   }
 
-  return tvReady ? (
-    <div ref={tvContainerRef} className="h-[500px] w-full" />
-  ) : (
-    <HighchartsReact
-      key={`${timeRange}-${ohlcData.length}`}
-      highcharts={Highcharts}
-      constructorType="stockChart"
-      options={options}
-    />
+  // TradingView 실패 시 Highcharts 사용
+  if (tvFailed && ready) {
+    return (
+      <div className="transition-all duration-300 ease-in-out">
+        <HighchartsReact
+          key={`${timeRange}-${ohlcData.length}`}
+          highcharts={Highcharts}
+          constructorType="stockChart"
+          options={options}
+        />
+      </div>
+    );
+  }
+
+  // TradingView 로딩 중이지만 데이터가 있으면 Highcharts로 폴백
+  if (data.length > 0 && !tvReady && !tvFailed) {
+    return (
+      <div className="transition-all duration-300 ease-in-out">
+        <HighchartsReact
+          key={`${timeRange}-${ohlcData.length}`}
+          highcharts={Highcharts}
+          constructorType="stockChart"
+          options={options}
+        />
+      </div>
+    );
+  }
+
+  // 로딩 중
+  return (
+    <div className="h-[500px] bg-gray-100 rounded animate-pulse transition-all duration-300 ease-in-out" />
   );
-}
+});
+
+export default PriceVolumeChart;
diff --git a/src/components/stockDetail/chart/StockChartHeader.tsx b/src/components/stockDetail/chart/StockChartHeader.tsx
index 7ddcfdb..9838448 100644
--- a/src/components/stockDetail/chart/StockChartHeader.tsx
+++ b/src/components/stockDetail/chart/StockChartHeader.tsx
@@ -1,13 +1,18 @@
-import { dayTable, miniteTable } from '@/config/chart';
-import { TimeRangePT } from '.';
+import { dayTable, miniteTable } from "@/config/chart";
+import { TimeRangePT } from ".";
 
 interface StockChartHeader {
   timeRange: TimeRangePT;
   onTimeRangeChange: (r: TimeRangePT) => void;
-  showMA: Record<'ma5' | 'ma20' | 'ma60' | 'ma120', boolean>;
-  onToggleMA: (maType: 'ma5' | 'ma20' | 'ma60' | 'ma120') => void;
+  showMA: Record<"ma5" | "ma20" | "ma60" | "ma120", boolean>;
+  onToggleMA: (maType: "ma5" | "ma20" | "ma60" | "ma120") => void;
 }
-export default function StockChartHeader({ showMA, timeRange, onTimeRangeChange, onToggleMA }: StockChartHeader) {
+export default function StockChartHeader({
+  showMA,
+  timeRange,
+  onTimeRangeChange,
+  onToggleMA,
+}: StockChartHeader) {
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
@@ -17,33 +22,41 @@ export default function StockChartHeader({ showMA, timeRange, onTimeRangeChange,
           {/* 이동평균선 토글 버튼들 */}
           <div className="flex gap-2">
             <button
-              onClick={() => onToggleMA('ma5')}
-              className={`px-2 py-1 rounded text-xs transition-colors ${
-                showMA.ma5 ? 'bg-purple-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              onClick={() => onToggleMA("ma5")}
+              className={`px-2 py-1 rounded text-xs transition-all duration-200 ease-in-out transform hover:scale-105 ${
+                showMA.ma5
+                  ? "bg-purple-500 text-white shadow-md"
+                  : "bg-gray-100 text-gray-700 hover:bg-gray-200"
               }`}
             >
               MA5
             </button>
             <button
-              onClick={() => onToggleMA('ma20')}
-              className={`px-2 py-1 rounded text-xs transition-colors ${
-                showMA.ma20 ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              onClick={() => onToggleMA("ma20")}
+              className={`px-2 py-1 rounded text-xs transition-all duration-200 ease-in-out transform hover:scale-105 ${
+                showMA.ma20
+                  ? "bg-green-500 text-white shadow-md"
+                  : "bg-gray-100 text-gray-700 hover:bg-gray-200"
               }`}
             >
               MA20
             </button>
             <button
-              onClick={() => onToggleMA('ma60')}
-              className={`px-2 py-1 rounded text-xs transition-colors ${
-                showMA.ma60 ? 'bg-orange-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              onClick={() => onToggleMA("ma60")}
+              className={`px-2 py-1 rounded text-xs transition-all duration-200 ease-in-out transform hover:scale-105 ${
+                showMA.ma60
+                  ? "bg-orange-500 text-white shadow-md"
+                  : "bg-gray-100 text-gray-700 hover:bg-gray-200"
               }`}
             >
               MA60
             </button>
             <button
-              onClick={() => onToggleMA('ma120')}
-              className={`px-2 py-1 rounded text-xs transition-colors ${
-                showMA.ma120 ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              onClick={() => onToggleMA("ma120")}
+              className={`px-2 py-1 rounded text-xs transition-all duration-200 ease-in-out transform hover:scale-105 ${
+                showMA.ma120
+                  ? "bg-blue-500 text-white shadow-md"
+                  : "bg-gray-100 text-gray-700 hover:bg-gray-200"
               }`}
             >
               MA120
@@ -59,8 +72,10 @@ export default function StockChartHeader({ showMA, timeRange, onTimeRangeChange,
             <button
               key={key}
               onClick={() => onTimeRangeChange(key as any)}
-              className={`px-2 py-1 rounded text-xs transition-colors ${
-                timeRange === key ? 'bg-[#0A5C2B] text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              className={`px-2 py-1 rounded text-xs transition-all duration-200 ease-in-out transform hover:scale-105 ${
+                timeRange === key
+                  ? "bg-[#0A5C2B] text-white shadow-md"
+                  : "bg-gray-100 text-gray-700 hover:bg-gray-200"
               }`}
             >
               {label}
@@ -74,8 +89,10 @@ export default function StockChartHeader({ showMA, timeRange, onTimeRangeChange,
             <button
               key={key}
               onClick={() => onTimeRangeChange(key)}
-              className={`px-2 py-1 rounded text-xs transition-colors ${
-                timeRange === key ? 'bg-[#0A5C2B] text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              className={`px-2 py-1 rounded text-xs transition-all duration-200 ease-in-out transform hover:scale-105 ${
+                timeRange === key
+                  ? "bg-[#0A5C2B] text-white shadow-md"
+                  : "bg-gray-100 text-gray-700 hover:bg-gray-200"
               }`}
             >
               {label}
diff --git a/src/components/stockDetail/chart/index.tsx b/src/components/stockDetail/chart/index.tsx
index b7ae327..943bb3e 100644
--- a/src/components/stockDetail/chart/index.tsx
+++ b/src/components/stockDetail/chart/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, memo, useCallback } from "react";
 import PriceVolumeChart from "./PriceVolumeChart";
 import StockChartHeader from "./StockChartHeader";
 import type { HistoricalData } from "@/config/chart";
@@ -20,7 +20,7 @@ export type TimeRangePT =
   | "1mo"
   | "1y";
 
-export default function StockChartPrice({
+const StockChartPrice = memo(function StockChartPrice({
   code,
   data = [],
   isLoading = false,
@@ -33,34 +33,57 @@ export default function StockChartPrice({
     ma120: false,
   });
   const [remoteData, setRemoteData] = useState<HistoricalData[]>(data);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false); // 초기에는 로딩하지 않음
+  const [isTransitioning, setIsTransitioning] = useState(false); // 전환 애니메이션 상태
 
-  const handleToggleMA = (key: keyof typeof showMA) => {
+  const handleToggleMA = useCallback((key: keyof typeof showMA) => {
     setShowMA((prev) => ({ ...prev, [key]: !prev[key] }));
-  };
+  }, []);
 
-  // timeRange -> API period/count 매핑
+  // timeRange -> API period/count 매핑 (최적화: 데이터 양 줄임)
   const { period, count } = useMemo(() => {
     switch (timeRange) {
       case "1w":
-        return { period: "W" as const, count: 500 }; // 최대 범위
+        return { period: "W" as const, count: 50 }; // 50주로 줄임
       case "1mo":
-        return { period: "M" as const, count: 500 }; // 최대 범위
+        return { period: "M" as const, count: 24 }; // 24개월로 줄임
       case "1y":
-        return { period: "M" as const, count: 500 }; // 최대 범위
+        return { period: "M" as const, count: 24 }; // 24개월로 줄임
       default:
-        return { period: "D" as const, count: 500 }; // 최대 범위
+        return { period: "D" as const, count: 30 }; // 30일로 줄임
     }
   }, [timeRange]);
 
-  // API 연동: 코드/기간 변경 시 fetch
+  // 부모에서 받은 데이터를 우선 사용하고, 시간대 변경 시에만 추가 API 호출
   useEffect(() => {
+    // 부모에서 받은 초기 데이터 설정
+    if (data.length > 0) {
+      setRemoteData(data);
+      setLoading(false);
+    }
+  }, [data]);
+
+  // 시간대 변경 시에만 추가 API 호출
+  useEffect(() => {
+    if (timeRange === "1d") {
+      // 기본 일봉은 부모 데이터 사용하고 로딩 완료
+      setLoading(false);
+      setIsTransitioning(false);
+      return;
+    }
+
     let cancelled = false;
     (async () => {
       try {
         setLoading(true);
+        setIsTransitioning(true);
+
+        // 부드러운 전환을 위한 약간의 지연
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
         const res = await getStockChart(code, period, count);
         if (cancelled) return;
+
         const mapped: HistoricalData[] = res.candles.map((c) => ({
           date: c.date,
           open: c.open,
@@ -69,20 +92,27 @@ export default function StockChartPrice({
           close: c.close,
           volume: c.volume,
         }));
+
         setRemoteData(mapped);
+
+        // 데이터 설정 후 약간의 지연으로 부드러운 전환
+        await new Promise((resolve) => setTimeout(resolve, 200));
       } catch {
         if (!cancelled) {
           // API 실패 시 기본 데이터 사용
           setRemoteData(data.length > 0 ? data : []);
         }
       } finally {
-        if (!cancelled) setLoading(false);
+        if (!cancelled) {
+          setLoading(false);
+          setIsTransitioning(false);
+        }
       }
     })();
     return () => {
       cancelled = true;
     };
-  }, [code, period, count, data]);
+  }, [code, period, count, timeRange, data]); // data 의존성 다시 추가
 
   return (
     <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 h-[650px] flex flex-col">
@@ -92,17 +122,33 @@ export default function StockChartPrice({
         showMA={showMA}
         onToggleMA={handleToggleMA}
       />
-      <div className="flex-1">
+      <div className="flex-1 relative">
         {isLoading || loading ? (
           <div className="h-[500px] bg-gray-100 rounded animate-pulse" />
         ) : (
-          <PriceVolumeChart
-            data={remoteData}
-            timeRange={timeRange}
-            showMA={showMA}
-          />
+          <div
+            className={`transition-opacity duration-300 ${isTransitioning ? "opacity-50" : "opacity-100"}`}
+          >
+            <PriceVolumeChart
+              data={remoteData}
+              timeRange={timeRange}
+              showMA={showMA}
+            />
+          </div>
+        )}
+
+        {/* 전환 중 오버레이 */}
+        {isTransitioning && (
+          <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-75 rounded">
+            <div className="flex items-center space-x-2 text-gray-600">
+              <div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+              <span className="text-sm">차트 업데이트 중...</span>
+            </div>
+          </div>
         )}
       </div>
     </div>
   );
-}
+});
+
+export default StockChartPrice;
diff --git a/src/pages/stock/StockDetailPage.tsx b/src/pages/stock/StockDetailPage.tsx
index 66fb2dc..7fd34bb 100644
--- a/src/pages/stock/StockDetailPage.tsx
+++ b/src/pages/stock/StockDetailPage.tsx
@@ -131,11 +131,12 @@ export default function StockDetailPage() {
       try {
         if (!code) return;
 
-        // 1단계: Stock Header 데이터 로딩
+        // 1단계: Stock Header 데이터 로딩 (병렬 처리)
         console.log("1단계: Stock Header 로딩 시작");
-        const [priceInfo, companyInfo] = await Promise.all([
+        const [priceInfo, companyInfo, chartRes] = await Promise.all([
           getStockInfoByCode(code),
           getCompanyInfoByCode(code),
+          getStockChart(code, "D", 7), // 차트도 병렬로 로딩 (7일로 더 줄임)
         ]);
 
         const mapped: StockDetail = {
@@ -196,9 +197,8 @@ export default function StockDetailPage() {
           console.log("1단계: Stock Header 로딩 완료");
         }
 
-        // 2단계: 차트 데이터 로딩
-        console.log("2단계: 차트 데이터 로딩 시작");
-        const chartRes = await getStockChart(code, "D", 180);
+        // 2단계: 차트 데이터 처리 (이미 병렬로 로딩됨)
+        console.log("2단계: 차트 데이터 처리 시작");
         const chartData: HistoricalData[] = chartRes.candles.map((c) => ({
           date: c.date,
           open: c.open,
@@ -211,7 +211,7 @@ export default function StockDetailPage() {
         if (!cancelled) {
           setHistoricalData(chartData);
           setIsChartLoading(false);
-          console.log("2단계: 차트 데이터 로딩 완료");
+          console.log("2단계: 차트 데이터 처리 완료");
         }
 
         // 3단계: 기술적 분석 데이터 로딩
@@ -246,21 +246,30 @@ export default function StockDetailPage() {
           console.log("3단계: 기술적 분석 데이터 로딩 완료");
         }
 
-        // 4단계: 뉴스 데이터 로딩 (백그라운드)
+        // 4단계: 뉴스 데이터 로딩 (백그라운드, 병렬 처리)
         console.log("4단계: 뉴스 데이터 로딩 시작");
-        const companyNews = await getNewsByCompany(code, 10);
-        const mappedNews: NewsListItem[] = companyNews.map((n) => ({
-          id: n.id,
-          title: n.title,
-          source: n.press,
-          date: n.published_at,
-          sentiment: (n.impact as any) ?? "neutral",
-        }));
+        const loadNews = async () => {
+          try {
+            const companyNews = await getNewsByCompany(code, 10);
+            const mappedNews: NewsListItem[] = companyNews.map((n) => ({
+              id: n.id,
+              title: n.title,
+              source: n.press,
+              date: n.published_at,
+              sentiment: (n.impact as any) ?? "neutral",
+            }));
 
-        if (!cancelled) {
-          setNews(mappedNews);
-          console.log("4단계: 뉴스 데이터 로딩 완료");
-        }
+            if (!cancelled) {
+              setNews(mappedNews);
+              console.log("4단계: 뉴스 데이터 로딩 완료");
+            }
+          } catch (error) {
+            console.error("뉴스 데이터 로딩 실패:", error);
+          }
+        };
+
+        // 뉴스를 백그라운드에서 로딩
+        loadNews();
 
         // 5단계: LLM 종합 분석 요청 (비동기로 별도 처리)
         const loadAnalysis = async () => {

From 1e11ebc8b0d692a03ce0d02e15a40d2984a397c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B2=9C=EC=84=B1=EC=9C=A4?= <1112csy@naver.com>
Date: Thu, 4 Sep 2025 14:01:22 +0900
Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=8E=A8:=20=20=EC=86=8C=EA=B0=9C?=
 =?UTF-8?q?=ED=8C=A8=EC=97=90=EC=A7=80=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/introPage.tsx | 231 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 231 insertions(+)

diff --git a/src/pages/introPage.tsx b/src/pages/introPage.tsx
index 5f2e752..40a46c3 100644
--- a/src/pages/introPage.tsx
+++ b/src/pages/introPage.tsx
@@ -132,6 +132,237 @@ export default function Intro() {
         </div>
       </div>
 
+      {/* A/B 테스트 결과 섹션 */}
+      <div className="bg-gradient-to-br from-[#0A5C2B]/10 to-[#0A5C2B]/5 min-h-screen flex items-center relative snap-start">
+        <div className="container mx-auto px-4 py-8 md:py-16">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-12"
+          >
+            <motion.h2
+              initial={{ opacity: 0, y: 20 }}
+              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"
+            >
+              📊 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"
+            >
+              <div className="bg-white rounded-xl p-6 shadow-lg">
+                <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">
+                    GPT-4o
+                  </div>
+                  <div className="text-sm text-gray-600">기본 모델</div>
+                </div>
+              </div>
+              <div className="bg-white rounded-xl p-6 shadow-lg border-2 border-[#0A5C2B]">
+                <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">
+                    Chain of Thought + RAG
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="max-w-6xl mx-auto"
+          >
+            {/* 종합 분석 평가 */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              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"
+            >
+              <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>
+              <div className="mt-6 text-center">
+                <div className="text-2xl font-bold text-green-600 mb-2">
+                  +31.79%
+                </div>
+                <div className="text-sm text-gray-600">성능 향상률</div>
+                <div className="text-xs text-gray-500 mt-2">
+                  P-value: 0.0000 (p &lt; 0.0001)
+                </div>
+              </div>
+            </motion.div>
+
+            {/* 개별 항목 평가 */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {/* 분석의 깊이 */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.8, delay: 0.2 }}
+                className="bg-white rounded-xl p-6 shadow-lg"
+              >
+                <h4 className="text-lg font-bold text-[#0A5C2B] mb-4 text-center">
+                  🔍 분석의 깊이
+                </h4>
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-gray-600">CoT/RAG</span>
+                    <span className="font-bold text-[#0A5C2B]">7.53</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-gray-600">Baseline</span>
+                    <span className="font-bold text-gray-500">5.28</span>
+                  </div>
+                  <div className="pt-2 border-t">
+                    <div className="text-center">
+                      <div className="text-lg font-bold text-green-600">
+                        +42.61%
+                      </div>
+                      <div className="text-xs text-gray-500">향상률</div>
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+
+              {/* 논리적 근거 */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.8, delay: 0.3 }}
+                className="bg-white rounded-xl p-6 shadow-lg"
+              >
+                <h4 className="text-lg font-bold text-[#0A5C2B] mb-4 text-center">
+                  🧠 논리적 근거
+                </h4>
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-gray-600">CoT/RAG</span>
+                    <span className="font-bold text-[#0A5C2B]">6.61</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-gray-600">Baseline</span>
+                    <span className="font-bold text-gray-500">5.59</span>
+                  </div>
+                  <div className="pt-2 border-t">
+                    <div className="text-center">
+                      <div className="text-lg font-bold text-green-600">
+                        +18.25%
+                      </div>
+                      <div className="text-xs text-gray-500">향상률</div>
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+
+              {/* 통찰력 */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.8, delay: 0.4 }}
+                className="bg-white rounded-xl p-6 shadow-lg"
+              >
+                <h4 className="text-lg font-bold text-[#0A5C2B] mb-4 text-center">
+                  💡 통찰력
+                </h4>
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-gray-600">CoT/RAG</span>
+                    <span className="font-bold text-[#0A5C2B]">6.63</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-gray-600">Baseline</span>
+                    <span className="font-bold text-gray-500">4.89</span>
+                  </div>
+                  <div className="pt-2 border-t">
+                    <div className="text-center">
+                      <div className="text-lg font-bold text-green-600">
+                        +35.58%
+                      </div>
+                      <div className="text-xs text-gray-500">향상률</div>
+                    </div>
+                  </div>
+                </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>
+
       {/* 시작하기 섹션 */}
       <div className="bg-white min-h-screen flex items-center relative snap-start">
         <div className="container mx-auto px-4 py-8 md:py-16">

From cace83c2d5f676b4d3d11ab0194ced84453ccfaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B2=9C=EC=84=B1=EC=9C=A4?= <1112csy@naver.com>
Date: Thu, 4 Sep 2025 14:04:04 +0900
Subject: [PATCH 7/7] =?UTF-8?q?=E2=9A=A1=EF=B8=8F:=20A/B=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Intro/ABTestResults.tsx | 233 +++++++++++++++++++++++++
 src/pages/introPage.tsx                | 231 +-----------------------
 2 files changed, 235 insertions(+), 229 deletions(-)
 create mode 100644 src/components/Intro/ABTestResults.tsx

diff --git a/src/components/Intro/ABTestResults.tsx b/src/components/Intro/ABTestResults.tsx
new file mode 100644
index 0000000..f540b18
--- /dev/null
+++ b/src/components/Intro/ABTestResults.tsx
@@ -0,0 +1,233 @@
+import { motion } from "framer-motion";
+
+export default function ABTestResults() {
+  return (
+    <div className="bg-gradient-to-br from-[#0A5C2B]/10 to-[#0A5C2B]/5 min-h-screen flex items-center relative snap-start">
+      <div className="container mx-auto px-4 py-8 md:py-16">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8 }}
+          className="text-center mb-12"
+        >
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            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"
+          >
+            📊 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"
+          >
+            <div className="bg-white rounded-xl p-6 shadow-lg">
+              <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">
+                  GPT-4o
+                </div>
+                <div className="text-sm text-gray-600">기본 모델</div>
+              </div>
+            </div>
+            <div className="bg-white rounded-xl p-6 shadow-lg border-2 border-[#0A5C2B]">
+              <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">
+                  Chain of Thought + RAG
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8 }}
+          className="max-w-6xl mx-auto"
+        >
+          {/* 종합 분석 평가 */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            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"
+          >
+            <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>
+            <div className="mt-6 text-center">
+              <div className="text-2xl font-bold text-green-600 mb-2">
+                +31.79%
+              </div>
+              <div className="text-sm text-gray-600">성능 향상률</div>
+              <div className="text-xs text-gray-500 mt-2">
+                P-value: 0.0000 (p &lt; 0.0001)
+              </div>
+            </div>
+          </motion.div>
+
+          {/* 개별 항목 평가 */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {/* 분석의 깊이 */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+              className="bg-white rounded-xl p-6 shadow-lg"
+            >
+              <h4 className="text-lg font-bold text-[#0A5C2B] mb-4 text-center">
+                🔍 분석의 깊이
+              </h4>
+              <div className="space-y-3">
+                <div className="flex justify-between items-center">
+                  <span className="text-sm text-gray-600">CoT/RAG</span>
+                  <span className="font-bold text-[#0A5C2B]">7.53</span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-sm text-gray-600">Baseline</span>
+                  <span className="font-bold text-gray-500">5.28</span>
+                </div>
+                <div className="pt-2 border-t">
+                  <div className="text-center">
+                    <div className="text-lg font-bold text-green-600">
+                      +42.61%
+                    </div>
+                    <div className="text-xs text-gray-500">향상률</div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+
+            {/* 논리적 근거 */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.8, delay: 0.3 }}
+              className="bg-white rounded-xl p-6 shadow-lg"
+            >
+              <h4 className="text-lg font-bold text-[#0A5C2B] mb-4 text-center">
+                🧠 논리적 근거
+              </h4>
+              <div className="space-y-3">
+                <div className="flex justify-between items-center">
+                  <span className="text-sm text-gray-600">CoT/RAG</span>
+                  <span className="font-bold text-[#0A5C2B]">6.61</span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-sm text-gray-600">Baseline</span>
+                  <span className="font-bold text-gray-500">5.59</span>
+                </div>
+                <div className="pt-2 border-t">
+                  <div className="text-center">
+                    <div className="text-lg font-bold text-green-600">
+                      +18.25%
+                    </div>
+                    <div className="text-xs text-gray-500">향상률</div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+
+            {/* 통찰력 */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.8, delay: 0.4 }}
+              className="bg-white rounded-xl p-6 shadow-lg"
+            >
+              <h4 className="text-lg font-bold text-[#0A5C2B] mb-4 text-center">
+                💡 통찰력
+              </h4>
+              <div className="space-y-3">
+                <div className="flex justify-between items-center">
+                  <span className="text-sm text-gray-600">CoT/RAG</span>
+                  <span className="font-bold text-[#0A5C2B]">6.63</span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-sm text-gray-600">Baseline</span>
+                  <span className="font-bold text-gray-500">4.89</span>
+                </div>
+                <div className="pt-2 border-t">
+                  <div className="text-center">
+                    <div className="text-lg font-bold text-green-600">
+                      +35.58%
+                    </div>
+                    <div className="text-xs text-gray-500">향상률</div>
+                  </div>
+                </div>
+              </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>
+  );
+}
diff --git a/src/pages/introPage.tsx b/src/pages/introPage.tsx
index 40a46c3..3f6327d 100644
--- a/src/pages/introPage.tsx
+++ b/src/pages/introPage.tsx
@@ -1,5 +1,6 @@
 import BALLFiNLogo from "../assets/BALLFiN.svg";
 import { FeatureCard } from "../components/Intro/FeatureCard";
+import ABTestResults from "../components/Intro/ABTestResults";
 import { motion } from "framer-motion";
 import { useNavigate } from "react-router-dom";
 import cheon from "../assets/member/cheon.png";
@@ -133,235 +134,7 @@ export default function Intro() {
       </div>
 
       {/* A/B 테스트 결과 섹션 */}
-      <div className="bg-gradient-to-br from-[#0A5C2B]/10 to-[#0A5C2B]/5 min-h-screen flex items-center relative snap-start">
-        <div className="container mx-auto px-4 py-8 md:py-16">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-12"
-          >
-            <motion.h2
-              initial={{ opacity: 0, y: 20 }}
-              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"
-            >
-              📊 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"
-            >
-              <div className="bg-white rounded-xl p-6 shadow-lg">
-                <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">
-                    GPT-4o
-                  </div>
-                  <div className="text-sm text-gray-600">기본 모델</div>
-                </div>
-              </div>
-              <div className="bg-white rounded-xl p-6 shadow-lg border-2 border-[#0A5C2B]">
-                <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">
-                    Chain of Thought + RAG
-                  </div>
-                </div>
-              </div>
-            </motion.div>
-          </motion.div>
-
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="max-w-6xl mx-auto"
-          >
-            {/* 종합 분석 평가 */}
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              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"
-            >
-              <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>
-              <div className="mt-6 text-center">
-                <div className="text-2xl font-bold text-green-600 mb-2">
-                  +31.79%
-                </div>
-                <div className="text-sm text-gray-600">성능 향상률</div>
-                <div className="text-xs text-gray-500 mt-2">
-                  P-value: 0.0000 (p &lt; 0.0001)
-                </div>
-              </div>
-            </motion.div>
-
-            {/* 개별 항목 평가 */}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-              {/* 분석의 깊이 */}
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.8, delay: 0.2 }}
-                className="bg-white rounded-xl p-6 shadow-lg"
-              >
-                <h4 className="text-lg font-bold text-[#0A5C2B] mb-4 text-center">
-                  🔍 분석의 깊이
-                </h4>
-                <div className="space-y-3">
-                  <div className="flex justify-between items-center">
-                    <span className="text-sm text-gray-600">CoT/RAG</span>
-                    <span className="font-bold text-[#0A5C2B]">7.53</span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className="text-sm text-gray-600">Baseline</span>
-                    <span className="font-bold text-gray-500">5.28</span>
-                  </div>
-                  <div className="pt-2 border-t">
-                    <div className="text-center">
-                      <div className="text-lg font-bold text-green-600">
-                        +42.61%
-                      </div>
-                      <div className="text-xs text-gray-500">향상률</div>
-                    </div>
-                  </div>
-                </div>
-              </motion.div>
-
-              {/* 논리적 근거 */}
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.8, delay: 0.3 }}
-                className="bg-white rounded-xl p-6 shadow-lg"
-              >
-                <h4 className="text-lg font-bold text-[#0A5C2B] mb-4 text-center">
-                  🧠 논리적 근거
-                </h4>
-                <div className="space-y-3">
-                  <div className="flex justify-between items-center">
-                    <span className="text-sm text-gray-600">CoT/RAG</span>
-                    <span className="font-bold text-[#0A5C2B]">6.61</span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className="text-sm text-gray-600">Baseline</span>
-                    <span className="font-bold text-gray-500">5.59</span>
-                  </div>
-                  <div className="pt-2 border-t">
-                    <div className="text-center">
-                      <div className="text-lg font-bold text-green-600">
-                        +18.25%
-                      </div>
-                      <div className="text-xs text-gray-500">향상률</div>
-                    </div>
-                  </div>
-                </div>
-              </motion.div>
-
-              {/* 통찰력 */}
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.8, delay: 0.4 }}
-                className="bg-white rounded-xl p-6 shadow-lg"
-              >
-                <h4 className="text-lg font-bold text-[#0A5C2B] mb-4 text-center">
-                  💡 통찰력
-                </h4>
-                <div className="space-y-3">
-                  <div className="flex justify-between items-center">
-                    <span className="text-sm text-gray-600">CoT/RAG</span>
-                    <span className="font-bold text-[#0A5C2B]">6.63</span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className="text-sm text-gray-600">Baseline</span>
-                    <span className="font-bold text-gray-500">4.89</span>
-                  </div>
-                  <div className="pt-2 border-t">
-                    <div className="text-center">
-                      <div className="text-lg font-bold text-green-600">
-                        +35.58%
-                      </div>
-                      <div className="text-xs text-gray-500">향상률</div>
-                    </div>
-                  </div>
-                </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>
+      <ABTestResults />
 
       {/* 시작하기 섹션 */}
       <div className="bg-white min-h-screen flex items-center relative snap-start">