fix: 리포트 '마케팅 기획' 버튼 → 브랜딩 가이드 섹션으로 이동
- 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>main
parent
d816bb2d13
commit
f2441de0bf
|
|
@ -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"
|
||||
>
|
||||
마케팅 기획
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue