refactor: QA 수정 error page, footer

2025-12-02 09:49:57 +09:00
parent 24d023199c
commit b8a722fcb2
2 changed files with 104 additions and 38 deletions
--- 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>