refactor: QA 수정 error page, footer

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()
 

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
+                    <div class="text-center">
-                      v-for="image in getGameRatingImage"
-                      :key="image"
-                      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">
+        <div class="logo-area flex items-center gap-7 mt-6 md:mt-6">
-          <a href="https://www.smilegate.com" target="_blank" class="smilegate">
+          <span>
-            <img
+            <a :href="tm('Footer_Smilegate_Link')" target="_blank" class="smilegate">
-              :src="
+              <img
-                formatPathHost(`/images/common/logo_smilegate.png`, {
+                :src="
-                  imageType: 'common',
+                  formatPathHost(`/images/common/logo_smilegate.png`, {
-                })
+                    imageType: 'common',
-              "
+                  })
-              alt="스마일게이트 로고"
+                "
-              class="w-auto h-auto"
+                alt="스마일게이트 로고"
-            />
+                class="w-auto h-auto"
-          </a>
+              />
-          <a
+            </a>
-            v-if="setDevCi.dev_ci_yn"
+          </span>
-            :href="footerData.use_dev_ci_url ? footerData.dev_ci_url : '#'"
+          <span v-if="setDevCi.dev_ci_yn">
-            target="_blank"
+            <a
-            class="nx3 ml-2.5 md:ml-4"
+              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 getGameRatingImage = computed((): { type: string, image: string } => {
-  const contentInfo = footerData.value.game_rating_info.rating_type.split(',')
+  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'
+  const type = ageTypeMap[ratingType as keyof typeof ageTypeMap] || 'TypeTest'
-    return formatPathHost(
+  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>