@intlayer/docs 9.0.0-canary.3 → 9.0.0-canary.4

package/docs/ja/packages/solid-intlayer/exports.md

@@ -14,6 +14,9 @@ slugs:
   - solid-intlayer
   - exports
 history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "usePathnameユーティリティを追加"
   - version: 8.0.0
     date: 2026-01-21
     changes: "全エクスポートのドキュメントを統一"
@@ -59,6 +62,7 @@ import "solid-intlayer";
 | `useDictionaryAsync`   | `useDictionary` と同じですが、非同期の辞書を扱います。                                                                         | -                                                                                                                       |
 | `useDictionaryDynamic` | `useDictionary` と同じですが、動的な辞書を扱います。                                                                           | -                                                                                                                       |
 | `useLocale`            | 現在のロケールと、それを設定する関数を返します。                                                                               | [useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/solid-intlayer/useLocale.md)         |
+| `usePathname`          | ロケールセグメントを削除した現在のパス名(pathname)を `Accessor<string>` として返します。`popstate` に反応します。              | [usePathname](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/solid-intlayer/usePathname.md)     |
 | `useRewriteURL`        | クライアント側のフックで、URLの書き換えを管理します。ローカライズされた書き換えルールが存在する場合、自動的にURLを更新します。 | [useRewriteURL](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/solid-intlayer/useRewriteURL.md) |
 | `useIntl`              | 現在のロケールのIntlオブジェクトを返します。                                                                                   | -                                                                                                                       |
 | `useLoadDynamic`       | 動的辞書を読み込むフック。                                                                                                     | -                                                                                                                       |

package/docs/ja/packages/solid-intlayer/usePathname.md

@@ -0,0 +1,120 @@
+---
+createdAt: 2026-06-22
+updatedAt: 2026-06-22
+title: usePathname Hook ドキュメント | solid-intlayer
+description: solid-intlayer パッケージの usePathname フックの使い方
+keywords:
+  - usePathname
+  - pathname
+  - locale
+  - Intlayer
+  - 国際化
+  - i18n
+  - ドキュメント
+  - Solid
+  - Solid.js
+  - JavaScript
+slugs:
+  - doc
+  - packages
+  - solid-intlayer
+  - usePathname
+history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "usePathnameユーティリティを追加"
+  - version: 8.2.0
+    date: 2026-06-22
+    changes: "Init history"
+author: aymericzip
+---
+
+# Solid 連携: `usePathname` フックドキュメント
+
+`usePathname` フックは、現在のブラウザのパス名 (pathname) からロケールセグメントを削除したものを、Solid の `Accessor<string>` として返します。ロケールを意識したナビゲーション（例：どのナビゲーションアイテムがアクティブかを判断する）を、ロケールのプレフィックスを手動で削除することなく構築するのに役立ちます。
+
+## `usePathname` のインポート（Solid）
+
+```typescript
+import { usePathname } from "solid-intlayer";
+```
+
+## 概要
+
+`usePathname` は、`window.location.pathname` から初期化されたリアクティブなシグナルを作成し、`getPathWithoutLocale` を介してロケールプレフィックスを削除し、ブラウザが `popstate` イベント（戻る/進むのナビゲーション）を発生させるたびにシグナルを更新します。イベントリスナーは、`onCleanup` を介して自動的にクリーンアップされます。
+
+## 使用方法
+
+```tsx fileName="src/components/NavItem.tsx"
+import type { Component } from "solid-js";
+import { usePathname } from "solid-intlayer";
+
+type NavItemProps = {
+  href: string;
+  label: string;
+};
+
+const NavItem: Component<NavItemProps> = ({ href, label }) => {
+  const pathname = usePathname();
+
+  return (
+    <a href={href} aria-current={pathname() === href ? "page" : undefined}>
+      {label}
+    </a>
+  );
+};
+
+export default NavItem;
+```
+
+## 戻り値
+
+| 型                 | 説明                                                                                               |
+| ------------------ | -------------------------------------------------------------------------------------------------- |
+| `Accessor<string>` | ロケールプレフィックスを取り除いた現在のパス名を返す、Solid のアクセサ（リアクティブなゲッター）。 |
+
+## 動作
+
+- **ロケールの削除**: 先頭のロケールセグメントを削除します（例: `/ja/dashboard` → `/dashboard`）。
+- **リアクティビティ**: `popstate` イベント（ブラウザの戻る / 進む）で自動的に更新されます。
+- **SSR セーフ**: `window` が利用できない場合は `""` を返します。
+- **クリーンアップ**: `popstate` リスナーは Solid の `onCleanup` 経由で自動的に削除されます。
+
+## 例
+
+```tsx fileName="src/components/Sidebar.tsx"
+import type { Component } from "solid-js";
+import { For } from "solid-js";
+import { usePathname } from "solid-intlayer";
+
+const links = [
+  { href: "/dashboard", label: "ダッシュボード" },
+  { href: "/settings", label: "設定" },
+];
+
+const Sidebar: Component = () => {
+  const pathname = usePathname();
+
+  return (
+    <nav>
+      <For each={links}>
+        {({ href, label }) => (
+          <a
+            href={href}
+            style={{ "font-weight": pathname() === href ? "bold" : "normal" }}
+          >
+            {label}
+          </a>
+        )}
+      </For>
+    </nav>
+  );
+};
+
+export default Sidebar;
+```
+
+## 関連事項
+
+- [`useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/solid-intlayer/useLocale.md) — 現在のロケール + ロケールスイッチャー
+- [`getPathWithoutLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getPathWithoutLocale.md) — このフックの内部で使用されるユーティリティ

package/docs/ja/packages/svelte-intlayer/exports.md

@@ -14,6 +14,9 @@ slugs:
   - svelte-intlayer
   - exports
 history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "usePathname ユーティリティを追加"
   - version: 8.0.0
     date: 2026-01-21
     changes: "すべてのエクスポートのドキュメントを統合"
@@ -64,15 +67,16 @@ import "svelte-intlayer";
 import "svelte-intlayer";
 ```
 
-| 関数                   | 説明                                                                                                                     | 関連ドキュメント                                                                                                         |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
-| `useIntlayer`          | `useDictionary` をベースにしており、生成された宣言から辞書の最適化されたバージョンを注入します。                         | -                                                                                                                        |
-| `useDictionary`        | 辞書のようなオブジェクト（key、content）を処理します。`t()` の翻訳、列挙などを処理します。                               | -                                                                                                                        |
-| `useDictionaryAsync`   | `useDictionary` と同じですが、非同期の辞書を扱います。                                                                   | -                                                                                                                        |
-| `useDictionaryDynamic` | `useDictionary` と同じですが、動的な辞書を扱います。                                                                     | -                                                                                                                        |
-| `useLocale`            | 現在のロケールとそれを設定する関数を返します。                                                                           | -                                                                                                                        |
-| `useRewriteURL`        | URLの書き換えを管理するクライアントサイド関数。ローカライズされた書き換えルールが存在する場合は自動的にURLを更新します。 | [useRewriteURL](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/svelte-intlayer/useRewriteURL.md) |
-| `useIntl`              | 現在のロケールのためのIntlオブジェクトを返します。                                                                       | -                                                                                                                        |
+| 関数                   | 説明                                                                                                                      | 関連ドキュメント                                                                                                         |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `useIntlayer`          | `useDictionary` をベースにしており、生成された宣言から辞書の最適化されたバージョンを注入します。                          | -                                                                                                                        |
+| `useDictionary`        | 辞書のようなオブジェクト（key、content）を処理します。`t()` の翻訳、列挙などを処理します。                                | -                                                                                                                        |
+| `useDictionaryAsync`   | `useDictionary` と同じですが、非同期の辞書を扱います。                                                                    | -                                                                                                                        |
+| `useDictionaryDynamic` | `useDictionary` と同じですが、動的な辞書を扱います。                                                                      | -                                                                                                                        |
+| `useLocale`            | 現在のロケールとそれを設定する関数を返します。                                                                            | -                                                                                                                        |
+| `usePathname`          | ロケールセグメントが削除された現在のパス名(pathname)を `Readable<string>` ストアとして返します。`popstate` に反応します。 | [usePathname](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/svelte-intlayer/usePathname.md)     |
+| `useRewriteURL`        | URLの書き換えを管理するクライアントサイド関数。ローカライズされた書き換えルールが存在する場合は自動的にURLを更新します。  | [useRewriteURL](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/svelte-intlayer/useRewriteURL.md) |
+| `useIntl`              | 現在のロケールのためのIntlオブジェクトを返します。                                                                        | -                                                                                                                        |
 
 ### マークダウン
 

package/docs/ja/packages/svelte-intlayer/usePathname.md

@@ -0,0 +1,103 @@
+---
+createdAt: 2026-06-22
+updatedAt: 2026-06-22
+title: usePathname 関数ドキュメント | svelte-intlayer
+description: svelte-intlayer パッケージの usePathname 関数の使用方法
+keywords:
+  - usePathname
+  - pathname
+  - locale
+  - Intlayer
+  - Internationalization
+  - Documentation
+  - Svelte
+  - JavaScript
+slugs:
+  - doc
+  - packages
+  - svelte-intlayer
+  - usePathname
+history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "usePathname ユーティリティを追加"
+  - version: 8.2.0
+    date: 2026-06-22
+    changes: "履歴の初期化"
+author: aymericzip
+---
+
+# Svelte 統合: `usePathname` ドキュメント
+
+`usePathname` 関数は、ロケールセグメントが削除された現在のブラウザのパス名を Svelte の `Readable<string>` ストアとして返します。これは、ロケールプレフィックスを手動で削除することなく、ロケールを考慮したナビゲーション（例えば、どのナビゲーション項目がアクティブかを判断するなど）を構築するのに役立ちます。
+
+## Svelte で `usePathname` をインポートする
+
+```typescript
+import { usePathname } from "svelte-intlayer";
+```
+
+## 概要
+
+`usePathname` は `window.location.pathname` から初期化される Svelte の読み取り可能なストア（readable store）を作成し、`getPathWithoutLocale` を介してロケールプレフィックスを削除し、ブラウザが `popstate` イベント（戻る/進むナビゲーション）を発生させるたびに新しい値を発行します。コンポーネント内では `$` ストア構文を使用してサブスクライブします。
+
+## 使用法
+
+```svelte fileName="src/components/NavItem.svelte"
+<script lang="ts">
+  import { usePathname } from "svelte-intlayer";
+
+  export let href: string;
+  export let label: string;
+
+  const pathname = usePathname();
+</script>
+
+<a {href} aria-current={$pathname === href ? "page" : undefined}>
+  {label}
+</a>
+```
+
+## 戻り値
+
+| タイプ             | 説明                                                                                                 |
+| ------------------ | ---------------------------------------------------------------------------------------------------- |
+| `Readable<string>` | ロケールプレフィックスを含まない現在のパス名を含む Svelte の読み取り可能なストア（Readable store）。 |
+
+## 動作
+
+- **ロケールの削除**: 先頭のロケールセグメントを削除します（例: `/ja/dashboard` → `/dashboard`）。
+- **リアクティブ**: `popstate` イベント（ブラウザの戻る/進むナビゲーション）のたびに新しい値を発行します。
+- **SSR セーフ**: `window` が利用できない場合は `""` を返します。
+- **クリーンアップ**: 最後のサブスクライバーがサブスクライブを解除すると、`popstate` リスナーは自動的に削除されます。
+
+## 例
+
+```svelte fileName="src/components/Sidebar.svelte"
+<script lang="ts">
+  import { usePathname } from "svelte-intlayer";
+
+  const links = [
+    { href: "/dashboard", label: "ダッシュボード" },
+    { href: "/settings", label: "設定" },
+  ];
+
+  const pathname = usePathname();
+</script>
+
+<nav>
+  {#each links as link}
+    <a
+      href={link.href}
+      style:font-weight={$pathname === link.href ? "bold" : "normal"}
+    >
+      {link.label}
+    </a>
+  {/each}
+</nav>
+```
+
+## 関連
+
+- [`useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/svelte-intlayer/useLocale.md) — 現在のロケール + ロケールスイッチャー
+- [`getPathWithoutLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getPathWithoutLocale.md) — このフックで使用される基礎的なユーティリティ

package/docs/ja/packages/vue-intlayer/exports.md

@@ -14,6 +14,9 @@ slugs:
   - vue-intlayer
   - exports
 history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "usePathnameユーティリティを追加"
   - version: 8.0.0
     date: 2026-01-21
     changes: "すべてのエクスポートのドキュメントを統一"
@@ -59,6 +62,7 @@ import "vue-intlayer";
 | `useDictionaryAsync`   | `useDictionary` と同様ですが、非同期の辞書を処理します。                                                                                | -                                                                                                                     |
 | `useDictionaryDynamic` | `useDictionary` と同様ですが、動的な辞書を処理します。                                                                                  | -                                                                                                                     |
 | `useLocale`            | 現在のロケールと、それを設定する関数を返します。                                                                                        | -                                                                                                                     |
+| `usePathname`          | ロケールセグメントが削除された現在のパス名 (pathname) を `ComputedRef<string>` として返します。`popstate` に反応します。                | [usePathname](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/vue-intlayer/usePathname.md)     |
 | `useRewriteURL`        | URL の書き換えを管理するクライアントサイドのコンポーザブル。ローカライズされた書き換えルールが存在する場合は自動的に URL を更新します。 | [useRewriteURL](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/vue-intlayer/useRewriteURL.md) |
 | `useIntl`              | 現在のロケールの Intl オブジェクトを返します。                                                                                          | -                                                                                                                     |
 | `useLoadDynamic`       | 動的辞書を読み込むためのコンポーザブル。                                                                                                | -                                                                                                                     |

package/docs/ja/packages/vue-intlayer/usePathname.md

@@ -0,0 +1,109 @@
+---
+createdAt: 2026-06-22
+updatedAt: 2026-06-22
+title: usePathname 関数のドキュメント | vue-intlayer
+description: vue-intlayer パッケージの usePathname 関数の使用方法について
+keywords:
+  - usePathname
+  - pathname
+  - locale
+  - Intlayer
+  - 国際化 (Internationalization)
+  - ドキュメント
+  - Vue
+  - JavaScript
+slugs:
+  - doc
+  - packages
+  - vue-intlayer
+  - usePathname
+history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "usePathnameユーティリティを追加"
+  - version: 8.2.0
+    date: 2026-06-22
+    changes: "履歴を初期化"
+author: aymericzip
+---
+
+# Vue インテグレーション: `usePathname` ドキュメント
+
+`usePathname` 関数は、ロケールセグメントが削除された現在のブラウザのパス名 (pathname) を Vue の `ComputedRef<string>` として返します。これは、ロケールプレフィックスを手動で削除することなく、ロケールを認識するナビゲーションを構築する（たとえば、どのナビゲーションアイテムがアクティブであるかを決定する）ために便利です。
+
+## Vue での `usePathname` のインポート
+
+```typescript
+import { usePathname } from "vue-intlayer";
+```
+
+## 概要
+
+`usePathname` は、`window.location.pathname` を読み取り、`getPathWithoutLocale` を介してロケールプレフィックスを削除し、ブラウザが `popstate` イベント（戻る/進むナビゲーション）を発生させるたびにその値を更新する Vue の算出参照 (computed ref) を作成します。取得した値は、Vue テンプレートやセットアップ関数で直接使用できます。
+
+## 使用方法
+
+```vue fileName="src/components/NavItem.vue"
+<script setup lang="ts">
+import { usePathname } from "vue-intlayer";
+
+const props = defineProps<{
+  href: string;
+  label: string;
+}>();
+
+const pathname = usePathname();
+</script>
+
+<template>
+  <a :href="href" :aria-current="pathname === href ? 'page' : undefined">
+    {{ label }}
+  </a>
+</template>
+```
+
+## 戻り値
+
+| タイプ                | 説明                                                                             |
+| --------------------- | -------------------------------------------------------------------------------- |
+| `ComputedRef<string>` | ロケールプレフィックスのない現在のパス名 (pathname) を含む Vue の Computed Ref。 |
+
+## 動作
+
+- **ロケールの削除 (Locale stripping)**: 先頭のロケールセグメントを削除します（例: `/ja/dashboard` → `/dashboard`）。
+- **リアクティブ**: `popstate` イベント（ブラウザの戻る / 進む操作）が発生するたびに値を更新します。
+- **SSR セーフ**: `window` が利用できない場合は `""` を返します。
+- **クリーンアップ (Cleanup)**: `popstate` リスナーは初期化時にグローバルに追加され、Vue のライフサイクル管理のおかげで、通常はコンポーネントごとに手動でクリーンアップする必要はありません。
+
+## 例
+
+```vue fileName="src/components/Sidebar.vue"
+<script setup lang="ts">
+import { usePathname } from "vue-intlayer";
+
+const links = [
+  { href: "/dashboard", label: "ダッシュボード" },
+  { href: "/settings", label: "設定" },
+];
+
+const pathname = usePathname();
+</script>
+
+<template>
+  <nav>
+    <a
+      v-for="link in links"
+      :key="link.href"
+      :href="link.href"
+      :style="{ fontWeight: pathname === link.href ? 'bold' : 'normal' }"
+    >
+      {{ link.label }}
+    </a>
+  </nav>
+</template>
+```
+
+## 関連事項
+
+- [`useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/vue-intlayer/useLocale.md) — 現在のロケール + ロケールスイッチャー
+- [`getPathWithoutLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getPathWithoutLocale.md) — このフックで使用される基盤となるユーティリティ

package/docs/ko/intlayer_with_adonisjs.md

@@ -59,24 +59,40 @@ See [Application Template](https://github.com/aymericzip/intlayer-adonis-templat
 
 `adonis-intlayer`를 사용하려면 npm을 사용하여 패키지를 설치하십시오.
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer adonis-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer adonis-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer adonis-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer adonis-intlayer
-bun x intlayer init
 ```
 
 ### 설정

package/docs/ko/intlayer_with_analog.md

@@ -112,28 +112,46 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-analog-template)을 확인하세요.
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 npm을 사용하여 필요한 패키지를 설치합니다:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer vite-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer vite-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer vite-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer vite-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -146,7 +164,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayer를 Vite와 통합하는 패키지입니다. 콘텐츠 선언 파일을 처리하는 플러그인을 제공하고 최적의 성능을 위한 별칭(alias)을 설정합니다.
 
-### 2단계: 프로젝트 설정
+</Step>
+
+<Step number={2} title="프로젝트 설정">
 
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
@@ -170,7 +190,9 @@ export default config;
 
 > 이 설정 파일을 통해 로컬라이즈된 URL, 미들웨어 리다이렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔 내 Intlayer 로그 비활성화 등을 설정할 수 있습니다. 사용 가능한 전체 매개변수 목록은 [설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)를 참조하세요.
 
-### 3단계: Vite 설정에 Intlayer 통합
+</Step>
+
+<Step number={3} title="Vite 설정에 Intlayer 통합">
 
 Analog와 Intlayer를 통합하려면 `vite-intlayer` 플러그인을 사용해야 합니다.
 
@@ -192,7 +214,9 @@ export default defineConfig(() => ({
 
 > `intlayer()` 플러그인은 Intlayer와 함께 Vite를 구성합니다. 콘텐츠 선언 파일을 처리하고 최적의 성능을 위한 별칭을 설정합니다.
 
-### 4단계: 콘텐츠 선언
+</Step>
+
+<Step number={4} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -224,7 +248,9 @@ export default appContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)를 참조하세요.
 
-### 5단계: 코드에서 Intlayer 활용
+</Step>
+
+<Step number={5} title="코드에서 Intlayer 활용">
 
 Analog 애플리케이션 전체에서 Intlayer의 국제화 기능을 활용하려면 애플리케이션 구성에서 Intlayer를 제공해야 합니다.
 
@@ -262,7 +288,9 @@ export default class HomeComponent {
 
 Intlayer 콘텐츠는 `Signal`로 반환되므로 시그널을 호출하여 값에 액세스합니다: `content().title`.
 
-### (선택 사항) 6단계: 콘텐츠 언어 변경
+</Step>
+
+<Step number={6} title="콘텐츠 언어 변경" isOptional={true}>
 
 콘텐츠 언어를 변경하려면 `useLocale` 함수에서 제공하는 `setLocale` 함수를 사용할 수 있습니다. 이를 통해 애플리케이션의 로케일을 설정하고 그에 따라 콘텐츠를 업데이트할 수 있습니다.
 
@@ -323,6 +351,10 @@ export default class HomeComponent {
 }
 ```
 
+</Step>
+
+</Steps>
+
 ### TypeScript 설정
 
 Intlayer는 모듈 보강(module augmentation)을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 강력하게 만듭니다.