chore(header): 모바일 친화 — 상단 메뉴 탭/Admin/알람·매뉴얼·테마 아이콘 제거
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>
This commit is contained in:
chpark
2026-05-07 20:12:48 +09:00
parent 70736bd8f6
commit 57bb74dc14
+24 -124
View File
@@ -1,48 +1,21 @@
"use client";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";
import { useEffect } from "react";
import { useAuthStore } from "@/store/auth-store";
import { useMenuStore } from "@/store/menu-store";
import { useThemeStore } from "@/store/theme-store";
import {
Bell, LogOut, Sun, Moon, User, BookOpen,
Home, Shield,
} from "lucide-react";
import { LogOut, User } from "lucide-react";
export function Header() {
const { user, logout } = useAuthStore();
const { topMenus, activeTopMenu, fetchTopMenus, fetchSideMenus } = useMenuStore();
const { theme, toggleTheme } = useThemeStore();
const [approvalCount, setApprovalCount] = useState(0);
useEffect(() => {
fetchTopMenus();
}, [fetchTopMenus]);
useEffect(() => {
const fetchApprovalCount = async () => {
try {
const res = await fetch("/api/approval/count");
if (res.ok) {
const data = await res.json();
setApprovalCount(data.count || 0);
}
} catch { /* ignore */ }
};
fetchApprovalCount();
const interval = setInterval(fetchApprovalCount, 60000);
return () => clearInterval(interval);
}, []);
// 관리자 메뉴 분리 (기존 header.jsp openAdminMngPop 대응)
const userMenus = topMenus.filter((m) => m.MENU_NAME_KOR !== "관리자");
const adminMenu = topMenus.find((m) => m.MENU_NAME_KOR === "관리자");
// 초기 로드: 항상 "사용자" 메뉴의 사이드바를 불러오기
// 초기 로드: "사용자" 메뉴의 사이드바를 불러오기 (관리자 제외)
useEffect(() => {
if (topMenus.length > 0 && !activeTopMenu) {
// "관리자" 제외하고 "사용자" 메뉴를 명시적으로 찾아서 로드
const userMenu = topMenus.find((m) => m.MENU_NAME_KOR !== "관리자");
if (userMenu) {
fetchSideMenus(userMenu.OBJID);
@@ -50,103 +23,30 @@ export function Header() {
}
}, [topMenus, activeTopMenu, fetchSideMenus]);
const handleTopMenuClick = (menuObjId: string) => {
fetchSideMenus(menuObjId);
};
// 기존 openAdminMngPop() 대응 - 관리자 팝업
const openAdminPopup = () => {
if (adminMenu) {
window.open(
`/admin-panel?menuId=${adminMenu.OBJID}`,
"adminPanel",
"width=1630,height=950,menuBar=no,status=no"
);
}
};
return (
<header className="h-12 bg-white border-b border-gray-200 flex items-center px-4 shrink-0">
<button
onClick={() => {
if (userMenus.length > 0) handleTopMenuClick(userMenus[0].OBJID);
}}
className="mr-4 text-gray-500 hover:text-primary transition-colors"
<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="회원정보 수정"
>
<Home size={18} />
<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>
{/* 상위 메뉴 - 관리자 제외 */}
<nav className="flex items-center gap-1 flex-1 overflow-x-auto">
{userMenus.map((menu) => (
<button
key={menu.OBJID}
onClick={() => handleTopMenuClick(menu.OBJID)}
className={cn(
"px-3 py-1.5 text-[13px] rounded whitespace-nowrap transition-colors",
activeTopMenu === menu.OBJID
? "bg-primary text-white font-semibold"
: "text-gray-600 hover:bg-gray-100"
)}
>
{menu.MENU_NAME_KOR}
</button>
))}
</nav>
<div className="flex items-center gap-1 ml-4">
<button className="relative p-2 text-gray-500 hover:text-primary rounded transition-colors" title="결재함">
<Bell size={16} />
{approvalCount > 0 && (
<span className="absolute -top-0.5 -right-0.5 bg-red-500 text-white text-[10px] font-bold rounded-full min-w-[16px] h-4 flex items-center justify-center px-1">
{approvalCount}
</span>
)}
</button>
<button className="p-2 text-gray-500 hover:text-primary rounded transition-colors" title="매뉴얼">
<BookOpen size={16} />
</button>
<button
onClick={toggleTheme}
className="p-2 text-gray-500 hover:text-primary rounded transition-colors"
title={theme === "sage" ? "블루 테마" : "세이지 테마"}
>
{theme === "sage" ? <Moon size={16} /> : <Sun size={16} />}
</button>
{/* 관리자 버튼 - plm_admin만 표시 */}
{user?.isAdmin && adminMenu && (
<button
onClick={openAdminPopup}
className="px-2.5 py-1 text-xs font-semibold text-orange-600 bg-orange-50 hover:bg-orange-100 border border-orange-200 rounded transition-colors"
title="관리자"
>
<Shield size={13} className="inline mr-1" />
Admin
</button>
)}
<div className="flex items-center gap-2 ml-2 pl-2 border-l border-gray-200">
<User size={14} className="text-gray-400" />
<a
href="/profile"
className="text-xs text-gray-600 hover:text-emerald-700 hover:underline"
title="회원정보 수정"
>
{user?.userName} {user?.deptName ? `(${user.deptName})` : ""}
</a>
</div>
<button
onClick={logout}
className="p-2 text-gray-500 hover:text-red-500 rounded transition-colors"
title="로그아웃"
>
<LogOut size={16} />
</button>
</div>
</header>
);
}