From f2441de0bf56ee3a3588447d9ce0c957c2af4b99 Mon Sep 17 00:00:00 2001
From: Haewon Kam <haewonkam@Haewons-MacBook-Pro.local>
Date: Tue, 14 Apr 2026 16:48:44 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A6=AC=ED=8F=AC=ED=8A=B8=20'=EB=A7=88?=
 =?UTF-8?q?=EC=BC=80=ED=8C=85=20=EA=B8=B0=ED=9A=8D'=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=E2=86=92=20=EB=B8=8C=EB=9E=9C=EB=94=A9=20=EA=B0=80=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=84=B9=EC=85=98=EC=9C=BC=EB=A1=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- KPIDashboard의 CTA 버튼이 /plan/:id 로만 이동 → 스크롤 위치 불확정
- 수정: /plan/:id#branding-guide 로 해시 포함 이동
- MarketingPlanPage에 useEffect 추가: location.hash 감지 시
  sticky Navbar(80px) + ReportNav(48px) = 128px 오프셋 적용하여
  해당 섹션 상단이 nav 바로 아래에 정렬되도록 scrollTo

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/report/KPIDashboard.tsx |  2 +-
 src/pages/MarketingPlanPage.tsx        | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/report/KPIDashboard.tsx b/src/components/report/KPIDashboard.tsx
index 605dba6..070c646 100644
--- a/src/components/report/KPIDashboard.tsx
+++ b/src/components/report/KPIDashboard.tsx
@@ -97,7 +97,7 @@ export default function KPIDashboard({ metrics, clinicName }: KPIDashboardProps)
           </p>
           <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
             <button
-              onClick={() => navigate(`/plan/${id || 'live'}`)}
+              onClick={() => navigate(`/plan/${id || 'live'}#branding-guide`)}
               className="inline-flex items-center gap-2 bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white font-semibold px-8 py-4 rounded-full hover:shadow-xl transition-all"
             >
               마케팅 기획
diff --git a/src/pages/MarketingPlanPage.tsx b/src/pages/MarketingPlanPage.tsx
index 6ab9e57..d57aeec 100644
--- a/src/pages/MarketingPlanPage.tsx
+++ b/src/pages/MarketingPlanPage.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useParams, useLocation } from 'react-router';
 import { useMarketingPlan } from '../hooks/useMarketingPlan';
 import { ReportNav } from '../components/report/ReportNav';
@@ -33,6 +34,21 @@ export default function MarketingPlanPage() {
   const clinicId = (location.state as { clinicId?: string } | undefined)?.clinicId || null;
   const { data, isLoading, error } = useMarketingPlan(id);
 
+  // Hash-based scroll: /plan/:id#section-id → scroll to that section after render
+  // Offsets sticky Navbar (80px) + ReportNav (~48px) so the section top isn't covered.
+  useEffect(() => {
+    if (isLoading || !location.hash) return;
+    const sectionId = location.hash.slice(1);
+    const timer = setTimeout(() => {
+      const el = document.getElementById(sectionId);
+      if (!el) return;
+      const STICKY_OFFSET = 128;
+      const y = el.getBoundingClientRect().top + window.scrollY - STICKY_OFFSET;
+      window.scrollTo({ top: y, behavior: 'smooth' });
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [isLoading, location.hash]);
+
   if (isLoading) {
     return (
       <div className="min-h-screen flex items-center justify-center pt-20">