leejisun9/bio_frontend
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[로딩 시스템 추가] 전역 로딩 오버레이 및 상태 관리 스토어 구현, 로딩 카운터 방식으로 비동기 작업 관리 기능 추가

Browse Source
This commit is contained in:
sohot8653
2025-09-24 10:53:08 +09:00
parent 1229faa777
commit b866242d43
7 changed files with 571 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
pages/[tabId]/test/loading-test.vue Normal file
View File

@@ -0,0 +1,205 @@
<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>