diff --git a/SIDEBAR_MENU_GUIDE.md b/SIDEBAR_MENU_GUIDE.md new file mode 100644 index 00000000..56e82b22 --- /dev/null +++ b/SIDEBAR_MENU_GUIDE.md @@ -0,0 +1,230 @@ +# Sidebar Menu Guide + +## 개요 + +MNG 관리자 패널의 좌측 사이드바 메뉴 구조 및 스타일 가이드입니다. + +## 메뉴 구조 + +### 1. 대시보드 (단독 메뉴) +- 경로: `/dashboard` +- 아이콘: Home +- 그룹 없이 최상단 단독 배치 + +### 2. 시스템 관리 그룹 +- **테넌트 관리** - `/tenants` +- **사용자 관리** - `/users` +- **부서 관리** - `/departments` +- **메뉴 관리** - `/menus` + +### 3. 권한 관리 그룹 +- **역할 관리** - `/roles` +- **권한 관리** - `/permissions` ✅ 완료 +- **역할 권한 관리** - `#` (미구현) +- **부서 권한 관리** - `#` (미구현) +- **개인 권한 관리** - `#` (미구현) +- **권한 분석** - `#` (미구현) + +### 4. 생산 관리 그룹 +- **제품 관리** - `#` (미구현) +- **자재 관리** - `#` (미구현) +- **BOM 관리** - `#` (미구현) +- **카테고리 관리** - `#` (미구현) + +### 5. 시스템 그룹 +- **시스템 설정** - `#` (미구현) +- **감사 로그** - `#` (미구현) +- **삭제된 데이터 백업** - `#` (미구현) + +## 스타일 가이드 + +### 그룹 헤더 +```html + +``` + +**스타일 특징:** +- 폰트: `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` + +### 그룹 내 메뉴 (인덴트) +```html + + ... + 메뉴명 + +``` + +**스타일 특징:** +- **인덴트**: `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` + +### 일반 메뉴 (대시보드) +```html + + ... + 대시보드 + +``` + +**스타일 특징:** +- 인덴트 없음: `px-3` +- 아이콘: `w-4 h-4` +- 텍스트: `text-sm font-medium` + +## 그룹 접기/펼치기 기능 + +### JavaScript 구현 +```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 목록 + +```javascript +['system-group', 'permission-group', 'production-group', 'system-settings-group'] +``` + +## 활성 상태 표시 + +### Blade 조건문 +```php +{{ 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. 일반 메뉴 (그룹 없이) +```html +
  • + + + 새 메뉴 + +
    • +``` + +### 2. 그룹 내 메뉴 +```html +
  • + + + 새 메뉴 + +
    • +``` + +### 3. 새 그룹 추가 +```html +
  • + + +
    • +``` + +**주의:** 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) +- 그룹 구분선 및 스타일 강화 diff --git a/resources/views/partials/sidebar.blade.php b/resources/views/partials/sidebar.blade.php index d6f5eba5..906b0aaf 100644 --- a/resources/views/partials/sidebar.blade.php +++ b/resources/views/partials/sidebar.blade.php @@ -8,159 +8,235 @@ @@ -183,3 +259,33 @@ class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-700 hover:bg-gray- + + diff --git a/resources/views/permissions/partials/table.blade.php b/resources/views/permissions/partials/table.blade.php index f20a70c1..057ba623 100644 --- a/resources/views/permissions/partials/table.blade.php +++ b/resources/views/permissions/partials/table.blade.php @@ -18,12 +18,12 @@ function formatPermissionName(string $permissionName): string // 권한 타입별 설정 $permissionConfig = getPermissionConfig($permissionType); - // HTML 생성 - $html = '
    '; + // HTML 생성 (Admin과 동일한 스타일) + $html = '
    '; // 메뉴 태그 (회색 배지) $html .= sprintf( - '메뉴 #%d', + '메뉴 #%d', $menuId ); @@ -35,8 +35,8 @@ function formatPermissionName(string $permissionName): string // 권한 타입 배지 $html .= sprintf( - '%s', - $permissionConfig['class'], + '%s', + $permissionConfig['style'], $permissionConfig['label'], $permissionConfig['badge'] ); @@ -51,7 +51,7 @@ function formatPermissionName(string $permissionName): string } /** - * 권한 타입별 설정 반환 + * 권한 타입별 설정 반환 (Admin과 동일한 색상) */ function getPermissionConfig(string $type): array { @@ -59,44 +59,44 @@ function getPermissionConfig(string $type): array 'view' => [ 'badge' => 'V', 'label' => '조회', - 'class' => 'bg-blue-100 text-blue-800', + 'style' => 'background-color: rgb(219 234 254); color: rgb(30 64 175);', ], 'create' => [ 'badge' => 'C', 'label' => '생성', - 'class' => 'bg-green-100 text-green-800', + 'style' => 'background-color: rgb(220 252 231); color: rgb(21 128 61);', ], 'update' => [ 'badge' => 'U', 'label' => '수정', - 'class' => 'bg-orange-100 text-orange-800', + 'style' => 'background-color: rgb(254 215 170); color: rgb(154 52 18);', ], 'delete' => [ 'badge' => 'D', 'label' => '삭제', - 'class' => 'bg-red-100 text-red-800', + 'style' => 'background-color: rgb(254 202 202); color: rgb(153 27 27);', ], 'approve' => [ 'badge' => 'A', 'label' => '승인', - 'class' => 'bg-purple-100 text-purple-800', + 'style' => 'background-color: rgb(233 213 255); color: rgb(107 33 168);', ], 'export' => [ 'badge' => 'E', 'label' => '내보내기', - 'class' => 'bg-sky-100 text-sky-600', + 'style' => 'background-color: rgb(207 250 254); color: rgb(14 116 144);', ], 'manage' => [ 'badge' => 'M', 'label' => '관리', - 'class' => 'bg-gray-100 text-gray-800', + 'style' => 'background-color: rgb(243 244 246); color: rgb(31 41 55);', ], ]; return $configs[$type] ?? [ 'badge' => strtoupper(substr($type, 0, 1)), 'label' => $type, - 'class' => 'bg-gray-100 text-gray-800', + 'style' => 'background-color: rgb(243 244 246); color: rgb(31 41 55);', ]; } @endphp @@ -105,39 +105,39 @@ function getPermissionConfig(string $type): array - - - - - - - - - + + + + + + + + + @forelse($permissions as $permission) - - - - - - - - -
    ID권한명테넌트가드할당된 역할할당된 부서생성일수정일액션ID권한명테넌트가드할당된 역할할당된 부서생성일수정일액션
    + {{ $permission->id }} + {!! formatPermissionName($permission->name) !!} + {{ $permission->tenant?->company_name ?? '전역' }} - + + {{ $permission->guard_name }} + @if($permission->roles->isNotEmpty()) -
    +
    @foreach($permission->roles as $role) - + {{ $role->name }} @endforeach @@ -146,11 +146,11 @@ function getPermissionConfig(string $type): array - @endif
    		+ @if($permission->departments->isNotEmpty()) -
    +
    @foreach($permission->departments as $department) - + {{ $department->name }} @endforeach @@ -159,13 +159,13 @@ function getPermissionConfig(string $type): array - @endif
    		+ {{ $permission->created_at?->format('Y-m-d H:i') ?? '-' }} + {{ $permission->updated_at?->format('Y-m-d H:i') ?? '-' }} + 수정