@intlayer/docs 9.3.3 → 9.4.0

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"]}

package/docs/ko/formatters.md

@@ -52,42 +52,12 @@ Intlayer는 네이티브 `Intl` API 위에 구축된 경량 헬퍼 세트와 무
 
 포매터 생성은 상대적으로 비용이 많이 들기 때문에, 이 캐싱은 동작을 변경하지 않으면서 성능을 향상시킵니다. 이 래퍼는 네이티브 `Intl`과 동일한 API를 제공하므로 사용법도 동일합니다.
 
-- 캐싱은 프로세스별로 이루어지며 호출자에게 투명합니다.
-
 > 환경에 `Intl.DisplayNames`가 없으면, 개발자 전용 경고가 한 번 출력됩니다(폴리필 사용을 고려하세요).
 
-예시:
-
-```ts
-import { Intl } from "intlayer";
-
-// 숫자 포맷팅
-const numberFormat = new Intl.NumberFormat("en-GB", {
-  style: "currency",
-  currency: "GBP",
-});
-numberFormat.format(1234.5); // "£1,234.50"
-
-// 언어, 지역 등의 표시 이름
-const displayNames = new Intl.DisplayNames("fr", { type: "language" });
-displayNames.of("en"); // "anglais"
-
-// 정렬을 위한 콜레이션
-const collator = new Intl.Collator("fr", { sensitivity: "base" });
-collator.compare("é", "e"); // 0 (동일)
-
-// 복수형 규칙
-const pluralRules = new Intl.PluralRules("fr");
-pluralRules.select(1); // "one"
-pluralRules.select(2); // "other"
-```
-
 ## 로케일 유틸리티
 
 ### `getLocaleLang(locale?)`
 
-로케일 문자열에서 언어 코드를 추출합니다:
-
 ```ts
 import { getLocaleLang } from "intlayer";
 
@@ -96,28 +66,15 @@ getLocaleLang("fr-CA"); // "fr"
 getLocaleLang("de"); // "de"
 ```
 
-- **locale**: 언어를 추출할 로케일 (기본값은 현재 로케일)
-
 ### `getLocaleFromPath(inputUrl)`
 
 URL 또는 경로명에서 로케일 부분을 추출합니다:
 
-```ts
-import { getLocaleFromPath } from "intlayer";
-
-getLocaleFromPath("/en/dashboard"); // "en"
-getLocaleFromPath("/fr/dashboard"); // "fr"
-getLocaleFromPath("/dashboard"); // "en" (기본 로케일)
-getLocaleFromPath("https://example.com/es/about"); // "es"
-```
-
 - **inputUrl**: 처리할 전체 URL 문자열 또는 경로명
 - **returns**: 감지된 로케일 또는 로케일이 없을 경우 기본 로케일
 
 ### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
 
-현재 로케일에 맞는 로컬라이즈된 URL을 생성합니다:
-
 ```ts
 import { getLocalizedUrl } from "intlayer";
 
@@ -126,12 +83,6 @@ getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
 getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
 ```
 
-- **url**: 로컬라이즈할 원본 URL
-- **currentLocale**: 현재 로케일
-- **locales**: 선택적 지원 로케일 배열 (기본값은 구성된 로케일)
-- **defaultLocale**: 선택적 기본 로케일 (구성된 기본 로케일을 기본값으로 사용)
-- **prefixDefault**: 기본 로케일에 접두사를 붙일지 여부 (구성된 값을 기본값으로 사용)
-
 ### `getHTMLTextDir(locale?)`
 
 로케일에 대한 텍스트 방향을 반환합니다:
@@ -144,15 +95,10 @@ getHTMLTextDir("ar"); // "rtl"
 getHTMLTextDir("he"); // "rtl"
 ```
 
-- **locale**: 텍스트 방향을 가져올 로케일 (기본값은 현재 로케일)
-- **returns**: `"ltr"`, `"rtl"`, 또는 `"auto"`
-
 ## 콘텐츠 처리 유틸리티
 
 ### `getContent(node, nodeProps, locale?)`
 
-모든 사용 가능한 플러그인(번역, 열거, 삽입 등)을 사용하여 콘텐츠 노드를 변환합니다:
-
 ```ts
 import { getContent } from "intlayer";
 
@@ -163,36 +109,16 @@ const content = getContent(
 );
 ```
 
-- **node**: 변환할 콘텐츠 노드
-- **nodeProps**: 변환 컨텍스트를 위한 속성
-- **locale**: 선택적 로케일 (기본값은 구성된 기본 로케일)
-
 ### `getTranslation(languageContent, locale?, fallback?)`
 
 언어 콘텐츠 객체에서 특정 로케일의 콘텐츠를 추출합니다:
 
-```ts
-import { getTranslation } from "intlayer";
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-    de: "Hallo",
-  },
-  "fr",
-  true
-); // "Bonjour"
-```
-
 - **languageContent**: 로케일을 콘텐츠에 매핑한 객체
 - **locale**: 대상 로케일 (기본값은 설정된 기본 로케일)
 - **fallback**: 기본 로케일로 대체할지 여부 (기본값은 true)
 
 ### `getIntlayer(dictionaryKey, locale?, plugins?)`
 
-키로 사전에서 콘텐츠를 가져오고 변환합니다:
-
 ```ts
 import { getIntlayer } from "intlayer";
 
@@ -200,10 +126,6 @@ const content = getIntlayer("common", "fr");
 const nestedContent = getIntlayer("common", "fr", customPlugins);
 ```
 
-- **dictionaryKey**: 가져올 사전의 키
-- **locale**: 선택적 로케일 (기본 설정된 기본 로케일 사용)
-- **plugins**: 선택적 사용자 정의 변환 플러그인 배열
-
 ### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
 
 원격 사전에서 비동기적으로 콘텐츠를 가져옵니다:
@@ -214,25 +136,12 @@ import { getIntlayerAsync } from "intlayer";
 const content = await getIntlayerAsync("common", "fr");
 ```
 
-- **dictionaryKey**: 가져올 사전의 키
-- **locale**: 선택적 로케일 (기본 설정된 기본 로케일 사용)
-- **plugins**: 선택적 사용자 정의 변환 플러그인 배열
-
 ## 포매터(Formatters)
 
 아래의 모든 헬퍼는 `intlayer`에서 내보내집니다.
 
 ### `percentage(value, options?)`
 
-숫자를 백분율 문자열로 포맷합니다.
-
-동작: 1보다 큰 값은 전체 백분율로 해석되어 정규화됩니다 (예: `25` → `25%`, `0.25` → `25%`).
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-
-예시:
-
 ```ts
 import { percentage } from "intlayer";
 
@@ -428,13 +337,6 @@ pluralRules.select(11); // "many"
 
 ### `units(value, options?)`
 
-`Intl.NumberFormat`의 `style: 'unit'`을 사용하여 숫자 값을 현지화된 단위 문자열로 포맷합니다.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - 공통 필드: `unit` (예: `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
-  - 기본값: `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
-
 예제:
 
 ```ts
@@ -457,11 +359,6 @@ getLocaleLang("fr-CA"); // "fr"
 
 ### `compact(value, options?)`
 
-숫자를 축약 표기법(예: `1.2K`, `1M`)으로 포맷합니다.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }` (`notation: 'compact'`를 내부적으로 사용)
-
 예제:
 
 ```ts
@@ -484,13 +381,6 @@ getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
 
 ### `list(values, options?)`
 
-`Intl.ListFormat`을 사용하여 값 배열을 현지화된 목록 문자열로 포맷합니다.
-
-- **values**: `(string | number)[]`
-- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
-  - 공통 필드: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
-  - 기본값: `type: 'conjunction'`, `style: 'long'`
-
 예시:
 
 ```ts
@@ -519,56 +409,6 @@ getHTMLTextDir("he"); // "rtl"
 
 클라이언트 컴포넌트:
 
-```tsx
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "react-intlayer/format";
-// 또는 Next.js 앱에서
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "next-intlayer/client/format";
-
-const MyComponent = () => {
-  const number = useNumber();
-  const currency = useCurrency();
-  const date = useDate();
-  const percentage = usePercentage();
-  const compact = useCompact();
-  const list = useList();
-  const relativeTime = useRelativeTime();
-  const unit = useUnit();
-
-  return (
-    <div>
-      <p>{number(123456.789)}</p>
-      <p>{currency(1234.5, { currency: "EUR" })}</p>
-      <p>{date(new Date(), "short")}</p>
-      <p>{percentage(0.25)}</p>
-      <p>{compact(1200)}</p>
-      <p>{list(["apple", "banana", "orange"])}</p>
-      <p>{relativeTime(new Date(), new Date() + 1000)}</p>
-      <p>{unit(123456.789, { unit: "kilometer" })}</p>
-    </div>
-  );
-};
-```
-
-서버 컴포넌트(또는 React 서버 런타임):
-
 ```ts
 import {
   useNumber,
@@ -593,8 +433,6 @@ import {
 } from "next-intlayer/server/format";
 ```
 
-> 이 훅들은 `IntlayerProvider` 또는 `IntlayerServerProvider`에서 설정된 로케일을 고려합니다.
-
 ### `getTranslation(languageContent, locale?, fallback?)`
 
 특정 로케일의 콘텐츠를 추출합니다:
@@ -626,28 +464,6 @@ import {
 } from "vue-intlayer/format";
 ```
 
-> 이 컴포저블들은 주입된 `IntlayerProvider`에서 로케일을 고려합니다.
-
 ## 문서 변경 이력
 
-| 버전  | 날짜       | 변경 사항        |
-| ----- | ---------- | ---------------- |
-| 5.8.0 | 2025-08-20 | vue 포매터 추가  |
-| 5.8.0 | 2025-08-18 | 포매터 문서 추가 |
-
-클라이언트 컴포넌트:
-
-```ts
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "vue-intlayer/format";
-```
-
 > 이 컴포저블들은 주입된 `IntlayerProvider`에서 로케일을 고려합니다.

package/docs/ko/how_works_intlayer.md

@@ -62,6 +62,8 @@ Intlayer의 주요 아이디어는 컴포넌트별 콘텐츠 관리를 채택하
    - 이러한 사전은 모든 요구를 충족하고 애플리케이션 성능을 최적화하기 위해 다양한 형식으로 생성됩니다.
 
 3. 사전 타입 생성
+
+4. 사전 타입 생성
    `사전(dictionary)`을 기반으로 Intlayer는 애플리케이션에서 사용할 수 있는 타입을 생성합니다.
 
 - 사전 타입은 Intlayer의 `콘텐츠 선언 파일(content declaration files)`에서 생성됩니다. 기본적으로 Intlayer 사전 타입은 프로젝트의 `.intlayer/types` 디렉토리에 생성됩니다.
@@ -98,6 +100,9 @@ Intlayer는 콘텐츠를 시각적으로 편집할 수 있는 시각적 편집
 
 ![시각적 편집기](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif?raw=true)
 
+- 서버는 클라이언트의 요청을 수신하고 애플리케이션의 콘텐츠(예: `dictionaries` 및 구성)를 검색하여 클라이언트 측에서 접근할 수 있도록 하는 간단한 Express 애플리케이션입니다.
+- 한편, 클라이언트는 시각적 인터페이스를 사용하여 콘텐츠와 상호작용하는 데 사용되는 React 애플리케이션입니다.
+
 - 서버는 클라이언트의 요청을 수신하고 애플리케이션의 `dictionaries`와 같은 콘텐츠 및 구성을 가져와 클라이언트 측에서 접근할 수 있도록 하는 간단한 Express 애플리케이션입니다.
 - 반면 클라이언트는 시각적 인터페이스를 사용하여 콘텐츠와 상호작용하는 데 사용되는 React 애플리케이션입니다.
   `useIntlayer`를 사용하여 콘텐츠를 호출하고 편집기가 활성화되면, 자동으로 문자열을 `IntlayerNode`라는 Proxy 객체로 감쌉니다. 이 노드는 `window.postMessage`를 사용하여 시각적 편집기 인터페이스가 포함된 래핑된 iframe과 통신합니다.  
@@ -105,6 +110,8 @@ Intlayer는 콘텐츠를 시각적으로 편집할 수 있는 시각적 편집
 
 ## 애플리케이션 빌드 최적화
 
+애플리케이션의 번들 크기를 최적화하기 위해 Intlayer는 애플리케이션 빌드를 최적화하는 두 가지 플러그인을 제공합니다: `@intlayer/babel` 및 `@intlayer/swc` 플러그인.
+
 애플리케이션 번들 크기를 최적화하기 위해 Intlayer는 `@intlayer/babel` 및 `@intlayer/swc` 플러그인을 제공합니다.  
 Babel 및 SWC 플러그인은 애플리케이션의 추상 구문 트리(Abstract Syntax Tree, AST)를 분석하여 Intlayer 함수 호출을 최적화된 코드로 대체하는 방식으로 작동합니다. 이 과정은 실제로 사용되는 사전만 가져오도록 하여 청킹(chunking)을 최적화하고 번들 크기를 줄임으로써 프로덕션에서 최종 번들을 더 가볍게 만듭니다.
 

package/docs/ko/intlayer_visual_editor.md

@@ -85,6 +85,16 @@ pnpm add intlayer-editor --save-dev
 bun add intlayer-editor --dev
 ```
 
+`--with` 플래그를 사용하면 다른 명령과 병렬로 편집기를 시작할 수 있습니다:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
+  },
+}
+```
+
 ## 구성
 
 Intlayer 구성 파일에서 편집기 설정을 사용자 정의할 수 있습니다:
@@ -146,6 +156,8 @@ export default config;
 
    > **애플리케이션을 병렬로 실행해야 합니다.** 애플리케이션 URL은 편집기 구성(`applicationURL`)에 설정한 URL과 일치해야 합니다.
 
+> **참고: 이 명령은 `intlayer` 패키지에서 재내보내집니다. 대신 `npx intlayer editor start`를 사용할 수 있습니다.**
+
 2. 그런 다음 제공된 URL을 엽니다. 기본값은 `http://localhost:8000`입니다.
 
    Intlayer에 의해 색인된 각 필드를 커서를 사용하여 콘텐츠 위로 이동하면 볼 수 있습니다.

package/docs/ko/intlayer_with_adonisjs.md

@@ -258,9 +258,11 @@ import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   // ... 기타 구성 옵션
-  middleware: {
-    headerName: "my-locale-header",
-    cookieName: "my-locale-cookie",
+  routing: {
+    storage: [
+      { type: "header", name: "my-locale-header" },
+      { type: "cookie", name: "my-locale-cookie" },
+    ],
   },
 };