78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
import { useLocation, useNavigate } from 'react-router';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { PAGE_FLOW } from '@/shared/constants/pageFlow';
|
|
|
|
function findCurrentIndex(pathname: string): number {
|
|
return PAGE_FLOW.findIndex((p) =>
|
|
p.exact ? pathname === p.prefix : pathname.startsWith(p.prefix)
|
|
);
|
|
}
|
|
|
|
function getNavigatePath(prefix: string, currentPath: string): string {
|
|
// 동적 라우트의 경우 현재 report/plan ID를 보존하려고 시도
|
|
if (prefix === '/') return '/';
|
|
|
|
// 현재 경로에서 ID 추출 (예: /report/abc123 → abc123)
|
|
const idMatch = currentPath.match(/\/(report|plan|studio|clinic)\/(.+)/);
|
|
const currentId = idMatch?.[2] || 'live';
|
|
|
|
if (prefix.endsWith('/')) {
|
|
return `${prefix}${currentId}`;
|
|
}
|
|
return prefix;
|
|
}
|
|
|
|
export default function PageNavigator() {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
const currentIndex = findCurrentIndex(location.pathname);
|
|
if (currentIndex === -1) return null;
|
|
|
|
const prev = currentIndex > 0 ? PAGE_FLOW[currentIndex - 1] : null;
|
|
const next = currentIndex < PAGE_FLOW.length - 1 ? PAGE_FLOW[currentIndex + 1] : null;
|
|
|
|
return (
|
|
<div
|
|
data-no-print
|
|
className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1 bg-white/90 backdrop-blur-xl border border-slate-200 rounded-full px-2 py-2 shadow-[0_4px_20px_rgba(0,0,0,0.08)]"
|
|
>
|
|
{/* Back */}
|
|
<button
|
|
onClick={() => prev && navigate(getNavigatePath(prev.prefix, location.pathname))}
|
|
disabled={!prev}
|
|
className="flex items-center gap-2 px-3 py-2 rounded-full text-sm font-medium transition-all disabled:opacity-30 disabled:cursor-not-allowed hover:bg-slate-50 text-slate-600"
|
|
>
|
|
<ChevronLeft size={16} />
|
|
{prev && <span className="hidden sm:inline">{prev.label}</span>}
|
|
</button>
|
|
|
|
{/* Page Indicators */}
|
|
<div className="flex items-center gap-2 px-2">
|
|
{PAGE_FLOW.map((page, i) => (
|
|
<button
|
|
key={page.prefix}
|
|
onClick={() => navigate(getNavigatePath(page.prefix, location.pathname))}
|
|
title={page.label}
|
|
className={`rounded-full transition-all ${
|
|
i === currentIndex
|
|
? 'w-6 h-2 bg-[#0A1128]'
|
|
: 'w-2 h-2 bg-slate-300 hover:bg-slate-400'
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Next */}
|
|
<button
|
|
onClick={() => next && navigate(getNavigatePath(next.prefix, location.pathname))}
|
|
disabled={!next}
|
|
className="flex items-center gap-2 px-3 py-2 rounded-full text-sm font-medium transition-all disabled:opacity-30 disabled:cursor-not-allowed hover:bg-slate-50 text-slate-600"
|
|
>
|
|
{next && <span className="hidden sm:inline">{next.label}</span>}
|
|
<ChevronRight size={16} />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|