@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/ko/custom_url_rewrites.md

@@ -248,7 +248,7 @@ Intlayer는 내부적으로 이러한 패턴을 통합된 문법으로 정규화
 
 <Tabs group='framework'>
   <Tab label="Next.js" value="nextjs">
-  
+
     ```tsx
     'use client';
 
@@ -263,7 +263,7 @@ Intlayer는 내부적으로 이러한 패턴을 통합된 문법으로 정규화
   </Tab>
 
   <Tab label="React Router" value="reactrouter">
-  
+
     ```tsx
     'use client';
 
@@ -279,7 +279,7 @@ Intlayer는 내부적으로 이러한 패턴을 통합된 문법으로 정규화
   </Tab>
 
   <Tab label="Vue" value="vue">
-  
+
     ```vue
     <script setup>
     import { useRewriteURL } from "vue-intlayer";
@@ -291,7 +291,7 @@ Intlayer는 내부적으로 이러한 패턴을 통합된 문법으로 정규화
 
   </Tab>
   <Tab label="Solid" value="solid">
-  
+
     ```tsx
     import { useRewriteURL } from "solid-intlayer";
 
@@ -303,7 +303,7 @@ Intlayer는 내부적으로 이러한 패턴을 통합된 문법으로 정규화
 
   </Tab>
   <Tab label="Svelte" value="svelte">
-  
+
     ```svelte
     <script>
     import { useRewriteURL } from "svelte-intlayer";
@@ -340,6 +340,8 @@ export function middleware(request: NextRequest) {
 
 SolidJS, Vue, Svelte의 경우, 개발 중 리라이트를 `intlayerProxy` Vite 플러그인이 관리합니다.
 
+> Intlayer v9부터 `intlayerProxy()`는 `intlayer()` 플러그인에 직접 번들되어 있으며 `routing.enableProxy` 옵션(`true`가 기본값)을 통해 기본적으로 활성화됩니다. 아래와 같이 별도로 등록하는 것은 이제 선택 사항입니다 — 이전 버전과의 호환성 및 플러그인 순서를 제어해야 하는 설정을 위해 유지됩니다. `routing.enableProxy: false`로 설정하여 옵트아웃할 수 있습니다. [v9 release notes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/releases/v9.md)를 참조하세요.
+
 ```typescript fileName="vite.config.ts"
 import { defineConfig } from "vite";
 import { intlayer } from "vite-intlayer";

package/docs/ko/dictionary/html.md

@@ -483,7 +483,9 @@ HTML 노드에서 `.use()` 메서드를 사용할 때, 제공하는 컴포넌트
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
     #### `<HTMLRenderer />` 컴포넌트
-    
+
+특정 컴포넌트로 HTML 문자열을 렌더링합니다.
+
     ```tsx
     import { HTMLRenderer } from "react-intlayer/html";
 

package/docs/ko/dictionary/markdown.md

@@ -492,7 +492,7 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
 
 <Tabs group="framework">
   <Tab label="React" value="react">
-  
+
     #### `<MarkdownRenderer />` 컴포넌트
 
     특정 옵션으로 Markdown 문자열을 렌더링합니다.
@@ -531,7 +531,7 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
-  
+
     #### `<MarkdownRenderer />` 컴포넌트
 
     특정 옵션으로 Markdown 문자열을 렌더링합니다.
@@ -957,6 +957,10 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
   </Tab>
   <Tab label="Angular" value="angular">
 
+> MDX가 지원됨 — Markdown 내에서 사용되는 모든 component 이름(예: `<MyCustomJSXComponent />`)은 `components` 맵에 대해 해석됩니다.
+
+자신의 markdown renderer를 사용할 수도 있습니다:
+
     ```typescript fileName="app.module.ts"
     import { NgModule } from '@angular/core';
     import { IntlayerMarkdownModule } from 'angular-intlayer/markdown';
@@ -1047,7 +1051,7 @@ const MyComponent = () => {
 ```
 
   </Tab>
- 
+
   <Tab label="Vue" value="vue">
 
 Vue에는 내장 `<Suspense>` 구성 요소가 있습니다. Markdown 콘텐츠를 렌더링하는 구성 요소를 `<Suspense>` 경계로 래핑하십시오.

package/docs/ko/dictionary/plurial.md

@@ -35,10 +35,72 @@ Intlayer에서 복수형 콘텐츠는 `plural` 함수를 통해 구현됩니다.
 
 ## `plural` vs `enu` 사용 시기
 
+To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+
+To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+
+## 복수형 콘텐츠 설정
+
+Intlayer 프로젝트에서 복수형 콘텐츠를 설정하려면 `plural` 헬퍼를 사용하는 콘텐츠 모듈을 생성하십시오. `other` 범주는 필수이며, 로케일에 더 구체적인 범주가 정의되지 않았을 때 폴백으로 사용됩니다.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      ko: plural({
+        other: "{{count}}개의 채용 공고",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "total_openings",
+  "content": {
+    "totalOpenings": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} opening",
+            "other": "{{count}} openings"
+          }
+        },
+        "ko": {
+          "nodeType": "plural",
+          "plural": {
+            "other": "{{count}}개의 채용 공고"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+> 지원되는 범주는 `zero`, `one`, `two`, `few`, `many`, `other`입니다. 타겟 언어가 사용하는 범주만 선언하면 되며, 특정 범주가 일치하지 않으면 Intlayer는 `other`로 폴백합니다.
+>
+> `{{count}}` 플레이스홀더는 런타임에 전달하는 카운트로 자동으로 대체됩니다. 다른 플레이스홀더를 포함할 수도 있습니다(아래 [사용자 정의 플레이스홀더](#custom-placeholders) 참조).
+
+## React Intlayer와 함께 복수형 콘텐츠 사용하기
+
 <Tabs group="framework">
   <Tab label="React" value="react">
 
-To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+React 컴포넌트 내에서 복수형 콘텐츠를 사용하려면 `useIntlayer` 훅을 통해 가져와 카운트와 함께 호출하십시오. 활성 로케일과 카운트가 결합되어 일치하는 CLDR 범주를 선택합니다.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -49,6 +111,11 @@ const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
 
   return (
     <div>
+      {/* 영어 기준:                                  */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
       <p>{totalOpenings(count)}</p>
     </div>
   );
@@ -60,7 +127,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Next.js" value="nextjs">
 
-To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Next.js Client Components에서 복수형 콘텐츠를 사용하려면 `useIntlayer` hook을 통해 이를 검색하고 count와 함께 호출하세요. 다음은 예시입니다:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 "use client";
@@ -84,7 +151,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Vue" value="vue">
 
-To use plural content in Vue components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Vue 컴포넌트에서 복수형 콘텐츠를 사용하려면 `useIntlayer` 훅을 통해 검색하고 count와 함께 호출하세요. 다음은 예시입니다:
 
 ```vue fileName="**/*.vue"
 <script setup lang="ts">
@@ -105,7 +172,7 @@ const { totalOpenings } = useIntlayer("total_openings");
   </Tab>
   <Tab label="Svelte" value="svelte">
 
-To use plural content in Svelte components, retrieve it via the `useIntlayer` hook and call it with a count. The store is accessed with `$`. Here's an example:
+Svelte 컴포넌트에서 복수형 콘텐츠를 사용하려면 `useIntlayer` 훅을 통해 검색하고 count를 사용하여 호출하세요. 스토어는 `$`로 접근합니다. 다음은 예제입니다:
 
 ```svelte fileName="**/*.svelte"
 <script lang="ts">
@@ -124,7 +191,7 @@ const content = useIntlayer("total_openings");
   </Tab>
   <Tab label="Preact" value="preact">
 
-To use plural content in Preact components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Preact 컴포넌트에서 복수형 콘텐츠를 사용하려면 `useIntlayer` 훅을 통해 검색하고 count와 함께 호출합니다. 다음은 예제입니다:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "preact";
@@ -143,10 +210,9 @@ const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
 export default OpeningsComponent;
 ```
 
-  </Tab>
-  <Tab label="Solid" value="solid">
+반환된 함수를 두 가지 동등한 방식으로 호출할 수 있습니다.
 
-To use plural content in SolidJS components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+SolidJS 컴포넌트에서 복수형 콘텐츠를 사용하려면 `useIntlayer` 훅을 통해 이를 검색하고 개수를 전달하여 호출합니다. 다음은 예시입니다:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { Component } from "solid-js";
@@ -168,7 +234,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Angular" value="angular">
 
-To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Angular 컴포넌트에서 복수형 콘텐츠를 사용하려면 `useIntlayer` 훅을 통해 검색하고 개수와 함께 호출하세요. 다음은 예시입니다:
 
 ```typescript fileName="app.component.ts" codeFormat="typescript"
 import { Component, Input } from "@angular/core";
@@ -192,114 +258,16 @@ export class OpeningsComponent {
   </Tab>
   <Tab label="Vanilla JS" value="vanilla">
 
-To use plural content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("total_openings").onChange((newContent) => {
-  document.getElementById("openings")!.textContent =
-    newContent.totalOpenings(5);
-});
-
-// Initial render
-document.getElementById("openings")!.textContent = content.totalOpenings(5);
-```
-
-  </Tab>
-</Tabs>
-
-## 복수형 콘텐츠 설정
-
-Intlayer 프로젝트에서 복수형 콘텐츠를 설정하려면 `plural` 헬퍼를 사용하는 콘텐츠 모듈을 생성하십시오. `other` 범주는 필수이며, 로케일에 더 구체적인 범주가 정의되지 않았을 때 폴백으로 사용됩니다.
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { plural, t, type Dictionary } from "intlayer";
-
-const openingsContent = {
-  key: "total_openings",
-  content: {
-    totalOpenings: t({
-      en: plural({
-        one: "{{count}} opening",
-        other: "{{count}} openings",
-      }),
-      ko: plural({
-        other: "{{count}}개의 채용 공고",
-      }),
-    }),
-  },
-} satisfies Dictionary;
-
-export default openingsContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "total_openings",
-  "content": {
-    "totalOpenings": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} opening",
-            "other": "{{count}} openings"
-          }
-        },
-        "ko": {
-          "nodeType": "plural",
-          "plural": {
-            "other": "{{count}}개의 채용 공고"
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-> 지원되는 범주는 `zero`, `one`, `two`, `few`, `many`, `other`입니다. 타겟 언어가 사용하는 범주만 선언하면 되며, 특정 범주가 일치하지 않으면 Intlayer는 `other`로 폴백합니다.
->
-> `{{count}}` 플레이스홀더는 런타임에 전달하는 카운트로 자동으로 대체됩니다. 다른 플레이스홀더를 포함할 수도 있습니다(아래 [사용자 정의 플레이스홀더](#custom-placeholders) 참조).
-
-## React Intlayer와 함께 복수형 콘텐츠 사용하기
-
-React 컴포넌트 내에서 복수형 콘텐츠를 사용하려면 `useIntlayer` 훅을 통해 가져와 카운트와 함께 호출하십시오. 활성 로케일과 카운트가 결합되어 일치하는 CLDR 범주를 선택합니다.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      {/* 영어 기준:                                  */}
-      {/*  count=0  → "0 openings"   (other)           */}
-      {/*  count=1  → "1 opening"    (one)             */}
-      {/*  count=2  → "2 openings"   (other)           */}
-      {/*  count=21 → "21 openings"  (other)           */}
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
-```
-
-반환된 함수를 두 가지 동등한 방식으로 호출할 수 있습니다.
+`vanilla-intlayer`에서 복수형 콘텐츠를 사용하려면 `useIntlayer` 훅을 통해 검색하고 count와 함께 호출하세요. 다음은 예시입니다:
 
 ```tsx
 totalOpenings(21); // 약식: 카운트만 전달
 totalOpenings({ count: 21 }); // 명시적 형태
 ```
 
+  </Tab>
+</Tabs>
+
 ## 사용자 정의 플레이스홀더
 
 복수형 문자열에는 `{{count}}` 이외의 플레이스홀더를 포함할 수 있습니다. `count`와 함께 객체 형태로 전달하십시오.

package/docs/ko/dynamic_dictionaries/variants.md

@@ -523,6 +523,27 @@ const content = useIntlayer("product", { variant: { id: "prod_abc" } });
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
+    <Tabs>
+      <Tab label="Intlayer >=9.4" value=">=9.4">
+
+        ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+        import { IntlayerProvider } from "next-intlayer/server";
+
+        export default async function Layout({ children, params }) {
+          const { locale } = await params;
+          const schoolType = await getSchoolType();
+
+          return (
+            <IntlayerProvider locale={locale} variant={schoolType}>
+              {children}
+            </IntlayerProvider>
+          );
+        }
+        ```
+
+      </Tab>
+      <Tab label="Intlayer <9.4" value="<9.4">
+
     ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
     import { IntlayerServerProvider } from "next-intlayer/server";
     import { IntlayerClientProvider } from "next-intlayer";
@@ -541,6 +562,9 @@ const content = useIntlayer("product", { variant: { id: "prod_abc" } });
     }
     ```
 
+      </Tab>
+    </Tabs>
+
   </Tab>
   <Tab label="Vue" value="vue">
     ```ts fileName="main.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}