[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>

pages/[tabId]/test/permission-test.vue

@@ -143,87 +143,52 @@
             </p>
             <div class="space-y-3">
               <div class="flex items-center space-x-2">
-                <button
+                <PermissionButton
-                  v-if="permission.hasComponentPermission('C010105')"
+                  button-code="C010105"
-                  class="bg-green-500 text-white px-3 py-1 rounded text-sm hover:bg-green-600"
+                  @click="handleButtonClick('C010105')"
-                >
+                />
-                  생성 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >생성 버튼 (권한 없음)</span
-                >
               </div>
 
               <div class="flex items-center space-x-2">
-                <button
+                <PermissionButton
-                  v-if="permission.hasComponentPermission('C010102')"
+                  button-code="C010102"
-                  class="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600"
+                  @click="handleButtonClick('C010102')"
-                >
+                />
-                  수정 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >수정 버튼 (권한 없음)</span
-                >
               </div>
 
               <div class="flex items-center space-x-2">
-                <button
+                <PermissionButton
-                  v-if="permission.hasComponentPermission('C010101')"
+                  button-code="C010101"
-                  class="bg-red-500 text-white px-3 py-1 rounded text-sm hover:bg-red-600"
+                  @click="handleButtonClick('C010101')"
-                >
+                />
-                  삭제 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >삭제 버튼 (권한 없음)</span
-                >
               </div>
 
               <div class="flex items-center space-x-2">
-                <button
+                <PermissionButton
-                  v-if="permission.hasComponentPermission('C010103')"
+                  button-code="C010103"
-                  class="bg-purple-500 text-white px-3 py-1 rounded text-sm hover:bg-purple-600"
+                  @click="handleButtonClick('C010103')"
-                >
+                />
-                  내보내기 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >내보내기 버튼 (권한 없음)</span
-                >
               </div>
 
               <div class="flex items-center space-x-2">
-                <button
+                <PermissionButton
-                  v-if="permission.hasComponentPermission('C010104')"
+                  button-code="C010104"
-                  class="bg-orange-500 text-white px-3 py-1 rounded text-sm hover:bg-orange-600"
+                  @click="handleButtonClick('C010104')"
-                >
+                />
-                  가져오기 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >가져오기 버튼 (권한 없음)</span
-                >
               </div>
 
               <div class="flex items-center space-x-2">
-                <button
+                <PermissionButton
-                  v-if="permission.hasComponentPermission('C010106')"
+                  button-code="C010106"
-                  class="bg-gray-500 text-white px-3 py-1 rounded text-sm hover:bg-gray-600"
+                  @click="handleButtonClick('C010106')"
-                >
+                />
-                  보기 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >보기 버튼 (권한 없음)</span
-                >
               </div>
 
               <div class="flex items-center space-x-2">
-                <button
+                <PermissionButton
-                  v-if="permission.hasComponentPermission('C010122')"
+                  button-code="C010122"
-                  class="bg-gray-500 text-white px-3 py-1 rounded text-sm hover:bg-gray-600"
+                  @click="handleButtonClick('C010122')"
-                >
+                />
-                  다운로드 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >다운로드 버튼 (권한 없음)</span
-                >
               </div>
             </div>
           </div>
@@ -532,6 +497,73 @@
         </div>
       </div>
 
+      <!-- PermissionButton 컴포넌트 사용 예시 -->
+      <div class="bg-green-50 border border-green-200 rounded-lg p-6 mb-6">
+        <h3 class="text-lg font-semibold text-green-800 mb-4">
+          PermissionButton 컴포넌트 사용 예시
+        </h3>
+        <div class="space-y-4">
+          <div>
+            <h4 class="font-medium text-green-700 mb-2">기본 사용법</h4>
+            <div class="flex flex-wrap gap-2">
+              <PermissionButton
+                button-code="C010101"
+                @click="handleButtonClick('C010101')"
+              />
+              <PermissionButton
+                button-code="C010102"
+                @click="handleButtonClick('C010102')"
+              />
+              <PermissionButton
+                button-code="C010103"
+                @click="handleButtonClick('C010103')"
+              />
+              <PermissionButton
+                button-code="C010104"
+                @click="handleButtonClick('C010104')"
+              />
+              <PermissionButton
+                button-code="C010105"
+                @click="handleButtonClick('C010105')"
+              />
+              <PermissionButton
+                button-code="C010106"
+                @click="handleButtonClick('C010106')"
+              />
+            </div>
+            <p class="text-sm text-green-600 mt-2">
+              버튼 텍스트는 권한 코드에서 자동으로 가져옵니다.
+            </p>
+          </div>
+
+          <div>
+            <h4 class="font-medium text-green-700 mb-2">비활성화 상태</h4>
+            <div class="flex flex-wrap gap-2">
+              <PermissionButton
+                button-code="C010104"
+                :disabled="true"
+                @click="handleButtonClick('C010104')"
+              />
+            </div>
+          </div>
+
+          <div>
+            <h4 class="font-medium text-green-700 mb-2">
+              권한이 없는 버튼 (표시되지 않음)
+            </h4>
+            <div class="flex flex-wrap gap-2">
+              <PermissionButton
+                button-code="C999999"
+                @click="handleButtonClick('C999999')"
+              />
+              <span class="text-gray-500 text-sm"
+                >↑ 이 버튼은 권한이 없어서 표시되지 않습니다</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+
       <!-- 사용법 가이드 -->
       <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
         <h3 class="text-lg font-semibold text-yellow-800 mb-3">
@@ -554,6 +586,12 @@
             <strong>컴포넌트 권한:</strong> 버튼 등 UI 컴포넌트의 표시 여부를
             제어합니다. 권한이 없으면 컴포넌트가 렌더링되지 않습니다.
           </p>
+          <p>
+            <strong>PermissionButton 컴포넌트:</strong> 권한 체크와 클릭
+            이벤트를 자동으로 처리하는 재사용 가능한 버튼 컴포넌트입니다.
+            buttonCode prop으로 권한을 체크하고, 권한이 있을 때만 버튼이
+            표시됩니다.
+          </p>
           <p>
             <strong>백엔드 연동:</strong> 나중에 백엔드 API가 준비되면
             <code>stores/permissions.ts</code>의
@@ -567,6 +605,9 @@
 </template>
 
 <script setup lang="ts">
+// 컴포넌트 import
+import PermissionButton from "~/components/base/PermissionButton.vue";
+
 // 페이지 메타데이터 설정
 definePageMeta({
   title: "권한 시스템 테스트",
@@ -585,4 +626,10 @@ const components = computed(() => permission.getComponents());
 // 이 페이지는 /test 경로이므로 페이지 권한이 필요합니다
 // middleware/auth.ts에서 자동으로 권한을 체크합니다
 // 로그인 시 권한 데이터가 자동으로 로드됩니다
+
+// 버튼 클릭 핸들러
+const handleButtonClick = (buttonCode: string) => {
+  console.log(`버튼 클릭됨: ${buttonCode}`);
+  alert(`${buttonCode} 버튼이 클릭되었습니다!`);
+};
 </script>