Merge branch 'feature/20250930_cl_GR_GALLERY' into feature/20250910-all

2025-09-25 10:07:06 +09:00
parent c8dce8c2b4 be496039d6
commit ea3cf718fa
48 changed files with 1853 additions and 354 deletions
--- a/layers/components/blocks/CardNews.vue
+++ b/layers/components/blocks/CardNews.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  description: string | number
+  imgPath: string
+  linkTarget?: string
+  url?: string
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    v-if="props.title || props.description"
+    :class="`card-news ${props.class || ''}`"
+  >
+    <img
+      :src="props.imgPath"
+      :alt="props.title"
+      class="card-image"
+      loading="lazy"
+    />
+    <div class="card-overlay">
+      <h3 v-if="props.title" class="card-title">
+        {{ props.title }}
+      </h3>
+      <p v-if="props.description" class="card-description">
+        {{ props.description }}
+      </p>
+    </div>
+    <a
+      v-if="props.url"
+      :href="props.url"
+      :target="props.linkTarget"
+      class="card-link"
+    />
+  </div>
+</template>
+
+<style scoped>
+.card-news {
+  @apply overflow-hidden relative flex items-center justify-center h-full rounded-lg
+         after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
+         after:border after:border-white/10 after:rounded-lg;
+}
+.card-image {
+  @apply transition-transform duration-300 w-full h-full object-cover;
+}
+.card-overlay {
+  @apply absolute bottom-0 left-0 right-0 pt-[14px] px-[18px] pb-[16px] flex flex-col justify-end border-t border-white/10 bg-black/40 shadow-[0_-10px_10px_0_rgba(0,0,0,0.25)] backdrop-blur-[25px] md:pt-[20px] md:px-[26px] md:pb-[26px];
+}
+.card-title {
+  @apply text-[14px] leading-[20px] font-medium text-white md:text-lg md:leading-[26px];
+}
+.card-description {
+  @apply mt-[6px] text-[12px] leading-[18px] text-white/50 md:mt-1 md:text-[14px] md:leading-[24px];
+}
+.card-link {
+  @apply absolute top-0 left-0 w-full h-full z-[5];
+}
+</style>
--- a/layers/components/blocks/VisualContent.vue
+++ b/layers/components/blocks/VisualContent.vue
@@ -1,37 +1,87 @@
 <script setup lang="ts">
-interface ImageSource {
-  mobileSrc?: string
-  pcSrc?: string
-}
+import { getResponsiveSrc } from '#layers/utils/dataUtil'
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'

 interface Props {
-  text?: string
-  imageSrc?: ImageSource
+  resourcesData?: PageDataResourceGroup
 }

 const props = defineProps<Props>()

+// 텍스트 데이터 추출
+// [TODO] txt 대신 text 사용
+const displayText = computed(() => {
+  return props.resourcesData?.display?.txt || ''
+})
+
+// 이미지 소스 추출
+const imageSrc = computed(() => {
+  return getResponsiveSrc(props.resourcesData?.res_path)
+})
+
+// 색상 코드 추출 (우선순위: color_code_txt > color_code)
+const colorCode = computed(() => {
+  return (
+    props.resourcesData?.display?.color_code_txt ||
+    props.resourcesData?.display?.color_code
+  )
+})
+
+// 색상 이름 추출 (우선순위: color_name_txt > color_name)
+const colorName = computed(() => {
+  return (
+    props.resourcesData?.display?.color_name_txt ||
+    props.resourcesData?.display?.color_name
+  )
+})
+
+// 색상 스타일 계산
+const textStyles = computed(() => {
+  const styles: Record<string, string> = {}
+
+  if (colorName.value) {
+    styles.color = `var(--${colorName.value})`
+  } else if (colorCode.value) {
+    styles.color = colorCode.value
+  }
+
+  return styles
+})
+
+// HTML 콘텐츠 정리 (줄바꿈 처리)
 const sanitizedContent = computed(() => {
-  return props.text?.replace(/\n/g, '<br/>') || ''
+  return displayText.value?.replace(/\n/g, '<br/>') || ''
+})
+
+// 이미지가 있는지 확인
+const hasImage = computed(() => {
+  return imageSrc.value && (imageSrc.value.mobileSrc || imageSrc.value.pcSrc)
 })
 </script>

 <template>
-  <template v-if="imageSrc && 'mobileSrc' in imageSrc">
-    <!-- 모바일 이미지 (sm 미만) -->
+  <!-- 이미지가 있는 경우 -->
+  <template v-if="hasImage">
+    <!-- 모바일 이미지 (md 미만) -->
    <img
      v-if="imageSrc.mobileSrc"
      :src="imageSrc.mobileSrc"
-      :alt="text"
-      class="sm:hidden w-full h-full object-contain"
+      :alt="displayText"
+      class="md:hidden w-full h-full object-contain"
    />
-    <!-- PC 이미지 (sm 이상) -->
+    <!-- PC 이미지 (md 이상) -->
    <img
      v-if="imageSrc.pcSrc"
      :src="imageSrc.pcSrc"
-      :alt="text"
-      class="hidden sm:block w-full h-full object-contain"
+      :alt="displayText"
+      class="hidden md:block w-full h-full object-contain"
    />
  </template>
-  <span v-else-if="text" v-dompurify-html="sanitizedContent" />
+
+  <!-- 텍스트가 있는 경우 -->
+  <span
+    v-else-if="displayText"
+    v-dompurify-html="sanitizedContent"
+    :style="textStyles"
+  />
 </template>
--- a/layers/components/blocks/modal/YouTube.vue
+++ b/layers/components/blocks/modal/YouTube.vue
@@ -1,84 +1,72 @@
 <template>
-  <Teleport to="body">
-    <Transition
-      enter-active-class="transition duration-300 ease-out"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-active-class="transition duration-200 ease-in"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
+  <Transition
+    enter-active-class="transition duration-300 ease-out"
+    enter-from-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition duration-200 ease-in"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div
+      v-if="isOpen"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"
+      @click="handleBackdropClick"
    >
      <div
        v-if="isOpen"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"
-        @click="handleBackdropClick"
+        class="relative mx-4 my-4"
+        style="
+          width: min(896px, 90vw, calc((90vh - 2rem) * 16 / 9));
+          aspect-ratio: 16/9;
+        "
+        @click.stop
      >
-        <Transition
-          enter-active-class="transition duration-300 ease-out"
-          enter-from-class="opacity-0 scale-95"
-          enter-to-class="opacity-100 scale-100"
-          leave-active-class="transition duration-200 ease-in"
-          leave-from-class="opacity-100 scale-100"
-          leave-to-class="opacity-0 scale-95"
-        >
-          <div v-if="isOpen" class="relative w-full max-w-4xl mx-4" @click.stop>
-            <!-- 헤더 -->
-            <div class="flex justify-end">
-              <button
-                class="p-1 text-white rounded-full transition-colors"
-                aria-label="모달 닫기"
-                @click="closeModal"
-              >
-                <svg
-                  class="w-8 h-8"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </div>
+        <!-- 헤더 -->
+        <div class="flex justify-end">
+          <button
+            class="p-1 text-white rounded-full transition-colors"
+            aria-label="모달 닫기"
+            @click="closeModal"
+          >
+            <AtomsIconsClose />
+          </button>
+        </div>

-            <!-- 유튜브 영상 컨테이너 -->
-            <div class="relative w-full" :style="{ paddingBottom: '56.25%' }">
-              <iframe
-                v-if="youtubeId"
-                :src="`https://www.youtube.com/embed/${youtubeId}?autoplay=1&rel=0`"
-                class="absolute top-0 left-0 w-full h-full"
-                frameborder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowfullscreen
-                title="YouTube video player"
-              />
-            </div>
-          </div>
-        </Transition>
+        <!-- 유튜브 영상 컨테이너 -->
+        <div class="relative w-full h-full">
+          <iframe
+            v-if="embedUrl"
+            :src="embedUrl"
+            class="absolute top-0 left-0 w-full h-full"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+            title="YouTube video player"
+          />
+        </div>
      </div>
-    </Transition>
-  </Teleport>
+    </div>
+  </Transition>
 </template>

 <script setup lang="ts">
+import { getYouTubeEmbedUrl } from '#layers/utils/youtube'
+
 interface Props {
  isOpen: boolean
-  youtubeId: string
+  youtubeUrl: string
  title?: string
  description?: string
  closeOnBackdrop?: boolean
 }

 interface Emits {
-  (e: 'close'): void
-  (e: 'update:isOpen', value: boolean): void
+  (e: 'closeButtonEvent'): void
 }

 const props = withDefaults(defineProps<Props>(), {
+  isOpen: false,
+  youtubeUrl: '',
  title: '',
  description: '',
  closeOnBackdrop: true,
@@ -86,6 +74,10 @@ const props = withDefaults(defineProps<Props>(), {

 const emit = defineEmits<Emits>()

+const embedUrl = computed(() => {
+  return getYouTubeEmbedUrl(props.youtubeUrl)
+})
+
 // ESC 키로 모달 닫기
 const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Escape' && props.isOpen) {
@@ -102,8 +94,7 @@ const handleBackdropClick = () => {

 // 모달 닫기 함수
 const closeModal = () => {
-  emit('close')
-  emit('update:isOpen', false)
+  emit('closeButtonEvent')
 }

 // 키보드 이벤트 리스너 등록/해제
@@ -114,21 +105,4 @@ onMounted(() => {
 onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
 })
-
-// 모달이 열릴 때 body 스크롤 방지
-watch(
-  () => props.isOpen,
-  isOpen => {
-    if (isOpen) {
-      document.body.style.overflow = 'hidden'
-    } else {
-      document.body.style.overflow = ''
-    }
-  }
-)
-
-// 컴포넌트 언마운트 시 body 스크롤 복원
-onUnmounted(() => {
-  document.body.style.overflow = ''
-})
 </script>
--- a/layers/components/blocks/slide/CenterHighlight.vue
+++ b/layers/components/blocks/slide/CenterHighlight.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { Splide } from '@splidejs/vue-splide'
+import type { Splide as SplideType, ResponsiveOptions } from '@splidejs/splide'
+import type { SlideItemSize } from '#layers/types/components/slide'
+
+interface Props {
+  slideItemSize: SlideItemSize
+  type?: 'loop' | 'slide'
+  autoplay?: boolean | string
+  arrows?: boolean
+  pagination?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'loop',
+  autoplay: false,
+  arrows: true,
+  pagination: true,
+})
+
+const options = computed((): ResponsiveOptions => {
+  return {
+    type: props.type,
+    focus: 'center',
+    autoWidth: true,
+    autoHeight: true,
+    speed: 400,
+    updateOnMove: true,
+    arrows: props.arrows,
+    pagination: props.pagination,
+    autoplay: props.autoplay,
+    classes: {
+      arrows: 'splide-arrows',
+      arrow: 'splide-arrow',
+      prev: 'arrow-prev',
+      next: 'arrow-next',
+      pagination: 'splide-pagination-bullets',
+      page: 'splide-pagination-bullet',
+    },
+  }
+})
+
+const style = computed(() => {
+  if (!props.slideItemSize) return {}
+
+  const { mo, pc } = props.slideItemSize
+  const scaleFactor = 1.1429
+
+  return {
+    // 모바일 기본값
+    '--banner-width-mo': `${mo.width}px`,
+    '--banner-height-mo': `${mo.height}px`,
+    '--banner-gap-mo': `${mo.gap}px`,
+    // 모바일 확대값
+    '--banner-width-mo-active': `${mo.width * scaleFactor}px`,
+    '--banner-height-mo-active': `${mo.height * scaleFactor}px`,
+    '--banner-width-mo-container': `${mo.width * scaleFactor + mo.gap}px`,
+
+    // PC 기본값
+    '--banner-width-pc': `${pc.width}px`,
+    '--banner-height-pc': `${pc.height}px`,
+    '--banner-gap-pc': `${pc.gap}px`,
+    // PC 확대값
+    '--banner-width-pc-active': `${pc.width * scaleFactor}px`,
+    '--banner-height-pc-active': `${pc.height * scaleFactor}px`,
+    '--banner-width-pc-container': `${pc.width * scaleFactor + pc.gap * 4}px`,
+    // PC arrow값
+    '--banner-arrow-pc': `${(pc.width * scaleFactor) / 2 + (pc.gap * 3) / 2}px`,
+  }
+})
+
+const handleSplideMounted = (splide: SplideType) => {
+  splide.refresh()
+}
+</script>
+
+<template>
+  <div :class="`center-highlight ${props.class || ''}`" :style="style">
+    <Splide :options="options" @splide:mounted="handleSplideMounted">
+      <slot />
+    </Splide>
+  </div>
+</template>
+
+<style scoped>
+.center-highlight {
+  @apply w-full;
+}
+.center-highlight:deep(.splide__slide) {
+  @apply flex items-center justify-center;
+  width: var(--banner-width-mo);
+  height: var(--banner-height-mo-active);
+  margin-right: var(--banner-gap-mo);
+}
+.center-highlight:deep(.splide__slide.is-active) {
+  width: var(--banner-width-mo-container);
+}
+
+/* PC 스타일 */
+@media (min-width: 1024px) {
+  .center-highlight:deep(.splide__slide) {
+    width: var(--banner-width-pc);
+    height: var(--banner-height-pc-active);
+    margin-right: var(--banner-gap-pc);
+  }
+  .center-highlight:deep(.splide__slide.is-active) {
+    width: var(--banner-width-pc-container);
+  }
+  .center-highlight:deep(.splide-arrow) {
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .center-highlight:deep(.arrow-prev) {
+    margin-left: calc(-1 * var(--banner-arrow-pc));
+  }
+  .center-highlight:deep(.arrow-next) {
+    margin-left: var(--banner-arrow-pc);
+  }
+}
+</style>
--- a/layers/components/blocks/slide/Fade.vue
+++ b/layers/components/blocks/slide/Fade.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { Splide } from '@splidejs/vue-splide'
+import type { ResponsiveOptions } from '@splidejs/splide'
+
+interface Props {
+  autoplay?: boolean | string
+  arrows?: boolean
+  pagination?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  autoplay: false,
+  arrows: true,
+  pagination: true,
+})
+
+// 페이드 슬라이드 옵션
+const fadeOptions = computed((): ResponsiveOptions => {
+  return {
+    type: 'fade',
+    rewind: true,
+    perPage: 1,
+    perMove: 1,
+    speed: 600,
+    updateOnMove: true,
+    autoplay: props.autoplay,
+    arrows: props.arrows,
+    pagination: props.pagination,
+    classes: {
+      arrows: 'splide-arrows type-full',
+      arrow: 'splide-arrow',
+      prev: 'arrow-prev',
+      next: 'arrow-next',
+      pagination: 'splide-pagination-bullets type-full',
+      page: 'splide-pagination-bullet',
+    },
+  }
+})
+</script>
+
+<template>
+  <Splide :options="fadeOptions" class="h-full">
+    <slot />
+  </Splide>
+</template>
+
+<style scoped>
+.splide:deep(.splide__track) {
+  @apply h-full;
+}
+</style>
--- a/layers/components/blocks/slide/Thumbnail.vue
+++ b/layers/components/blocks/slide/Thumbnail.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { Splide, SplideSlide } from '@splidejs/vue-splide'
+import type { Splide as SplideType, Options } from '@splidejs/splide'
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
+
+interface Props {
+  slideItemList: { media: any; set_order: number }[]
+  videoPlay?: PageDataResourceGroup
+  arrows?: boolean
+  pagination?: boolean
+  class?: string
+  style?: Record<string, string>
+}
+
+const props = defineProps<Props>()
+
+const mainRef = ref<InstanceType<typeof Splide> | null>(null)
+const thumbsRef = ref<InstanceType<typeof Splide> | null>(null)
+const isPlaying = ref<boolean>(false)
+
+const mainOptions = computed<Options>(() => ({
+  type: 'fade',
+  rewind: true,
+  perPage: 1,
+  perMove: 1,
+  speed: 600,
+  arrows: false,
+  pagination: false,
+}))
+const thumbOptions = computed<Options>(() => ({
+  type: 'slide',
+  rewind: true,
+  // focus: 'center',
+  autoWidth: true,
+  perMove: 1,
+  arrows: true,
+  pagination: false,
+  isNavigation: true,
+  updateOnMove: true,
+  classes: {
+    arrows: 'splide-arrows',
+    arrow: 'splide-arrow',
+    prev: 'arrow-prev',
+    next: 'arrow-next',
+  },
+}))
+
+// 비디오 클릭 핸들러
+const handleVideoClick = () => {
+  isPlaying.value = true
+}
+
+let mainInst: SplideType | null = null
+let thumbsInst: SplideType | null = null
+
+onMounted(() => {
+  mainInst = mainRef.value?.splide ?? null
+  thumbsInst = thumbsRef.value?.splide ?? null
+  if (mainInst && thumbsInst) {
+    mainInst.sync(thumbsInst)
+  }
+})
+
+onBeforeUnmount(() => {
+  mainInst?.destroy?.()
+  thumbsInst?.destroy?.()
+})
+</script>
+
+<template>
+  <div :class="`thumbnail-carousel ${props.class || ''}`" :style="props.style">
+    <!-- 메인 슬라이드 -->
+    <Splide ref="mainRef" :options="mainOptions" class="main-splide">
+      <SplideSlide
+        v-for="(item, index) in props.slideItemList"
+        :key="item.set_order || index"
+        class="main-slide"
+      >
+        <template v-if="!isPlaying">
+          <img
+            :src="getMediaImgSrc(item.media)"
+            alt="main image"
+            class="slide-image"
+          />
+          <AtomsButtonPlay
+            v-if="getMediaType(item.media) === 'video'"
+            :resources-data="videoPlay"
+            class="btn-play"
+            @click="handleVideoClick()"
+          />
+        </template>
+        <template v-else>
+          <iframe
+            :src="getYouTubeEmbedUrl(getMediaText(item.media))"
+            class="absolute top-0 left-0 w-full h-full"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          />
+        </template>
+      </SplideSlide>
+    </Splide>
+
+    <!-- 썸네일 슬라이드 -->
+    <Splide ref="thumbsRef" :options="thumbOptions" class="thumbnail-splide">
+      <SplideSlide
+        v-for="(item, index) in props.slideItemList"
+        :key="item.set_order || index"
+        class="thumbnail-slide"
+      >
+        <img
+          :src="getMediaImgSrc(item.media)"
+          alt="thumbnail image"
+          class="slide-image"
+        />
+      </SplideSlide>
+    </Splide>
+  </div>
+</template>
+
+<style scoped>
+/* 비디오 iframe 전환 애니메이션 */
+
+.thumbnail-carousel {
+  @apply w-full px-[20px] sm:px-[40px] md:max-w-[1024px];
+}
+
+.main-splide {
+  @apply overflow-hidden mx-auto rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];
+}
+.main-slide {
+  @apply aspect-[16/9];
+}
+.slide-image {
+  @apply w-full h-full object-cover;
+}
+.btn-play {
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+
+.thumbnail-splide {
+  @apply overflow-hidden flex justify-center w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-auto md:mx-0 md:px-[120px] md:mt-[28px];
+}
+.thumbnail-splide:deep(.splide__track) {
+  @apply !px-[20px] sm:!px-[40px] md:!px-[0];
+}
+.thumbnail-slide {
+  @apply overflow-hidden relative w-[92px] h-[52px] mr-[12px] !border-none rounded-[4px] md:w-[128px] md:h-[72px] md:mr-[16px]
+  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
+  after:border after:border-white/60 after:rounded-[4px];
+}
+.thumbnail-slide:hover,
+.thumbnail-slide.is-active {
+  @apply after:border-[var(--primary)];
+}
+.thumbnail-splide:deep(.arrow-prev) {
+  @apply left-[48px];
+}
+.thumbnail-splide:deep(.arrow-next) {
+  @apply right-[48px];
+}
+</style>