From b8a722fcb2d159138fd4653c5194b8407586468f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chyeonggkim=E2=80=9D?=
 <“hyeonggkim@smilegate.com”>
Date: Tue, 2 Dec 2025 09:49:57 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20QA=20=EC=88=98=EC=A0=95=20error=20p?=
 =?UTF-8?q?age,=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/error.vue                        |   6 +-
 layers/components/layouts/Footer.vue | 136 +++++++++++++++++++--------
 2 files changed, 104 insertions(+), 38 deletions(-)

diff --git a/app/error.vue b/app/error.vue
index 6ae33a5..f92f7f0 100644
--- a/app/error.vue
+++ b/app/error.vue
@@ -50,7 +50,7 @@
             text-color="#FFFFFF"
             @click="handleError"
           >
-            <span v-dompurify-html="tm('Error_Official_Page')"></span>
+            <span v-dompurify-html="`${gameName} ${tm('Error_Official_Page')}`"></span>
           </AtomsButton>
         </div>
       </div>
@@ -93,6 +93,10 @@ const isLoading = ref(true)
 const errorTitle = ref('')
 const errorMsg = ref('')
 
+const gameDataStore = useGameDataStore()
+const { gameData } = storeToRefs(gameDataStore)
+const gameName = computed(() => gameData.value?.game_name)
+
 //error clear 함수 생성
 const localePath = useLocalePath()
 
diff --git a/layers/components/layouts/Footer.vue b/layers/components/layouts/Footer.vue
index 3172b4d..db98c31 100644
--- a/layers/components/layouts/Footer.vue
+++ b/layers/components/layouts/Footer.vue
@@ -23,7 +23,7 @@
                 {{ footerMenuItem.title }}
               </NuxtLink>
             </li>
-            <li class="relative">
+            <li v-if="useGameRating" class="relative">
               <button
                 class="text-[15px] text-white/50 hover:text-gray-600 transition-colors"
                 @click="toggleAgeRating"
@@ -62,19 +62,16 @@
                 </div>
 
                 <!-- 등급 아이콘 그리드 -->
+
                 <div class="px-6 pt-2 pb-6">
                   <!-- 아이콘은 52x60 사이즈 갭은 4px 4개씩 그리드 레이아웃 -->
                   <div
                     class="grid grid-cols-4 gap-[4px] mb-4 max-w-[220px] justify-start items-start"
                   >
-                    <!-- 19세 등급 -->
-                    <div
-                      v-for="image in getGameRatingImage"
-                      :key="image"
-                      class="text-center"
-                    >
+                    <!-- 연령 등급 -->
+                    <div class="text-center">
                       <img
-                        :src="image"
+                        :src="getGameRatingImage.image"
                         alt="게임이용등급안내"
                         class="w-full h-full object-contain"
                       />
@@ -94,7 +91,13 @@
                 </div>
 
                 <!-- 정보 테이블 -->
-                <div class="px-6 py-6 rounded-b-lg bg-[#A31639]">
+                <div v-if="locale === 'zh-tw'" class="px-6 py-6 rounded-b-lg bg-[#292929]">
+                  <div class="space-y-2">
+                    <div v-dompurify-html="tm('Footer_AgeRating_Caution')"></div>
+                  </div>
+                </div>
+
+                <div v-else class="px-6 py-6 rounded-b-lg bg-[#A31639]" :class="`bg-${getGameRatingImage.type}`">
                   <div class="space-y-2">
                     <div class="flex flex-start border-b border-white/10 pb-2">
                       <span class="text-white text-sm flex-1">
@@ -170,34 +173,49 @@
           <span v-dompurify-html="tm('Footer_Copyright')"></span>
         </div>
 
-        <div class="logo-area flex mt-6 md:mt-6">
-          <a href="https://www.smilegate.com" target="_blank" class="smilegate">
-            <img
-              :src="
-                formatPathHost(`/images/common/logo_smilegate.png`, {
-                  imageType: 'common',
-                })
-              "
-              alt="스마일게이트 로고"
-              class="w-auto h-auto"
-            />
-          </a>
-          <a
-            v-if="setDevCi.dev_ci_yn"
-            :href="footerData.use_dev_ci_url ? footerData.dev_ci_url : '#'"
-            target="_blank"
-            class="nx3 ml-2.5 md:ml-4"
-          >
+        <div class="logo-area flex items-center gap-7 mt-6 md:mt-6">
+          <span>
+            <a :href="tm('Footer_Smilegate_Link')" target="_blank" class="smilegate">
+              <img
+                :src="
+                  formatPathHost(`/images/common/logo_smilegate.png`, {
+                    imageType: 'common',
+                  })
+                "
+                alt="스마일게이트 로고"
+                class="w-auto h-auto"
+              />
+            </a>
+          </span>
+          <span v-if="setDevCi.dev_ci_yn">
+            <a
+              v-if="footerData.use_dev_ci_url"
+              :href="footerData.dev_ci_url"
+              target="_blank"
+              class="block nx3"
+            >
+              <img
+                :src="
+                  formatPathHost(`${setDevCi.dev_ci_img_path}`, {
+                    imageType: 'game',
+                  })
+                "
+                alt="CI"
+                class="block w-auto h-[22px]"
+              />
+            </a>
+
             <img
+              v-else
               :src="
                 formatPathHost(`${setDevCi.dev_ci_img_path}`, {
                   imageType: 'game',
                 })
               "
               alt="CI"
-              class="block w-auto h-[22px]"
+              class="block w-auto h-[22px] leading-none"
             />
-          </a>
+          </span>
         </div>
       </ClientOnly>
     </div>
@@ -228,9 +246,20 @@ const setDevCi = ref<DevCiConfig>({
   dev_ci_img_path: gameData.value?.footer_dev_ci_img_path as string,
 })
 
+const useGameRating = computed<boolean>(() => {
+  return footerData.value.use_game_rating
+})
+
 ///local/template/common/grades_age
-const getGameRatingImage = computed((): string[] => {
-  const contentInfo = footerData.value.game_rating_info.rating_type.split(',')
+const getGameRatingImage = computed((): { type: string, image: string } => {
+  const contentInfo = footerData.value?.game_rating_info?.rating_type
+  
+  // 문자열이 아닌 경우 빈 문자열 반환
+  if (!contentInfo || typeof contentInfo !== 'string') {
+    return { type: '', image: '' }
+  }
+  
+  const ratingType = contentInfo.trim()
   const ageTypeMap: Record<string, string> = {
     '6': 'Type6',
     '12': 'Type12',
@@ -240,15 +269,17 @@ const getGameRatingImage = computed((): string[] => {
     all: 'TypeAll',
     e: 'TypeExempt',
   }
-  return contentInfo.map(item => {
-    const type = ageTypeMap[item] || 'TypeTest'
-    return formatPathHost(
+
+  const type = ageTypeMap[ratingType as keyof typeof ageTypeMap] || 'TypeTest'
+  return {
+    type,
+    image: formatPathHost(
       `/images/common/grades_age/${locale.value}/${type}.svg`,
       {
         imageType: 'common',
       }
-    )
-  })
+    ),
+  }
 })
 
 const getContentInfoImage = computed((): string[] => {
@@ -284,7 +315,6 @@ const toggleAgeRating = (): void => {
 
 const footerAgeRatingInfo = computed((): string[] => {
   const info = (tm as any)('Footer_AgeRating_Info')
-  console.log('🚀 ~ info:', info)
   return Array.isArray(info) ? info : []
 })
 </script>
@@ -293,4 +323,36 @@ const footerAgeRatingInfo = computed((): string[] => {
 em {
   font-style: normal;
 }
+
+.bg-Type6 {
+  background-color: #3d89a9;
+}
+
+.bg-Type12 {
+  background-color: #4369B1;
+}
+
+.bg-Type15 {
+  background-color: #F9B846;
+}
+
+.bg-Type18 {
+  background-color: #d92e22;
+}
+
+.bg-Type19 {
+  background-color: #A31639;
+}
+
+.bg-TypeAll {
+  background-color: #44A342;
+}
+
+.bg-TypeExempt {
+  background-color: #292929;
+}
+
+.bg-TypeTest {
+  background-color: #292929;
+}
 </style>