From 1fb19f4f0210c7312323411495e5c26ec1a48169 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Thu, 11 Sep 2025 15:54:28 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20VisualContent=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/layout/default/Footer.vue   |  2 +-
 layers/components/layout/default/Header.vue   |  8 ++---
 .../molecules/{Link.vue => HybridLink.vue}    |  0
 .../{atoms => molecules}/LanguageSwitcher.vue |  0
 layers/components/molecules/VisualContent.vue | 32 +++++++++++++++++++
 layers/components/templates/Description.vue   | 27 ++++------------
 layers/components/templates/MainTitle.vue     | 30 ++++-------------
 layers/components/templates/SubTitle.vue      | 30 ++++-------------
 8 files changed, 55 insertions(+), 74 deletions(-)
 rename layers/components/molecules/{Link.vue => HybridLink.vue} (100%)
 rename layers/components/{atoms => molecules}/LanguageSwitcher.vue (100%)
 create mode 100644 layers/components/molecules/VisualContent.vue

diff --git a/layers/components/layout/default/Footer.vue b/layers/components/layout/default/Footer.vue
index 2ba2483..5e440eb 100644
--- a/layers/components/layout/default/Footer.vue
+++ b/layers/components/layout/default/Footer.vue
@@ -5,7 +5,7 @@
         <a href="/" class="text-white">로고</a>
       </div>
       <div class="flex items-center">
-        <AtomsLanguageSwitcher />
+        <MoleculesLanguageSwitcher />
       </div>
     </div>
   </footer>
diff --git a/layers/components/layout/default/Header.vue b/layers/components/layout/default/Header.vue
index d5c1476..8b9fad3 100644
--- a/layers/components/layout/default/Header.vue
+++ b/layers/components/layout/default/Header.vue
@@ -36,7 +36,7 @@ const gnbList = gameData?.gnb?.menus as GameDataGnb["menus"];
             class="relative group"
           >
             <!-- Link 컴포넌트 사용 -->
-            <MoleculesLink
+            <MoleculesHybridLink
               :to="gnbItem.url_path"
               :target="gnbItem.link_target"
               class="relative flex items-center h-[64px]"
@@ -46,7 +46,7 @@ const gnbList = gameData?.gnb?.menus as GameDataGnb["menus"];
               <span
                 class="absolute bottom-0 left-0 w-full h-2 border-b-2 border-transparent transition-border-color group-hover:border-theme-foreground-reversal group-active:border-theme-foreground-reversal-10"
               ></span>
-            </MoleculesLink>
+            </MoleculesHybridLink>
             <div
               v-if="gnbItem.children"
               class="absolute top-full left-[-28px] min-w-[190px] pt-[4px] pointer-events-none group-hover:pointer-events-auto"
@@ -56,7 +56,7 @@ const gnbList = gameData?.gnb?.menus as GameDataGnb["menus"];
               >
                 <li v-for="child in gnbItem.children" :key="child.menu_name">
                   <!-- Link 컴포넌트 사용 -->
-                  <MoleculesLink
+                  <MoleculesHybridLink
                     :to="child.url_path"
                     :target="child.link_target"
                     class="flex items-center px-4 py-[9px] rounded-[12px] transition-background hover:bg-theme-foreground-reversal-40 active:bg-theme-foreground-reversal-70"
@@ -66,7 +66,7 @@ const gnbList = gameData?.gnb?.menus as GameDataGnb["menus"];
                       v-if="child.link_target === '_blank'"
                       class="ml-1"
                     />
-                  </MoleculesLink>
+                  </MoleculesHybridLink>
                 </li>
               </ul>
             </div>
diff --git a/layers/components/molecules/Link.vue b/layers/components/molecules/HybridLink.vue
similarity index 100%
rename from layers/components/molecules/Link.vue
rename to layers/components/molecules/HybridLink.vue
diff --git a/layers/components/atoms/LanguageSwitcher.vue b/layers/components/molecules/LanguageSwitcher.vue
similarity index 100%
rename from layers/components/atoms/LanguageSwitcher.vue
rename to layers/components/molecules/LanguageSwitcher.vue
diff --git a/layers/components/molecules/VisualContent.vue b/layers/components/molecules/VisualContent.vue
new file mode 100644
index 0000000..d647e54
--- /dev/null
+++ b/layers/components/molecules/VisualContent.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  tag: string;
+  text: string;
+  imageSrc?: any;
+  imageClass?: string;
+}
+
+const props = defineProps<Props>();
+</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 v-html="text?.replace(/\n/g, '<br/>') || ''" />
+  </component>
+</template>
diff --git a/layers/components/templates/Description.vue b/layers/components/templates/Description.vue
index b6bc64f..6bc6d8f 100644
--- a/layers/components/templates/Description.vue
+++ b/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>
diff --git a/layers/components/templates/MainTitle.vue b/layers/components/templates/MainTitle.vue
index 0110529..394f651 100644
--- a/layers/components/templates/MainTitle.vue
+++ b/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>
diff --git a/layers/components/templates/SubTitle.vue b/layers/components/templates/SubTitle.vue
index 11b6e0b..d27fb93 100644
--- a/layers/components/templates/SubTitle.vue
+++ b/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>