feat. 환경 세팅

layers/components/molecules/loading/Local.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useLoadingStore } from "#layers/stores/useLoadingStore";
+
+const loadingStore = useLoadingStore();
+const { localLoadings } = storeToRefs(loadingStore);
+</script>
+
+<template>
+  <template v-for="[localId, loadingInfo] in localLoadings" :key="localId">
+    <Teleport v-if="canTeleport(localId)" :to="`#${localId}`">
+      <Transition
+        enter-active-class="transition-opacity duration-300 ease-in-out"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition-opacity duration-300 ease-in-out"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="loadingInfo.active"
+          class="fixed inset-0 bg-black/80 flex items-center justify-center z-[9999]"
+        >
+          <!-- 메인 스피너 -->
+          <div class="relative w-16 h-16">
+            <!-- 외부 링 -->
+            <div
+              class="absolute inset-0 border-4 border-transparent border-t-blue-500 rounded-full animate-spin"
+            ></div>
+            <!-- 중간 링 -->
+            <div
+              class="absolute inset-1 border-4 border-transparent border-t-purple-500 rounded-full animate-spin"
+              style="animation-delay: -0.3s"
+            ></div>
+            <!-- 내부 링 -->
+            <div
+              class="absolute inset-2 border-4 border-transparent border-t-cyan-500 rounded-full animate-spin"
+              style="animation-delay: -0.6s"
+            ></div>
+            <!-- 중심 링 -->
+            <div
+              class="absolute inset-3 border-4 border-transparent border-t-emerald-500 rounded-full animate-spin"
+              style="animation-delay: -0.9s"
+            ></div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </template>
+</template>