[권한 시스템 개선] 권한 데이터 접근 방식을 computed로 변경하고, 리소스별 접근 함수 추가

composables/usePermission.ts

@@ -39,7 +39,15 @@ export const usePermission = () => {
       ),
 
     // 권한 데이터 직접 접근
-    permissions: permissionsStore.permissions,
-    isLoading: permissionsStore.isLoading,
+    permissions: computed(() => permissionsStore.permissions),
+    resources: computed(() => permissionsStore.permissions?.resources),
+    isLoading: computed(() => permissionsStore.isLoading),
+
+    // 리소스별 전체 접근 함수
+    getPageGroups: () =>
+      permissionsStore.permissions?.resources?.pageGroups || [],
+    getPages: () => permissionsStore.permissions?.resources?.pages || [],
+    getComponents: () =>
+      permissionsStore.permissions?.resources?.components || [],
   };
 };

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

@@ -32,7 +32,7 @@
           </p>
           <p>
             <strong>권한 로딩:</strong>
-            {{ permission.isLoading ? "로딩 중..." : "완료" }}
+            {{ permission.isLoading.value ? "로딩 중..." : "완료" }}
           </p>
           <p v-if="!userStore.isLoggedIn" class="text-orange-600 text-sm">
             <strong>참고:</strong> 로그인이 필요합니다. 로그인 후 권한 데이터가
@@ -213,6 +213,18 @@
                   >보기 버튼 (권한 없음)</span
                 >
               </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
+                >
+              </div>
             </div>
           </div>
 
@@ -468,7 +480,7 @@
             </h4>
             <ul class="space-y-1">
               <li
-                v-for="page in permission.permissions.resources.pages"
+                v-for="page in pages"
                 :key="page.oid"
                 class="text-sm bg-white p-2 rounded border"
               >
@@ -485,7 +497,7 @@
             </h4>
             <ul class="space-y-1">
               <li
-                v-for="pageGroup in permission.permissions.resources.pageGroups"
+                v-for="pageGroup in pageGroups"
                 :key="pageGroup.oid"
                 class="text-sm bg-white p-2 rounded border"
               >
@@ -504,7 +516,7 @@
             </h4>
             <ul class="space-y-1">
               <li
-                v-for="component in permission.permissions.resources.components"
+                v-for="component in components"
                 :key="component.oid"
                 class="text-sm bg-white p-2 rounded border"
               >
@@ -565,6 +577,11 @@ definePageMeta({
 const permission = usePermission();
 const userStore = useUserStore();
 
+// 리소스 데이터를 computed로 선언
+const pageGroups = computed(() => permission.getPageGroups());
+const pages = computed(() => permission.getPages());
+const components = computed(() => permission.getComponents());
+
 // 이 페이지는 /test 경로이므로 페이지 권한이 필요합니다
 // middleware/auth.ts에서 자동으로 권한을 체크합니다
 // 로그인 시 권한 데이터가 자동으로 로드됩니다