feat: env 인터널API 추가, 푸터 수정

.env.dev

@@ -7,6 +7,7 @@ STATIC_URL='https://static-pubcomm.gate8.com'
 # STOVE #############################################################################
 # STOVE - API Url
 STOVE_API_URL=https://api-dev.onstove.com
+STOVE_API_URL_SERVERL=https://i-api-dev.onstove.com
 STOVE_M_API_URL=https://maintenance.gate8.com
 
 # STOVE - GNB

.env.live

@@ -7,6 +7,7 @@ STATIC_URL='https://static-pubcomm.onstove.com'
 # STOVE #############################################################################
 # STOVE - API Url
 STOVE_API_URL=https://api.onstove.com
+STOVE_API_URL_SERVERL=https://i-api.onstove.com
 STOVE_M_API_URL=https://maintenance.onstove.com
 
 # STOVE - GNB

.env.qa

@@ -7,6 +7,7 @@ STATIC_URL='https://static-pubcomm.gate8.com'
 # STOVE #############################################################################
 # STOVE - API Url
 STOVE_API_URL=https://api.gate8.com
+STOVE_API_URL_SERVERL=https://i-api.gate8.com
 STOVE_M_API_URL=https://maintenance.gate8.com
 
 # STOVE - GNB

.env.sandbox

@@ -7,6 +7,7 @@ STATIC_URL='https://static-pubcomm.gate8.com'
 # STOVE #############################################################################
 # STOVE - API Url
 STOVE_API_URL=https://api.gate8.com
+STOVE_API_URL_SERVERL=https://i-api.gate8.com
 STOVE_M_API_URL=https://maintenance.gate8.com
 
 # STOVE - GNB

layers/components/layouts/Footer.vue

@@ -1,149 +1,133 @@
 <template>
   <footer id="footer" ref="footerRef" class="bg-black">
     <div
-      class="inner relative max-w-7xl mx-auto px-10 py-8 text-[12px] text-gray-400 md:px-4 md:py-7 md:text-[12px]"
+      class="inner relative max-w-7xl mx-auto px-10 py-9 text-[12px] text-gray-400 md:px-4 md:py-9 md:text-[12px]"
     >
       <div class="menu-area">
-        <ul class="flex items-center flex-wrap md:gap-1.5">
+        <ul class="flex items-center flex-wrap md:gap-6">
           <li
             v-for="(footerMenuItem, index) in footerLinks"
             :key="index"
             class="text-sm md:text-[11px] md:tracking-[-0.5px] relative flex items-center"
-            :class="{
-              'before:content-[\'\'] before:inline-block before:bg-gray-500 before:h-2 before:w-px before:mx-1.5 before:mt-1 before:align-top md:before:mt-1':
-                index > 0,
-              'md:before:hidden': index === 4,
-            }"
           >
             <NuxtLink
-              :to="footerMenuItem.link"
+              :to="footerMenuItem.url"
               :target="footerMenuItem.target"
               :class="[
                 footerMenuItem.active === 'y' && 'text-[#e04600]',
-                index === 2 && 'text-[#e04600]',
+                index === 2 && 'text-[#fff]',
                 'hover:text-gray-600 transition-colors',
               ]"
             >
               {{ footerMenuItem.title }}
             </NuxtLink>
           </li>
+          <li class="relative">
+            <button class="hover:text-gray-600 transition-colors" @click="toggleAgeRating">
+              {{ tm('Footer_AgeRating') }}
+            </button>
+            <div v-if="showAgeRating" class="game-rating-card absolute bottom-6 left-1/2 -translate-x-1/2 bg-[#383838] rounded-lg w-[340px] mx-auto z-10">
+              <!-- 헤더 -->
+              <div class="px-6 py-4 rounded-t-lg flex justify-between items-center">
+                <h3 class="text-white text-base">{{ tm('Footer_AgeRating') }}</h3>
+                <button class="text-white hover:text-gray-300 transition-colors" @click="toggleAgeRating">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                  </svg>
+                </button>
+              </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">
+                    <img :src="image" alt="게임이용등급안내" class="w-full h-full object-contain" />
+                  </div>
+                  <div v-for="image in getContentInfoImage" :key="image" class="text-center">
+                    <img :src="image" alt="게임이용등급안내" class="w-full h-full object-contain" />
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 정보 테이블 -->
+              <div class="px-6 py-6 rounded-b-lg bg-[#A31639]">
+                <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">{{ tm('Footer_AgeRating_Info')[0] }}</span>
+                    <span class="text-white text-sm flex-1">{{ footerData.game_rating_info.company_name }}</span>
+                  </div>
+                  <div class="flex flex-start border-b border-white/10 pb-2">
+                    <span class="text-white text-sm flex-1">{{ tm('Footer_AgeRating_Info')[1] }}</span>
+                    <span class="text-white text-sm flex-1">{{ footerData.game_rating_info.rating_grade }}</span>
+                  </div>
+                  <div class="flex flex-start border-b border-white/10 pb-2">
+                    <span class="text-white text-sm flex-1">{{ tm('Footer_AgeRating_Info')[2] }}</span>
+                    <span class="text-white text-sm flex-1">{{ footerData.game_rating_info.reg_no }}</span>
+                  </div>
+                  <div class="flex flex-start border-b border-white/10 pb-2">
+                    <span class="text-white text-sm flex-1">{{ tm('Footer_AgeRating_Info')[3] }}</span>
+                    <span class="text-white text-sm flex-1">{{ footerData.game_rating_info.prod_date }}</span>
+                  </div>
+                  <div class="flex flex-start">
+                    <span class="text-white text-sm flex-1">{{ tm('Footer_AgeRating_Info')[4] }}</span>
+                    <span class="text-white text-sm flex-1">{{ footerData.game_rating_info.rating_class_no }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
         </ul>
       </div>
 
-      <div class="flex mt-2.5 md:flex-col md:mt-1.5">
-        <img
-          :src="footerData.game_rating_image_url"
-          alt="게임등급"
-          class="w-10 h-14 md:w-10 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>
-
       <div class="address-area mt-6">
         <address class="not-italic text-gray-500">
-          <div class="row my-1.5">
+          <div class="row my-1.5 leading-5">
             <span
-              v-dompurify-html="footerData.footer_info"
+              v-dompurify-html="tm('Footer_Address')"
               class="[&_a]:cursor-pointer [&_a]:text-blue-500 [&_a]:underline"
             ></span>
           </div>
         </address>
       </div>
 
-      <div class="copyright-area mt-5 text-gray-500 md:mt-4">
+      <div class="mt-6 md:mt-6">
+        <div class="text-xs text-white/30">{{ tm('Footer_caution') }}</div>
+      </div>
+
+      <div class="copyright-area mt-6 text-gray-500 md:mt-4">
         <span>&copy; Smilegate. All rights reserved</span>
       </div>
 
-      <div class="logo-area flex mt-3 md:mt-2.5">
+      <div class="logo-area flex mt-6 md:mt-6">
         <a
-          :href="
+          href="https://www.smilegate.com"
-            locale === 'ja'
-              ? 'https://www.smilegate.com/jp'
-              : 'https://www.smilegate.com/en'
-          "
           target="_blank"
           class="smilegate"
         >
           <img
-            :src="footerData.dev_ci_url"
+            src="https://static-pubcomm.gate8.com/local/template/l9/common/logo_smilegate.png"
             alt="스마일게이트 로고"
             class="w-auto h-auto"
           />
         </a>
         <a
-          href="https://www.nx3games.com"
+          v-if="setDevCi.dev_ci_yn"
+          :href="footerData.use_dev_ci_url"
           target="_blank"
           class="nx3 ml-2.5 md:ml-4"
         >
           <img
-            :src="footerData.dev_ci_url2"
+            src="https://static-pubcomm.gate8.com/local/template/l9/common/logo_nx3.png"
-            alt="NX3 로고"
+            alt="CI"
             class="w-auto h-auto"
           />
+          <!-- <img
+            :src="setDevCi.dev_ci_img_path"
+            alt="CI"
+            class="w-auto h-auto"
+          /> -->
         </a>
       </div>
 
@@ -160,88 +144,78 @@
 </template>
 
 <script setup lang="ts">
-const { locale } = useI18n()
-interface FooterMenuType {
-  id: string
-  title: string
-  link: string
-  target: string
-  active: string
-  highlight?: string
-}
 
-const footerLinks = ref<FooterMenuType[]>([
+const { tm } = useI18n()
-  {
-    id: 'company',
-    title: '회사소개',
-    link: '#',
-    target: '_blank',
-    active: 'n',
-  },
-  {
-    id: 'terms',
-    title: '이용약관',
-    link: 'https://common.game.onstove.com/terms/index?gameType=SG&termsType=1&langCode=@m{Terms_Lang_Code}',
-    target: '_blank',
-    active: 'n',
-  },
-  {
-    id: 'privacy',
-    title: '개인정보처리방침',
-    link: 'https://clause.onstove.com/stove/terms?category=privacy',
-    target: '_blank',
-    active: 'y',
-  },
-  {
-    id: 'operation',
-    title: '운영정책',
-    link: 'https://common.game.onstove.com/terms/index?gameType=CZN&termsType=3&langCode=@m{Terms_Lang_Code}',
-    target: '_blank',
-    active: 'n',
-  },
-  {
-    id: 'fund',
-    title: '청소년보호정책',
-    link: 'https://common.game.onstove.com/terms/index?gameType=CZN&termsType=6&langCode=ja',
-    target: '_blank',
-    active: 'n',
-  },
-  {
-    id: 'customerService',
-    title: '게임 이용 등급',
-    link: 'https://cs.onstove.com/@m{Terms_Lang_Code}/service/STOVE_CHAOSZERO',
-    target: '_blank',
-    active: 'n',
-  },
-] as FooterMenuType[])
 
-const footerData = ref({
+const gameDataStore = useGameDataStore()
-  dev_ci_url:
+const { gameData } = storeToRefs(gameDataStore)
-    'https://static-pubcomm.gate8.com/local/template/l9/common/logo_smilegate.png',
+
-  dev_ci_url2:
+const config = useRuntimeConfig()
-    'https://static-pubcomm.gate8.com/local/template/l9/common/logo_nx3.png',
+const staticUrl = config.public.staticUrl
-  game_rating_image_url:
+
-    'https://static-pubcomm.gate8.com/local/template/l9/common/grades_age/Type15.svg',
+// 공통다국어 data
-  use_dev_ci_url: true,
+const footerLinks = computed(() => {
-  fund_display_yn: true,
+  return tm('Footer_Menu') as unknown as any[]
-  use_game_rating: true,
-  fund_display_url: 'https://testgame.com/law/fund-ko',
-  game_rating_info: {
-    title: '테스트 게임',
-    reg_no: 'R-2024-7890',
-    prod_date: '2024-05-01',
-    rating_type: '15',
-    company_name: '테스트엔터테인먼트',
-    content_info: '1,2,3,',
-    rating_grade: '15세 이용가',
-    rating_class_no: '2024-123456',
-  },
-  footer_info:
-    "(주)스마일게이트홀딩스 메가포트지점 대표: 성준호<br>주소: 경기도 성남시 분당구 분당로 55, 7층 (서현동 분당 퍼스트타워)<br>통신판매업 신고번호: 제2023-성남분당A-0145호<br>사업자등록번호: 813-85-02492<br>E-mail: <a href='mailto:help@smilegate.com'>help@smilegate.com</a><br>TEL: 1670-0399",
 })
+const footerData = ref(gameData.value?.footer_json as any)
+const setDevCi = ref({
+  dev_ci_yn: gameData.value?.footer_dev_ci_img_yn as boolean,
+  dev_ci_img_path: gameData.value?.footer_dev_ci_img_path as string,
+})
+
+///local/template/common/grades_age
+const getGameRatingImage = computed(() => {  
+  const contentInfo = footerData.value.game_rating_info.rating_type.split(',')
+  // rating_type 12, 15, 18, 19 에 따라 이미지명을 가져오고 이미지를 반환
+  return contentInfo.map(item => {
+    if (item === '12') {
+      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/Type12.svg`
+    } else if (item === '15') {
+      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/Type15.svg`
+    } else if (item === '19') {
+      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/Type19.svg`
+    } else if (item === 'all') {
+      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/TypeAll.svg`
+    } else if (item === 'e') {
+      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/TypeExempt.svg`
+    } else {
+      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/TypeTest.svg`
+    }
+  })
+})
+
+
+const getContentInfoImage = computed(() => {
+  const contentInfo = footerData.value.game_rating_info.content_info.split(',')
+  contentInfo.pop()
+
+  return contentInfo.map(item => {
+    if (item === '1') {
+      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-sexual.svg`
+    } else if (item === '2') {
+      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-fear.svg`
+    } else if (item === '3') {
+      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-inapposite.svg`
+    } else if (item === '4') {
+      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-drug.svg`
+    } else if (item === '5') {
+      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-crime.svg`
+    } else if (item === '6') {
+      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-speculation.svg`
+    } else if (item === '7') {
+      return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-violence.svg`
+    }
+  })
+})
+
+const showAgeRating = ref(false)
+const toggleAgeRating = () => {
+  showAgeRating.value = !showAgeRating.value
+}
 </script>
 
 <style scoped>
+
 /* 태국어 폰트 크기 조정 */
 @media (max-width: 411px) {
   :global(.lang-th) .menu-area li {

layers/server/middleware/gameData.ts

@@ -34,8 +34,8 @@ export default defineEventHandler(async event => {
   // gameData를 직접 가져와서 context에 저장 (API 호출 없이)
   try {
     const config = useRuntimeConfig()
-    const stoveApiBaseUrl = config.public.stoveApiUrl
+    const stoveApiUrlServer = config.public.stoveApiUrlServer
-    const apiUrl = `${stoveApiBaseUrl}/pub-comm/v1.0/template/game`
+    const apiUrl = `${stoveApiUrlServer}/pub-comm/v1.0/template/game`
 
     const langCode = ssrGetFinalLocale(
       event?.node.req.url,

nuxt.config.ts

@@ -81,6 +81,7 @@ export default defineNuxtConfig({
       staticUrl: process.env.STATIC_URL,
 
       stoveApiUrl: process.env.STOVE_API_URL,
+      stoveApiUrlServer: process.env.STOVE_API_URL_SERVERL,
       stoveMaintenanceApiUrl: process.env.STOVE_M_API_URL,
 
       stoveGnb: process.env.STOVE_GNB,