chore(header): 모바일 친화 — 상단 메뉴 탭/Admin/알람·매뉴얼·테마 아이콘 제거
Deploy momo-erp / deploy (push) Successful in 51s
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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user