SamProject/sam-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI 개선: 테넌트 선택 헤더 이동 및 역할 권한 관리 개선

Browse Source 
- 테넌트 선택을 각 페이지에서 헤더로 통합 이동
- 페이지 제목 이모지 제거 및 상단 여백(mt-6) 축소
- 역할 권한 관리 페이지 레이아웃을 다른 페이지와 통일
- 메뉴명 스타일 개선 (depth 들여쓰기, └ 기호 적용)
- 상위 메뉴 컬럼 제거로 테이블 간소화
- RolePermissionService에 depth 계산 로직 추가
- pagination.js를 body 끝으로 이동하여 로딩 오류 해결
- 역할 선택 UI를 셀렉트박스에서 버튼 형태로 변경
- 역할 버튼 hover 효과 개선 (선택된 버튼 가독성 향상)

변경된 파일:
- resources/views/partials/header.blade.php: 테넌트 선택 UI 추가
- resources/views/dashboard|menus|users|departments|permissions|roles/index.blade.php: tenant-selector 제거, 여백 축소
- resources/views/layouts/app.blade.php: pagination.js 위치 변경
- app/Services/RolePermissionService.php: depth 계산 로직 추가
- resources/views/role-permissions/: 역할 권한 관리 페이지 개선
- routes/web.php, routes/api.php: 역할 권한 관리 라우트 추가
This commit is contained in:
권혁성
2025-11-25 15:21:48 +09:00
parent c921ef43f9
commit 2a9b697baf
19 changed files with 994 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
resources/views/dashboard/index.blade.php
View File

@@ -4,9 +4,6 @@
@section('page-title', '대시보드')
@section('content')
<!-- Tenant Selector -->
@include('partials.tenant-selector')
<!-- Welcome Card -->
<div class="bg-white rounded-lg shadow overflow-hidden mt-6">
<div class="p-6">

7
resources/views/departments/index.blade.php
View File

@@ -3,12 +3,9 @@
@section('title', '부서 관리')
@section('content')
<!-- Tenant Selector -->
@include('partials.tenant-selector')
<!-- 페이지 헤더 -->
<div class="flex justify-between items-center mt-6 mb-6">
<h1 class="text-2xl font-bold text-gray-800">🏢 부서 관리</h1>
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800">부서 관리</h1>
<a href="{{ route('departments.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
+ 새 부서
</a>

9
resources/views/layouts/app.blade.php
View File

@@ -7,7 +7,6 @@
<title>@yield('title', 'Dashboard') - {{ config('app.name') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script src="{{ asset('js/pagination.js') }}"></script>
@stack('styles')
</head>
<body class="bg-gray-100">
@@ -27,6 +26,14 @@
</div>
</div>
<!-- HTMX CSRF 토큰 설정 -->
<script>
document.body.addEventListener('htmx:configRequest', (event) => {
event.detail.headers['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
});
</script>
<script src="{{ asset('js/pagination.js') }}"></script>
@stack('scripts')
</body>
</html>

7
resources/views/menus/index.blade.php
View File

@@ -3,12 +3,9 @@
@section('title', '메뉴 관리')
@section('content')
<!-- Tenant Selector -->
@include('partials.tenant-selector')
<!-- 페이지 헤더 -->
<div class="flex justify-between items-center mt-6 mb-6">
<h1 class="text-2xl font-bold text-gray-800">📋 메뉴 관리</h1>
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800">메뉴 관리</h1>
<a href="{{ route('menus.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
+ 새 메뉴
</a>

52
resources/views/partials/header.blade.php
View File

@@ -1,10 +1,52 @@
<!-- Header -->
<header class="bg-white shadow-sm h-16 flex items-center justify-between px-6 border-b border-gray-200">
<!-- Page Title (좌측) -->
<div>
<h1 class="text-2xl font-semibold text-gray-900">
@yield('page-title', '대시보드')
</h1>
<!-- Tenant Selector (좌측) -->
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
<label for="tenant-select" class="text-sm font-medium text-gray-700">테넌트 선택:</label>
</div>
<form action="{{ route('tenant.switch') }}" method="POST" id="tenant-switch-form">
@csrf
<select
name="tenant_id"
id="tenant-select"
onchange="document.getElementById('tenant-switch-form').submit()"
class="border-gray-300 rounded-lg text-sm focus:ring-primary focus:border-primary min-w-[200px]"
>
<option value="all" {{ session('selected_tenant_id') === null ? 'selected' : '' }}>
전체 보기
</option>
@if($globalTenants->isNotEmpty())
<option disabled>─────────</option>
@endif
@foreach($globalTenants as $tenant)
<option value="{{ $tenant->id }}" {{ session('selected_tenant_id') == $tenant->id ? 'selected' : '' }}>
{{ $tenant->company_name }}
</option>
@endforeach
</select>
</form>
<!-- 현재 테넌트 정보 -->
@if(session('selected_tenant_id'))
@php
$currentTenant = $globalTenants->firstWhere('id', session('selected_tenant_id'));
@endphp
@if($currentTenant)
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary/10 text-primary">
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{{ $currentTenant->company_name }}
</span>
@endif
@else
<span class="text-xs text-gray-500">전체</span>
@endif
</div>
<!-- Right Side Actions -->

4
resources/views/partials/sidebar.blade.php
View File

@@ -102,8 +102,8 @@ class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:
</a>
</li>
<li>
<a href="#"
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100"
<a href="{{ route('role-permissions.index') }}"
class="flex items-center gap-2 pr-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ request()->routeIs('role-permissions.*') ? 'bg-primary text-white hover:bg-primary' : '' }}"
style="padding-left: 2rem;">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />

7
resources/views/permissions/index.blade.php
View File

@@ -3,12 +3,9 @@
@section('title', '권한 관리')
@section('content')
<!-- Tenant Selector -->
@include('partials.tenant-selector')
<!-- 페이지 헤더 -->
<div class="flex justify-between items-center mt-6 mb-6">
<h1 class="text-2xl font-bold text-gray-800">🛡️ 권한 관리</h1>
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800">권한 관리</h1>
<a href="{{ route('permissions.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
+ 새 권한
</a>

110
resources/views/role-permissions/index.blade.php Normal file
View File

@@ -0,0 +1,110 @@
@extends('layouts.app')
@section('title', '역할 권한 관리')
@section('content')
<!-- 페이지 헤더 -->
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800">역할 권한 관리</h1>
</div>
<!-- 역할 선택 버튼 -->
<div class="bg-white rounded-lg shadow-sm mb-6">
<div class="px-6 py-4">
<div class="flex flex-wrap items-center gap-3">
<span class="text-sm font-medium text-gray-700">역할 선택:</span>
@foreach($roles as $role)
<button
type="button"
class="role-button px-4 py-2 text-sm font-medium rounded-lg border transition-colors
{{ $loop->first ? 'bg-blue-700 text-white border-blue-700' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50' }}"
data-role-id="{{ $role->id }}"
data-role-name="{{ $role->name }}"
hx-get="/api/admin/role-permissions/matrix"
hx-target="#permission-matrix"
hx-vals='{"role_id": {{ $role->id }}}'
onclick="selectRole(this)"
>
{{ $role->name }}
</button>
@endforeach
</div>
</div>
</div>
<!-- 액션 버튼 -->
<div class="bg-white rounded-lg shadow-sm mb-6" id="action-buttons" style="display: none;">
<div class="px-6 py-4 border-b border-gray-200">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-700" id="selected-role-name">선택된 역할</span>
<div class="flex items-center gap-2">
<input type="hidden" name="role_id" id="roleIdInput" value="">
<button
type="button"
class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500"
hx-post="/api/admin/role-permissions/allow-all"
hx-target="#permission-matrix"
hx-include="[name='role_id']"
>
전체 허용
</button>
<button
type="button"
class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
hx-post="/api/admin/role-permissions/deny-all"
hx-target="#permission-matrix"
hx-include="[name='role_id']"
>
전체 거부
</button>
<button
type="button"
class="px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded-lg hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400"
hx-post="/api/admin/role-permissions/deny-all"
hx-target="#permission-matrix"
hx-include="[name='role_id']"
>
초기화
</button>
</div>
</div>
</div>
</div>
<!-- 권한 매트릭스 테이블 -->
<div id="permission-matrix" class="bg-white rounded-lg shadow-sm">
@include('role-permissions.partials.empty-state')
</div>
<script>
function selectRole(button) {
// 모든 버튼의 활성 상태 제거
document.querySelectorAll('.role-button').forEach(btn => {
btn.classList.remove('bg-blue-700', 'text-white', 'border-blue-700', 'hover:bg-blue-800');
btn.classList.add('bg-white', 'text-gray-700', 'border-gray-300', 'hover:bg-gray-50');
});
// 클릭된 버튼 활성화
button.classList.remove('bg-white', 'text-gray-700', 'border-gray-300', 'hover:bg-gray-50');
button.classList.add('bg-blue-700', 'text-white', 'border-blue-700', 'hover:bg-blue-800');
// 역할 정보 저장
const roleId = button.getAttribute('data-role-id');
const roleName = button.getAttribute('data-role-name');
document.getElementById('roleIdInput').value = roleId;
document.getElementById('selected-role-name').textContent = roleName + ' 역할';
// 액션 버튼 표시
document.getElementById('action-buttons').style.display = 'block';
}
// 페이지 로드 시 첫 번째 역할 자동 선택
document.addEventListener('DOMContentLoaded', function() {
const firstButton = document.querySelector('.role-button');
if (firstButton) {
firstButton.click();
}
});
</script>
@endsection

17
resources/views/role-permissions/partials/empty-state.blade.php Normal file
View File

@@ -0,0 +1,17 @@
<div class="px-6 py-12 text-center">
<div class="mx-auto max-w-lg">
<div class="mb-4 flex justify-center">
<div class="rounded-full bg-gray-100 p-3">
<svg class="h-6 w-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
</svg>
</div>
</div>
<h4 class="text-base font-semibold leading-6 text-gray-950">
역할을 선택해주세요
</h4>
<p class="mt-2 text-sm text-gray-600">
상단에서 역할을 선택하면 해당 역할의 권한을 설정할 수 있습니다.
</p>
</div>
</div>

66
resources/views/role-permissions/partials/permission-matrix.blade.php Normal file
View File

@@ -0,0 +1,66 @@
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 60px;">순번</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">메뉴명</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">URL</th>
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 70px;">순서</th>
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 70px;">조회</th>
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 70px;">생성</th>
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 70px;">수정</th>
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 70px;">삭제</th>
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 70px;">승인</th>
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 80px;">내보내기</th>
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider" style="width: 70px;">관리</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@php
$permissionTypes = ['view', 'create', 'update', 'delete', 'approve', 'export', 'manage'];
@endphp
@forelse($menus as $index => $menu)
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-center">
{{ $index + 1 }}
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center text-sm text-gray-900" style="padding-left: {{ ($menu->depth ?? 0) * 20 }}px;">
@if(($menu->depth ?? 0) > 0)
<span class="mr-2 text-gray-400">└</span>
@endif
<span>{{ $menu->name }}</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class="truncate max-w-xs inline-block" title="{{ $menu->url }}">
{{ $menu->url }}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-center">
{{ $menu->sort_order }}
</td>
@foreach($permissionTypes as $type)
<td class="px-6 py-4 whitespace-nowrap text-center">
<input
type="checkbox"
{{ isset($permissions[$menu->id][$type]) && $permissions[$menu->id][$type] ? 'checked' : '' }}
class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
hx-post="/api/admin/role-permissions/toggle"
hx-target="#permission-matrix"
hx-include="[name='role_id']"
hx-vals='{"menu_id": {{ $menu->id }}, "permission_type": "{{ $type }}"}'
>
</td>
@endforeach
</tr>
@empty
<tr>
<td colspan="11" class="px-6 py-12 text-center text-gray-500">
활성화된 메뉴가 없습니다.
</td>
</tr>
@endforelse
</tbody>
</table>
</div>

7
resources/views/roles/index.blade.php
View File

@@ -3,12 +3,9 @@
@section('title', '역할 관리')
@section('content')
<!-- Tenant Selector -->
@include('partials.tenant-selector')
<!-- 페이지 헤더 -->
<div class="flex justify-between items-center mt-6 mb-6">
<h1 class="text-2xl font-bold text-gray-800">🔑 역할 관리</h1>
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800">역할 관리</h1>
<a href="{{ route('roles.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
+ 새 역할
</a>

7
resources/views/users/index.blade.php
View File

@@ -3,12 +3,9 @@
@section('title', '사용자 관리')
@section('content')
<!-- Tenant Selector -->
@include('partials.tenant-selector')
<!-- 페이지 헤더 -->
<div class="flex justify-between items-center mt-6 mb-6">
<h1 class="text-2xl font-bold text-gray-800">👥 사용자 관리</h1>
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800">사용자 관리</h1>
<a href="{{ route('users.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
+ 새 사용자
</a>