Merge branch 'feature/202501107-all' into feature/20251001-gil

layers/components/blocks/VisualContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
-import { getResolvedHost, getColorCode } from '#layers/utils/styleUtil'
+import { getColorCode } from '#layers/utils/styleUtil'
 import { isTypeImage, isTypeText } from '#layers/utils/dataUtil'
 
 interface Props {
@@ -13,28 +13,12 @@ const props = withDefaults(defineProps<Props>(), {
   objectFit: 'contain',
 })
 
-const imagePaths = computed(() => {
-  if (!props.resourcesData?.res_path) return null
-
-  const pcPath =
-    props.resourcesData.res_path.path_pc ?? props.resourcesData.res_path.path_mo
-  const moPath =
-    props.resourcesData.res_path.path_mo ?? props.resourcesData.res_path.path_pc
-
-  return {
-    pc: pcPath ? getResolvedHost(pcPath) : '',
-    mo: moPath ? getResolvedHost(moPath) : '',
-  }
-})
-const displayText = computed(() => {
-  return props.resourcesData?.display?.text || 'image'
-})
-const colorName = computed(() => {
-  return props.resourcesData?.display?.color_name
-})
-const colorCode = computed(() => {
-  return props.resourcesData?.display?.color_code
-})
+const imagePaths = computed(() => getImagePaths(props.resourcesData))
+const displayText = computed(
+  () => props.resourcesData?.display?.text || 'image'
+)
+const colorName = computed(() => props.resourcesData?.display?.color_name)
+const colorCode = computed(() => props.resourcesData?.display?.color_code)
 
 // HTML 콘텐츠 정리 (줄바꿈 처리)
 const sanitizedContent = computed(() => {
@@ -43,18 +27,13 @@ const sanitizedContent = computed(() => {
 </script>
 
 <template>
-  <!-- 이미지 -->
-  <picture v-if="isTypeImage(resourcesData?.resource_type) && imagePaths">
-    <source :srcset="imagePaths.pc" media="(min-width: 1024px)" />
-    <source :srcset="imagePaths.mo" media="(max-width: 1023px)" />
-    <img
-      :src="imagePaths.pc"
-      :alt="alt || displayText"
-      :class="`w-full h-full object-${objectFit}`"
-      loading="lazy"
-    />
-  </picture>
-  <!-- 텍스트 -->
+  <AtomsImg
+    v-if="isTypeImage(resourcesData?.resource_type) && imagePaths"
+    :src="imagePaths"
+    :alt="alt || displayText"
+    :class="`w-full h-full object-${objectFit}`"
+  />
+
   <span
     v-else-if="isTypeText(resourcesData?.resource_type)"
     v-dompurify-html="sanitizedContent"

layers/components/blocks/modal/Toast.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface Props {
+  isOpen: boolean
+  contentText: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isOpen: false,
+})
+
+const emit = defineEmits(['close'])
+
+const isVisible = ref(false)
+
+watch(
+  () => props.isOpen,
+  newVal => {
+    if (newVal) {
+      isVisible.value = true
+
+      setTimeout(() => {
+        isVisible.value = false
+        emit('close')
+      }, 2000)
+    }
+  }
+)
+</script>
+
+<template>
+  <Transition name="fade">
+    <div v-if="isVisible" class="toast-container">
+      <p class="toast-text">
+        {{ contentText }}
+      </p>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.toast-container {
+  @apply fixed left-1/2 max-w-[328px] py-3 px-6 rounded-[8px] bg-[rgba(85,85,85,0.4)] backdrop-blur-[25px] -translate-x-1/2 bottom-[20px] md:bottom-[40px] z-[800]
+  before:content-[''] before:absolute before:inset-0 before:border before:border-white/10 before:rounded-[8px];
+}
+.toast-text {
+  @apply text-center text-[16px] text-white leading-[26px] tracking-[-0.48px];
+}
+</style>