@intlayer/docs 9.1.3 → 9.2.0

package/docs/ko/intlayer_with_lynx+react.md

@@ -84,9 +84,101 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 ---
 
-## 5단계: 콘텐츠 선언
+### 패키지
 
-프로젝트 내 어디에서나 **콘텐츠 선언** 파일을 생성하세요(일반적으로 `src/` 내). Intlayer가 지원하는 확장 형식을 사용할 수 있습니다:
+- **intlayer**  
+  설정, 사전 콘텐츠, 타입 생성 및 CLI 명령을 위한 핵심 i18n 도구 모음입니다.
+
+- **react-intlayer**  
+  Lynx에서 로케일을 얻고 전환하기 위해 사용할 컨텍스트 제공자와 React 훅을 제공하는 React 통합입니다.
+
+- **lynx-intlayer**  
+  Intlayer를 Lynx bundler와 통합하기 위한 플러그인을 제공하는 Lynx 통합입니다.
+
+---
+
+</Step>
+
+<Step number={2} title="Intlayer 설정 파일 생성">
+
+프로젝트 루트(또는 편한 위치)에 **Intlayer 설정** 파일을 생성합니다. 다음과 같이 보일 수 있습니다:
+
+```ts fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // ... 필요한 다른 로케일을 추가합니다
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+이 설정 내에서 다음을 수행할 수 있습니다:
+
+- **지원하는 로케일 목록**을 구성합니다.
+- **기본** 로케일을 설정합니다.
+- 나중에 더 고급 옵션을 추가할 수 있습니다(예: 로그, 사용자 정의 콘텐츠 디렉터리 등).
+- [Intlayer 설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
+
+</Step>
+
+<Step number={3} title="Intlayer 플러그인을 Lynx bundler에 추가">
+
+Intlayer를 Lynx와 함께 사용하려면 `lynx.config.ts` 파일에 플러그인을 추가해야 합니다:
+
+```ts fileName="lynx.config.ts"
+import { defineConfig } from "@lynx-js/rspeedy";
+import { pluginIntlayerLynx } from "lynx-intlayer/plugin";
+
+export default defineConfig({
+  plugins: [
+    // ... 다른 플러그인
+    pluginIntlayerLynx(),
+  ],
+});
+```
+
+</Step>
+
+<Step number={4} title="Intlayer 제공자 추가">
+
+애플리케이션 전체에서 사용자 언어를 동기화된 상태로 유지하려면 `react-intlayer`의 `IntlayerProvider` 컴포넌트로 루트 컴포넌트를 감싸야 합니다.
+
+또한 Intlayer가 제대로 작동하도록 보장하기 위해 `intlayerPolyfill` 함수 파일을 추가해야 합니다.
+
+```tsx fileName="src/index.tsx"
+import { root } from "@lynx-js/react";
+
+import { App } from "./App.js";
+import { IntlayerProvider } from "react-intlayer";
+import { intlayerPolyfill } from "lynx-intlayer";
+
+intlayerPolyfill();
+
+root.render(
+  <IntlayerProvider>
+    <App />
+  </IntlayerProvider>
+);
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}
+```
+
+</Step>
+
+<Step number={5} title="콘텐츠 선언">
+
+프로젝트의 어느 곳이든(일반적으로 `src/` 내) Intlayer가 지원하는 모든 확장명 형식을 사용하여 **콘텐츠 선언** 파일을 생성합니다:
 
 - `.content.json`
 - `.content.jsonc`
@@ -114,12 +206,13 @@ const appContent = {
   content: {
     title: "React",
     subtitle: t({
+      ko: "Lynx에서",
       en: "on Lynx",
       fr: "sur Lynx",
       es: "en Lynx",
     }),
     description: t({
-      ko: "로고를 누르고 즐기세요!",
+      ko: "로고를 탭하고 즐겨보세요!",
       en: "Tap the logo and have fun!",
       fr: "Appuyez sur le logo et amusez-vous!",
       es: "¡Toca el logo y diviértete!",
@@ -133,7 +226,7 @@ const appContent = {
       }),
       " src/App.tsx ",
       t({
-        ko: "업데이트를 확인하세요!",
+        ko: "업데이트를 보려면!",
         en: "to see updates!",
         fr: "pour voir les mises à jour!",
         es: "para ver actualizaciones!",
@@ -159,50 +252,50 @@ export default appContent;
         "fr": "sur Lynx",
         "es": "en Lynx"
       }
-    }
-  },
-  "description": {
-    "nodeType": "translation",
-    "translation": {
-      "ko": "로고를 누르고 즐기세요!",
-      "en": "Tap the logo and have fun!",
-      "fr": "Appuyez sur le logo et amusez-vous!",
-      "es": "¡Toca el logo y diviértete!"
-    }
-  },
-  "hint": [
-    {
+    },
+    "description": {
       "nodeType": "translation",
       "translation": {
-        "ko": "편집",
-        "en": "Edit",
-        "fr": "Modifier",
-        "es": "Editar"
+        "ko": "로고를 탭하고 즐겨보세요!",
+        "en": "Tap the logo and have fun!",
+        "fr": "Appuyez sur le logo et amusez-vous!",
+        "es": "¡Toca el logo y diviértete!"
       }
     },
-    " src/App.tsx ",
-    {
-      "nodeType": "translation",
-      "translation": {
-        "ko": "업데이트를 확인하세요!",
-        "en": "to see updates!",
-        "fr": "pour voir les mises à jour!",
-        "es": "para ver actualizaciones!"
+    "hint": [
+      {
+        "nodeType": "translation",
+        "translation": {
+          "ko": "편집",
+          "en": "Edit",
+          "fr": "Modifier",
+          "es": "Editar"
+        }
+      },
+      " src/App.tsx ",
+      {
+        "nodeType": "translation",
+        "translation": {
+          "ko": "업데이트를 보려면!",
+          "en": "to see updates!",
+          "fr": "pour voir les mises à jour!",
+          "es": "para ver actualizaciones!"
+        }
       }
-    }
-  ]
+    ]
+  }
 }
 ```
 
-> 콘텐츠 선언에 대한 자세한 내용은 [Intlayer의 콘텐츠 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
+> 콘텐츠 선언에 대한 자세한 내용은 [Intlayer 콘텐츠 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
 ---
 
-<Steps>
+</Step>
 
-<Step number={1} title="컴포넌트에서 Intlayer 사용하기">
+<Step number={6} title="컴포넌트에서 Intlayer 사용">
 
-`useIntlayer` 훅을 자식 컴포넌트에서 사용하여 로컬라이즈된 콘텐츠를 가져옵니다.
+자식 컴포넌트에서 `useIntlayer` 훅을 사용하여 지역화된 콘텐츠를 얻습니다.
 
 ```tsx fileName="src/App.tsx"
 import { useCallback, useState } from "@lynx-js/react";
@@ -217,8 +310,9 @@ import { LocaleSwitcher } from "./components/LocaleSwitcher.jsx";
 export const App = () => {
   const [alterLogo, setAlterLogo] = useState(false);
   const { title, subtitle, description, hint } = useIntlayer("app");
+
   const onTap = useCallback(() => {
-    // 배경만 변경
+    "background only";
     setAlterLogo(!alterLogo);
   }, [alterLogo]);
 
@@ -254,13 +348,13 @@ export const App = () => {
 };
 ```
 
-> 문자열 기반 속성(예: 버튼의 `title` 또는 `Text` 컴포넌트의 `children`)에서 `content.someKey`를 사용할 때, **`content.someKey.value`를 호출**하여 실제 문자열을 가져오세요.
+> 문자열 기반 props(예: 버튼의 `title` 또는 `Text` 컴포넌트의 `children`)에서 `content.someKey`를 사용할 때는 **실제 문자열을 얻기 위해 `content.someKey.value`를 호출합니다**.
 
 ---
 
 </Step>
 
-<Step number={2} title="앱 로케일 변경하기">
+<Step number={7} title="앱 로케일 변경" isOptional={true}>
 
 컴포넌트 내에서 로케일을 전환하려면 `useLocale` 훅의 `setLocale` 메서드를 사용할 수 있습니다:
 
@@ -299,7 +393,7 @@ export const LocaleSwitcher: FC = () => {
 };
 ```
 
-이 작업은 Intlayer 콘텐츠를 사용하는 모든 컴포넌트를 다시 렌더링하며, 새로운 로케일에 대한 번역을 표시합니다.
+이것은 Intlayer 콘텐츠를 사용하는 모든 컴포넌트의 다시 렌더링을 트리거하며, 이제 새로운 로케일에 대한 번역을 표시합니다.
 
 > 자세한 내용은 [`useLocale` 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md)를 참조하세요.
 

package/docs/ko/intlayer_with_nextjs_14.md

@@ -30,34 +30,7 @@ history:
 author: aymericzip
 ---
 
-# Intlayer로 Next.js 14 and App Router 번역하기 | 국제화(i18n)
-
-<Tabs defaultTab="code">
-  <Tab label="코드" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-next-14-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="데모" value="demo">
-
-<iframe
-  src="https://intlayer-next-14-template.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="데모 - intlayer-next-14-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-next-14-template)을 확인하세요.
+# Intlayer를 사용하여 Next.js 14 및 App Router 웹사이트 번역 | 국제화 (i18n)
 
 ## 목차
 

package/docs/ko/intlayer_with_nextjs_15.md

@@ -31,39 +31,7 @@ history:
 author: aymericzip
 ---
 
-# Intlayer로 Next.js 15 번역하기 | 국제화(i18n)
-
-<Tabs defaultTab="video">
-  <Tab label="동영상" value="video">
-
-<iframe title="Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/e_PPG7PTqGU?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
-
-  </Tab>
-  <Tab label="코드" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-next-15-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="데모" value="demo">
-
-<iframe
-  src="https://next-15-intlayer-template-xt83.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="데모 - intlayer-next-15-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-next-15-template)을 확인하세요.
+# Intlayer를 사용하여 Next.js 15 웹사이트 번역하기 | 국제화 (i18n)
 
 ## 목차
 

package/docs/ko/intlayer_with_react_router_v7_fs_routes.md

@@ -183,204 +183,56 @@ app/
 - `_index` - 인덱스 경로 (부모 경로에서 렌더링)
 - `.` (점) - 경로 세그먼트 구분 (예: `($locale).about` → `/:locale?/about`)
 
-## 파일 시스템 기반 라우트를 사용한 React Router v7 애플리케이션에서 Intlayer 설정을 위한 단계별 가이드
+#### Layout 컴포넌트
 
-<Tabs defaultTab="video">
-  <Tab label="Video" value="video">
-
-<iframe title="How to translate an React Router v7 (File-System Routes) app using Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
-
-  </Tab>
-  <Tab label="Code" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-react-router-v7-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="데모" value="demo">
-
-<iframe
-  src="https://intlayer-react-router-v7.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="데모 - intlayer-react-router-v7-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-See [Application Template](https://github.com/aymericzip/intlayer-react-router-v7-template) on GitHub.
-
-애플리케이션의 언어를 구성하기 위한 설정 파일을 만드세요:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { type IntlayerConfig, Locales } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    defaultLocale: Locales.ENGLISH, // 기본 로케일 설정
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], // 지원하는 로케일 목록
-  },
-};
-
-export default config;
-```
-
-> 이 구성 파일을 통해 지역화된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔에서 Intlayer 로그 비활성화 등 다양한 설정을 할 수 있습니다. 사용 가능한 모든 매개변수 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
-
-<Steps>
-
-<Step number={3} title="Vite 구성에 Intlayer 통합하기">
-
-구성에 intlayer 플러그인을 추가하세요:
-
-```typescript fileName="vite.config.ts"
-import { reactRouter } from "@react-router/dev/vite";
-import { defineConfig } from "vite";
-import { intlayer } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [reactRouter(), intlayer()],
-});
-```
-
-> `intlayer()` Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 이 플러그인은 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. 또한 Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의하며, 성능 최적화를 위한 별칭(alias)도 제공합니다.
-
-</Step>
-
-</Steps>
-
-<Steps>
-
-<Step number={4} title="React Router v7 라우트 구성">
-
-로케일 인식 라우트로 라우팅 구성을 설정하세요:
-
-```typescript fileName="app/routes.ts"
-import { layout, route, type RouteConfig } from "@react-router/dev/routes";
-
-export default [
-  layout("routes/layout.tsx", [
-    route("/:lang?", "routes/page.tsx"), // 지역화된 홈 페이지
-    route("/:lang?/about", "routes/about/page.tsx"), // 지역화된 소개 페이지
-  ]),
-] satisfies RouteConfig;
-```
-
-</Step>
-
-<Step number={5} title="컴포넌트 콘텐츠 추출" isOptional={true}>
-
-기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
-
-이 프로세스를 용이하게 하기 위해 Intlayer는 컴포넌트를 변환하고 콘텐츠를 추출하기 위한 [컴파일러](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/compiler.md) / [추출기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/extract.md)를 제안합니다.
-
-설정하려면 `intlayer.config.ts` 파일에 `compiler` 섹션을 추가할 수 있습니다.
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  // ... 나머지 구성
-  compiler: {
-    /**
-     * 컴파일러 활성화 여부를 나타냅니다.
-     */
-    enabled: true,
-
-    /**
-     * 출력 파일 경로를 정의합니다.
-     */
-    output: ({ fileName, extension }) => `./${fileName}${extension}`,
-
-    /**
-     * 변환 후 컴포넌트를 저장할지 여부를 나타냅니다. 그렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환한 다음 제거할 수 있습니다.
-     */
-    saveComponents: false,
-
-    /**
-     * 사전 키 접두사
-     */
-    dictionaryKeyPrefix: "",
-  },
-};
-
-export default config;
-```
-
-<Tabs>
- <Tab value='추출 명령'>
-
-컴포넌트를 변환하고 콘텐츠를 추출하기 위해 추출기를 실행합니다
-
-```bash packageManager="npm"
-npx intlayer extract
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer extract
-```
-
-```bash packageManager="yarn"
-yarn intlayer extract
-```
-
-```bash packageManager="bun"
-bun x intlayer extract
-```
-
- </Tab>
- <Tab value='Babel 컴파일러'>
-
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+```tsx fileName="app/root.tsx"
+import { getLocaleFromPath } from "intlayer";
+import { IntlayerProvider } from "react-intlayer";
+import {
+  isRouteErrorResponse,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from "react-router";
 
-`vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함합니다.
+import type { Route } from "./+types/root";
 
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import "./app.css";
 
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+// ... 변경되지 않은 App, links 및 ErrorBoundary 코드
 
-```bash packageManager="npm"
-npm run build # 또는 npm run dev
-```
+export async function loader({ request }: Route.LoaderArgs) {
+  const locale = getLocaleFromPath(request.url);
 
-```bash packageManager="pnpm"
-pnpm run build # 또는 pnpm run dev
-```
+  return { locale };
+}
 
-```bash packageManager="yarn"
-yarn build # 또는 yarn dev
-```
+export function Layout({
+  children,
+}: { children: React.ReactNode } & Route.ComponentProps) {
+  const data = useLoaderData<typeof loader>();
+  const { locale } = data ?? {};
 
-```bash packageManager="bun"
-bun run build # Or bun run dev
+  return (
+    <html lang={locale}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
 ```
 
- </Tab>
-</Tabs>
-
----
-
-</Step>
-
-<Step number={5} title="레이아웃 컴포넌트 생성">
-
-루트 레이아웃과 로케일별 레이아웃을 설정하세요:
-
 #### 루트 레이아웃
 
 ```tsx fileName="app/routes/layout.tsx"