fix. 폴더 구조 변경
This commit is contained in:
clkim
@@ -1,78 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
getResourcesData,
|
||||
getResponsiveClass,
|
||||
getResponsiveSrc,
|
||||
} from '#layers/utils/dataUtil'
|
||||
import type { PageDataComponent } from '#layers/types/api/pageData'
|
||||
|
||||
const props = defineProps<{
|
||||
componentData: PageDataComponent
|
||||
gradientClass?: string
|
||||
groupSets?: boolean
|
||||
}>()
|
||||
|
||||
const resourcesData = computed(() => {
|
||||
return getResourcesData({
|
||||
resources: props.componentData?.resources,
|
||||
groupSets: props.groupSets,
|
||||
})
|
||||
})
|
||||
const bgStyles = computed(() => {
|
||||
return getResponsiveSrc(resourcesData.value?.res_path, {
|
||||
resourcesType: 'bg',
|
||||
})
|
||||
})
|
||||
const videoSrc = computed(() => {
|
||||
return getResponsiveSrc(resourcesData.value?.res_path, {
|
||||
resourcesType: 'video',
|
||||
})
|
||||
})
|
||||
const posterSrc = computed(() => {
|
||||
return getResponsiveSrc(resourcesData.value?.res_path)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="absolute inset-0 w-full h-full">
|
||||
<!-- 이미지 타입-->
|
||||
<div
|
||||
v-if="resourcesData?.group_type === 'image'"
|
||||
class="w-full h-full bg-cover bg-center bg-no-repeat"
|
||||
:class="getResponsiveClass()"
|
||||
:style="bgStyles"
|
||||
/>
|
||||
|
||||
<!-- 비디오 타입 -->
|
||||
<template v-else-if="resourcesData?.group_type === 'video'">
|
||||
<!-- 모바일 비디오 (sm 미만) -->
|
||||
<video
|
||||
v-if="videoSrc?.mobileSrc"
|
||||
class="w-full h-full object-cover sm:hidden"
|
||||
:poster="posterSrc?.mobileSrc"
|
||||
autoplay
|
||||
muted
|
||||
loop
|
||||
playsinline
|
||||
>
|
||||
<source :src="videoSrc.mobileSrc" type="video/mp4" />
|
||||
<source :src="videoSrc.mobileSrc" type="video/webm" />
|
||||
</video>
|
||||
<!-- PC 비디오 (sm 이상) -->
|
||||
<video
|
||||
v-if="videoSrc?.pcSrc"
|
||||
class="w-full h-full object-cover hidden sm:block"
|
||||
:poster="posterSrc?.pcSrc"
|
||||
autoplay
|
||||
muted
|
||||
loop
|
||||
playsinline
|
||||
>
|
||||
<source :src="videoSrc.pcSrc" type="video/mp4" />
|
||||
<source :src="videoSrc.pcSrc" type="video/webm" />
|
||||
</video>
|
||||
</template>
|
||||
|
||||
<div class="absolute inset-0" :class="gradientClass" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,30 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { getResourcesData } from '#layers/utils/dataUtil'
|
||||
import type { PageDataComponent } from '#layers/types/api/pageData'
|
||||
|
||||
const props = defineProps<{
|
||||
componentData: PageDataComponent
|
||||
groupSets?: boolean
|
||||
}>()
|
||||
|
||||
const resourcesData = computed(() => {
|
||||
return getResourcesData({
|
||||
resources: props.componentData?.resources,
|
||||
isMultiple: true,
|
||||
groupSets: props.groupSets,
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="resourcesData">
|
||||
<AtomsButton v-for="button in resourcesData" :key="button.group_label">
|
||||
{{ button.btn_info?.txt_btn_name }}
|
||||
</AtomsButton>
|
||||
|
||||
<!-- :style="{
|
||||
backgroundColor: button.btn_info?.color_code_btn,
|
||||
color: button.btn_info?.color_code_txt,
|
||||
}" -->
|
||||
</template>
|
||||
</template>
|
||||
@@ -1,31 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { getResourcesData, getResponsiveSrc } from '#layers/utils/dataUtil'
|
||||
import type { PageDataComponent } from '#layers/types/api/pageData'
|
||||
|
||||
const props = defineProps<{
|
||||
componentData: PageDataComponent
|
||||
groupSets?: boolean
|
||||
}>()
|
||||
|
||||
const resourcesData = computed(() => {
|
||||
return getResourcesData({
|
||||
resources: props.componentData?.resources,
|
||||
groupSets: props.groupSets,
|
||||
})
|
||||
})
|
||||
|
||||
const displayText = resourcesData.value?.display?.txt
|
||||
const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MoleculesVisualContent
|
||||
tag="p"
|
||||
:text="displayText"
|
||||
:image-src="imageSrc as any"
|
||||
image-class="w-full"
|
||||
:style="{
|
||||
color: '#000000',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
63
layers/components/templates/GrVisual01/index.vue
Normal file
63
layers/components/templates/GrVisual01/index.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import YouTubeModal from '#layers/components/molecules/modal/YouTubeModal.vue'
|
||||
|
||||
interface Props {
|
||||
components: Record<string, any>
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// YouTube 모달 상태 관리
|
||||
const isYouTubeModalOpen = ref(false)
|
||||
const youtubeVideoId = ref('')
|
||||
|
||||
// 비디오 플레이 버튼 클릭 핸들러
|
||||
const handleVideoPlayClick = () => {
|
||||
// TODO: 실제 YouTube 비디오 ID를 설정해야 합니다
|
||||
// 예시: 'dQw4w9WgXcQ' (Rick Astley - Never Gonna Give You Up)
|
||||
youtubeVideoId.value = 'UKVsZYHxYTc' // 임시로 설정
|
||||
isYouTubeModalOpen.value = true
|
||||
}
|
||||
|
||||
// 모달 닫기 핸들러
|
||||
const handleCloseModal = () => {
|
||||
isYouTubeModalOpen.value = false
|
||||
youtubeVideoId.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="relative h-[640px] lg:h-[1000px]">
|
||||
<WidgetsBackground
|
||||
v-if="props.components?.background"
|
||||
:component-data="props.components?.background"
|
||||
gradient-class="bg-gradient-to-b from-[#100d0f]/0 to-[#100d0f]"
|
||||
/>
|
||||
<div
|
||||
class="relative h-full flex flex-col items-center justify-center gap-4"
|
||||
>
|
||||
<WidgetsMainTitle
|
||||
v-if="props.components.mainTitle"
|
||||
:component-data="props.components.mainTitle"
|
||||
class="w-[355px] lg:w-[944px]"
|
||||
/>
|
||||
<WidgetsDescription
|
||||
v-if="props.components.description"
|
||||
:component-data="props.components.description"
|
||||
/>
|
||||
<WidgetsVideoPlay
|
||||
v-if="props.components.videoPlay"
|
||||
:component-data="props.components.videoPlay"
|
||||
@click="handleVideoPlayClick"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- YouTube 모달 -->
|
||||
<YouTubeModal
|
||||
:is-open="isYouTubeModalOpen"
|
||||
:youtube-id="youtubeVideoId"
|
||||
@close="handleCloseModal"
|
||||
@update:is-open="(value: boolean) => (isYouTubeModalOpen = value)"
|
||||
/>
|
||||
</template>
|
||||
11
layers/components/templates/GrVisual02/index.vue
Normal file
11
layers/components/templates/GrVisual02/index.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
components: Record<string, any>
|
||||
}
|
||||
|
||||
const _props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="template-section" />
|
||||
</template>
|
||||
46
layers/components/templates/GrVisual03/index.vue
Normal file
46
layers/components/templates/GrVisual03/index.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
components: Record<string, any>
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
console.log('components:', props.components)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="relative h-[640px] lg:h-[1000px]">
|
||||
<WidgetsBackground
|
||||
v-if="props.components?.cardBackground"
|
||||
:component-data="props.components?.cardBackground"
|
||||
:group-sets="true"
|
||||
/>
|
||||
<div
|
||||
class="relative h-full flex flex-col items-center justify-center gap-4"
|
||||
>
|
||||
<WidgetsSubTitle
|
||||
v-if="props.components.cardSubTitle"
|
||||
:component-data="props.components.cardSubTitle"
|
||||
:group-sets="true"
|
||||
class="text-[24px] font-[500] text-[#ffffff] leading-[34px]"
|
||||
/>
|
||||
<WidgetsMainTitle
|
||||
v-if="props.components.cardMainTitle"
|
||||
:component-data="props.components.cardMainTitle"
|
||||
:group-sets="true"
|
||||
class="text-[50px] font-[700] text-[#c7a28b] leading-[70px]"
|
||||
/>
|
||||
<WidgetsDescription
|
||||
v-if="props.components.cardDescription"
|
||||
:component-data="props.components.cardDescription"
|
||||
:group-sets="true"
|
||||
class="text-[20px] font-[500] text-white/70 leading-[30px]"
|
||||
/>
|
||||
<WidgetsButtonList
|
||||
v-if="props.components.cardButtonList"
|
||||
:component-data="props.components.cardButtonList"
|
||||
:group-sets="true"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,28 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { getResourcesData, getResponsiveSrc } from '#layers/utils/dataUtil'
|
||||
import type { PageDataComponent } from '#layers/types/api/pageData'
|
||||
|
||||
const props = defineProps<{
|
||||
componentData: PageDataComponent
|
||||
groupSets?: boolean
|
||||
}>()
|
||||
|
||||
const resourcesData = computed(() => {
|
||||
return getResourcesData({
|
||||
resources: props.componentData?.resources,
|
||||
groupSets: props.groupSets,
|
||||
})
|
||||
})
|
||||
|
||||
const displayText = resourcesData.value?.display?.txt
|
||||
const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MoleculesVisualContent
|
||||
tag="h2"
|
||||
:text="displayText"
|
||||
:image-src="imageSrc as any"
|
||||
image-class="w-full"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,31 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { getResourcesData, getResponsiveSrc } from '#layers/utils/dataUtil'
|
||||
import type { PageDataComponent } from '#layers/types/api/pageData'
|
||||
|
||||
const props = defineProps<{
|
||||
componentData: PageDataComponent
|
||||
groupSets?: boolean
|
||||
}>()
|
||||
|
||||
const resourcesData = computed(() => {
|
||||
return getResourcesData({
|
||||
resources: props.componentData?.resources,
|
||||
groupSets: props.groupSets,
|
||||
})
|
||||
})
|
||||
|
||||
const displayText = resourcesData.value?.display?.txt
|
||||
const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MoleculesVisualContent
|
||||
tag="h3"
|
||||
:text="displayText"
|
||||
:image-src="imageSrc as any"
|
||||
image-class="w-full"
|
||||
:style="{
|
||||
color: '#000000',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,30 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
getResourcesData,
|
||||
getResponsiveSrc,
|
||||
getResponsiveClass,
|
||||
} from '#layers/utils/dataUtil'
|
||||
import type { PageDataComponent } from '#layers/types/api/pageData'
|
||||
|
||||
const props = defineProps<{ componentData: PageDataComponent }>()
|
||||
|
||||
const resourcesData = computed(() => {
|
||||
return getResourcesData({
|
||||
resources: props.componentData?.resources,
|
||||
})
|
||||
})
|
||||
const bgStyles = getResponsiveSrc(resourcesData.value?.res_path, {
|
||||
resourcesType: 'bg',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
v-if="resourcesData"
|
||||
class="bg-cover bg-center bg-no-repeat w-[66px] h-[66px] lg:w-[100px] lg:h-[100px]"
|
||||
:class="getResponsiveClass()"
|
||||
:style="bgStyles"
|
||||
>
|
||||
<span class="sr-only">videoPlay</span>
|
||||
</button>
|
||||
</template>
|
||||
Reference in New Issue
Block a user