[UI 개선] PermissionButton 컴포넌트를 새로 추가하여 권한 체크 및 클릭 이벤트 처리를 간소화하고, 테스트 페이지에서 사용 예시를 추가함

components/base/PermissionButton.vue

@@ -0,0 +1,95 @@
+<template>
+  <button
+    v-if="hasPermission"
+    v-bind="$attrs"
+    :class="buttonClass"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <slot>{{ buttonText }}</slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  /** 버튼 코드 (권한 체크용) */
+  buttonCode: string;
+  /** 버튼 비활성화 여부 */
+  disabled?: boolean;
+  /** 추가 CSS 클래스 */
+  class?: string;
+}
+
+interface Emits {
+  /** 클릭 이벤트 */
+  (e: "click", event: MouseEvent): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  class: "",
+});
+
+const emit = defineEmits<Emits>();
+
+// 권한 체크 - usePermission composable만 사용
+const permission = usePermission();
+const hasPermission = computed(() =>
+  permission.hasComponentPermission(props.buttonCode)
+);
+
+// 버튼 텍스트 가져오기 - usePermission composable 사용
+const buttonText = computed(() => {
+  const component = permission.getResourceByCode(props.buttonCode);
+  return component?.name || props.buttonCode;
+});
+
+// 버튼 클래스 계산
+const buttonClass = computed(() => {
+  const baseClass = "permission-button";
+  const disabledClass = props.disabled ? "permission-button--disabled" : "";
+  const customClass = props.class || "";
+
+  return [baseClass, disabledClass, customClass].filter(Boolean).join(" ");
+});
+
+// 클릭 이벤트 처리
+const handleClick = (event: MouseEvent) => {
+  if (!props.disabled && hasPermission.value) {
+    emit("click", event);
+  }
+};
+</script>
+
+<style scoped>
+.permission-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  background-color: #3b82f6;
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  outline: none;
+  user-select: none;
+  min-height: 36px;
+}
+
+.permission-button:hover:not(.permission-button--disabled) {
+  background-color: #2563eb;
+}
+
+.permission-button:focus {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+.permission-button--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>