gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat. 환경 세팅

Browse Source
This commit is contained in:
김채린
2025-09-09 03:34:09 +00:00
parent 52b2b6719b
commit 9581e5d356
119 changed files with 13160 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
layers/components/molecules/Section.vue Normal file
View File

@@ -0,0 +1,29 @@
<script setup lang="ts">
import { useTemplateRegistry } from "#layers/composables/useTemplateRegistry";
import type { PageDataTemplate } from "#layers/types/api/pageData";
const props = defineProps<{ templates: PageDataTemplate[] }>();
const registry = useTemplateRegistry() as Record<string, { component: any }>;
const isShowTemplate = (template: PageDataTemplate) => {
return template?.components && Object.keys(template.components).length > 0;
};
</script>
<template>
<template
v-for="(template, index) in props.templates"
:key="template.template_code ?? index"
>
<section v-if="isShowTemplate(template)" class="relative">
<TemplatesBackground
v-if="template.components?.background"
:component-data="template.components?.background"
/>
<component
:is="registry[template.template_code]?.component"
:components="template.components"
/>
</section>
</template>
</template>

45
layers/components/molecules/loading/Full.vue Normal file
View File

@@ -0,0 +1,45 @@
<script setup lang="ts">
import { useLoadingStore } from "#layers/stores/useLoadingStore";
const loadingStore = useLoadingStore();
const { fullLoading } = storeToRefs(loadingStore);
</script>
<template>
<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="fullLoading"
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>
</template>

49
layers/components/molecules/loading/Local.vue Normal file
View File

@@ -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>