권한, 사용자, 메뉴 등에 대한 기능 업데이트

frontend/components/common/RoleManageModal.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5)">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header bg-primary text-white">
+          <h5 class="modal-title">
+            <i class="bi bi-shield-lock me-2"></i>권한관리
+          </h5>
+          <button type="button" class="btn-close btn-close-white" @click="$emit('close')"></button>
+        </div>
+        <div class="modal-body">
+          <!-- 상단 버튼 -->
+          <div class="d-flex justify-content-between align-items-center mb-3">
+            <span>권한 목록 총 <strong>{{ roles.length }}</strong>건</span>
+            <div>
+              <button class="btn btn-primary btn-sm me-2" @click="showAddForm = true" v-if="!showAddForm">
+                <i class="bi bi-plus-lg me-1"></i>신규
+              </button>
+              <button 
+                class="btn btn-outline-danger btn-sm" 
+                @click="deleteSelected"
+                :disabled="selectedIds.length === 0"
+              >
+                <i class="bi bi-trash me-1"></i>선택 삭제
+              </button>
+            </div>
+          </div>
+
+          <!-- 신규 추가 폼 -->
+          <div v-if="showAddForm" class="card mb-3 border-primary">
+            <div class="card-body">
+              <div class="row g-2 align-items-end">
+                <div class="col-md-4">
+                  <label class="form-label small">권한코드 *</label>
+                  <input type="text" class="form-control form-control-sm" v-model="newRole.roleCode" placeholder="ROLE_XXX" />
+                </div>
+                <div class="col-md-4">
+                  <label class="form-label small">권한명 *</label>
+                  <input type="text" class="form-control form-control-sm" v-model="newRole.roleName" placeholder="권한명" />
+                </div>
+                <div class="col-md-4">
+                  <button class="btn btn-primary btn-sm me-1" @click="createRole" :disabled="isCreating">
+                    <span v-if="isCreating" class="spinner-border spinner-border-sm me-1"></span>
+                    저장
+                  </button>
+                  <button class="btn btn-secondary btn-sm" @click="cancelAdd">취소</button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 권한 목록 테이블 -->
+          <div class="table-responsive">
+            <table class="table table-sm table-bordered table-hover mb-0">
+              <thead class="table-light">
+                <tr>
+                  <th style="width: 40px" class="text-center">
+                    <input type="checkbox" class="form-check-input" v-model="selectAll" @change="toggleSelectAll" />
+                  </th>
+                  <th style="width: 50px" class="text-center">No</th>
+                  <th style="width: 180px">권한코드</th>
+                  <th>권한명</th>
+                  <th style="width: 80px" class="text-center">사용자 수</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-if="isLoading">
+                  <td colspan="5" class="text-center py-4">
+                    <span class="spinner-border spinner-border-sm me-2"></span>로딩 중...
+                  </td>
+                </tr>
+                <tr v-else v-for="(role, idx) in roles" :key="role.role_id">
+                  <td class="text-center">
+                    <input 
+                      type="checkbox" 
+                      class="form-check-input"
+                      :value="role.role_id"
+                      v-model="selectedIds"
+                      :disabled="isProtectedRole(role.role_code)"
+                    />
+                  </td>
+                  <td class="text-center">{{ idx + 1 }}</td>
+                  <td>
+                    <input 
+                      type="text" 
+                      class="form-control form-control-sm border-0 bg-transparent"
+                      v-model="role.role_code"
+                      :disabled="isProtectedRole(role.role_code)"
+                      @blur="updateRole(role)"
+                    />
+                  </td>
+                  <td>
+                    <input 
+                      type="text" 
+                      class="form-control form-control-sm border-0 bg-transparent"
+                      v-model="role.role_name"
+                      @blur="updateRole(role)"
+                    />
+                  </td>
+                  <td class="text-center">{{ role.user_count }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" @click="$emit('close')">닫기</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(['close', 'updated'])
+
+const isLoading = ref(true)
+const isCreating = ref(false)
+const roles = ref<any[]>([])
+const selectedIds = ref<number[]>([])
+const selectAll = ref(false)
+const showAddForm = ref(false)
+
+const newRole = ref({
+  roleCode: '',
+  roleName: ''
+})
+
+const protectedRoles = ['ROLE_ADMIN', 'ROLE_MANAGER', 'ROLE_USER']
+
+function isProtectedRole(code: string): boolean {
+  return protectedRoles.includes(code)
+}
+
+onMounted(() => {
+  loadRoles()
+})
+
+async function loadRoles() {
+  try {
+    isLoading.value = true
+    const response = await $fetch<any>('/api/admin/role/list')
+    roles.value = response.roles || []
+  } catch (e) {
+    console.error(e)
+    alert('권한 목록을 불러오는데 실패했습니다.')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function toggleSelectAll() {
+  if (selectAll.value) {
+    selectedIds.value = roles.value
+      .filter(r => !isProtectedRole(r.role_code))
+      .map(r => r.role_id)
+  } else {
+    selectedIds.value = []
+  }
+}
+
+function cancelAdd() {
+  showAddForm.value = false
+  newRole.value = { roleCode: '', roleName: '' }
+}
+
+async function createRole() {
+  if (!newRole.value.roleCode || !newRole.value.roleName) {
+    alert('권한코드와 권한명은 필수입니다.')
+    return
+  }
+  
+  try {
+    isCreating.value = true
+    await $fetch('/api/admin/role/create', {
+      method: 'POST',
+      body: newRole.value
+    })
+    cancelAdd()
+    await loadRoles()
+    emit('updated')
+  } catch (e: any) {
+    alert(e.data?.message || '권한 생성에 실패했습니다.')
+  } finally {
+    isCreating.value = false
+  }
+}
+
+async function updateRole(role: any) {
+  try {
+    await $fetch(`/api/admin/role/${role.role_id}/update`, {
+      method: 'PUT',
+      body: {
+        roleName: role.role_name
+      }
+    })
+    emit('updated')
+  } catch (e: any) {
+    alert(e.data?.message || '권한 수정에 실패했습니다.')
+    await loadRoles()
+  }
+}
+
+async function deleteSelected() {
+  if (selectedIds.value.length === 0) return
+  
+  if (!confirm(`선택한 ${selectedIds.value.length}개의 권한을 삭제하시겠습니까?`)) return
+  
+  try {
+    for (const id of selectedIds.value) {
+      await $fetch(`/api/admin/role/${id}/delete`, { method: 'DELETE' })
+    }
+    selectedIds.value = []
+    selectAll.value = false
+    await loadRoles()
+    emit('updated')
+  } catch (e: any) {
+    alert(e.data?.message || '권한 삭제에 실패했습니다.')
+    await loadRoles()
+  }
+}
+</script>
+
+<style scoped>
+.form-check-input {
+  cursor: pointer;
+}
+.form-control:disabled {
+  background-color: transparent;
+}
+</style>