diff --git a/src/components/ClinicNav.tsx b/src/components/ClinicNav.tsx new file mode 100644 index 0000000..af11c69 --- /dev/null +++ b/src/components/ClinicNav.tsx @@ -0,0 +1,86 @@ +/** + * 병원 작업 공간 상단 메뉴. + * + * 마케팅 메뉴(Product·Pricing·Use Cases)는 진단을 받은 병원에게 쓸모가 없다. + * 이 화면들은 진단 → 빌드 → 사진 확인 → 확인 항목이라는 하나의 절차이므로, + * 상단을 그 절차로 바꾼다. 지금 어디에 있고 다음이 무엇인지가 한 줄에 보여야 한다. + * + * 단계의 완료 여부는 각 화면이 판단한다. 여기서는 위치만 표시한다. + */ +import { Link, useLocation } from 'react-router'; +import { PrismFilled } from './icons/FilledIcons'; + +type Step = { key: string; label: string; to: (id: string) => string; match: RegExp }; + +const STEPS: Step[] = [ + { key: 'report', label: '진단 리포트', to: (id) => `/discovery/${id}`, match: /^\/discovery\/[^/]+/ }, + { key: 'build', label: '사이트 빌드', to: (id) => `/build/${id}`, match: /^\/build\/[^/]+/ }, + { key: 'images', label: '사진 확인', to: (id) => `/images/${id}`, match: /^\/images\/[^/]+/ }, + { key: 'inputs', label: '확인 항목', to: (id) => `/supporters/${id}`, match: /^\/supporters\/[^/]+/ }, +]; + +/** 작업 공간 경로면 병원 id 를 돌려준다. 아니면 null. */ +export function clinicIdFromPath(pathname: string): string | null { + for (const s of STEPS) { + if (s.match.test(pathname)) return pathname.split('/')[2] ?? null; + } + return null; +} + +export default function ClinicNav({ clinicId }: { clinicId: string }) { + const { pathname } = useLocation(); + const currentIndex = STEPS.findIndex((s) => s.match.test(pathname)); + + return ( + + ); +} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 6cd9cc1..4e24cdd 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -18,11 +18,17 @@ * 예컨대 `/pricing`에서 `#solution`을 누르면 /pricing 페이지 내의 #solution을 찾다가 실패합니다. * `/#solution`은 React Router가 홈으로 이동시킨 뒤 브라우저가 해시 스크롤을 처리합니다. */ -import { Link } from 'react-router'; +import { Link, useLocation } from 'react-router'; import { ArrowRight } from 'lucide-react'; import { buildContactMailto } from '../lib/contact'; +import ClinicNav, { clinicIdFromPath } from './ClinicNav'; export default function Navbar() { + const { pathname } = useLocation(); + // 병원 작업 공간(진단·빌드·사진 확인·확인 항목)에서는 절차 메뉴로 바꾼다. + const clinicId = clinicIdFromPath(pathname); + if (clinicId) return ; + return (