fix. VisualContent 제작

layers/components/templates/Description.vue

@@ -18,25 +18,10 @@ const imageSrc = getResponsiveSrc({
 </script>
 
 <template>
-  <div v-if="resourcesData">
-    <img
-      v-if="imageSrc && 'mobileSrc' in imageSrc"
-      :src="imageSrc.mobileSrc"
-      :alt="displayText"
-      class="w-full sm:hidden"
-    />
-
-    <!-- PC 이미지 (sm 이상) -->
-    <img
-      v-if="imageSrc && 'pcSrc' in imageSrc"
-      :src="imageSrc.pcSrc"
-      :alt="displayText"
-      class="w-full hidden sm:block"
-    />
-  </div>
-  <p
-    v-else
-    v-html="displayText?.replace(/\n/g, '<br/>') || ''"
-    class="text-center"
-  ></p>
+  <MoleculesVisualContent
+    tag="p"
+    :text="displayText"
+    :image-src="imageSrc as any"
+    image-class="w-full"
+  />
 </template>

layers/components/templates/MainTitle.vue

@@ -18,28 +18,10 @@ const imageSrc = getResponsiveSrc({
 </script>
 
 <template>
-  <h2>
-    <template v-if="resourcesData">
-      <img
-        v-if="imageSrc && 'mobileSrc' in imageSrc"
-        :src="imageSrc.mobileSrc"
-        :alt="displayText"
-        class="w-full sm:hidden"
-      />
-
-      <!-- PC 이미지 (sm 이상) -->
-      <img
-        v-if="imageSrc && 'pcSrc' in imageSrc"
-        :src="imageSrc.pcSrc"
-        :alt="displayText"
-        class="w-full hidden sm:block"
-      />
-    </template>
-    <span
-      v-else
-      v-html="displayText?.replace(/\n/g, '<br/>')"
-      class="text-center"
-    >
-    </span>
-  </h2>
+  <MoleculesVisualContent
+    tag="h2"
+    :text="displayText"
+    :image-src="imageSrc as any"
+    image-class="w-full"
+  />
 </template>

layers/components/templates/SubTitle.vue

@@ -18,28 +18,10 @@ const imageSrc = getResponsiveSrc({
 </script>
 
 <template>
-  <h3>
-    <template v-if="resourcesData">
-      <img
-        v-if="imageSrc && 'mobileSrc' in imageSrc"
-        :src="imageSrc.mobileSrc"
-        :alt="displayText"
-        class="w-full sm:hidden"
-      />
-
-      <!-- PC 이미지 (sm 이상) -->
-      <img
-        v-if="imageSrc && 'pcSrc' in imageSrc"
-        :src="imageSrc.pcSrc"
-        :alt="displayText"
-        class="w-full hidden sm:block"
-      />
-    </template>
-    <span
-      v-else
-      v-html="displayText?.replace(/\n/g, '<br/>')"
-      class="text-center"
-    >
-    </span>
-  </h3>
+  <MoleculesVisualContent
+    tag="h3"
+    :text="displayText"
+    :image-src="imageSrc as any"
+    image-class="w-full"
+  />
 </template>