@intlayer/docs 8.12.4 → 8.12.5-canary.0

package/docs/ko/dynamic_dictionaries/variants.md

@@ -0,0 +1,234 @@
+---
+createdAt: 2026-06-12
+updatedAt: 2026-06-12
+title: 변형
+description: 코드 변경 없이 런타임에 서로 전환할 수 있는 이름이 지정된 대체 콘텐츠(A/B 테스트, 시즌별 배너, 기능 플래그가 지정된 텍스트)를 선언하기 위해 Intlayer 콘텐츠 파일에서 variant 메타데이터 필드를 사용합니다.
+keywords:
+  - 변형
+  - A/B 테스트
+  - 기능 플래그
+  - 동적 콘텐츠
+  - Intlayer
+  - 국제화
+slugs:
+  - doc
+  - concept
+  - variants
+history:
+  - version: 8.13.0
+    date: 2026-06-12
+    changes: "변형 사전 기능 출시"
+author: aymericzip
+---
+
+# 변형
+
+**변형**(Variant)은 동일한 사전 키(`key`)를 공유하지만 서로 다른 `variant` 이름을 선언하는 콘텐츠 파일의 집합입니다. Intlayer는 `useIntlayer`에 전달된 선택기에 따라 적절한 파일을 서비스합니다.
+
+## 변형 선언
+
+각 파일은 하나의 이름이 지정된 대체 콘텐츠를 나타냅니다. `variant` 필드를 생략하거나 `"default"`로 설정하면 기본(fallback) 변형으로 표시됩니다.
+
+```ts fileName="hero-banner.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const dictionary = {
+  key: "hero-banner",
+  variant: "default",
+  content: {
+    headline: t({
+      en: "Build faster with Intlayer",
+      fr: "Développez plus vite avec Intlayer",
+    }),
+    cta: t({ en: "Get started", fr: "Commencer" }),
+  },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+```ts fileName="hero-banner.black-friday.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const dictionary = {
+  key: "hero-banner",
+  variant: "black_friday",
+  content: {
+    headline: t({
+      en: "50 % off — today only",
+      fr: "−50 % — aujourd'hui seulement",
+    }),
+    cta: t({ en: "Shop now", fr: "Acheter maintenant" }),
+  },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+## 변형 소비하기
+
+### 기본 변형
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+    ```tsx fileName="Hero.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "react-intlayer";
+
+    export const Hero = () => {
+      const { headline, cta } = useIntlayer("hero-banner");
+      // → 기본 변형
+
+      return (
+        <section>
+          <h1>{headline}</h1>
+          <a>{cta}</a>
+        </section>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+    ```tsx fileName="Hero.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "next-intlayer";
+
+    export const Hero = () => {
+      const { headline, cta } = useIntlayer("hero-banner");
+      // → 기본 변형
+
+      return (
+        <section>
+          <h1>{headline}</h1>
+          <a>{cta}</a>
+        </section>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+    ```vue fileName="Hero.vue" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    <script setup>
+    import { useIntlayer } from "vue-intlayer";
+    const { headline, cta } = useIntlayer("hero-banner");
+    </script>
+
+    <template>
+      <section>
+        <h1>{{ headline }}</h1>
+        <a>{{ cta }}</a>
+      </section>
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+    ```svelte fileName="Hero.svelte" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    <script lang="ts">
+    import { useIntlayer } from "svelte-intlayer";
+    const content = useIntlayer("hero-banner");
+    </script>
+
+    <section>
+      <h1>{$content.headline}</h1>
+      <a>{$content.cta}</a>
+    </section>
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+    ```tsx fileName="Hero.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "preact-intlayer";
+
+    export const Hero = () => {
+      const { headline, cta } = useIntlayer("hero-banner");
+      // → 기본 변형
+
+      return (
+        <section>
+          <h1>{headline}</h1>
+          <a>{cta}</a>
+        </section>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+    ```tsx fileName="Hero.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "solid-intlayer";
+
+    export const Hero = () => {
+      const content = useIntlayer("hero-banner");
+      // → 기본 변형
+
+      return (
+        <section>
+          <h1>{content().headline}</h1>
+          <a>{content().cta}</a>
+        </section>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+    ```typescript fileName="hero.component.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { Component } from "@angular/core";
+    import { useIntlayer } from "angular-intlayer";
+
+    @Component({
+      selector: "app-hero",
+      template: `
+        <section>
+          <h1>{{ content().headline }}</h1>
+          <a>{{ content().cta }}</a>
+        </section>
+      `,
+    })
+    export class HeroComponent {
+      content = useIntlayer("hero-banner");
+    }
+    ```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+    ```javascript fileName="hero.js"
+    import { useIntlayer } from "vanilla-intlayer";
+
+    const { headline, cta } = useIntlayer("hero-banner");
+
+    document.body.innerHTML = `
+      <section>
+        <h1>${headline}</h1>
+        <a>${cta}</a>
+      </section>
+    `;
+    ```
+
+  </Tab>
+</Tabs>
+
+### 이름이 지정된 변형
+
+```tsx
+const { headline, cta } = useIntlayer("hero-banner", {
+  variant: "black_friday",
+});
+```
+
+### 명시적 로케일로 이름이 지정된 변형
+
+```tsx
+const content = useIntlayer("hero-banner", {
+  variant: "black_friday",
+  locale: "ko",
+});
+```
+
+## 일반적인 사용 사례
+
+- 실험 키(experiment key)에 따른 A/B 카피 테스트
+- 시즌별 또는 프로모션 배너
+- 기능 플래그(feature flags)로 제어되는 문구
+- 특정 로케일 타겟 마케팅 캠페인

package/docs/ko/formatters.md

@@ -37,6 +37,7 @@ history:
   - version: 5.8.0
     date: 2025-08-20
     changes: "콘텐츠 처리 유틸리티 추가 (getContent, getTranslation, getIntlayer 등)"
+author: aymericzip
 ---
 
 # Intlayer 포매터

package/docs/ko/how_works_intlayer.md

@@ -17,6 +17,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "초기 이력"
+author: aymericzip
 ---
 
 # Intlayer 작동 방식

package/docs/ko/interest_of_intlayer.md

@@ -25,6 +25,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "기록 초기화"
+author: aymericzip
 ---
 
 # 왜 Intlayer를 고려해야 할까요?

package/docs/ko/intlayer_CMS.md

@@ -27,6 +27,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "이력 초기화"
+author: aymericzip
 ---
 
 # Intlayer 콘텐츠 관리 시스템(CMS) 문서

package/docs/ko/intlayer_visual_editor.md

@@ -20,6 +20,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "초기 이력"
+author: aymericzip
 ---
 
 # Intlayer Visual Editor Documentation

package/docs/ko/intlayer_with_adonisjs.md

@@ -22,6 +22,7 @@ history:
   - version: 8.0.0
     date: 2025-12-30
     changes: "히스토리 초기화"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 AdonisJS 백엔드 웹사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_analog.md

@@ -23,6 +23,7 @@ history:
   - version: 8.0.4
     date: 2026-01-26
     changes: "히스토리 초기화"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Analog (Angular) 앱 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_angular_19.md

@@ -26,6 +26,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "히스토리 초기화"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Angular 19 (Webpack) 웹사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_angular_21.md

@@ -28,6 +28,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "초기 기록"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Angular 21(Vite) 웹사이트 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_astro.md

@@ -27,6 +27,7 @@ history:
   - version: 6.2.0
     date: 2025-10-03
     changes: "Astro 통합, 설정 및 사용법 업데이트"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Astro 사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_astro_lit.md

@@ -26,6 +26,7 @@ history:
   - version: 8.7.7
     date: 2026-04-24
     changes: "Astro + Lit를 위한 초기 문서"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Astro + Lit 사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_astro_preact.md

@@ -25,6 +25,7 @@ history:
   - version: 8.7.7
     date: 2026-04-24
     changes: "Astro + Preact를 위한 초기 문서"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Astro + Preact 사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_astro_react.md

@@ -28,6 +28,7 @@ history:
   - version: 6.2.0
     date: 2025-10-03
     changes: "Astro 통합, 설정 및 사용법 업데이트"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Astro + React 사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_astro_solid.md

@@ -25,6 +25,7 @@ history:
   - version: 8.7.7
     date: 2026-04-24
     changes: "Astro + Solid를 위한 초기 문서"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Astro + Solid 사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_astro_svelte.md

@@ -25,6 +25,7 @@ history:
   - version: 8.7.7
     date: 2026-04-24
     changes: "Astro + Svelte를 위한 초기 문서"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Astro + Svelte 사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_astro_vanilla.md

@@ -25,6 +25,7 @@ history:
   - version: 8.7.7
     date: 2026-04-24
     changes: "Astro + Vanilla JS를 위한 초기 문서"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Astro + Vanilla JS 사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_astro_vue.md

@@ -25,6 +25,7 @@ history:
   - version: 8.7.7
     date: 2026-04-24
     changes: "Astro + Vue를 위한 초기 문서"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Astro + Vue 사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_create_react_app.md

@@ -26,6 +26,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "초기 이력"
+author: aymericzip
 ---
 
 # Intlayer로 Create React App 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_express.md

@@ -25,6 +25,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "이력 초기화"
+author: aymericzip
 ---
 
 # Intlayer로 Express backend 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_fastify.md

@@ -25,6 +25,7 @@ history:
   - version: 7.6.0
     date: 2025-12-31
     changes: "히스토리 초기화"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Fastify 백엔드 웹사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_hono.md

@@ -25,6 +25,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "히스토리 초기화"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Hono 백엔드 웹사이트 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_lynx+react.md

@@ -26,6 +26,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "초기 이력"
+author: aymericzip
 ---
 
 # Intlayer로 Lynx and React mobile app 번역하기 | 국제화(i18n)
@@ -300,7 +301,9 @@ export default appContent;
 
 ---
 
-## 단계 4: 컴포넌트에서 Intlayer 사용하기
+<Steps>
+
+<Step number={1} title="컴포넌트에서 Intlayer 사용하기">
 
 `useIntlayer` 훅을 자식 컴포넌트에서 사용하여 로컬라이즈된 콘텐츠를 가져옵니다.
 
@@ -358,7 +361,9 @@ export const App = () => {
 
 ---
 
-## (선택 사항) 단계 5: 앱 로케일 변경하기
+</Step>
+
+<Step number={2} title="앱 로케일 변경하기">
 
 컴포넌트 내에서 로케일을 전환하려면 `useLocale` 훅의 `setLocale` 메서드를 사용할 수 있습니다:
 
@@ -401,6 +406,10 @@ export const LocaleSwitcher: FC = () => {
 
 > 자세한 내용은 [`useLocale` 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md)를 참조하세요.
 
+</Step>
+
+</Steps>
+
 ## TypeScript 구성 (TypeScript를 사용하는 경우)
 
 Intlayer는 자동 완성 기능을 개선하고 번역 오류를 감지하기 위해 숨겨진 폴더(기본적으로 `.intlayer`)에 타입 정의를 생성합니다:

package/docs/ko/intlayer_with_nestjs.md

@@ -14,7 +14,9 @@ slugs:
   - doc
   - environment
   - nest
-author: AydinTheFirst
+author:
+  name: AydinTheFirst
+  github: AydinTheFirst
 history:
   - version: 8.9.0
     date: 2026-05-04

package/docs/ko/intlayer_with_next-i18next.md

@@ -16,6 +16,7 @@ slugs:
   - doc
   - next-i18next
 applicationTemplate: https://github.com/aymericzip/intlayer-next-i18next-template
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 next-i18next로 Next.js 15 웹사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_next-intl.md

@@ -15,6 +15,7 @@ slugs:
   - doc
   - next-intl
 applicationTemplate: https://github.com/aymericzip/intlayer-next-intl-template
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 next-intl 기반 Next.js 15 웹사이트 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_nextjs_14.md

@@ -27,6 +27,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "이력 초기화"
+author: aymericzip
 ---
 
 # Intlayer로 Next.js 14 and App Router 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_nextjs_15.md

@@ -28,6 +28,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "초기 이력"
+author: aymericzip
 ---
 
 # Intlayer로 Next.js 15 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_nextjs_16.md

@@ -30,6 +30,7 @@ history:
   - version: 7.0.0
     date: 2025-06-29
     changes: "초기 기록"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Next.js 16 웹사이트 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_nextjs_compiler.md

@@ -29,6 +29,7 @@ history:
   - version: 8.1.6
     date: 2026-02-23
     changes: "최초 릴리스"
+author: aymericzip
 ---
 
 # 기존 Next.js 애플리케이션을 다국어(i18n)로 만드는 방법 (i18n 가이드 2026)

package/docs/ko/intlayer_with_nextjs_no_locale_path.md

@@ -24,6 +24,7 @@ history:
   - version: 8.0.0
     date: 2026-01-10
     changes: "초기 릴리스"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Next.js 16 웹사이트 번역(페이지 경로에 [locale] 없이) | 국제화 (i18n)

package/docs/ko/intlayer_with_nextjs_page_router.md

@@ -28,6 +28,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "초기 이력"
+author: aymericzip
 ---
 
 # Intlayer로 Next.js and Page Router 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_nuxt.md

@@ -27,6 +27,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "초기 기록"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Nuxt 및 Vue 웹사이트 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_react_native+expo.md

@@ -26,6 +26,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "초기 이력"
+author: aymericzip
 ---
 
 # Expo 및 React Native 앱 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_react_router_v7.md

@@ -36,6 +36,7 @@ history:
   - version: 5.8.2
     date: 2025-09-04
     changes: "React Router v7 지원 추가"
+author: aymericzip
 ---
 
 # Intlayer로 React Router v7 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_react_router_v7_fs_routes.md

@@ -33,6 +33,7 @@ history:
   - version: 5.8.2
     date: 2025-09-04
     changes: "React Router v7 지원 추가"
+author: aymericzip
 ---
 
 # Intlayer로 React Router v7 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_storybook.md

@@ -23,6 +23,7 @@ history:
   - version: 8.4.5
     date: 2026-03-20
     changes: "Init doc"
+author: aymericzip
 ---
 
 # Storybook과 함께하는 Intlayer

package/docs/ko/intlayer_with_svelte_kit.md

@@ -26,6 +26,7 @@ history:
   - version: 7.1.10
     date: 2025-11-20
     changes: "초기 기록"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 SvelteKit 웹사이트 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_tanstack+solid.md

@@ -28,6 +28,7 @@ history:
   - version: 8.5.1
     date: 2026-03-25
     changes: "Tanstack Start Solid.js용으로 추가됨"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Solid.js 기반 Tanstack Start 웹사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_tanstack.md

@@ -45,6 +45,7 @@ history:
   - version: 5.8.1
     date: 2025-09-09
     changes: "TanStack Start용으로 추가됨"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 TanStack Start 웹사이트 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_vanilla.md

@@ -24,6 +24,7 @@ history:
   - version: 8.4.10
     date: 2026-03-31
     changes: "기록 초기화"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Vanilla JS 웹사이트 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_vite+lit.md

@@ -24,6 +24,7 @@ history:
   - version: 8.4.10
     date: 2026-03-23
     changes: "초기 기록"
+author: aymericzip
 ---
 
 # Intlayer를 사용하여 Vite 및 Lit 웹사이트 번역하기 | 국제화 (i18n)

package/docs/ko/intlayer_with_vite+preact.md

@@ -26,6 +26,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "초기 이력"
+author: aymericzip
 ---
 
 # Intlayer로 Vite and Preact 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_vite+react.md

@@ -28,6 +28,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "초기 이력"
+author: aymericzip
 ---
 
 # Intlayer로 Vite 및 React 번역하기 | 국제화(i18n)

package/docs/ko/intlayer_with_vite+react_compiler.md

@@ -29,6 +29,7 @@ history:
   - version: 8.1.6
     date: 2026-02-23
     changes: "초기 릴리스"
+author: aymericzip
 ---
 
 # 기존 Vite 및 React 애플리케이션을 나중에 다국어(i18n)로 만드는 방법 (i18n 가이드 2026)