121 lines
3.9 KiB
Markdown
121 lines
3.9 KiB
Markdown
# 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. 페이지에서 동적 언어 제외 설정
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
// 동적 i18n 라우트 설정
|
|
const { getI18nRouteConfig } = useDynamicI18nRoutes();
|
|
|
|
// gameData.lang_codes를 기반으로 동적 언어 제외 설정
|
|
const i18nRouteConfig = getI18nRouteConfig();
|
|
if (i18nRouteConfig) {
|
|
defineI18nRoute(i18nRouteConfig);
|
|
}
|
|
</script>
|
|
```
|
|
|
|
### 2. 특정 언어만 허용하는 경우
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
const { getI18nRouteConfig } = useDynamicI18nRoutes();
|
|
|
|
// gameData.lang_codes에 포함된 언어만 허용
|
|
const i18nRouteConfig = getI18nRouteConfig();
|
|
if (i18nRouteConfig) {
|
|
defineI18nRoute(i18nRouteConfig);
|
|
}
|
|
</script>
|
|
```
|
|
|
|
### 3. 특정 언어를 제외하는 경우
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
const { getExcludedLangConfig } = useDynamicI18nRoutes();
|
|
|
|
// 특정 언어들을 제외 (예: 'fr', 'de' 제외)
|
|
const excludedConfig = getExcludedLangConfig(['fr', 'de']);
|
|
if (excludedConfig) {
|
|
defineI18nRoute(excludedConfig);
|
|
}
|
|
</script>
|
|
```
|
|
|
|
### 4. 언어 허용 여부 확인
|
|
|
|
```vue
|
|
<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: 게임별 언어 제한
|
|
```typescript
|
|
// gameData.lang_codes = ['ko', 'en', 'ja']
|
|
// 결과: 한국어, 영어, 일본어만 허용, 나머지 언어는 자동 제외
|
|
```
|
|
|
|
### 시나리오 2: 특정 언어 제외
|
|
```typescript
|
|
// 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](https://i18n.nuxtjs.org/docs/guide/ignoring-localized-routes)
|
|
- [Nuxt i18n - defineI18nRoute](https://i18n.nuxtjs.org/docs/compiler-macros/define-i18n-route)
|