@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.10

package/docs/ko/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -116,7 +116,9 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-astro-template) 보기.
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:
 
@@ -144,7 +146,9 @@ yarn add react react-dom react-intlayer @astrojs/react
 - **astro-intlayer**
   Intlayer를 [Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 통합하기 위한 Astro 통합 플러그인과 사용자의 선호 로케일을 감지하고 쿠키를 관리하며 URL 리디렉션을 처리하는 미들웨어가 포함되어 있습니다.
 
-### 2단계: 프로젝트 설정
+</Step>
+
+<Step number={2} title="프로젝트 설정">
 
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
@@ -168,7 +172,9 @@ export default config;
 
 > 이 설정 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언 위치 및 확장자 설정, 콘솔의 Intlayer 로그 비활성화 등을 구성할 수 있습니다. 사용 가능한 파라미터의 전체 목록은 [설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: Astro 설정에 Intlayer 통합
+</Step>
+
+<Step number={3} title="Astro 설정에 Intlayer 통합">
 
 Astro 설정에 intlayer 플러그인을 추가합니다.
 
@@ -186,7 +192,9 @@ export default defineConfig({
 
 > `intlayer()` 통합 플러그인은 Intlayer를 Astro와 통합하는 데 사용됩니다. 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 감시합니다. Astro 애플리케이션 내에서 Intlayer 환경 변수를 정의하며, 성능 최적화를 위한 에일리어스(alias)를 제공합니다.
 
-### 4단계: 콘텐츠 선언
+</Step>
+
+<Step number={4} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -213,7 +221,9 @@ export default appContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 5단계: Astro에서 콘텐츠 사용
+</Step>
+
+<Step number={5} title="Astro에서 콘텐츠 사용">
 
 `intlayer`에서 내보낸 핵심 헬퍼를 사용하여 `.astro` 파일에서 직접 사전을 소비할 수 있습니다.
 
@@ -286,7 +296,9 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
-### 6단계: 로컬라이즈된 라우팅
+</Step>
+
+<Step number={6} title="로컬라이즈된 라우팅">
 
 로컬라이즈된 페이지를 제공하기 위해 동적 라우트 세그먼트를 생성합니다(예: `src/pages/[locale]/index.astro`):
 
@@ -303,7 +315,136 @@ const { title } = getIntlayer('app');
 
 Astro 통합은 개발 중에 언어 인식 라우팅 및 환경 정의를 돕는 Vite 미들웨어를 추가합니다. 또한 직접 로직을 작성하거나 `intlayer`의 `getLocalizedUrl`과 같은 유틸리티를 사용하여 언어 간 링크를 생성할 수 있습니다.
 
-### 7단계: 선호하는 프레임워크 계속 사용하기
+</Step>
+
+<Step number={7} title="언어 선택기 추가">
+
+사용자가 언어를 전환할 수 있도록 `LocaleSwitcher` 컴포넌트를 만들 수 있습니다. 이 컴포넌트는 지원되는 모든 로케일 목록을 표시하고 각 언어로 동일한 페이지에 링크해야 합니다.
+
+```astro fileName="src/components/LocaleSwitcher.astro"
+---
+import {
+  locales,
+  getLocaleName,
+  getLocalizedUrl,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  type LocalesValues,
+} from "intlayer";
+
+const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
+---
+
+<nav>
+  {
+    locales.map((localeItem) => (
+      <a
+        href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+        data-locale={localeItem}
+        aria-current={localeItem === locale ? "page" : undefined}
+      >
+        {getLocaleName(localeItem)}
+      </a>
+    ))
+  }
+</nav>
+
+<script>
+  import { setLocaleInStorageClient, getLocalizedUrl, type LocalesValues } from "intlayer";
+
+  const localeLinks = document.querySelectorAll("[data-locale]");
+
+  localeLinks.forEach((link) => {
+    link.addEventListener("click", (e) => {
+      const locale = link.getAttribute("data-locale") as LocalesValues;
+
+      // Update the locale cookie
+      setLocaleInStorageClient(locale);
+    });
+  });
+</script>
+
+<style>
+  nav {
+    display: flex;
+    gap: 1rem;
+  }
+  a[aria-current="page"] {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+</style>
+```
+
+> **지속성에 대한 참고 사항:**
+> 클라이언트 측 스크립트에서 `setLocaleInStorageClient`를 사용하면 사용자의 언어 선호도가 쿠키에 저장됩니다. 이를 통해 Intlayer 미들웨어는 선택을 기억하고 향후 방문 시 사용자가 선호하는 언어로 자동으로 리다이렉트할 수 있습니다.
+
+</Step>
+
+<Step number={8} title="Sitemap 및 Robots.txt">
+
+Intlayer는 동적으로 로컬라이즈된 사이트맵과 robots.txt 파일을 생성하기 위한 유틸리티를 제공합니다.
+
+#### 사이트맵
+
+Intlayer는 애플리케이션의 사이트맵을 쉽게 만들 수 있는 내장 사이트맵 생성기를 제공합니다. 로컬라이즈된 경로를 처리하고 검색 엔진에 필요한 메타데이터를 추가합니다.
+
+> Intlayer에서 생성한 사이트맵은 `xhtml:link` 네임스페이스(Hreflang XML 확장)를 지원합니다. 원시 URL만 나열하는 기본 사이트맵 생성기와 달리, Intlayer는 페이지의 모든 언어 버전(예: `/about`, `/about?lang=fr`, `/about?lang=es`) 간에 필요한 양항향 링크를 자동으로 생성합니다. 이를 통해 검색 엔진이 올바른 언어 버전을 올바른 사용자에게 색인화하고 제공할 수 있도록 보장합니다.
+
+모든 로컬라이즈된 경로를 포함하는 사이트맵을 생성하기 위해 `src/pages/sitemap.xml.ts`를 생성합니다.
+
+```typescript fileName="src/pages/sitemap.xml.ts"
+import type { APIRoute } from "astro";
+import { generateSitemap, type SitemapUrlEntry } from "intlayer";
+
+const pathList: SitemapUrlEntry[] = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
+
+export const GET: APIRoute = async ({ site }) => {
+  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+
+  return new Response(xmlOutput, {
+    headers: { "Content-Type": "application/xml" },
+  });
+};
+```
+
+#### Robots.txt
+
+검색 엔진 크롤링을 제어하기 위해 `src/pages/robots.txt.ts`를 생성합니다.
+
+```typescript fileName="src/pages/robots.txt.ts"
+import type { APIRoute } from "astro";
+import { getMultilingualUrls } from "intlayer";
+
+const getAllMultilingualUrls = (urls: string[]) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+export const GET: APIRoute = ({ site }) => {
+  const robotsTxt = [
+    "User-agent: *",
+    "Allow: /",
+    ...disallowedPaths.map((path) => `Disallow: ${path}`),
+    "",
+    `Sitemap: ${new URL("/sitemap.xml", site).href}`,
+  ].join("\n");
+
+  return new Response(robotsTxt, {
+    headers: { "Content-Type": "text/plain" },
+  });
+};
+```
+
+</Step>
+
+<Step number={9} title="선호하는 프레임워크 계속 사용하기">
 
 선호하는 프레임워크를 사용하여 애플리케이션을 계속 빌드하세요.
 
@@ -361,7 +502,9 @@ Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장
 
 ---
 
-### 15단계: 컴포넌트에서 콘텐츠 추출(선택 사항)
+</Step>
+
+<Step number={15} title="컴포넌트에서 콘텐츠 추출(선택 사항)" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -424,6 +567,8 @@ 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.
+
 `vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함합니다.
 
 ```ts fileName="vite.config.ts"
@@ -433,7 +578,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 컴파일러 플러그인을 추가합니다
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```
@@ -443,6 +588,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ### 더 알아보기
 
 더 자세히 알고 싶다면 [비주얼 에디터](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)를 구현하거나 [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)를 사용하여 콘텐츠를 외부화할 수 있습니다.

package/docs/ko/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Lit i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro + Lit 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -115,7 +115,9 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-astro-template) 보기.
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:
 
@@ -166,7 +168,9 @@ bun x intlayer init
 - **@astrojs/lit**
   Astro 페이지에서 Lit 커스텀 엘리먼트를 사용할 수 있게 해주는 공식 Astro 통합 도구입니다.
 
-### 2단계: 프로젝트 설정
+</Step>
+
+<Step number={2} title="프로젝트 설정">
 
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
@@ -190,7 +194,9 @@ export default config;
 
 > 이 설정 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언 위치 및 확장자 설정, 콘솔의 Intlayer 로그 비활성화 등을 구성할 수 있습니다. 사용 가능한 파라미터의 전체 목록은 [설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: Astro 설정에 Intlayer 통합
+</Step>
+
+<Step number={3} title="Astro 설정에 Intlayer 통합">
 
 Astro 설정에 intlayer 플러그인과 Lit 통합을 추가합니다.
 
@@ -211,7 +217,9 @@ export default defineConfig({
 
 > `lit()` 통합은 Astro 페이지 내에서 Lit 커스텀 엘리먼트를 사용할 수 있게 합니다.
 
-### 4단계: 콘텐츠 선언
+</Step>
+
+<Step number={4} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -243,7 +251,9 @@ export default litDemoContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 5단계: Astro에서 콘텐츠 사용
+</Step>
+
+<Step number={5} title="Astro에서 콘텐츠 사용">
 
 `intlayer`에서 내보낸 핵심 헬퍼를 사용하여 `.astro` 파일에서 직접 사전을 소비할 수 있습니다. 또한 각 페이지에 hreflang 및 canonical 링크와 같은 SEO 메타데이터를 추가해야 합니다. Lit 커스텀 엘리먼트는 클라이언트 사이드 `<script>`를 통해 임포트되어 body에 배치됩니다.
 
@@ -325,7 +335,9 @@ const { greeting } = getIntlayer("lit-demo", locale);
 > - **`prefix-all`:** 모든 URL에 언어 프레픽스가 붙습니다. 루트를 분리해서 처리할 필요가 없다면 표준 `[locale]`을 사용할 수 있습니다.
 > - **`search-param` 또는 `no-prefix`:** 로케일 폴더가 필요 없습니다. 로케일은 검색 파라미터나 쿠키를 통해 처리됩니다.
 
-### 6단계: Lit 커스텀 엘리먼트 생성
+</Step>
+
+<Step number={6} title="Lit 커스텀 엘리먼트 생성">
 
 Lit 커스텀 엘리먼트를 생성합니다. 클라이언트에서 Intlayer 싱글톤을 초기화하기 위해 서버에서 감지된 `locale` 프로퍼티를 사용하여 `connectedCallback`에서 `installIntlayer`를 호출합니다.
 
@@ -404,7 +416,9 @@ customElements.define("lit-demo", LitDemo);
 
 > `useIntlayer`는 `ReactiveController`로 등록됩니다. 언어가 변경되면 엘리먼트가 자동으로 다시 렌더링되므로 추가 설정이 필요 없습니다.
 
-### 7단계: 언어 전환기 추가
+</Step>
+
+<Step number={7} title="언어 전환기 추가">
 
 언어 전환 기능은 Lit 커스텀 엘리먼트의 `render()` 메서드(6단계 참조)에 직접 통합되어 있습니다. `lit-intlayer`의 `useLocale`을 사용하며, 사용자가 새 언어를 선택할 때 로컬라이즈된 URL로 이동합니다:
 
@@ -450,7 +464,9 @@ override render() {
 > **영속성에 관한 참고 사항:**
 > `window.location.href`를 통한 리디렉션을 위해 `onLocaleChange`를 사용하면 새 언어 URL이 확실히 방문되도록 보장합니다. 이를 통해 Intlayer 미들웨어가 언어 쿠키를 설정하고 향후 방문 시 사용자의 선호도를 기억할 수 있습니다.
 
-### 8단계: Sitemap 및 Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap 및 Robots.txt">
 
 Intlayer는 동적으로 로컬라이즈된 사이트맵과 robots.txt 파일을 생성하기 위한 유틸리티를 제공합니다.
 
@@ -562,7 +578,9 @@ Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장
 
 ---
 
-### 15단계: 컴포넌트에서 콘텐츠 추출(선택 사항)
+</Step>
+
+<Step number={15} title="컴포넌트에서 콘텐츠 추출(선택 사항)" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -625,6 +643,8 @@ 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.
+
 `vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함합니다.
 
 ```ts fileName="vite.config.ts"
@@ -634,7 +654,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 컴파일러 플러그인을 추가합니다
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```
@@ -644,6 +664,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ### 더 알아보기
 
 더 자세히 알고 싶다면 [비주얼 에디터](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)를 구현하거나 [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)를 사용하여 콘텐츠를 외부화할 수 있습니다.

package/docs/ko/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Preact i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro + Preact 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -114,7 +114,9 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-astro-template) 보기.
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:
 
@@ -165,7 +167,9 @@ bun x intlayer init
 - **@astrojs/preact**
   Preact 컴포넌트 아일랜드를 사용할 수 있게 해주는 공식 Astro 통합 도구입니다.
 
-### 2단계: 프로젝트 설정
+</Step>
+
+<Step number={2} title="프로젝트 설정">
 
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
@@ -189,7 +193,9 @@ export default config;
 
 > 이 설정 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언 위치 및 확장자 설정, 콘솔의 Intlayer 로그 비활성화 등을 구성할 수 있습니다. 사용 가능한 파라미터의 전체 목록은 [설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: Astro 설정에 Intlayer 통합
+</Step>
+
+<Step number={3} title="Astro 설정에 Intlayer 통합">
 
 Astro 설정에 intlayer 플러그인과 Preact 통합을 추가합니다.
 
@@ -210,7 +216,9 @@ export default defineConfig({
 
 > `preact()` 통합은 `client:only="preact"`를 통해 Preact 컴포넌트 아일랜드를 사용할 수 있게 합니다.
 
-### 4단계: 콘텐츠 선언
+</Step>
+
+<Step number={4} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -239,7 +247,9 @@ export default appContent;
 
 > 콘텐츠 파일에 TSX 코드가 포함된 경우 `import { h } from "preact";`를 임포트하거나 JSX 프라그마가 Preact에 맞게 올바르게 설정되어 있는지 확인해야 할 수도 있습니다.
 
-### 5단계: Astro에서 콘텐츠 사용
+</Step>
+
+<Step number={5} title="Astro에서 콘텐츠 사용">
 
 `intlayer`에서 내보낸 핵심 헬퍼를 사용하여 `.astro` 파일에서 직접 사전을 소비할 수 있습니다. 또한 각 페이지에 hreflang 및 canonical 링크와 같은 SEO 메타데이터를 추가하고, 클라이언트 사이드의 인터랙티브 콘텐츠를 위해 Preact 아일랜드를 포함해야 합니다.
 
@@ -319,7 +329,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** 모든 URL에 언어 프레픽스가 붙습니다. 루트를 분리해서 처리할 필요가 없다면 표준 `[locale]`을 사용할 수 있습니다.
 > - **`search-param` 또는 `no-prefix`:** 로케일 폴더가 필요 없습니다. 로케일은 검색 파라미터나 쿠키를 통해 처리됩니다.
 
-### 6단계: Preact 아일랜드 컴포넌트 생성
+</Step>
+
+<Step number={6} title="Preact 아일랜드 컴포넌트 생성">
 
 Preact 애플리케이션을 감싸고 서버에서 감지된 로케일을 전달받는 아일랜드 컴포넌트를 생성합니다:
 
@@ -354,7 +366,9 @@ export const PreactIsland: FunctionalComponent<{ locale: LocalesValues }> = ({
 
 > 참고: Preact에서는 HTML 속성에 `className` 대신 `class`를 사용합니다.
 
-### 7단계: 언어 전환기 추가
+</Step>
+
+<Step number={7} title="언어 전환기 추가">
 
 사용 가능한 로케일을 읽고 사용자가 새 언어를 선택할 때 로컬라이즈된 URL로 이동하는 Preact 컴포넌트 `LocaleSwitcher`를 생성합니다:
 
@@ -404,7 +418,9 @@ export const LocaleSwitcher: FunctionalComponent = () => {
 
 > `LocaleSwitcher`는 `IntlayerProvider` 내부에서 렌더링되어야 합니다. 아일랜드 컴포넌트 내에서 사용하세요(6단계 참조).
 
-### 8단계: Sitemap 및 Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap 및 Robots.txt">
 
 Intlayer는 동적으로 로컬라이즈된 사이트맵과 robots.txt 파일을 생성하기 위한 유틸리티를 제공합니다.
 
@@ -516,7 +532,9 @@ Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장
 
 ---
 
-### 15단계: 컴포넌트에서 콘텐츠 추출(선택 사항)
+</Step>
+
+<Step number={15} title="컴포넌트에서 콘텐츠 추출(선택 사항)" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -579,6 +597,8 @@ 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.
+
 `vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함합니다.
 
 ```ts fileName="vite.config.ts"
@@ -588,7 +608,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 컴파일러 플러그인을 추가합니다
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```
@@ -598,6 +618,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ### 더 알아보기
 
 더 자세히 알고 싶다면 [비주얼 에디터](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)를 구현하거나 [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)를 사용하여 콘텐츠를 외부화할 수 있습니다.

package/docs/ko/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + React i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro + React 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -117,7 +117,9 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-astro-template) 보기.
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:
 
@@ -168,7 +170,9 @@ bun x intlayer init
 - **@astrojs/react**
   React 컴포넌트 아일랜드를 사용할 수 있게 해주는 공식 Astro 통합 도구입니다.
 
-### 2단계: 프로젝트 설정
+</Step>
+
+<Step number={2} title="프로젝트 설정">
 
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
@@ -192,7 +196,9 @@ export default config;
 
 > 이 설정 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언 위치 및 확장자 설정, 콘솔의 Intlayer 로그 비활성화 등을 구성할 수 있습니다. 사용 가능한 파라미터의 전체 목록은 [설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: Astro 설정에 Intlayer 통합
+</Step>
+
+<Step number={3} title="Astro 설정에 Intlayer 통합">
 
 Astro 설정에 intlayer 플러그인과 React 통합을 추가합니다.
 
@@ -213,7 +219,9 @@ export default defineConfig({
 
 > `react()` 통합은 `client:only="react"`를 통해 React 컴포넌트 아일랜드를 사용할 수 있게 합니다.
 
-### 4단계: 콘텐츠 선언
+</Step>
+
+<Step number={4} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -240,7 +248,9 @@ export default appContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 5단계: Astro에서 콘텐츠 사용
+</Step>
+
+<Step number={5} title="Astro에서 콘텐츠 사용">
 
 `intlayer`에서 내보낸 핵심 헬퍼를 사용하여 `.astro` 파일에서 직접 사전을 소비할 수 있습니다. 또한 각 페이지에 hreflang 및 canonical 링크와 같은 SEO 메타데이터를 추가하고, 클라이언트 사이드의 인터랙티브 콘텐츠를 위해 React 아일랜드를 포함해야 합니다.
 
@@ -320,7 +330,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** 모든 URL에 언어 프레픽스가 붙습니다. 루트를 분리해서 처리할 필요가 없다면 표준 `[locale]`을 사용할 수 있습니다.
 > - **`search-param` 또는 `no-prefix`:** 로케일 폴더가 필요 없습니다. 로케일은 검색 파라미터나 쿠키를 통해 처리됩니다.
 
-### 6단계: React 아일랜드 컴포넌트 생성
+</Step>
+
+<Step number={6} title="React 아일랜드 컴포넌트 생성">
 
 React 애플리케이션을 감싸고 서버에서 감지된 로케일을 전달받는 아일랜드 컴포넌트를 생성합니다:
 
@@ -352,7 +364,9 @@ export function ReactIsland({ locale }: { locale: LocalesValues }) {
 
 > `locale` 프롭은 Astro 페이지(서버 감지)에서 `IntlayerProvider`로 전달되어 트리 내 모든 React 훅의 초기 로케일이 됩니다.
 
-### 7단계: 언어 전환기 추가
+</Step>
+
+<Step number={7} title="언어 전환기 추가">
 
 사용 가능한 로케일을 읽고 사용자가 새 언어를 선택할 때 로컬라이즈된 URL로 이동하는 React 컴포넌트 `LocaleSwitcher`를 생성합니다:
 
@@ -401,7 +415,9 @@ export function LocaleSwitcher() {
 
 > `LocaleSwitcher`는 `IntlayerProvider` 내부에서 렌더링되어야 합니다. 아일랜드 컴포넌트 내에서 사용하세요(6단계 참조).
 
-### 8단계: Sitemap 및 Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap 및 Robots.txt">
 
 Intlayer는 동적으로 로컬라이즈된 사이트맵과 robots.txt 파일을 생성하기 위한 유틸리티를 제공합니다.
 
@@ -509,7 +525,9 @@ Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장
 
 ---
 
-### 15단계: 컴포넌트에서 콘텐츠 추출(선택 사항)
+</Step>
+
+<Step number={15} title="컴포넌트에서 콘텐츠 추출(선택 사항)" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -572,6 +590,8 @@ 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.
+
 `vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함합니다.
 
 ```ts fileName="vite.config.ts"
@@ -581,7 +601,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 컴파일러 플러그인을 추가합니다
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```
@@ -591,6 +611,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ### 더 알아보기
 
 더 자세히 알고 싶다면 [비주얼 에디터](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)를 구현하거나 [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)를 사용하여 콘텐츠를 외부화할 수 있습니다.