sam-manage/SIDEBAR_MENU_GUIDE.md

Sidebar Menu Guide

개요

MNG 관리자 패널의 좌측 사이드바 메뉴 구조 및 스타일 가이드입니다.

메뉴 구조

1. 대시보드 (단독 메뉴)

• 경로: /dashboard
• 아이콘: Home
• 그룹 없이 최상단 단독 배치

2. 시스템 관리 그룹

• 테넌트 관리 - /tenants
• 사용자 관리 - /users
• 부서 관리 - /departments
• 메뉴 관리 - /menus

3. 권한 관리 그룹

• 역할 관리 - /roles
• 권한 관리 - /permissions ✅ 완료
• 역할 권한 관리 - # (미구현)
• 부서 권한 관리 - # (미구현)
• 개인 권한 관리 - # (미구현)
• 권한 분석 - # (미구현)

4. 생산 관리 그룹

• 제품 관리 - # (미구현)
• 자재 관리 - # (미구현)
• BOM 관리 - # (미구현)
• 카테고리 관리 - # (미구현)

5. 시스템 그룹

• 시스템 설정 - # (미구현)
• 감사 로그 - # (미구현)
• 삭제된 데이터 백업 - # (미구현)

스타일 가이드

그룹 헤더

<button class="w-full flex items-center justify-between px-3 py-2 text-xs font-bold text-gray-600 uppercase tracking-wider hover:bg-gray-50 rounded">
    <span>그룹명</span>
    <svg id="group-icon" class="w-3 h-3 transition-transform">
        <!-- Chevron down icon -->
    </svg>
</button>

스타일 특징:

• 폰트: text-xs font-bold text-gray-600
• 대문자: uppercase tracking-wider
• Hover: hover:bg-gray-50
• 상단 구분선: border-t border-gray-200 mt-2 pt-4 pb-1

그룹 내 메뉴 (인덴트)

<a href="{{ route('...') }}"
   class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100"
   style="padding-left: 2rem;">
    <svg class="w-4 h-4">...</svg>
    <span class="font-medium">메뉴명</span>
</a>

스타일 특징:

• 인덴트: style="padding-left: 2rem;" (inline style로 확실히 적용)
• 아이콘: w-4 h-4
• 텍스트: text-sm font-medium
• Hover: hover:bg-gray-100
• 활성 상태: bg-primary text-white hover:bg-primary

일반 메뉴 (대시보드)

<a href="{{ route('dashboard') }}"
   class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100">
    <svg class="w-4 h-4">...</svg>
    <span class="font-medium">대시보드</span>
</a>

스타일 특징:

• 인덴트 없음: px-3
• 아이콘: w-4 h-4
• 텍스트: text-sm font-medium

그룹 접기/펼치기 기능

JavaScript 구현

function toggleGroup(groupId) {
    const group = document.getElementById(groupId);
    const icon = document.getElementById(groupId + '-icon');

    if (group.style.display === 'none') {
        group.style.display = 'block';
        icon.style.transform = 'rotate(0deg)';
        localStorage.setItem('sidebar-' + groupId, 'open');
    } else {
        group.style.display = 'none';
        icon.style.transform = 'rotate(-90deg)';
        localStorage.setItem('sidebar-' + groupId, 'closed');
    }
}

상태 저장

• localStorage를 사용하여 그룹 열림/닫힘 상태 저장
• 페이지 새로고침 후에도 상태 유지
• Key format: sidebar-{group-id}

아이콘 애니메이션

• 열림: rotate(0deg) (▼)
• 닫힘: rotate(-90deg) (▶)
• Transition: transition-transform

그룹 ID 목록

['system-group', 'permission-group', 'production-group', 'system-settings-group']

활성 상태 표시

Blade 조건문

{{ request()->routeIs('permissions.*') ? 'bg-primary text-white hover:bg-primary' : '' }}

패턴:

• 현재 라우트가 해당 메뉴의 라우트와 일치하면 bg-primary text-white 적용
• Wildcard 사용: permissions.* (모든 하위 라우트 포함)

크기 및 간격

아이콘 크기

• 메뉴 아이콘: w-4 h-4 (16px)
• 그룹 화살표: w-3 h-3 (12px)

간격

• 메뉴 간격: space-y-1 (4px)
• 아이콘-텍스트 간격: gap-2 (8px)
• 그룹 상단 간격: mt-2 pt-4 (8px + 16px)
• 그룹 하단 간격: pb-1 (4px)

패딩

• 일반 메뉴: px-3 py-2 (12px, 8px)
• 그룹 내 메뉴: padding-left: 2rem; (32px) + pr-3 py-2
• 그룹 헤더: px-3 py-2

색상 팔레트

텍스트

• 일반 메뉴: text-gray-700
• 그룹 헤더: text-gray-600
• 활성 메뉴: text-white

배경

• 일반 Hover: hover:bg-gray-100
• 그룹 헤더 Hover: hover:bg-gray-50
• 활성 메뉴: bg-primary (프로젝트 primary color)

구분선

• 그룹 구분: border-gray-200

파일 위치

mng/resources/views/partials/sidebar.blade.php

새 메뉴 추가 방법

1. 일반 메뉴 (그룹 없이)

<li>
    <a href="{{ route('new-menu.index') }}"
       class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('new-menu.*') ? 'bg-primary text-white hover:bg-primary' : '' }}">
        <svg class="w-4 h-4"><!-- 아이콘 --></svg>
        <span class="font-medium">새 메뉴</span>
    </a>
</li>

2. 그룹 내 메뉴

<li>
    <a href="{{ route('new-menu.index') }}"
       class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('new-menu.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
       style="padding-left: 2rem;">
        <svg class="w-4 h-4"><!-- 아이콘 --></svg>
        <span class="font-medium">새 메뉴</span>
    </a>
</li>

3. 새 그룹 추가

<li class="pt-4 pb-1 border-t border-gray-200 mt-2">
    <button onclick="toggleGroup('new-group')" class="w-full flex items-center justify-between px-3 py-2 text-xs font-bold text-gray-600 uppercase tracking-wider hover:bg-gray-50 rounded">
        <span>새 그룹</span>
        <svg id="new-group-icon" class="w-3 h-3 transition-transform">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
    </button>
    <ul id="new-group" class="space-y-1 mt-1">
        <!-- 그룹 내 메뉴들 -->
    </ul>
</li>

주의: JavaScript에서 그룹 ID 배열에 'new-group' 추가 필요

주의사항

1. 인덴트는 inline style 사용: Tailwind의 pl-6 대신 style="padding-left: 2rem;" 사용
2. 그룹 구분선 필수: 각 그룹에 border-t border-gray-200 추가
3. 아이콘 크기 일관성: 메뉴는 w-4 h-4, 그룹 화살표는 w-3 h-3
4. 활성 상태 체크: request()->routeIs() 사용
5. localStorage 동기화: 새 그룹 추가 시 JavaScript 배열 업데이트

최근 변경 이력

2025-01-25

• 권한 관리 기능 완료 (/permissions)
• 미래 메뉴 5개 추가 (역할 권한, 부서 권한, 개인 권한, 권한 분석, 삭제된 데이터 백업)
• 그룹 접기/펼치기 기능 추가
• 그룹 내 메뉴 인덴트 적용 (2rem)
• 그룹 구분선 및 스타일 강화