web-temp/DYNAMIC_I18N_ROUTES.md

Dynamic I18n Routes - gameData.lang_codes 기반 언어 제외 설정

이 문서는 gameDataFromServer.lang_codes를 기반으로 특정 언어들을 제외하는 Ignoring Localized Routes 기능의 사용법을 설명합니다.

구현된 기능

1. 동적 언어 제외 설정

• gameDataFromServer.lang_codes에 포함된 언어만 허용
• 포함되지 않은 언어는 자동으로 제외 처리
• 런타임에 동적으로 언어 설정 변경

2. 구현된 파일들

i18n.config.ts

• getI18n() 함수에 allowedLangCodes 매개변수 추가
• generatePageExclusions() 함수로 언어 제외 설정 생성
• customRoutes: 'config' 설정으로 페이지별 언어 제외 지원

layers/composables/useDynamicI18nRoutes.ts

• getAllowedLangCodes(): 허용된 언어 목록 반환
• isLangAllowed(): 특정 언어 허용 여부 확인
• getI18nRouteConfig(): defineI18nRoute용 설정 생성
• getExcludedLangConfig(): 특정 언어 제외 설정 생성

layers/plugins/dynamic-i18n-routes.client.ts

• 클라이언트 사이드에서 gameData 변경 감지
• 언어 설정 동적 업데이트

layers/plugins/dynamic-i18n-routes.server.ts

• 서버 사이드에서 gameData 기반 언어 설정 적용

사용법

1. 페이지에서 동적 언어 제외 설정

<script setup lang="ts">
// 동적 i18n 라우트 설정
const { getI18nRouteConfig } = useDynamicI18nRoutes();

// gameData.lang_codes를 기반으로 동적 언어 제외 설정
const i18nRouteConfig = getI18nRouteConfig();
if (i18nRouteConfig) {
  defineI18nRoute(i18nRouteConfig);
}
</script>

2. 특정 언어만 허용하는 경우

<script setup lang="ts">
const { getI18nRouteConfig } = useDynamicI18nRoutes();

// gameData.lang_codes에 포함된 언어만 허용
const i18nRouteConfig = getI18nRouteConfig();
if (i18nRouteConfig) {
  defineI18nRoute(i18nRouteConfig);
}
</script>

3. 특정 언어를 제외하는 경우

<script setup lang="ts">
const { getExcludedLangConfig } = useDynamicI18nRoutes();

// 특정 언어들을 제외 (예: 'fr', 'de' 제외)
const excludedConfig = getExcludedLangConfig(['fr', 'de']);
if (excludedConfig) {
  defineI18nRoute(excludedConfig);
}
</script>

4. 언어 허용 여부 확인

<script setup lang="ts">
const { isLangAllowed } = useDynamicI18nRoutes();

// 특정 언어가 허용되는지 확인
const isFrenchAllowed = isLangAllowed('fr');
const isKoreanAllowed = isLangAllowed('ko');
</script>

동작 원리

1. 서버 사이드: gameDataFromServer.lang_codes를 기반으로 초기 언어 설정 적용
2. 클라이언트 사이드: gameData 변경 시 언어 설정 동적 업데이트
3. 페이지 레벨: defineI18nRoute를 통해 페이지별 언어 제외 설정
4. 자동 리다이렉트: 허용되지 않은 언어로 접근 시 기본 언어로 리다이렉트

예시 시나리오

시나리오 1: 게임별 언어 제한

// gameData.lang_codes = ['ko', 'en', 'ja']
// 결과: 한국어, 영어, 일본어만 허용, 나머지 언어는 자동 제외

시나리오 2: 특정 언어 제외

// gameData.lang_codes = ['ko', 'en', 'ja', 'zh-tw', 'fr', 'de', 'es', 'pt', 'th', 'zh-cn']
// getExcludedLangConfig(['fr', 'de']) 호출
// 결과: 프랑스어, 독일어 제외, 나머지 언어 허용

주의사항

1. defineI18nRoute는 컴파일 타임에 실행되므로, 동적 설정이 필요한 경우 watchEffect나 watch를 사용
2. SSR과 클라이언트 사이드 모두에서 일관된 동작을 위해 플러그인 사용 권장
3. 언어 변경 시 사용자 경험을 고려한 적절한 리다이렉트 처리 필요

참고 문서

• Nuxt i18n - Ignoring Localized Routes
• Nuxt i18n - defineI18nRoute