fix. 버튼 컴포넌트 링크 적용, 코드 리팩토링

layers/components/blocks/HybridLink.vue

@@ -9,19 +9,29 @@ const props = withDefaults(defineProps<Props>(), {
   target: '',
   class: '',
 })
+
+const componentTag = computed(() => {
+  return props.target === '_blank' ? 'a' : 'AtomsLocaleLink'
+})
+
+const componentProps = computed(() => {
+  if (props.target === '_blank') {
+    return {
+      href: props.to,
+      target: props.target,
+      class: props.class,
+    }
+  }
+
+  return {
+    to: props.to,
+    class: props.class,
+  }
+})
 </script>
 
 <template>
-  <a
-    v-if="props.target === '_blank'"
-    v-bind="$attrs"
-    :href="props.to"
-    :target="props.target"
-    :class="props.class"
-  >
+  <component :is="componentTag" v-bind="{ ...$attrs, ...componentProps }">
     <slot />
-  </a>
-  <AtomsLocaleLink v-else v-bind="$attrs" :to="props.to" :class="props.class">
-    <slot />
-  </AtomsLocaleLink>
+  </component>
 </template>

layers/components/blocks/VisualContent.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { getResponsiveSrc } from '#layers/utils/dataUtil'
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 interface Props {
@@ -13,39 +12,14 @@ const props = defineProps<Props>()
 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
-  )
+  return 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
+const colorCode = computed(() => {
+  return props.resourcesData?.display?.color_code
 })
 
 // HTML 콘텐츠 정리 (줄바꿈 처리)
@@ -82,7 +56,7 @@ const hasImage = computed(() => {
   <span
     v-else-if="displayText"
     v-dompurify-html="sanitizedContent"
-    :style="textStyles"
+    :style="{ color: getColorCode({ colorName, colorCode }) }"
     class="block"
   />
 </template>