fc9b0c0f75
- Vite 기본 템플릿 정리 및 index.html 수정 - guideline.html 기반 디자인 토큰 적용 (index.css) - Feature-based 폴더 구조 (8개 feature 모듈) - 18개 placeholder 페이지 + lazy loading 라우터 - 레이아웃 컴포넌트 (AppLayout, AppHeader, AppSidebar, AuthLayout) - Zustand 스토어 (authStore, uiStore) - API 계층 (Axios client, auth.api) - 타입 정의, 유틸리티, 환경변수 설정 - ErrorBoundary, ProtectedRoute, PublicRoute Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import { Link, useLocation } from "react-router-dom";
|
|
|
|
/** 경로 → breadcrumb 레이블 매핑 */
|
|
const pathLabels: Record<string, string> = {
|
|
"/": "Home",
|
|
"/dashboard": "대시보드",
|
|
"/services": "서비스 관리",
|
|
"/services/register": "서비스 등록",
|
|
"/messages": "메시지 관리",
|
|
"/messages/register": "메시지 등록",
|
|
"/statistics": "발송 통계",
|
|
"/statistics/history": "발송 이력",
|
|
"/devices": "기기 관리",
|
|
"/tags": "태그 관리",
|
|
"/settings": "마이 페이지",
|
|
"/settings/profile": "프로필 수정",
|
|
"/settings/notifications": "알림",
|
|
};
|
|
|
|
export default function AppHeader() {
|
|
const location = useLocation();
|
|
const isHome = location.pathname === "/";
|
|
const currentLabel = pathLabels[location.pathname] ?? "페이지";
|
|
|
|
return (
|
|
<header className="fixed left-64 right-0 top-0 z-40 flex h-16 items-center justify-between border-b border-gray-200 bg-white px-10 shadow-sm">
|
|
{/* 브레드크럼 */}
|
|
<nav className="flex items-center text-sm">
|
|
{isHome ? (
|
|
<span className="font-medium text-foreground">Home</span>
|
|
) : (
|
|
<>
|
|
<Link to="/" className="text-gray-500 transition-colors hover:text-primary">Home</Link>
|
|
<span className="material-symbols-outlined mx-2 text-base text-gray-300">chevron_right</span>
|
|
<span className="font-medium text-foreground">{currentLabel}</span>
|
|
</>
|
|
)}
|
|
</nav>
|
|
|
|
{/* 우측 아이콘 */}
|
|
<div className="ml-auto flex flex-shrink-0 items-center gap-5 text-gray-400">
|
|
{/* 알림 */}
|
|
<button className="group relative transition-colors hover:text-primary">
|
|
<span className="material-symbols-outlined text-2xl group-hover:animate-pulse">
|
|
notifications
|
|
</span>
|
|
<span className="absolute right-0.5 top-0.5 size-2 rounded-full border-2 border-white bg-red-500" />
|
|
</button>
|
|
|
|
{/* 구분선 */}
|
|
<div className="h-6 w-px bg-gray-200" />
|
|
|
|
{/* 프로필 */}
|
|
<Link
|
|
to="/settings"
|
|
className="flex items-center gap-2 transition-colors hover:text-primary"
|
|
>
|
|
<span className="material-symbols-outlined text-2xl">account_circle</span>
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|