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

<template>
  <div
    class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4"
  >
    <div class="max-w-6xl mx-auto">
      <!-- 페이지 헤더 -->
      <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
          권한 시스템 테스트
        </h1>
        <p class="text-xl text-gray-600">
          페이지 권한, 메뉴 권한, 컴포넌트 권한의 동작을 테스트할 수 있습니다
        </p>
      </div>

      <!-- 현재 상태 표시 -->
      <div class="bg-gray-100 p-4 rounded-lg mb-6">
        <h2 class="text-xl font-semibold mb-2">현재 상태</h2>
        <div class="space-y-2">
          <p>
            <strong>로그인 상태:</strong>
            <span
              :class="userStore.isLoggedIn ? 'text-green-600' : 'text-red-600'"
            >
              {{ userStore.isLoggedIn ? "로그인됨" : "로그인 안됨" }}
            </span>
          </p>
          <p v-if="userStore.user">
            <strong>사용자:</strong> {{ userStore.user.name }} ({{
              userStore.user.userId
            }})
          </p>
          <p>
            <strong>권한 로딩:</strong>
            {{ permission.isLoading.value ? "로딩 중..." : "완료" }}
          </p>
          <p v-if="!userStore.isLoggedIn" class="text-orange-600 text-sm">
            <strong>참고:</strong> 로그인이 필요합니다. 로그인 후 권한 데이터가
            자동으로 로드됩니다.
          </p>
        </div>
      </div>

      <!-- 권한 테스트 섹션 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
        <!-- 좌측: 권한 상태 및 체크 -->
        <div class="lg:col-span-2 space-y-6">
          <!-- 현재 권한 상태 -->
          <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center mb-4">
              <div
                class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3"
              >
                <span class="text-white font-bold text-sm">1</span>
              </div>
              <h3 class="text-xl font-semibold text-gray-900">
                현재 권한 상태
              </h3>
            </div>
            <p class="text-gray-600 mb-4">
              현재 사용자의 권한 상태와 페이지 권한 체크를 확인합니다.
            </p>
            <div class="space-y-3">
              <div class="p-3 bg-gray-50 rounded border">
                <h4 class="font-medium text-gray-900 mb-2">기본 정보:</h4>
                <div class="space-y-1 text-sm">
                  <p>
                    <strong>현재 경로:</strong> <code>{{ $route.path }}</code>
                  </p>
                  <p>
                    <strong>로그인 상태:</strong>
                    <span
                      :class="
                        userStore.isLoggedIn ? 'text-green-600' : 'text-red-600'
                      "
                    >
                      {{ userStore.isLoggedIn ? "로그인됨" : "로그인 안됨" }}
                    </span>
                  </p>
                  <p v-if="userStore.user">
                    <strong>사용자:</strong> {{ userStore.user.name }} ({{
                      userStore.user.userId
                    }})
                  </p>
                </div>
              </div>

              <div class="p-3 bg-gray-50 rounded border">
                <h4 class="font-medium text-gray-900 mb-2">권한 체크 결과:</h4>
                <div class="space-y-1 text-sm">
                  <p>
                    <strong>페이지 권한({{ $route.path }}):</strong>
                    <span
                      :class="
                        permission.hasPagePermission($route.path)
                          ? 'text-green-600'
                          : 'text-red-600'
                      "
                    >
                      {{
                        permission.hasPagePermission($route.path)
                          ? "있음"
                          : "없음"
                      }}
                    </span>
                  </p>
                  <p>
                    <strong>테스트 페이지그룹 권한(PG01):</strong>
                    <span
                      :class="
                        permission.hasPageGroupPermission('PG01')
                          ? 'text-green-600'
                          : 'text-red-600'
                      "
                    >
                      {{
                        permission.hasPageGroupPermission("PG01")
                          ? "있음"
                          : "없음"
                      }}
                    </span>
                  </p>
                </div>
              </div>
            </div>
          </div>

          <!-- 권한별 버튼 테스트 -->
          <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center mb-4">
              <div
                class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-3"
              >
                <span class="text-white font-bold text-sm">2</span>
              </div>
              <h3 class="text-xl font-semibold text-gray-900">
                컴포넌트 권한 테스트
              </h3>
            </div>
            <p class="text-gray-600 mb-4">
              각 컴포넌트 권한에 따라 버튼이 표시되거나 숨겨지는 것을
              확인합니다.
            </p>
            <div class="space-y-3">
              <div class="flex items-center space-x-2">
                <PermissionButton
                  button-code="C010105"
                  @click="handleButtonClick('C010105')"
                />
              </div>

              <div class="flex items-center space-x-2">
                <PermissionButton
                  button-code="C010102"
                  @click="handleButtonClick('C010102')"
                />
              </div>

              <div class="flex items-center space-x-2">
                <PermissionButton
                  button-code="C010101"
                  @click="handleButtonClick('C010101')"
                />
              </div>

              <div class="flex items-center space-x-2">
                <PermissionButton
                  button-code="C010103"
                  @click="handleButtonClick('C010103')"
                />
              </div>

              <div class="flex items-center space-x-2">
                <PermissionButton
                  button-code="C010104"
                  @click="handleButtonClick('C010104')"
                />
              </div>

              <div class="flex items-center space-x-2">
                <PermissionButton
                  button-code="C010106"
                  @click="handleButtonClick('C010106')"
                />
              </div>

              <div class="flex items-center space-x-2">
                <PermissionButton
                  button-code="C010122"
                  @click="handleButtonClick('C010122')"
                />
              </div>
            </div>
          </div>

          <!-- 페이지그룹 권한 테스트 -->
          <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center mb-4">
              <div
                class="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center mr-3"
              >
                <span class="text-white font-bold text-sm">3</span>
              </div>
              <h3 class="text-xl font-semibold text-gray-900">
                페이지그룹 권한 테스트
              </h3>
            </div>
            <p class="text-gray-600 mb-4">
              페이지그룹 권한에 따라 메뉴가 표시되거나 숨겨지는 것을 확인합니다.
            </p>
            <div class="space-y-3">
              <div class="flex items-center space-x-2">
                <div
                  v-if="permission.hasPageGroupPermission('PG01')"
                  class="bg-blue-100 text-blue-800 px-3 py-1 rounded text-sm"
                >
                  테스트 페이지그룹
                </div>
                <span v-else class="text-gray-400 text-sm"
                  >테스트 페이지그룹 (권한 없음)</span
                >
              </div>

              <div class="flex items-center space-x-2">
                <div
                  v-if="permission.hasPageGroupPermission('PG02')"
                  class="bg-green-100 text-green-800 px-3 py-1 rounded text-sm"
                >
                  관리자 페이지그룹
                </div>
                <span v-else class="text-gray-400 text-sm"
                  >관리자 페이지그룹 (권한 없음)</span
                >
              </div>
            </div>
          </div>
        </div>

        <!-- 우측: 권한 체크 로직 테스트 -->
        <div class="lg:col-span-1">
          <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center mb-4">
              <div
                class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-3"
              >
                <span class="text-white font-bold text-sm">4</span>
              </div>
              <h3 class="text-xl font-semibold text-gray-900">
                권한 체크 로직
              </h3>
            </div>
            <p class="text-gray-600 mb-4">
              다양한 권한 체크 함수들의 동작을 테스트합니다.
            </p>

            <div class="space-y-4">
              <div class="p-3 bg-gray-50 rounded border">
                <h4 class="font-medium text-gray-900 mb-2 text-sm">
                  페이지 권한 체크:
                </h4>
                <p class="text-xs text-gray-600 mb-1">
                  <code>hasPagePermission('/admin/codes')</code>
                </p>
                <p
                  class="text-sm font-semibold"
                  :class="
                    permission.hasPagePermission('/admin/codes')
                      ? 'text-green-600'
                      : 'text-red-600'
                  "
                >
                  {{
                    permission.hasPagePermission("/admin/codes")
                      ? "true"
                      : "false"
                  }}
                </p>
              </div>

              <div class="p-3 bg-gray-50 rounded border">
                <h4 class="font-medium text-gray-900 mb-2 text-sm">
                  페이지그룹 권한 체크:
                </h4>
                <p class="text-xs text-gray-600 mb-1">
                  <code>hasPageGroupPermission('PG01')</code>
                </p>
                <p
                  class="text-sm font-semibold"
                  :class="
                    permission.hasPageGroupPermission('PG01')
                      ? 'text-green-600'
                      : 'text-red-600'
                  "
                >
                  {{
                    permission.hasPageGroupPermission("PG01") ? "true" : "false"
                  }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- API 권한 테스트 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <div class="flex items-center mb-4">
          <div
            class="w-10 h-10 bg-indigo-500 rounded-full flex items-center justify-center mr-3"
          >
            <span class="text-white font-bold text-sm">5</span>
          </div>
          <h3 class="text-xl font-semibold text-gray-900">
            페이지 권한 테스트
          </h3>
        </div>
        <p class="text-gray-600 mb-4">
          다양한 페이지 경로에 대한 권한을 테스트합니다. 권한이 없으면 홈으로
          리다이렉트됩니다.
        </p>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div
            v-for="pagePath in [
              '/',
              '/login',
              '/register',
              '/about',
              '/sampleList',
              '/admin/codes',
              '/admin/logs',
              '/admin/programs',
              '/admin/resource',
              '/test/permission-test',
              '/test/culture-graph',
              '/test/pathway',
              '/test/test01',
              '/test/common-test',
              '/popup/addSamplePopup',
              '/nonexistent',
            ]"
            :key="pagePath"
            class="p-3 rounded border text-center"
            :class="
              permission.hasPagePermission(pagePath)
                ? 'bg-green-50 border-green-200'
                : 'bg-red-50 border-red-200'
            "
          >
            <div class="text-sm font-medium text-gray-900 mb-1">
              {{ pagePath }}
            </div>
            <div
              class="text-xs"
              :class="
                permission.hasPagePermission(pagePath)
                  ? 'text-green-600'
                  : 'text-red-600'
              "
            >
              {{
                permission.hasPagePermission(pagePath)
                  ? "✓ 접근 가능"
                  : "✗ 접근 불가"
              }}
            </div>
          </div>
        </div>
        <div class="mt-4 p-3 bg-blue-50 rounded border">
          <p class="text-sm text-blue-800">
            <strong>참고:</strong> 실제로는 권한이 없는 경로에 접근하면 자동으로
            홈으로 리다이렉트됩니다. 이 페이지는
            <code>/test/permission-test</code> 경로로, 페이지 권한이 있어야
            접근할 수 있습니다.
          </p>
        </div>
      </div>

      <!-- 권한 데이터 표시 -->
      <div
        v-if="userStore.isLoggedIn"
        class="bg-white rounded-lg shadow-md p-6 mb-8"
      >
        <h3 class="text-xl font-semibold text-gray-900 mb-4">
          현재 권한 데이터
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <!-- 페이지 권한 -->
          <div class="bg-blue-50 p-4 rounded-lg">
            <h4 class="text-lg font-semibold mb-3 text-blue-800">
              페이지 권한
            </h4>
            <ul class="space-y-1">
              <li
                v-for="page in pages"
                :key="page.oid"
                class="text-sm bg-white p-2 rounded border"
              >
                <div class="font-medium">{{ page.name }} ({{ page.code }})</div>
                <div class="text-gray-600">{{ page.path }}</div>
              </li>
            </ul>
          </div>

          <!-- 페이지그룹 권한 -->
          <div class="bg-green-50 p-4 rounded-lg">
            <h4 class="text-lg font-semibold mb-3 text-green-800">
              페이지그룹 권한
            </h4>
            <ul class="space-y-1">
              <li
                v-for="pageGroup in pageGroups"
                :key="pageGroup.oid"
                class="text-sm bg-white p-2 rounded border"
              >
                <div class="font-medium">
                  {{ pageGroup.name }} ({{ pageGroup.code }})
                </div>
                <div class="text-gray-600">{{ pageGroup.description }}</div>
              </li>
            </ul>
          </div>

          <!-- 컴포넌트 권한 -->
          <div class="bg-purple-50 p-4 rounded-lg">
            <h4 class="text-lg font-semibold mb-3 text-purple-800">
              컴포넌트 권한
            </h4>
            <ul class="space-y-1">
              <li
                v-for="component in components"
                :key="component.oid"
                class="text-sm bg-white p-2 rounded border"
              >
                <div class="font-medium">
                  {{ component.name }} ({{ component.code }})
                </div>
                <div class="text-gray-600">
                  {{ component.componentType }} - {{ component.description }}
                </div>
              </li>
            </ul>
          </div>
        </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">
          권한 시스템 가이드
        </h3>
        <div class="text-yellow-700 space-y-2">
          <p>
            <strong>로그인 필요:</strong> 이 페이지를 사용하려면 먼저 로그인해야
            합니다. 로그인 시 가데이터 권한이 자동으로 로드됩니다.
          </p>
          <p>
            <strong>페이지 권한:</strong> 페이지 라우터 접근 권한을 제어합니다.
            권한이 없으면 홈으로 리다이렉트됩니다.
          </p>
          <p>
            <strong>페이지그룹 권한:</strong> 페이지그룹 표시 여부를 제어합니다.
            권한이 없으면 페이지그룹이 숨겨집니다.
          </p>
          <p>
            <strong>컴포넌트 권한:</strong> 버튼 등 UI 컴포넌트의 표시 여부를
            제어합니다. 권한이 없으면 컴포넌트가 렌더링되지 않습니다.
          </p>
          <p>
            <strong>PermissionButton 컴포넌트:</strong> 권한 체크와 클릭
            이벤트를 자동으로 처리하는 재사용 가능한 버튼 컴포넌트입니다.
            buttonCode prop으로 권한을 체크하고, 권한이 있을 때만 버튼이
            표시됩니다.
          </p>
          <p>
            <strong>백엔드 연동:</strong> 나중에 백엔드 API가 준비되면
            <code>stores/permissions.ts</code>의
            <code>fetchPermissions</code> 함수를 수정하여 실제 API를 호출하도록
            변경할 수 있습니다.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 컴포넌트 import
import PermissionButton from "~/components/base/PermissionButton.vue";

// 페이지 메타데이터 설정
definePageMeta({
  title: "권한 시스템 테스트",
  description:
    "페이지 권한, 메뉴 권한, 컴포넌트 권한의 동작을 테스트하는 페이지",
});

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에서 자동으로 권한을 체크합니다
// 로그인 시 권한 데이터가 자동으로 로드됩니다

// 버튼 클릭 핸들러
const handleButtonClick = (buttonCode: string) => {
  console.log(`버튼 클릭됨: ${buttonCode}`);
  alert(`${buttonCode} 버튼이 클릭되었습니다!`);
};
</script>