From 0afca8ef951bd5cf321d78c3073243d2277c6107 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 17:55:26 +0900
Subject: [PATCH 1/8] =?UTF-8?q?=F0=9F=8E=A8:=20=EC=86=8C=EA=B0=9C=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=20=EC=A3=BC=EA=B0=80=EC=98=88=EC=B8=A1=20=EA=B3=BC?=
 =?UTF-8?q?=EC=A0=95=EA=B3=BC=20=EC=84=B1=EB=8A=A5=20=EC=98=81=EC=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Intro/ABTestResults.tsx | 68 +++++-------------
 src/pages/introPage.tsx                | 97 ++++++++++++++++++++++++++
 2 files changed, 115 insertions(+), 50 deletions(-)

diff --git a/src/components/Intro/ABTestResults.tsx b/src/components/Intro/ABTestResults.tsx
index f540b18..8c256df 100644
--- a/src/components/Intro/ABTestResults.tsx
+++ b/src/components/Intro/ABTestResults.tsx
@@ -16,19 +16,10 @@ export default function ABTestResults() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.8, delay: 0.2 }}
-            className="text-3xl font-bold text-gray-900 mb-4"
+            className="text-3xl font-bold text-gray-900 mb-8"
           >
-            📊 LLM 기반 금융 분석 모델 A/B 테스트 결과
+            LLM 기반 금융 분석 모델 A/B 테스트 결과
           </motion.h2>
-          <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8, delay: 0.4 }}
-            className="text-lg text-gray-600 mb-8"
-          >
-            CoT/RAG 방식의 우수성을 과학적으로 검증했습니다
-          </motion.p>
 
           {/* 기술 스택 비교 */}
           <motion.div
@@ -36,33 +27,30 @@ export default function ABTestResults() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.8, delay: 0.6 }}
-            className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-12"
+            className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-8"
           >
-            <div className="bg-white rounded-xl p-6 shadow-lg">
+            <div className="bg-white rounded-xl p-6 shadow-lg opacity-90">
               <h4 className="text-lg font-bold text-gray-500 mb-4 text-center">
                 Baseline
               </h4>
               <div className="text-center">
-                <div className="text-2xl font-bold text-gray-500 mb-2">
+                <div className="text-xl font-bold text-gray-500 mb-1">
                   GPT-4o
                 </div>
-                <div className="text-sm text-gray-600">기본 모델</div>
+                <div className="text-xs text-gray-500">기본 모델</div>
               </div>
             </div>
-            <div className="bg-white rounded-xl p-6 shadow-lg border-2 border-[#0A5C2B]">
+            <div className="bg-gradient-to-br from-white to-emerald-50 rounded-xl p-6 shadow-2xl border-2 border-[#0A5C2B] ring-4 ring-[#0A5C2B]/10">
               <h4 className="text-lg font-bold text-[#0A5C2B] mb-4 text-center">
                 Ours
               </h4>
               <div className="text-center">
-                <div className="text-2xl font-bold text-[#0A5C2B] mb-2">
-                  GPT-4o
-                </div>
-                <div className="text-sm text-gray-600 mb-2">
-                  + BarbellAI 기술
-                </div>
-                <div className="text-xs text-[#0A5C2B] font-medium">
+                <div className="text-2xl font-extrabold text-[#0A5C2B] tracking-tight">
                   Chain of Thought + RAG
                 </div>
+                <div className="text-xs text-gray-500 mt-2">
+                  기반 모델: GPT-4o
+                </div>
               </div>
             </div>
           </motion.div>
@@ -81,24 +69,24 @@ export default function ABTestResults() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.8, delay: 0.1 }}
-            className="bg-white rounded-xl p-8 shadow-lg mb-8"
+            className="bg-white rounded-xl p-8 shadow-lg mb-4"
           >
             <h3 className="text-xl font-bold text-[#0A5C2B] mb-6 text-center">
               🎯 종합 분석 평가 (깊이+근거+통찰력 평균)
             </h3>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div className="text-center">
-                <div className="text-3xl font-bold text-[#0A5C2B] mb-2">
-                  6.92
-                </div>
-                <div className="text-sm text-gray-600">CoT/RAG 평균 점수</div>
-              </div>
               <div className="text-center">
                 <div className="text-3xl font-bold text-gray-500 mb-2">
                   5.25
                 </div>
                 <div className="text-sm text-gray-600">Baseline 평균 점수</div>
               </div>
+              <div className="text-center">
+                <div className="text-3xl font-bold text-[#0A5C2B] mb-2">
+                  6.92
+                </div>
+                <div className="text-sm text-gray-600">CoT/RAG 평균 점수</div>
+              </div>
             </div>
             <div className="mt-6 text-center">
               <div className="text-2xl font-bold text-green-600 mb-2">
@@ -206,26 +194,6 @@ export default function ABTestResults() {
               </div>
             </motion.div>
           </div>
-
-          {/* 결론 */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8, delay: 0.5 }}
-            className="mt-8 text-center"
-          >
-            <div className="bg-[#0A5C2B] text-white rounded-xl p-6">
-              <h4 className="text-xl font-bold mb-2">🏆 결론</h4>
-              <p className="text-white/90">
-                CoT/RAG 방식이 모든 평가 항목에서 통계적으로 유의미하게 우수한
-                성능을 보여주었습니다.
-                <br />
-                <span className="font-semibold">p &lt; 0.001</span> 수준에서
-                통계적 유의성을 확인했습니다.
-              </p>
-            </div>
-          </motion.div>
         </motion.div>
       </div>
     </div>
diff --git a/src/pages/introPage.tsx b/src/pages/introPage.tsx
index 3f6327d..21cd7c6 100644
--- a/src/pages/introPage.tsx
+++ b/src/pages/introPage.tsx
@@ -14,6 +14,7 @@ import { Newspaper } from "lucide-react"; // AI 기반 금융 뉴스 분석 서
 import { Activity } from "lucide-react"; // AI 기반 주가 및 재무 분석 서비스
 import { Bot } from "lucide-react"; // RAG 기반 금융 에이전트 챗봇
 import { Bell } from "lucide-react"; // 관심 종목 실시간 모니터링 및 알림
+import { Globe, Tag, Brain, LineChart as LineChartIcon } from "lucide-react"; // 주가예측 과정 아이콘
 
 const features = [
   {
@@ -136,6 +137,102 @@ export default function Intro() {
       {/* A/B 테스트 결과 섹션 */}
       <ABTestResults />
 
+      {/* 주가예측 과정 & 성능 섹션 */}
+      <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">
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="text-3xl font-bold text-gray-900 text-center mb-12"
+          >
+            주가예측 과정과 성능
+          </motion.h2>
+
+          {/* 타임라인 */}
+          <motion.ol
+            initial="hidden"
+            whileInView="show"
+            viewport={{ once: true, amount: 0.2 }}
+            className="relative border-s-2 border-[#0A5C2B]/20 max-w-4xl mx-auto pl-6"
+          >
+            {[
+              {
+                icon: <Globe className="w-5 h-5 text-[#0A5C2B]" />,
+                title: "실시간 뉴스 수집",
+                desc: "증권사 HTS에서 제공되는 뉴스 사이트를 대상으로 실시간 수집",
+              },
+              {
+                icon: <Tag className="w-5 h-5 text-[#0A5C2B]" />,
+                title: "키워드 기반 회사 매칭",
+                desc: "키워드 기반 접근으로 뉴스-기업 자동 매핑",
+              },
+              {
+                icon: <Brain className="w-5 h-5 text-[#0A5C2B]" />,
+                title: "BALLFiN만의 CoT·RAG 기술로 Impact Score 산출",
+                desc: "뉴스 중요도를 정교하게 평가",
+              },
+              {
+                icon: <LineChartIcon className="w-5 h-5 text-[#0A5C2B]" />,
+                title: "LLM 기반 주가예측",
+                desc: "Impact Score, 뉴스/차트 분석, few-shot learning을 결합",
+              },
+            ].map((step, idx) => (
+              <motion.li
+                key={idx}
+                initial={{ opacity: 0, x: 20 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: idx * 0.1 }}
+                className="mb-10 ms-4"
+              >
+                <span className="absolute -start-3 flex items-center justify-center w-6 h-6 bg-white rounded-full ring-2 ring-[#0A5C2B]/30">
+                  {step.icon}
+                </span>
+                <div className="bg-white border border-[#0A5C2B]/10 rounded-lg shadow-sm p-4">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-xs font-semibold text-[#0A5C2B]">
+                      {String(idx + 1).padStart(2, "0")}
+                    </span>
+                    <h3 className="text-base font-semibold text-gray-900">
+                      {step.title}
+                    </h3>
+                  </div>
+                  <p className="text-sm text-gray-600">{step.desc}</p>
+                </div>
+              </motion.li>
+            ))}
+          </motion.ol>
+
+          {/* 성능 카드 */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-3xl mx-auto mt-10">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: 0.1 }}
+              className="bg-gradient-to-br from-[#0A5C2B] to-emerald-600 text-white rounded-xl p-6 text-center shadow-lg"
+            >
+              <p className="text-sm/5 opacity-90">결과 수익률</p>
+              <p className="text-4xl font-extrabold mt-1">254%</p>
+              <p className="text-xs/5 mt-2 text-white/80">전략 백테스트 기준</p>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="bg-white border border-[#0A5C2B]/10 rounded-xl p-6 text-center shadow-sm"
+            >
+              <p className="text-sm/5 text-gray-600">거래 승률</p>
+              <p className="text-4xl font-extrabold text-[#0A5C2B] mt-1">63%</p>
+              <p className="text-xs/5 mt-2 text-gray-500">실험 환경 내 기준</p>
+            </motion.div>
+          </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 aab94b451e59de79283c77a5b665fe8d7f6f7048 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 18:10:31 +0900
Subject: [PATCH 2/8] =?UTF-8?q?=E2=9C=A8:=20=EC=A3=BC=EC=8B=9D=EC=84=B8?=
 =?UTF-8?q?=EB=B6=80=EC=97=90=20=EC=B1=97=EB=B4=87=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/stock/StockDetailPage.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/stock/StockDetailPage.tsx b/src/pages/stock/StockDetailPage.tsx
index 7fd34bb..c15ae8e 100644
--- a/src/pages/stock/StockDetailPage.tsx
+++ b/src/pages/stock/StockDetailPage.tsx
@@ -17,6 +17,7 @@ import { getNewsByCompany } from "@/api/news";
 import StockChartPrice from "@/components/stockDetail/chart";
 import RelatedCompanies from "@/components/stockDetail/RelatedCompanies";
 import Pagination from "@/components/news/Pagination";
+import BotButton from "@/components/chat/BotButton";
 
 interface StockDetail {
   id: number;
@@ -504,6 +505,7 @@ export default function StockDetailPage() {
           </div>
         </div>
       </div>
+      <BotButton />
     </div>
   );
 }

From 4bfb876518febb83d5a0656e33df8dd631fc486a 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 18:10:47 +0900
Subject: [PATCH 3/8] =?UTF-8?q?=F0=9F=8E=A8:=20=EA=B8=B0=EC=88=A0=EC=A0=81?=
 =?UTF-8?q?=EB=B6=84=EC=84=9D=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/stockDetail/TechnicalAnalysis.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/stockDetail/TechnicalAnalysis.tsx b/src/components/stockDetail/TechnicalAnalysis.tsx
index 2640924..855952f 100644
--- a/src/components/stockDetail/TechnicalAnalysis.tsx
+++ b/src/components/stockDetail/TechnicalAnalysis.tsx
@@ -207,7 +207,7 @@ export default function TechnicalAnalysis({
               >
                 <div className="flex items-center mb-3">
                   <span className="text-sm font-medium text-gray-700">
-                    종합 신호
+                    MACD
                   </span>
                 </div>
                 <div

From 888d81d7dbda59159547f969868d502c1b08e598 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 18:21:39 +0900
Subject: [PATCH 4/8] =?UTF-8?q?=F0=9F=90=9B:=20=EA=B8=B0=EC=88=A0=EC=A0=81?=
 =?UTF-8?q?=EB=B6=84=EC=84=9D=20api=20=EC=9D=91=EB=8B=B5=20=ED=85=8D?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stockDetail/TechnicalAnalysis.tsx         | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

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

From 795faf8e0978e2333f15b7ace7d392b284ecadcf 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 18:22:48 +0900
Subject: [PATCH 5/8] =?UTF-8?q?=F0=9F=94=A5:=20=EB=AF=B8=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=20=ED=98=B8=EC=B6=9C=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/stock/StockDetailPage.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/stock/StockDetailPage.tsx b/src/pages/stock/StockDetailPage.tsx
index c15ae8e..589311f 100644
--- a/src/pages/stock/StockDetailPage.tsx
+++ b/src/pages/stock/StockDetailPage.tsx
@@ -108,7 +108,6 @@ export default function StockDetailPage() {
   };
 
   // 섹션별 로딩 상태
-  const [isHeaderLoading, setIsHeaderLoading] = useState(true);
   const [isChartLoading, setIsChartLoading] = useState(true);
   const [isTechnicalLoading, setIsTechnicalLoading] = useState(true);
   const isNewsLoading = news.length === 0;
@@ -194,7 +193,7 @@ export default function StockDetailPage() {
 
         if (!cancelled) {
           setStock(mapped);
-          setIsHeaderLoading(false);
+
           console.log("1단계: Stock Header 로딩 완료");
         }
 
@@ -330,7 +329,6 @@ export default function StockDetailPage() {
             },
           } as StockDetail;
           setStock(fallback);
-          setIsHeaderLoading(false);
 
           const mockHistoricalData: HistoricalData[] = Array.from(
             { length: 30 },

From 0f7aff1b60c7f2759a928ee616445af11c4ff811 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 19:11:15 +0900
Subject: [PATCH 6/8] =?UTF-8?q?=F0=9F=90=9B:=20=EC=B1=84=ED=8C=85=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EB=B9=88=20=EC=B1=84=ED=8C=85=EB=B0=A9=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=EC=97=90=EC=84=9C=20=EC=A0=84=EC=86=A1=EC=95=88?=
 =?UTF-8?q?=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chat/ChatWindow.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

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

From c1ab4d43c43ea923c6989649d743fd5a05d191c8 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 23:46:48 +0900
Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=8E=A8:=20=EC=A3=BC=EC=8B=9D=20?=
 =?UTF-8?q?=EC=84=B8=EB=B6=80=20=EC=B0=A8=ED=8A=B8=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stockDetail/chart/PriceVolumeChart.tsx    | 76 +++++++++++++++++--
 src/pages/stock/StockDetailPage.tsx           |  6 +-
 2 files changed, 73 insertions(+), 9 deletions(-)

diff --git a/src/components/stockDetail/chart/PriceVolumeChart.tsx b/src/components/stockDetail/chart/PriceVolumeChart.tsx
index 1e3c1ca..a0a15f1 100644
--- a/src/components/stockDetail/chart/PriceVolumeChart.tsx
+++ b/src/components/stockDetail/chart/PriceVolumeChart.tsx
@@ -72,7 +72,8 @@ const PriceVolumeChart = memo(function PriceVolumeChart({
         const { createChart, CandlestickSeries, HistogramSeries, LineSeries } =
           tv as any;
 
-        chart = createChart(tvContainerRef.current, {
+        const container = tvContainerRef.current;
+        chart = createChart(container, {
           layout: {
             textColor: "#334155",
             background: { type: "solid", color: "#ffffff" },
@@ -170,6 +171,34 @@ const PriceVolumeChart = memo(function PriceVolumeChart({
         }
 
         chart.timeScale().fitContent();
+
+        // 반응형: ResizeObserver로 컨테이너 크기 변경 시 차트 리사이즈
+        let resizeObserver: ResizeObserver | null = null;
+        if (typeof ResizeObserver !== "undefined") {
+          resizeObserver = new ResizeObserver(() => {
+            try {
+              const { clientWidth, clientHeight } = container;
+              if (clientWidth && clientHeight) {
+                chart.applyOptions({
+                  width: clientWidth,
+                  height: clientHeight,
+                });
+              }
+            } catch {}
+          });
+          resizeObserver.observe(container);
+        } else {
+          // 폴백: 윈도우 리사이즈
+          const onResize = () => {
+            try {
+              const { clientWidth, clientHeight } = container;
+              chart.applyOptions({ width: clientWidth, height: clientHeight });
+            } catch {}
+          };
+          window.addEventListener("resize", onResize);
+          // cleanup에서 제거
+          (chart as any).__onResize = onResize;
+        }
         setTvReady(true);
         setTvFailed(false);
         clearTimeout(timeoutId); // 성공 시 타임아웃 클리어
@@ -188,6 +217,13 @@ const PriceVolumeChart = memo(function PriceVolumeChart({
           chart.remove?.();
         } catch {}
       }
+      // 리사이즈 옵저버/리스너 정리
+      try {
+        const onResize = (chart as any)?.__onResize;
+        if (onResize) {
+          window.removeEventListener("resize", onResize);
+        }
+      } catch {}
     };
   }, [data, showMA, tvReady, tvFailed]);
 
@@ -301,7 +337,7 @@ const PriceVolumeChart = memo(function PriceVolumeChart({
           duration: 500, // 부드러운 전환을 위한 애니메이션
           easing: "easeInOutCubic",
         },
-        reflow: false, // 리플로우 비활성화
+        reflow: true, // 컨테이너 크기 변화에 반응
       },
       accessibility: { enabled: false },
       title: { text: "" },
@@ -428,8 +464,16 @@ const PriceVolumeChart = memo(function PriceVolumeChart({
     return (
       <div
         ref={tvContainerRef}
-        className="h-[500px] w-full transition-all duration-300 ease-in-out"
-        style={{ opacity: 1 }}
+        className="w-full transition-all duration-300 ease-in-out"
+        style={{
+          opacity: 1,
+          height:
+            typeof window !== "undefined" && window.innerWidth < 640
+              ? 360
+              : typeof window !== "undefined" && window.innerWidth < 1024
+                ? 420
+                : 500,
+        }}
       />
     );
   }
@@ -437,7 +481,17 @@ const PriceVolumeChart = memo(function PriceVolumeChart({
   // TradingView 실패 시 Highcharts 사용
   if (tvFailed && ready) {
     return (
-      <div className="transition-all duration-300 ease-in-out">
+      <div
+        className="transition-all duration-300 ease-in-out w-full overflow-hidden"
+        style={{
+          height:
+            typeof window !== "undefined" && window.innerWidth < 640
+              ? 360
+              : typeof window !== "undefined" && window.innerWidth < 1024
+                ? 420
+                : 500,
+        }}
+      >
         <HighchartsReact
           key={`${timeRange}-${ohlcData.length}`}
           highcharts={Highcharts}
@@ -451,7 +505,17 @@ const PriceVolumeChart = memo(function PriceVolumeChart({
   // TradingView 로딩 중이지만 데이터가 있으면 Highcharts로 폴백
   if (data.length > 0 && !tvReady && !tvFailed) {
     return (
-      <div className="transition-all duration-300 ease-in-out">
+      <div
+        className="transition-all duration-300 ease-in-out w-full overflow-hidden"
+        style={{
+          height:
+            typeof window !== "undefined" && window.innerWidth < 640
+              ? 360
+              : typeof window !== "undefined" && window.innerWidth < 1024
+                ? 420
+                : 500,
+        }}
+      >
         <HighchartsReact
           key={`${timeRange}-${ohlcData.length}`}
           highcharts={Highcharts}
diff --git a/src/pages/stock/StockDetailPage.tsx b/src/pages/stock/StockDetailPage.tsx
index 589311f..8730c08 100644
--- a/src/pages/stock/StockDetailPage.tsx
+++ b/src/pages/stock/StockDetailPage.tsx
@@ -415,8 +415,8 @@ export default function StockDetailPage() {
       {/* 메인 콘텐츠 */}
       <div className="container mx-auto px-4 py-6">
         {/* 차트와 기술적 분석 영역 */}
-        <div className="flex gap-6">
-          <div className="flex-1 min-w-0">
+        <div className="flex flex-col lg:flex-row gap-6">
+          <div className="flex-1 min-w-0 order-1 lg:order-none">
             <StockChartPrice
               code={stock?.code ?? code ?? ""}
               data={historicalData}
@@ -425,7 +425,7 @@ export default function StockDetailPage() {
           </div>
 
           {/* 기술적 분석 사이드바 */}
-          <div className="w-[472px] flex-shrink-0">
+          <div className="w-full lg:w-[472px] flex-shrink-0 order-0 lg:order-none">
             <TechnicalAnalysis
               stock={stock ?? placeholderStock}
               historicalData={historicalData}

From 67b0f28ed1c0261fde984cb7d6d003809a52ad9e 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 23:48:45 +0900
Subject: [PATCH 8/8] =?UTF-8?q?=F0=9F=94=A7:=20=EB=B0=B0=ED=8F=AC=ED=99=98?=
 =?UTF-8?q?=EA=B2=BD=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vite.config.ts b/vite.config.ts
index efb5713..31ff676 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -32,6 +32,7 @@ export default defineConfig(({ mode }) => {
       hmr: {
         overlay: false,
       },
+      allowedHosts: ["phrstudio.iptime.org"],
       proxy: {
         "^/api/.*": {
           target: process.env.VITE_API_BASE_URL,