From d278b635e7185387daf60e6db2db678bf7e34103 Mon Sep 17 00:00:00 2001
From: sohot8653 <kmbin92@stam.kr>
Date: Wed, 24 Sep 2025 09:08:08 +0900
Subject: [PATCH] =?UTF-8?q?[UI=20=EA=B0=9C=EC=84=A0]=20PermissionButton=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EC=83=88?=
 =?UTF-8?q?=EB=A1=9C=20=EC=B6=94=EA=B0=80=ED=95=98=EC=97=AC=20=EA=B6=8C?=
 =?UTF-8?q?=ED=95=9C=20=EC=B2=B4=ED=81=AC=20=EB=B0=8F=20=ED=81=B4=EB=A6=AD?=
 =?UTF-8?q?=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=B2=98=EB=A6=AC=EB=A5=BC=20?=
 =?UTF-8?q?=EA=B0=84=EC=86=8C=ED=99=94=ED=95=98=EA=B3=A0,=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EC=82=AC=EC=9A=A9=20=EC=98=88=EC=8B=9C=EB=A5=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/base/PermissionButton.vue   |  95 ++++++++++++++
 pages/[tabId]/test/permission-test.vue | 173 ++++++++++++++++---------
 2 files changed, 205 insertions(+), 63 deletions(-)
 create mode 100644 components/base/PermissionButton.vue

diff --git a/components/base/PermissionButton.vue b/components/base/PermissionButton.vue
new file mode 100644
index 0000000..49378fc
--- /dev/null
+++ b/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>
diff --git a/pages/[tabId]/test/permission-test.vue b/pages/[tabId]/test/permission-test.vue
index fe91f4f..62746f3 100644
--- a/pages/[tabId]/test/permission-test.vue
+++ b/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
-                  v-if="permission.hasComponentPermission('C010105')"
-                  class="bg-green-500 text-white px-3 py-1 rounded text-sm hover:bg-green-600"
-                >
-                  생성 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >생성 버튼 (권한 없음)</span
-                >
+                <PermissionButton
+                  button-code="C010105"
+                  @click="handleButtonClick('C010105')"
+                />
               </div>
 
               <div class="flex items-center space-x-2">
-                <button
-                  v-if="permission.hasComponentPermission('C010102')"
-                  class="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600"
-                >
-                  수정 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >수정 버튼 (권한 없음)</span
-                >
+                <PermissionButton
+                  button-code="C010102"
+                  @click="handleButtonClick('C010102')"
+                />
               </div>
 
               <div class="flex items-center space-x-2">
-                <button
-                  v-if="permission.hasComponentPermission('C010101')"
-                  class="bg-red-500 text-white px-3 py-1 rounded text-sm hover:bg-red-600"
-                >
-                  삭제 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >삭제 버튼 (권한 없음)</span
-                >
+                <PermissionButton
+                  button-code="C010101"
+                  @click="handleButtonClick('C010101')"
+                />
               </div>
 
               <div class="flex items-center space-x-2">
-                <button
-                  v-if="permission.hasComponentPermission('C010103')"
-                  class="bg-purple-500 text-white px-3 py-1 rounded text-sm hover:bg-purple-600"
-                >
-                  내보내기 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >내보내기 버튼 (권한 없음)</span
-                >
+                <PermissionButton
+                  button-code="C010103"
+                  @click="handleButtonClick('C010103')"
+                />
               </div>
 
               <div class="flex items-center space-x-2">
-                <button
-                  v-if="permission.hasComponentPermission('C010104')"
-                  class="bg-orange-500 text-white px-3 py-1 rounded text-sm hover:bg-orange-600"
-                >
-                  가져오기 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >가져오기 버튼 (권한 없음)</span
-                >
+                <PermissionButton
+                  button-code="C010104"
+                  @click="handleButtonClick('C010104')"
+                />
               </div>
 
               <div class="flex items-center space-x-2">
-                <button
-                  v-if="permission.hasComponentPermission('C010106')"
-                  class="bg-gray-500 text-white px-3 py-1 rounded text-sm hover:bg-gray-600"
-                >
-                  보기 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >보기 버튼 (권한 없음)</span
-                >
+                <PermissionButton
+                  button-code="C010106"
+                  @click="handleButtonClick('C010106')"
+                />
               </div>
 
               <div class="flex items-center space-x-2">
-                <button
-                  v-if="permission.hasComponentPermission('C010122')"
-                  class="bg-gray-500 text-white px-3 py-1 rounded text-sm hover:bg-gray-600"
-                >
-                  다운로드 버튼
-                </button>
-                <span v-else class="text-gray-400 text-sm"
-                  >다운로드 버튼 (권한 없음)</span
-                >
+                <PermissionButton
+                  button-code="C010122"
+                  @click="handleButtonClick('C010122')"
+                />
               </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>