feat. GR_VISUAL_01 컴포넌트 제작

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">
+  <!-- 이미지가 있는 경우 -->
+  <template v-if="hasImage">
     <!-- 모바일 이미지 (sm 미만) -->
     <img
       v-if="imageSrc.mobileSrc"
       :src="imageSrc.mobileSrc"
-      :alt="text"
+      :alt="displayText"
       class="sm:hidden w-full h-full object-contain"
     />
     <!-- PC 이미지 (sm 이상) -->
     <img
       v-if="imageSrc.pcSrc"
       :src="imageSrc.pcSrc"
-      :alt="text"
+      :alt="displayText"
       class="hidden sm: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>