fix. 컴포넌트 리팩토링, 타입 명시적 적용

layers/components/blocks/VisualContent.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+interface ImageSource {
+  mobileSrc?: string
+  pcSrc?: string
+}
+
 interface Props {
-  tag: string
   text?: string
-  imageSrc?: any
-  imageClass?: string
+  imageSrc?: ImageSource
 }
 
 const props = defineProps<Props>()
@@ -14,23 +17,21 @@ const sanitizedContent = computed(() => {
 </script>
 
 <template>
-  <component :is="tag" v-bind="$attrs">
-    <template v-if="imageSrc && 'mobileSrc' in imageSrc">
-      <!-- 모바일 이미지 (sm 미만) -->
-      <img
-        v-if="imageSrc.mobileSrc"
-        :src="imageSrc.mobileSrc"
-        :alt="text"
-        :class="`${props.imageClass} sm:hidden`"
-      />
-      <!-- PC 이미지 (sm 이상) -->
-      <img
-        v-if="imageSrc.pcSrc"
-        :src="imageSrc.pcSrc"
-        :alt="text"
-        :class="`${props.imageClass} hidden sm:block`"
-      />
-    </template>
-    <span v-else-if="text" v-dompurify-html="sanitizedContent" />
-  </component>
+  <template v-if="imageSrc && 'mobileSrc' in imageSrc">
+    <!-- 모바일 이미지 (sm 미만) -->
+    <img
+      v-if="imageSrc.mobileSrc"
+      :src="imageSrc.mobileSrc"
+      :alt="text"
+      class="sm:hidden w-full h-full object-contain"
+    />
+    <!-- PC 이미지 (sm 이상) -->
+    <img
+      v-if="imageSrc.pcSrc"
+      :src="imageSrc.pcSrc"
+      :alt="text"
+      class="hidden sm:block w-full h-full object-contain"
+    />
+  </template>
+  <span v-else-if="text" v-dompurify-html="sanitizedContent" />
 </template>

layers/components/layouts/Main.vue

@@ -1,12 +1,21 @@
 <script setup lang="ts">
 import { templateRegistry } from '#layers/registry'
-import type { PageDataTemplate } from '#layers/types/api/pageData'
+import type {
+  PageDataTemplate,
+  TemplateComponent,
+} from '#layers/types/api/pageData'
 
 const props = defineProps<{ templates: PageDataTemplate[] }>()
-const registry = templateRegistry as Record<string, { component: any }>
+
+const registry = templateRegistry as unknown as Record<
+  string,
+  { component: TemplateComponent }
+>
 
 const isShowTemplate = (template: PageDataTemplate) => {
-  return template?.components && Object.keys(template.components).length > 0
+  return Boolean(
+    template?.components && Object.keys(template.components ?? {}).length > 0
+  )
 }
 </script>
 

layers/components/widgets/Description.vue

@@ -19,13 +19,7 @@ const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
 </script>
 
 <template>
-  <BlocksVisualContent
-    tag="p"
-    :text="displayText"
-    :image-src="imageSrc as any"
-    image-class="w-full"
-    :style="{
-      color: '#000000',
-    }"
-  />
+  <p>
+    <BlocksVisualContent :text="displayText" :image-src="imageSrc" />
+  </p>
 </template>

layers/components/widgets/MainTitle.vue

@@ -19,10 +19,7 @@ const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
 </script>
 
 <template>
-  <BlocksVisualContent
-    tag="h2"
-    :text="displayText"
-    :image-src="imageSrc as any"
-    image-class="w-full"
-  />
+  <h2>
+    <BlocksVisualContent :text="displayText" :image-src="imageSrc" />
+  </h2>
 </template>

layers/components/widgets/SubTitle.vue

@@ -19,13 +19,7 @@ const imageSrc = getResponsiveSrc(resourcesData.value?.res_path)
 </script>
 
 <template>
-  <BlocksVisualContent
-    tag="h3"
-    :text="displayText"
-    :image-src="imageSrc as any"
-    image-class="w-full"
-    :style="{
-      color: '#000000',
-    }"
-  />
+  <h3>
+    <BlocksVisualContent :text="displayText" :image-src="imageSrc" />
+  </h3>
 </template>