feat: 에러 추가 중

layers/components/blocks/LanguageSwitcher.vue

@@ -1,14 +1,33 @@
 <template>
-  <div class="relative">
-    <!-- 커스텀 드롭다운 버튼 -->
+  <div class="select-language" :class="{ 'language-changing': isChanging }">
+    <!-- <select
+      v-model="selectedLocale"
+      :disabled="isChanging"
+      class="text-black px-2 py-1 rounded-md"
+      :class="{ 'opacity-50 cursor-not-allowed': isChanging }"
+      @change="switchLanguage"
+    >
+      <option
+        v-for="localeOption in availableLanguages"
+        :key="localeOption"
+        :value="localeOption"
+      >
+        {{ localeOption }}
+      </option>
+    </select>
+    <span v-if="isChanging" class="ml-2 text-sm text-gray-500">
+      변경 중...
+    </span>
+     -->
+
     <button
       :disabled="isChanging"
-      class="flex items-center gap-2 px-3 py-2 rounded-lg text-[#CCCCCC] transition-colors duration-200 w-[180px] bg-[#292929] border border-[#595959]"
+      class="flex items-center gap-2 px-3 py-2 rounded-lg text-[#CCCCCC] transition-all duration-300 w-[180px] bg-[#292929] border border-[#595959]"
       :class="{ 'opacity-50 cursor-not-allowed': isChanging }"
       @click="toggleDropdown"
     >
-      <!-- 지구본 아이콘 -->
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <!-- 지구본 아이콘 -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g clip-path="url(#clip0_5964_1685)">
         <path fill-rule="evenodd" clip-rule="evenodd" d="M14.6666 8.00065C14.6666 11.6825 11.6818 14.6673 7.99992 14.6673C4.31802 14.6673 1.33325 11.6825 1.33325 8.00065C1.33325 4.31875 4.31802 1.33398 7.99992 1.33398C11.6818 1.33398 14.6666 4.31875 14.6666 8.00065ZM6.89756 13.2199C6.03596 11.8504 5.50924 10.2901 5.36895 8.66732H2.70785C2.99033 10.9326 4.69347 12.7567 6.89756 13.2199ZM2.70785 7.33398H5.36895C5.50924 5.71116 6.03596 4.15086 6.89756 2.78138C4.69347 3.24458 2.99033 5.06868 2.70785 7.33398ZM13.292 8.66732C13.0095 10.9326 11.3064 12.7567 9.10228 13.2199C9.96388 11.8504 10.4906 10.2901 10.6309 8.66732H13.292ZM13.292 7.33398C13.0095 5.06868 11.3064 3.24458 9.10228 2.78138C9.96388 4.15086 10.4906 5.71116 10.6309 7.33398H13.292ZM7.99992 12.468C7.28662 11.3201 6.84273 10.0202 6.70801 8.66732H9.29183C9.15711 10.0202 8.71322 11.3201 7.99992 12.468ZM6.70801 7.33398H9.29183C9.15711 5.98112 8.71322 4.68121 7.99992 3.5333C7.28662 4.68121 6.84273 5.98112 6.70801 7.33398Z" fill="#CCCCCC"/>
         </g>
@@ -18,32 +37,31 @@
         </clipPath>
         </defs>
       </svg>
-      
-      <!-- 현재 언어 텍스트 -->
-      <span class="flex-1 text-sm text-left">{{ getCurrentLanguageName() }}</span>
-      
+      <span class="flex-1 text-sm text-left transition-all duration-300">
+        {{ isChanging ? '언어 변경 중...' : getLanguageName(selectedLocale) }}
+      </span>
+      <!-- 로딩 스피너 -->
+      <svg v-if="isChanging" class="w-3 h-3 animate-spin" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="10" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round" stroke-dasharray="31.416" stroke-dashoffset="31.416">
+          <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
+          <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
+        </circle>
+      </svg>
       <!-- 드롭다운 화살표 -->
-
       <svg 
+      v-else
       class="w-3 h-3 text-gray-300 transition-transform duration-200"
         :class="{ 'rotate-180': isDropdownOpen }"
       viewBox="0 0 12 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
         <path d="M6.69999 4.285L9.59499 7.125C9.91999 7.445 9.69499 8 9.23499 8H2.75999C2.29999 8 2.07499 7.445 2.39999 7.125L5.29499 4.285C5.68499 3.905 6.30499 3.905 6.69499 4.285H6.69999Z" fill="#EBEBEB"/>
       </svg>
-
-    </button>
-
-    <!-- 드롭다운 메뉴 -->
-    <div 
-      v-if="isDropdownOpen"
-      class="absolute bottom-full left-0 mt-1 w-[180px] rounded-lg shadow-lg z-50 bg-[#383838] border border-[#595959]"
-    >
-      <button
-        v-for="localeOption in availableLanguages"
-        :key="localeOption"
-        class="w-full flex items-center gap-2 px-3 py-2 text-left text-white hover:text-[#fc4420] transition-colors duration-200 first:rounded-t-lg last:rounded-b-lg"
-        :class="{ 'text-[#fc4420]': selectedLocale === localeOption }"
-        @click="selectLanguage(localeOption)"
+  </button>
+  <div v-if="isDropdownOpen" class="dropdown-menu">
+    <div v-for="localeItem in availableLanguages" :key="localeItem.code" class="dropdown-menu-item">
+      <button 
+        class="dropdown-menu-item-button"
+        :class="{ 'current': localeItem.code === selectedLocale }"
+        @click="selectLanguage(localeItem.code)"
       >
         <svg 
           width="15" 
@@ -52,20 +70,14 @@
           fill="none" 
           xmlns="http://www.w3.org/2000/svg"
           class="transition-opacity duration-200"
-          :class="{ 'opacity-0': selectedLocale !== localeOption, 'opacity-100': selectedLocale === localeOption }"
         >
           <path fill-rule="evenodd" clip-rule="evenodd" d="M14.6339 0.366117C15.1221 0.854272 15.1221 1.64573 14.6339 2.13388L6.30057 10.4672C6.05437 10.7134 5.71664 10.8458 5.36872 10.8324C5.0208 10.8191 4.69421 10.6612 4.46762 10.3968L0.300952 5.53571C-0.148326 5.01155 -0.0876239 4.22243 0.436533 3.77315C0.960691 3.32387 1.74982 3.38458 2.19909 3.90873L5.48729 7.74496L12.8661 0.366117C13.3543 -0.122039 14.1458 -0.122039 14.6339 0.366117Z" fill="#FC4420"/>
         </svg>
-
-
-        <span class="text-sm" :class="{ 'text-[#fc4420]': selectedLocale === localeOption }">{{ getLanguageName(localeOption) }}</span>
+        <span class="text-sm">{{ localeItem.name }}</span>
       </button>
     </div>
-
-    <!-- 변경 중 표시 -->
-    <span v-if="isChanging" class="ml-2 text-sm text-gray-400">
-      변경 중...
-    </span>
+  </div>
+  
   </div>
 </template>
 
@@ -74,17 +86,12 @@ const gameDataStore = useGameDataStore()
 
 // 사용 가능한 언어 목록
 const availableLanguages = computed(() => {
-  return gameDataStore.gameData?.lang_codes || ['ko']
+  return gameDataStore.gameData?.lang_codes?.map(localeCode => ({
+    code: localeCode,
+    name: getLanguageName(localeCode)
+  })) || [{ code: 'ko', name: '한국어' }]
 })
 
-const { locale, setLocale } = useI18n()
-const switchLocalePath = useSwitchLocalePath()
-const pageDataStore = usePageDataStore()
-
-const selectedLocale = ref<string>(locale.value)
-const isChanging = ref(false)
-const isDropdownOpen = ref(false)
-
 // 언어 코드를 한국어 이름으로 변환하는 함수
 const getLanguageName = (localeCode: string) => {
   const languageNames: Record<string, string> = {
@@ -103,18 +110,19 @@ const getLanguageName = (localeCode: string) => {
   return languageNames[localeCode] || localeCode
 }
 
-// 현재 언어 이름 반환
-const getCurrentLanguageName = () => {
-  return getLanguageName(selectedLocale.value)
-}
+const { locale, setLocale } = useI18n()
+const switchLocalePath = useSwitchLocalePath()
+const pageDataStore = usePageDataStore()
 
+const selectedLocale = ref(locale.value)
+const isChanging = ref(false)
+const isDropdownOpen = ref(false)
 // 드롭다운 토글 함수
 const toggleDropdown = () => {
   if (!isChanging.value) {
     isDropdownOpen.value = !isDropdownOpen.value
   }
 }
-
 // 언어 선택 함수
 const selectLanguage = async (localeCode: string) => {
   if (localeCode === selectedLocale.value || isChanging.value) {
@@ -122,12 +130,11 @@ const selectLanguage = async (localeCode: string) => {
     return
   }
   
-  selectedLocale.value = localeCode
+  selectedLocale.value = localeCode as any
   isDropdownOpen.value = false
   await switchLanguage()
 }
-
-// 언어 변경 함수 (CSR 방식)
+// 언어 변경 함수 (서버 미드웨어를 통한 gameData 갱신)
 const switchLanguage = async () => {
   if (!selectedLocale.value || isChanging.value) return
   
@@ -139,18 +146,26 @@ const switchLanguage = async () => {
     if (path) {
       // 페이지 데이터 초기화 (새로운 언어로 다시 로드되도록)
       pageDataStore.clearPageData()
-      
+      window.location.href = path
       // 언어 변경 및 라우팅
-      await setLocale(selectedLocale.value as any)
-      // await router.push(path)
+      // await setLocale(selectedLocale.value as any)
+      
+      // 전체 페이지에 페이드 아웃 효과 적용
+      // document.body.style.transition = 'opacity 0.1s ease-out'
+      // document.body.style.opacity = '0'
+      
+      // // 페이드 아웃 완료 후 페이지 이동
+      // await new Promise(resolve => setTimeout(resolve, 100))
+      
+      // 서버 미드웨어를 통해 gameData 갱신을 위해 페이지 새로고침
+      // 이렇게 하면 서버 미드웨어가 새로운 언어로 gameData를 다시 가져옴
       
-      // 페이지 새로고침을 통해 데이터 재로드 보장
-      await nextTick()
-      window.location.reload()
     }
   } catch {
     // 오류 발생 시 이전 언어로 복원
     selectedLocale.value = locale.value
+    // 페이드 효과 복원
+    document.body.style.opacity = '1'
   } finally {
     isChanging.value = false
   }
@@ -160,20 +175,85 @@ const switchLanguage = async () => {
 watch(locale, newLocale => {
   selectedLocale.value = newLocale
 })
-
-// 외부 클릭 시 드롭다운 닫기
-onMounted(() => {
-  const handleClickOutside = (event: Event) => {
-    const target = event.target as HTMLElement
-    if (!target.closest('.relative')) {
-      isDropdownOpen.value = false
-    }
-  }
-  
-  document.addEventListener('click', handleClickOutside)
-  
-  onUnmounted(() => {
-    document.removeEventListener('click', handleClickOutside)
-  })
-})
 </script>
+<style scoped>
+.select-language {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 180px;
+  text-align: left;
+  font-size: 12px;
+  color: #ccc;
+}
+
+/* 페이지 전환 애니메이션 */
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+}
+
+/* 언어 변경 시 전체 페이지 페이드 효과 */
+.language-changing {
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+/* 전체 페이지 전환 효과 */
+body {
+  transition: opacity 0.5s ease-out;
+}
+.select-language select {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 0 10px;
+  font-size: 16px;
+}
+.dropdown-menu {
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: 4px;
+  left: 0;
+  width: 100%;
+  background-color: #292929;
+  border: 1px solid #595959;
+  border-radius: 8px;
+  padding: 10px;
+  font-size: 12px;
+  color: #ccc;
+}
+
+.dropdown-menu-item-button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  gap: 8px;
+  padding: 0 12px;
+  text-align: left;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.dropdown-menu-item-button svg {
+  opacity: 0;
+}
+.dropdown-menu-item-button.current {
+  color: #fc4420;
+  font-weight: 500;
+}
+.dropdown-menu-item-button.current svg {
+  opacity: 1;
+}
+
+</style>

layers/components/layouts/Footer.vue

@@ -24,12 +24,12 @@
           </li>
           <li class="relative">
             <button class="hover:text-gray-600 transition-colors" @click="toggleAgeRating">
-              {{ tm('Footer_AgeRating') }}
+              {{ footerAgeRating }}
             </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>
+                <h3 class="text-white text-base">{{ footerAgeRating }}</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>
@@ -55,23 +55,23 @@
               <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">{{ footerAgeRatingInfo[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">{{ footerAgeRatingInfo[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">{{ footerAgeRatingInfo[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">{{ footerAgeRatingInfo[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">{{ footerAgeRatingInfo[4] }}</span>
                     <span class="text-white text-sm flex-1">{{ footerData.game_rating_info.rating_class_no }}</span>
                   </div>
                 </div>
@@ -85,7 +85,7 @@
         <address class="not-italic text-gray-500">
           <div class="row my-1.5 leading-5">
             <span
-              v-dompurify-html="tm('Footer_Address')"
+              v-dompurify-html="footerAddress"
               class="[&_a]:cursor-pointer [&_a]:text-blue-500 [&_a]:underline"
             ></span>
           </div>
@@ -93,11 +93,11 @@
       </div>
 
       <div class="mt-6 md:mt-6">
-        <div class="text-xs text-white/30">{{ tm('Footer_caution') }}</div>
+        <div class="text-xs text-white/30">{{ footerCaution }}</div>
       </div>
 
       <div class="copyright-area mt-6 text-gray-500 md:mt-4">
-        <span>{{ tm('Footer_Copyright') }}</span>
+        <span>&copy; Smilegate. All rights reserved</span>
       </div>
 
       <div class="logo-area flex mt-6 md:mt-6">
@@ -144,10 +144,11 @@
 </template>
 
 <script setup lang="ts">
+
 const config = useRuntimeConfig()
 const staticUrl = config.public.staticUrl
-// const runType = config.public.runType
 const runType = config.public.runType
+
 const translationApi = `${runType}/test/multilingual/test_common_template.json`
 
 const result = await useApiData({ baseApiUrl: staticUrl, url: translationApi })
@@ -162,74 +163,126 @@ const { tm } = useI18n({
 const gameDataStore = useGameDataStore()
 const { gameData } = storeToRefs(gameDataStore)
 
-const commonResourceUrl = `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common`
-// 공통다국어 data
-const footerLinks = computed(() => {
-  return tm('Footer_Menu') as unknown as any[]
-})
-const footerData = ref(gameData.value?.footer_json as any)
+// 타입 정의
+interface FooterMenuItem {
+  title: string
+  url: string
+  target?: string
+  active?: string
+}
 
-const setDevCi = ref({
+interface GameRatingInfo {
+  company_name: string
+  rating_grade: string
+  reg_no: string
+  prod_date: string
+  rating_class_no: string
+  rating_type: string
+  content_info: string
+}
+
+interface FooterData {
+  game_rating_info: GameRatingInfo
+  use_dev_ci_url?: string
+}
+
+interface DevCiConfig {
+  dev_ci_yn: boolean
+  dev_ci_img_path: string
+}
+
+// 공통다국어 data
+const footerLinks = computed((): FooterMenuItem[] => {
+  const menu = (tm as any)('Footer_Menu')
+  return Array.isArray(menu) ? menu as FooterMenuItem[] : []
+})
+const footerData = ref(gameData.value?.footer_json as unknown as FooterData)
+const setDevCi = ref<DevCiConfig>({
   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 getGameRatingImage = computed((): string[] => {  
   const contentInfo = footerData.value.game_rating_info.rating_type.split(',')
   // rating_type 12, 15, 18, 19 에 따라 이미지명을 가져오고 이미지를 반환
   return contentInfo.map(item => {
-    switch (item) {
-      case '12':
-        return `${commonResourceUrl}/grades_age/Type12.svg`
-      case '15':
-        return `${commonResourceUrl}/grades_age/Type15.svg`
-      case '19':
-        return `${commonResourceUrl}/grades_age/Type19.svg`
-      case 'all':
-        return `${commonResourceUrl}/grades_age/TypeAll.svg`
-      case 'e':
-        return `${commonResourceUrl}/grades_age/TypeExempt.svg`
-      default:
-        return `${commonResourceUrl}/grades_age/TypeTest.svg`
+    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 getContentInfoImage = computed((): string[] => {
   const contentInfo = footerData.value.game_rating_info.content_info.split(',')
   contentInfo.pop()
 
   return contentInfo.map(item => {
-    switch (item) {
-      case '1':
-        return `${commonResourceUrl}/grades_use/Type-sexual.svg`
-      case '2':
-        return `${commonResourceUrl}/grades_use/Type-fear.svg`
-      case '3':
-        return `${commonResourceUrl}/grades_use/Type-inapposite.svg`
-      case '4':
-        return `${commonResourceUrl}/grades_use/Type-drug.svg`
-      case '5':
-        return `${commonResourceUrl}/grades_use/Type-crime.svg`
-      case '6':
-        return `${commonResourceUrl}/grades_use/Type-speculation.svg`
-      case '7':
-        return `${commonResourceUrl}/grades_use/Type-violence.svg`
-      default:
-        return ''
+    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 = () => {
+const showAgeRating = ref<boolean>(false)
+const toggleAgeRating = (): void => {
   showAgeRating.value = !showAgeRating.value
 }
+
+// 템플릿에서 사용할 다국어 텍스트들
+const footerAgeRating = computed((): string => {
+  const text = (tm as any)('Footer_AgeRating')
+  return typeof text === 'string' ? text : ''
+})
+const footerAgeRatingInfo = computed((): string[] => {
+  const info = (tm as any)('Footer_AgeRating_Info')
+  return Array.isArray(info) ? info : []
+})
+const footerAddress = computed((): string => {
+  const address = (tm as any)('Footer_Address')
+  return typeof address === 'string' ? address : ''
+})
+const footerCaution = computed((): string => {
+  const caution = (tm as any)('Footer_caution')
+  return typeof caution === 'string' ? caution : ''
+})
 </script>
 
 <style scoped>
 
+/* 태국어 폰트 크기 조정 */
+@media (max-width: 411px) {
+  :global(.lang-th) .menu-area li {
+    font-size: 10px;
+  }
+}
 
+@media (max-width: 321px) {
+  :global(.lang-th) .menu-area li {
+    font-size: 9px;
+  }
+}
 </style>