@intlayer/docs 5.7.6 → 5.7.8

package/docs/ja/intlayer_with_tanstack.md

@@ -0,0 +1,457 @@
+---
+createdAt: 2025-08-11
+updatedAt: 2025-08-11
+title: TanStack Start（React）でのIntlayerの使い始め
+description: Intlayerを使ってTanStack Startアプリにi18nを追加する—コンポーネントレベルの辞書、ローカライズされたURL、SEOに適したメタデータ。
+keywords:
+  - 国際化
+  - ドキュメント
+  - Intlayer
+  - TanStack Start
+  - TanStack Router
+  - React
+  - i18n
+  - JavaScript
+slugs:
+  - doc
+  - environment
+  - tanstack-start
+---
+
+# IntlayerとTanStack Start（React）で始める国際化（i18n）
+
+## Intlayerとは？
+
+**Intlayer**はReactアプリ向けのオープンソースのi18nツールキットです。以下を提供します：
+
+- **TypeScriptの安全性を備えたコンポーネントローカル辞書**。
+- **動的なメタデータとルート**（SEO対応）。
+- **ランタイムでのロケール切り替え**（ロケール検出・保持のためのヘルパー付き）。
+- **Viteプラグイン**（ビルド時の変換と開発者体験向上のため）。
+
+このガイドでは、**TanStack Start**プロジェクト（内部でViteを使用し、ルーティング/SSRにTanStack Routerを使っている）にIntlayerを組み込む方法を説明します。
+
+---
+
+## ステップ1：依存関係のインストール
+
+```bash
+# npm
+npm i intlayer react-intlayer
+npm i -D vite-intlayer
+
+# pnpm
+pnpm add intlayer react-intlayer
+pnpm add -D vite-intlayer
+
+# yarn
+yarn add intlayer react-intlayer
+yarn add -D vite-intlayer
+```
+
+- **intlayer**：コア（設定、辞書、CLI/変換）。
+- **react-intlayer**：React用の`<IntlayerProvider>`とフック。
+- **vite-intlayer**：Viteプラグイン、加えてロケール検出/リダイレクト用のオプションミドルウェア（開発環境とSSR/プレビューで動作。プロダクションSSRでは`dependencies`に移動）。
+
+---
+
+## ステップ2：Intlayerの設定
+
+プロジェクトのルートに `intlayer.config.ts` を作成します：
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  // contentDir、contentFileExtensions、middlewareオプションなども調整可能です。
+};
+
+export default config;
+```
+
+CommonJS/ESMのバリアントは、`cjs`/`mjs`を好む場合でも元のドキュメントと同じです。
+
+> 完全な設定リファレンスは、Intlayerの設定ドキュメントをご覧ください。
+
+---
+
+## ステップ3：Viteプラグイン（およびオプションのミドルウェア）を追加
+
+**TanStack StartはViteを使用しているため**、`vite.config.ts` にIntlayerのプラグインを追加します：
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    intlayerPlugin(),
+    // ロケール検出、クッキー、リダイレクトのためにオプションだが推奨：
+    intLayerMiddlewarePlugin(),
+  ],
+});
+```
+
+> SSRをデプロイする場合は、`vite-intlayer`を`dependencies`に移動して、ミドルウェアが本番環境で動作するようにしてください。
+
+---
+
+## ステップ4：コンテンツを宣言する
+
+辞書ファイルは`./src`以下の任意の場所に配置します（デフォルトは`contentDir`）。例：
+
+```tsx fileName="src/app.content.tsx"
+import { t, type Dictionary } from "intlayer";
+import type { ReactNode } from "react";
+
+const appContent = {
+  key: "app",
+  content: {
+    viteLogo: t({
+      ja: "Vite ロゴ",
+      en: "Vite logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+    reactLogo: t({
+      ja: "React ロゴ",
+      en: "React logo",
+      fr: "Logo React",
+      es: "Logo React",
+    }),
+    title: t({
+      ja: "TanStack Start + React",
+      en: "TanStack Start + React",
+      fr: "TanStack Start + React",
+      es: "TanStack Start + React",
+    }),
+    count: t({
+      ja: "カウントは ",
+      en: "count is ",
+      fr: "le compte est ",
+      es: "el recuento es ",
+    }),
+    edit: t<ReactNode>({
+      ja: (
+        <>
+          <code>src/routes/index.tsx</code> を編集して保存し、HMRをテストします
+        </>
+      ),
+      en: (
+        <>
+          Edit <code>src/routes/index.tsx</code> and save to test HMR
+        </>
+      ),
+      fr: (
+        <>
+          Éditez <code>src/routes/index.tsx</code> et enregistrez pour tester
+          HMR
+        </>
+      ),
+      es: (
+        <>
+          Edita <code>src/routes/index.tsx</code> y guarda para probar HMR
+        </>
+      ),
+    }),
+    readTheDocs: t({
+      en: "Click the logos to learn more",
+      fr: "Cliquez sur les logos pour en savoir plus",
+      es: "Haz clic en los logotipos para saber más",
+      ja: "ロゴをクリックして詳細を学ぶ",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+JSON/ESM/CJS バリアントは、元のドキュメントと同様に動作します。
+
+> TSX コンテンツですか？セットアップで必要な場合は `import React from "react"` を忘れないでください。
+
+---
+
+## ステップ 5: TanStack Start を Intlayer でラップする
+
+TanStack Start では、**ルートルート** がプロバイダーを設定する適切な場所です。
+
+```tsx fileName="src/routes/__root.tsx"
+import {
+  Outlet,
+  createRootRoute,
+  Link as RouterLink,
+} from "@tanstack/react-router";
+import { IntlayerProvider, useIntlayer } from "react-intlayer";
+
+function AppShell() {
+  // トップレベルで辞書を使用する例：
+  const content = useIntlayer("app");
+
+  return (
+    <div>
+      <nav className="flex gap-3 p-3">
+        <RouterLink to="/">ホーム</RouterLink>
+        <RouterLink to="/about">アバウト</RouterLink>
+      </nav>
+      <main className="p-6">
+        <h1>{content.title}</h1>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export const Route = createRootRoute({
+  component: () => (
+    <IntlayerProvider>
+      <AppShell />
+    </IntlayerProvider>
+  ),
+});
+```
+
+次に、ページでコンテンツを使用します：
+
+```tsx fileName="src/routes/index.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+import { useIntlayer } from "react-intlayer";
+import reactLogo from "../assets/react.svg";
+
+export const Route = createFileRoute("/")({
+  component: () => {
+    const content = useIntlayer("app");
+    return (
+      <>
+        <button>{content.count}0</button>
+        <p>{content.edit}</p>
+        <img
+          src={reactLogo}
+          alt={content.reactLogo.value}
+          width={48}
+          height={48}
+        />
+        <p className="opacity-70">{content.readTheDocs}</p>
+      </>
+    );
+  },
+});
+```
+
+> 文字列属性（`alt`、`title`、`aria-label`など）には `.value` が必要です：
+>
+> ```jsx
+> <img alt={c.reactLogo.value} />
+> ```
+
+---
+
+## （オプション）ステップ6：ロケール切り替え（クライアント）
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export function LocaleSwitcher() {
+  const { setLocale } = useLocale();
+  return (
+    <div className="flex gap-2">
+      <button onClick={() => setLocale(Locales.ENGLISH)}>English</button>
+      <button onClick={() => setLocale(Locales.FRENCH)}>Français</button>
+      <button onClick={() => setLocale(Locales.SPANISH)}>Español</button>
+    </div>
+  );
+}
+```
+
+---
+
+## （オプション）ステップ7：ローカライズされたルーティング（SEOに優しいURL）
+
+TanStack Startには**2つの優れたパターン**があります。どちらかを選んでください。
+
+動的セグメントフォルダ `src/routes/$locale/` を作成し、URLを `/:locale/...` にします。`$locale` レイアウト内で `params.locale` を検証し、`<IntlayerProvider locale=...>` を設定し、`<Outlet />` をレンダリングします。この方法はシンプルですが、残りのルートは `$locale` の下にマウントされ、デフォルトのロケールにプレフィックスを付けたくない場合は、プレフィックスなしの別のツリーが必要になります。
+
+---
+
+## （オプション）ステップ8：ロケール切り替え時にURLを更新する
+
+パターンA（ベースパス）では、ロケールを切り替えると**異なるベースパスへナビゲートする**ことを意味します：
+
+```tsx fileName="src/components/LocaleSwitcherNavigate.tsx"
+import { useRouter } from "@tanstack/react-router";
+import { Locales, getLocalizedUrl } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export function LocaleSwitcherNavigate() {
+  const router = useRouter();
+  const { locale, setLocale } = useLocale();
+
+  const change = async (next: Locales) => {
+    if (next === locale) return;
+    const nextPath = getLocalizedUrl(
+      window.location.pathname + window.location.search,
+      next
+    );
+    await router.navigate({ to: nextPath }); // 履歴を保持
+    setLocale(next);
+  };
+
+  return (
+    <div className="flex gap-2">
+      <button onClick={() => change(Locales.ENGLISH)}>English</button>
+      <button onClick={() => change(Locales.FRENCH)}>Français</button>
+      <button onClick={() => change(Locales.SPANISH)}>Español</button>
+    </div>
+  );
+}
+```
+
+---
+
+## （任意）ステップ9: `<html lang>` と `dir` の設定（TanStack Start Document）
+
+TanStack Start はカスタマイズ可能な **Document**（ルートHTMLシェル）を提供します。アクセシビリティやSEOのために `lang` と `dir` を設定しましょう：
+
+```tsx fileName="src/routes/__root.tsx" {4,15}
+import { Outlet, createRootRoute } from "@tanstack/react-router";
+import { IntlayerProvider } from "react-intlayer";
+import { getHTMLTextDir } from "intlayer";
+
+function Document({
+  locale,
+  children,
+}: {
+  locale: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {/* ... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+export const Route = createRootRoute({
+  component: () => (
+    <IntlayerProvider>
+      {/* サーバーでロケールを計算する場合はDocumentに渡してください。そうでなければクライアント側でハイドレーション後に修正されます */}
+      <Document locale={document?.documentElement?.lang || "en"}>
+        <Outlet />
+      </Document>
+    </IntlayerProvider>
+  ),
+});
+```
+
+クライアント側での修正のために、小さなフックを保持することもできます:
+
+```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx"
+import { useEffect } from "react";
+import { useLocale } from "react-intlayer";
+import { getHTMLTextDir } from "intlayer";
+
+export const useI18nHTMLAttributes = () => {
+  const { locale } = useLocale();
+  useEffect(() => {
+    document.documentElement.lang = locale;
+    document.documentElement.dir = getHTMLTextDir(locale);
+  }, [locale]);
+};
+```
+
+---
+
+## （オプション）ステップ10：ローカライズされたLinkコンポーネント
+
+TanStack Routerは`<Link/>`を提供していますが、内部URLに自動でプレフィックスを付けるプレーンな`<a>`タグが必要な場合：
+
+```tsx fileName="src/components/Link.tsx"
+import { getLocalizedUrl } from "intlayer";
+import {
+  forwardRef,
+  type AnchorHTMLAttributes,
+  type DetailedHTMLProps,
+} from "react";
+import { useLocale } from "react-intlayer";
+
+export interface LinkProps
+  extends DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > {}
+
+const isExternal = (href?: string) => /^https?:\/\//.test(href ?? "");
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ href, children, ...props }, ref) => {
+    const { locale } = useLocale();
+    const hrefI18n =
+      href && !isExternal(href) ? getLocalizedUrl(href, locale) : href;
+    return (
+      <a href={hrefI18n} ref={ref} {...props}>
+        {children}
+      </a>
+    );
+  }
+);
+Link.displayName = "Link";
+```
+
+> パターンA（basepath）を使用している場合、TanStackの`<Link to="/about" />`はすでに`basepath`を介して`/fr/about`に解決されるため、カスタムリンクはオプションです。
+
+---
+
+## TypeScript
+
+Intlayerの生成された型を含めてください：
+
+```json5 fileName="tsconfig.json"
+{
+  "include": ["src", ".intlayer/**/*.ts"],
+}
+```
+
+---
+
+## Git
+
+Intlayerの生成されたアーティファクトを無視してください：
+
+```gitignore
+.intlayer
+```
+
+---
+
+## VS Code 拡張機能
+
+- **Intlayer VS Code 拡張機能** → オートコンプリート、エラー表示、インラインプレビュー、クイックアクション。
+  マーケットプレイス: `intlayer.intlayer-vs-code-extension`
+
+---
+
+## さらに進む
+
+- ビジュアルエディター
+- CMSモード
+- エッジでのロケール検出 / アダプター
+
+---
+
+## ドキュメント履歴
+
+| バージョン | 日付       | 変更内容                    |
+| ---------- | ---------- | --------------------------- |
+| 1.0.0      | 2025-08-11 | TanStack Start の適応を追加 |

package/docs/ja/packages/next-intlayer/index.md

@@ -279,7 +279,6 @@ Intlayerは、Next.jsアプリケーションの国際化を支援する多く
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/next-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/next-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/next-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/next-intlayer/useIntlayerAsync.md)
 
 ## ドキュメント履歴
 

package/docs/ja/packages/react-intlayer/index.md

@@ -280,7 +280,6 @@ Intlayerは、Reactアプリケーションの国際化を支援する多くの
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useIntlayerAsync.md)
 
 ## ドキュメント履歴
 

package/docs/ko/CI_CD.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-05-20
-updatedAt: 2025-06-29
+updatedAt: 2025-08-13
 title: CI/CD 통합
 description: 자동화된 콘텐츠 관리 및 배포를 위해 Intlayer를 CI/CD 파이프라인에 통합하는 방법을 알아보세요.
 keywords:
@@ -23,7 +23,7 @@ Intlayer는 콘텐츠 선언 파일에 대한 번역을 자동으로 생성할
 
 ## CMS 사용하기
 
-Intlayer를 사용하면 로컬에서는 단일 로케일만 선언하고 모든 번역은 CMS를 통해 원격으로 관리하는 워크플로우를 채택할 수 있습니다. 이를 통해 콘텐츠와 번역이 코드베이스와 완전히 분리되어 콘텐츠 편집자에게 더 많은 유연성을 제공하며, 변경 사항을 적용하기 위해 애플리케이션을 다시 빌드할 필요 없이 핫 콘텐츠 리로딩이 가능합니다.
+Intlayer를 사용하면 로컬에서는 단일 로케일만 선언하고 모든 번역은 CMS를 통해 원격으로 관리하는 워크플로우를 채택할 수 있습니다. 이를 통해 콘텐츠와 번역이 코드베이스와 완전히 분리되어 콘텐츠 편집자에게 더 많은 유연성을 제공하며, 핫 콘텐츠 리로딩이 가능해져(변경 사항 적용을 위해 애플리케이션을 다시 빌드할 필요 없음) 편리합니다.
 
 ### 예제 구성
 
@@ -37,7 +37,7 @@ const config: IntlayerConfig = {
     defaultLocale: Locales.ENGLISH,
   },
   editor: {
-    dictionaryPriorityStrategy: "distant_first", // 원격 콘텐츠가 우선권을 가짐
+    dictionaryPriorityStrategy: "distant_first", // 원격 콘텐츠가 우선순위를 가집니다
 
     applicationURL: process.env.APPLICATION_URL, // CMS에서 사용하는 애플리케이션 URL
 
@@ -56,7 +56,7 @@ CMS에 대해 더 알아보려면 [공식 문서](https://github.com/aymericzip/
 
 ## Husky 사용하기
 
-[Husky](https://typicode.github.io/husky/)를 사용하여 로컬 Git 워크플로우에 번역 생성 기능을 통합할 수 있습니다.
+[Husky](https://typicode.github.io/husky/)를 사용하여 로컬 Git 워크플로우에 번역 생성 과정을 통합할 수 있습니다.
 
 ### 예제 구성
 
@@ -77,7 +77,7 @@ const config: IntlayerConfig = {
     provider: "openai",
     apiKey: process.env.OPENAI_API_KEY, // 자신의 API 키를 사용하세요
 
-    applicationContext: "This is a test application", // 일관된 번역 생성을 보장하는 데 도움을 줍니다
+    applicationContext: "This is a test application", // 일관된 번역 생성을 돕습니다
   },
 };
 
@@ -85,13 +85,13 @@ export default config;
 ```
 
 ```bash fileName=".husky/pre-push"
-npx intlayer build                          # 사전이 최신 상태인지 확인하기 위해
-npx intlayer fill --unpushed --mode fill    # 누락된 내용만 채우며, 기존 내용을 업데이트하지 않습니다.
+npx intlayer build                          # 사전이 최신 상태인지 확인합니다
+npx intlayer fill --unpushed --mode fill    # 누락된 내용만 채우며, 기존 내용을 업데이트하지 않습니다
 ```
 
 > Intlayer CLI 명령어 및 사용법에 대한 자세한 내용은 [CLI 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_cli.md)를 참조하세요.
 
-> 저장소에 여러 앱이 있고 각각 별도의 intlayer 인스턴스를 사용하는 경우, 다음과 같이 `--base-dir` 인수를 사용할 수 있습니다:
+> 저장소에 여러 앱이 있고 각각 별도의 intlayer 인스턴스를 사용하는 경우, `--base-dir` 인수를 다음과 같이 사용할 수 있습니다:
 
 ```bash fileName=".husky/pre-push"
 # 앱 1
@@ -105,68 +105,94 @@ npx intlayer fill --base-dir ./app2 --unpushed --mode fill
 
 ## GitHub Actions 사용하기
 
-Intlayer는 사전 내용을 자동 채우기 및 검토할 수 있는 CLI 명령어를 제공합니다. 이는 GitHub Actions를 사용하여 CI/CD 워크플로우에 통합할 수 있습니다.
+Intlayer는 사전 내용을 자동으로 채우고 검토할 수 있는 CLI 명령어를 제공합니다. 이는 GitHub Actions를 사용하여 CI/CD 워크플로우에 통합할 수 있습니다.
 
 ```yaml fileName=".github/workflows/intlayer-translate.yml"
 name: Intlayer 자동 채우기
+# 이 워크플로우의 트리거 조건
 on:
-  push:
-    branches: [ main ]
-    paths:
-      - 'src/**'
   pull_request:
-    branches: [ main ]
-    paths:
-      - 'src/**'
-  workflow_dispatch: {}
+    branches:
+      - "main"
+
+permissions:
+  contents: write
+  pull-requests: write
 
 concurrency:
-  group: 'autofill-${{ github.ref }}'
+  group: "autofill-${{ github.ref }}"
   cancel-in-progress: true
 
 jobs:
   autofill:
     runs-on: ubuntu-latest
     env:
-      INTLAYER_CLIENT_ID: ${{ secrets.INTLAYER_CLIENT_ID }}
-      INTLAYER_CLIENT_SECRET: ${{ secrets.INTLAYER_CLIENT_SECRET }}
-      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      # OpenAI
+      AI_MODEL: openai
+      AI_PROVIDER: gpt-5-mini
+      AI_API_KEY: ${{ secrets.AI_API_KEY }}
 
     steps:
+      # 1단계: 저장소에서 최신 코드 가져오기
       - name: ⬇️ 저장소 체크아웃
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
-          persist-credentials: true
+          persist-credentials: true # PR 생성을 위한 자격 증명 유지
+          fetch-depth: 0 # 차이 분석을 위한 전체 git 히스토리 가져오기
 
+      # 2단계: Node.js 환경 설정
       - name: 🟢 Node.js 설정
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20 # 안정성을 위해 Node.js 20 LTS 사용
 
+      # 3단계: 프로젝트 의존성 설치
       - name: 📦 의존성 설치
-        run: npm ci
+        run: npm install
+
+      # 4단계: 번역 관리를 위해 Intlayer CLI 전역 설치
+      - name: 📦 Intlayer 설치
+        run: npm install -g intlayer-cli
 
+      # 5단계: 번역 파일 생성을 위해 Intlayer 프로젝트 빌드
       - name: ⚙️ Intlayer 프로젝트 빌드
         run: npx intlayer build
 
+      # 6단계: AI를 사용하여 누락된 번역 자동 채우기
       - name: 🤖 누락된 번역 자동 채우기
-        run: npx intlayer fill --git-diff --mode fill
-
-      - name: 📤 번역 PR 생성 또는 업데이트
-        uses: peter-evans/create-pull-request@v4
-        with:
-          commit-message: chore: auto-fill missing translations [skip ci]
-          branch: auto-translations
-          title: chore: update missing translations
-          labels: translation, automated
+        run: npx intlayer fill --git-diff --mode fill --provider $AI_PROVIDER --model $AI_MODEL --api-key $AI_API_KEY
+
+      # 7단계: 변경 사항이 있는지 확인하고 커밋하기
+      - name: � 변경 사항 확인
+        id: check-changes
+        run: |
+          if [ -n "$(git status --porcelain)" ]; then
+            echo "has-changes=true" >> $GITHUB_OUTPUT
+          else
+            echo "has-changes=false" >> $GITHUB_OUTPUT
+          fi
+
+      # 8단계: 변경 사항이 있으면 커밋하고 푸시하기
+      - name: 📤 변경 사항 커밋 및 푸시
+        if: steps.check-changes.outputs.has-changes == 'true'
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add .
+          git commit -m "chore: 누락된 번역 자동 채우기 [skip ci]"
+          git push origin HEAD:${{ github.head_ref }}
 ```
 
+환경 변수를 설정하려면 GitHub → 설정 → Secrets and variables → Actions로 이동하여 비밀을 추가하세요.
+
 > Husky와 마찬가지로, 모노레포의 경우 `--base-dir` 인수를 사용하여 각 앱을 순차적으로 처리할 수 있습니다.
 
-> 기본적으로 `--git-diff` 인수는 기본 브랜치(기본값 `origin/main`)에서 현재 브랜치(기본값 `HEAD`)까지의 변경 사항을 포함하는 사전만 필터링합니다.
+> 기본적으로 `--git-diff` 인수는 기본 브랜치(기본값 `origin/main`)에서 현재 브랜치(기본값: `HEAD`)로 변경된 사전을 필터링합니다.
 
 > Intlayer CLI 명령어 및 사용법에 대한 자세한 내용은 [CLI 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_cli.md)를 참조하세요.
 
 ## 문서 이력
 
-- 5.5.10 - 2025-06-29: 이력 초기화
+| 버전   | 날짜       | 변경 사항 |
+| ------ | ---------- | --------- |
+| 5.5.10 | 2025-06-29 | 초기 기록 |