252 lines
8.7 KiB
Vue
252 lines
8.7 KiB
Vue
<template>
|
|
<div class="select-language" :class="{ 'language-changing': isChanging }">
|
|
|
|
<button
|
|
:disabled="isChanging"
|
|
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">
|
|
<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>
|
|
<defs>
|
|
<clipPath id="clip0_5964_1685">
|
|
<rect width="16" height="16" fill="#CCCCCC"/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
<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="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"
|
|
height="11"
|
|
viewBox="0 0 15 11"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="transition-opacity duration-200"
|
|
>
|
|
<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">{{ localeItem.name }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const config = useRuntimeConfig()
|
|
const baseDomain = `${config.public.baseDomain}`
|
|
|
|
const gameDataStore = useGameDataStore()
|
|
|
|
// 사용 가능한 언어 목록
|
|
const availableLanguages = computed(() => {
|
|
return gameDataStore.gameData?.lang_codes?.map(localeCode => ({
|
|
code: localeCode,
|
|
name: getLanguageName(localeCode)
|
|
})) || [{ code: 'ko', name: '한국어' }]
|
|
})
|
|
|
|
// 언어 코드를 한국어 이름으로 변환하는 함수
|
|
const getLanguageName = (localeCode: string) => {
|
|
const languageNames: Record<string, string> = {
|
|
'ko': '한국어',
|
|
'en': 'English',
|
|
'ja': '日本語',
|
|
'zh-cn': '简体中文',
|
|
'zh-tw': '繁體中文',
|
|
'es': 'Español',
|
|
'fr': 'Français',
|
|
'de': 'Deutsch',
|
|
'pt': 'Português',
|
|
'th': 'ไทย',
|
|
'it': 'Italiano'
|
|
}
|
|
return languageNames[localeCode] || localeCode
|
|
}
|
|
|
|
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) {
|
|
isDropdownOpen.value = false
|
|
return
|
|
}
|
|
|
|
selectedLocale.value = localeCode as any
|
|
isDropdownOpen.value = false
|
|
await switchLanguage()
|
|
}
|
|
// 언어 변경 함수 (서버 미드웨어를 통한 gameData 갱신)
|
|
const switchLanguage = async () => {
|
|
if (!selectedLocale.value || isChanging.value) return
|
|
|
|
isChanging.value = true
|
|
|
|
try {
|
|
// URL 경로를 통해 언어 변경
|
|
const path = switchLocalePath(selectedLocale.value as any)
|
|
if (path) {
|
|
// 언어 쿠키 설정 (클라이언트 사이드) - 페이지 이동 전에 설정
|
|
const localeCookie = useCookie('LOCALE', {
|
|
domain: baseDomain,
|
|
path: '/',
|
|
maxAge: 60 * 60 * 24 * 365, // 1년 (초 단위)
|
|
sameSite: 'lax'
|
|
})
|
|
localeCookie.value = selectedLocale.value.toUpperCase()
|
|
|
|
// 페이지 데이터 초기화 (새로운 언어로 다시 로드되도록)
|
|
pageDataStore.clearPageData()
|
|
window.location.href = 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를 다시 가져옴
|
|
|
|
}
|
|
} catch {
|
|
// 오류 발생 시 이전 언어로 복원
|
|
selectedLocale.value = locale.value
|
|
// 페이드 효과 복원
|
|
document.body.style.opacity = '1'
|
|
} finally {
|
|
isChanging.value = false
|
|
}
|
|
}
|
|
|
|
// locale이 변경될 때 selectedLocale도 동기화
|
|
watch(locale, newLocale => {
|
|
selectedLocale.value = newLocale
|
|
})
|
|
</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> |