bio_frontend/pages/[tabId]/test/loading-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-4xl 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-white p-6 rounded-lg shadow-lg mb-8">
        <h2 class="text-2xl font-semibold mb-4">현재 로딩 상태</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="space-y-2">
            <p>
              <strong>로딩 중:</strong>
              <span :class="isLoading ? 'text-green-600' : 'text-red-600'">
                {{ isLoading ? "예" : "아니오" }}
              </span>
            </p>
            <p><strong>로딩 카운트:</strong> {{ loadingCount }}</p>
            <p><strong>현재 메시지:</strong> {{ currentMessage }}</p>
          </div>
          <div class="space-y-2">
            <p><strong>진행 중인 작업:</strong></p>
            <ul
              v-if="loadingMessages.length > 0"
              class="list-disc list-inside space-y-1"
            >
              <li
                v-for="(message, index) in loadingMessages"
                :key="index"
                class="text-sm"
              >
                {{ message }}
              </li>
            </ul>
            <p v-else class="text-gray-500 text-sm">없음</p>
          </div>
        </div>
      </div>

      <!-- 테스트 버튼들 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- 단일 로딩 테스트 -->
        <div class="bg-white p-6 rounded-lg shadow-lg">
          <h3 class="text-xl font-semibold mb-4">단일 로딩 테스트</h3>
          <div class="space-y-3">
            <button
              class="w-full bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-colors"
              :disabled="isLoading"
              @click="testSingleLoading"
            >
              단일 작업 로딩 (2초)
            </button>
          </div>
        </div>

        <!-- 다중 로딩 테스트 -->
        <div class="bg-white p-6 rounded-lg shadow-lg">
          <h3 class="text-xl font-semibold mb-4">다중 로딩 테스트</h3>
          <div class="space-y-3">
            <button
              class="w-full bg-purple-500 hover:bg-purple-600 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-colors"
              :disabled="isLoading"
              @click="testMultipleLoading"
            >
              동시 다중 작업 (1초, 2초, 3초)
            </button>

            <button
              class="w-full bg-orange-500 hover:bg-orange-600 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-colors"
              :disabled="isLoading"
              @click="testSequentialLoading"
            >
              순차 다중 작업 (각 1초씩)
            </button>
          </div>
        </div>

        <!-- 권한 로딩 테스트 -->
        <div class="bg-white p-6 rounded-lg shadow-lg">
          <h3 class="text-xl font-semibold mb-4">권한 로딩 테스트</h3>
          <div class="space-y-3">
            <button
              class="w-full bg-indigo-500 hover:bg-indigo-600 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-colors"
              :disabled="isLoading"
              @click="testPermissionLoading"
            >
              권한 데이터 로드
            </button>

            <button
              class="w-full bg-pink-500 hover:bg-pink-600 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-colors"
              :disabled="isLoading"
              @click="testPermissionWithOtherLoading"
            >
              권한 + 다른 작업 동시 실행
            </button>
          </div>
        </div>

        <!-- 제어 버튼들 -->
        <div class="bg-white p-6 rounded-lg shadow-lg">
          <h3 class="text-xl font-semibold mb-4">로딩 제어</h3>
          <div class="space-y-3">
            <button
              class="w-full bg-red-500 hover:bg-red-600 text-white font-medium py-3 px-4 rounded-lg transition-colors"
              @click="clearAllLoading"
            >
              모든 로딩 강제 종료
            </button>

            <button
              class="w-full bg-gray-500 hover:bg-gray-600 text-white font-medium py-3 px-4 rounded-lg transition-colors"
              @click="resetLoading"
            >
              로딩 상태 리셋
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const {
  isLoading,
  loadingCount,
  currentMessage,
  loadingMessages,
  withLoading,
  clearAll,
  reset,
} = useLoading();

// 단일 로딩 테스트
const testSingleLoading = async () => {
  await withLoading(async () => {
    await new Promise(resolve => setTimeout(resolve, 2000));
  }, "단일 작업 실행 중...");
};

// 동시 다중 작업 로딩 테스트
const testMultipleLoading = async () => {
  const tasks = [
    { name: "작업 1", duration: 1000 },
    { name: "작업 2", duration: 2000 },
    { name: "작업 3", duration: 3000 },
  ];

  // 모든 작업을 동시에 시작
  const promises = tasks.map(task =>
    withLoading(async () => {
      await new Promise(resolve => setTimeout(resolve, task.duration));
    }, `${task.name} 실행 중...`)
  );

  await Promise.all(promises);
};

// 순차 다중 로딩 테스트
const testSequentialLoading = async () => {
  const tasks = ["작업 A", "작업 B", "작업 C"];

  for (const task of tasks) {
    await withLoading(async () => {
      await new Promise(resolve => setTimeout(resolve, 1000));
    }, `${task} 실행 중...`);
  }
};

// 권한 로딩 테스트
const testPermissionLoading = async () => {
  const permissionsStore = usePermissionsStore();
  await permissionsStore.fetchPermissions();
};

// 권한 + 다른 작업 동시 실행
const testPermissionWithOtherLoading = async () => {
  // 권한 로딩과 다른 작업을 동시에 실행
  await Promise.all([
    usePermissionsStore().fetchPermissions(),
    withLoading(async () => {
      await new Promise(resolve => setTimeout(resolve, 1500));
    }, "다른 작업 실행 중..."),
  ]);
};

// 로딩 제어 함수들
const clearAllLoading = () => {
  clearAll();
};

const resetLoading = () => {
  reset();
};
</script>