chpark
57bb74dc14
Deploy momo-erp / deploy (push) Successful in 51s
배경: 모바일에서 헤더가 너무 빽빽함. 사용되지 않는 요소 정리. 제거: - [사용자] / [관리자] 등 상단 메뉴 탭 (좌측 메뉴로 충분) - 홈 아이콘 - 알람 (결재함 배지) — MOMO에서는 결재 흐름 X - 매뉴얼 (BookOpen) 아이콘 - 테마 토글 (Sun/Moon) - Admin 패널 진입 버튼 유지: - 사용자명(클릭 시 /profile) - 로그아웃 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { useAuthStore } from "@/store/auth-store";
|
|
import { useMenuStore } from "@/store/menu-store";
|
|
import { LogOut, User } from "lucide-react";
|
|
|
|
export function Header() {
|
|
const { user, logout } = useAuthStore();
|
|
const { topMenus, activeTopMenu, fetchTopMenus, fetchSideMenus } = useMenuStore();
|
|
|
|
useEffect(() => {
|
|
fetchTopMenus();
|
|
}, [fetchTopMenus]);
|
|
|
|
// 초기 로드: "사용자" 메뉴의 사이드바를 불러오기 (관리자 제외)
|
|
useEffect(() => {
|
|
if (topMenus.length > 0 && !activeTopMenu) {
|
|
const userMenu = topMenus.find((m) => m.MENU_NAME_KOR !== "관리자");
|
|
if (userMenu) {
|
|
fetchSideMenus(userMenu.OBJID);
|
|
}
|
|
}
|
|
}, [topMenus, activeTopMenu, fetchSideMenus]);
|
|
|
|
return (
|
|
<header className="h-12 bg-white border-b border-gray-200 flex items-center px-3 sm:px-4 shrink-0 gap-2">
|
|
{/* 좌측 여백만 — 모바일에서 사이드바 토글이 이 영역을 차지함 */}
|
|
<div className="flex-1" />
|
|
|
|
{/* 우측: 사용자명(프로필 링크) + 로그아웃 */}
|
|
<a
|
|
href="/profile"
|
|
className="flex items-center gap-1.5 text-xs sm:text-sm text-gray-600 hover:text-emerald-700 hover:underline"
|
|
title="회원정보 수정"
|
|
>
|
|
<User size={14} className="text-gray-400" />
|
|
<span className="truncate max-w-[200px]">
|
|
{user?.userName} {user?.deptName ? `(${user.deptName})` : ""}
|
|
</span>
|
|
</a>
|
|
|
|
<button
|
|
onClick={logout}
|
|
className="p-2 text-gray-500 hover:text-red-500 rounded transition-colors"
|
|
title="로그아웃"
|
|
>
|
|
<LogOut size={16} />
|
|
</button>
|
|
</header>
|
|
);
|
|
}
|