From 301de68aa5fc0cf8f04503a78a575f863a7666e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chyeonggkim=E2=80=9D?=
 <“hyeonggkim@smilegate.com”>
Date: Thu, 11 Sep 2025 14:54:34 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=ED=91=B8=ED=84=B0=20=ED=85=8C?=
 =?UTF-8?q?=EC=9D=BC=EC=9C=88=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/layout/default/Footer.vue | 81 ++++-----------------
 1 file changed, 16 insertions(+), 65 deletions(-)

diff --git a/layers/components/layout/default/Footer.vue b/layers/components/layout/default/Footer.vue
index 207c791..5160c88 100644
--- a/layers/components/layout/default/Footer.vue
+++ b/layers/components/layout/default/Footer.vue
@@ -4,7 +4,7 @@
       <div class="menu-area">
         <ul class="flex items-center flex-wrap gap-1.5 md:gap-0">
           <li v-for="(footerMenuItem, index) in footerLinks" :key="index" 
-              class="footer-menu-item">
+              class="text-sm md:text-xs md:tracking-tight relative">
             <NuxtLink
               :to="footerMenuItem.link"
               :target="footerMenuItem.target"
@@ -19,21 +19,21 @@
         </ul>
       </div>
       
-      <div class="rating-area">
-        <img :src="footerData.dev_ci_url" alt="게임등급" class="rating-image" />
-        <dl class="rating-info">
-          <dt class="rating-label">게임명</dt>
-          <dd class="rating-value">{{ footerData.game_rating_info.title }}</dd>
-          <dt class="rating-label">상호</dt>
-          <dd class="rating-value">{{ footerData.game_rating_info.company_name }}</dd>
-          <dt class="rating-label">이용등급</dt>
-          <dd class="rating-value">{{ footerData.game_rating_info.reg_no }}</dd>
-          <dt class="rating-label">등급분류번호</dt>
-          <dd class="rating-value">{{ footerData.game_rating_info.rating_grade }}</dd>
-          <dt class="rating-label">제작년월일</dt>
-          <dd class="rating-value">{{ footerData.game_rating_info.prod_date }}</dd>
-          <dt class="rating-label">신고(등록)번호</dt>
-          <dd class="rating-value">{{ footerData.game_rating_info.rating_class_no }}</dd>
+      <div class="flex mt-2.5 md:flex-col md:mt-1.5">
+        <img :src="footerData.dev_ci_url" alt="게임등급" class="w-41 h-14 md:w-34 md:h-12 md:order-1" />
+        <dl class="grid grid-cols-[110px_auto_110px_auto] w-full max-w-[490px] ml-5 border-t border-l border-gray-600 tracking-tight md:grid-cols-[66px_auto_84px_auto] md:max-w-[358px] md:m-0 md:mb-2.5">
+          <dt class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5">게임명</dt>
+          <dd class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5">{{ footerData.game_rating_info.title }}</dd>
+          <dt class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5">상호</dt>
+          <dd class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5">{{ footerData.game_rating_info.company_name }}</dd>
+          <dt class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5">이용등급</dt>
+          <dd class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5">{{ footerData.game_rating_info.reg_no }}</dd>
+          <dt class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5">등급분류번호</dt>
+          <dd class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5">{{ footerData.game_rating_info.rating_grade }}</dd>
+          <dt class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5">제작년월일</dt>
+          <dd class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5">{{ footerData.game_rating_info.prod_date }}</dd>
+          <dt class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5">신고(등록)번호</dt>
+          <dd class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5">{{ footerData.game_rating_info.rating_class_no }}</dd>
         </dl>
       </div>
 
@@ -156,53 +156,4 @@ const footerData = ref({
 </script>
 
 <style scoped>
-.footer-menu-item {
-  @apply text-sm md:text-xs md:tracking-tight relative;
-}
-
-.footer-menu-item:not(:first-child)::before {
-  content: '';
-  @apply inline-block bg-gray-400 h-2 w-px mx-1.5 mt-1 align-top;
-}
-
-@media (min-width: 768px) {
-  .footer-menu-item:nth-of-type(5)::before {
-    display: none;
-  }
-}
-
-@media (max-width: 411px) {
-  .footer-menu-item {
-    @apply th:text-xs;
-  }
-}
-
-@media (max-width: 321px) {
-  .footer-menu-item {
-    @apply th:text-[14px];
-  }
-}
-
-/* Rating Area Styles */
-.rating-area {
-  @apply flex mt-2.5 md:flex-col md:mt-1.5;
-}
-
-.rating-image {
-  @apply w-41 h-14 md:w-34 md:h-12 md:order-1;
-}
-
-.rating-info {
-  @apply grid grid-cols-[110px_auto_110px_auto] w-full max-w-[490px] ml-5 
-         border-t border-l border-gray-600 tracking-tight 
-         md:grid-cols-[66px_auto_84px_auto] md:max-w-[358px] md:m-0 md:mb-2.5;
-}
-
-.rating-label {
-  @apply p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5;
-}
-
-.rating-value {
-  @apply p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5;
-}
 </style>
\ No newline at end of file