@intlayer/docs 9.5.6 → 9.5.8

package/docs/ko/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: Intlayer를 사용하여 다국어 웹사이트에서 Markdown 콘텐츠를 선언하고 사용하는 방법을 알아보세요. 이 온라인 문서의 단계를 따라 Markdown을 프로젝트에 원활하게 통합하세요.
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +489,111 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    Remix 3에서 마크다운 노드는 서버에서 HTML 문자열로 렌더링됩니다. Remix JSX의 `innerHTML` prop 또는 `html-template` 뷰의 `html.raw`를 사용하여 삽입하세요.
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div innerHTML={myMarkdownContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return html.raw`<div>${myMarkdownContent.value}</div>`;
+    };
+    ```
+
+    > Remix는 기본적으로 보간된 값을 이스케이프합니다. `innerHTML`과 `html.raw`는 렌더링된 마크다운 문자열에 필요한 두 가지 이스케이프 제외 방법입니다.
+
+    `.use()` 메서드를 사용하여 특정 태그에 대한 로컬 재정의를 제공할 수도 있습니다. 재정의는 HTML 문자열을 반환하는 함수입니다:
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value`는 렌더링된 HTML 문자열이며, `String()` / `.toString()`은 원시 Markdown 소스를 반환합니다:
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    그리고 다음과 같이 마크다운 메타데이터에 액세스할 수 있습니다:
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    Astro에서 마크다운 노드는 HTML 문자열로 렌더링됩니다. 템플릿의 `set:html` 디렉티브 또는 클라이언트 `<script>`의 `innerHTML`을 사용하여 삽입하세요.
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myMarkdownContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myMarkdownContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myMarkdownContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myMarkdownContent.value;
+    </script>
+    ```
+
+    > Astro는 기본적으로 `{표현식}`을 이스케이프합니다. `set:html`은 렌더링된 마크다운 문자열에 필요한 이스케이프 제외 방법입니다.
+
+    `.use()` 메서드를 사용하여 특정 태그에 대한 로컬 재정의를 제공할 수도 있습니다. 재정의는 HTML 문자열을 반환하는 함수입니다:
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value`는 렌더링된 HTML 문자열이며, `String()` / `.toString()`은 원시 Markdown 소스를 반환합니다:
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    그리고 다음과 같이 마크다운 메타데이터에 액세스할 수 있습니다:
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. 도우미 유틸리티 (Markdown 문자열 전용)
@@ -698,6 +805,60 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### `useMarkdownRenderer()` 훅
+
+    `installIntlayerMarkdown()`으로 사전 구성된 렌더러 함수를 가져옵니다. HTML 문자열을 반환합니다.
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### `renderMarkdown()` 유틸리티
+
+    전역 구성을 무시하는 독립형 유틸리티입니다.
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### `useMarkdownRenderer()` 훅
+
+    `installIntlayerMarkdown()`으로 사전 구성된 렌더러 함수를 가져옵니다. HTML 문자열을 반환합니다.
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### `renderMarkdown()` 유틸리티
+
+    전역 구성을 무시하는 독립형 유틸리티입니다.
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## `MarkdownProvider`를 통한 전역 구성
@@ -998,6 +1159,73 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
     > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션 번들 크기를 줄이는 좋은 방법입니다.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix에는 프로바이더를 담을 컴포넌트 트리가 없으므로 설정은 서버 시작 시 싱글톤으로 한 번 설치됩니다. `useMarkdownRenderer()`가 반환하는 렌더러를 구성합니다. `useIntlayer`가 반환하는 `md` 노드는 기본 컴파일러로 렌더링되며, 노드별로 `.use()`를 사용하여 태그를 재정의하세요.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+    ```
+
+    자체 마크다운 렌더러를 사용할 수도 있습니다:
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > 렌더러 자체를 지연 로드하려면 `installIntlayerMarkdownDynamic(async () => …)`를 사용하세요. 로더는 첫 번째 호출 시에만 실행됩니다.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro에는 프로바이더를 담을 컴포넌트 트리가 없으므로 설정은 미들웨어(서버) 및 클라이언트 `<script>`(브라우저)에서 싱글톤으로 한 번 설치됩니다. `useMarkdownRenderer()`가 반환하는 렌더러를 구성합니다. `useIntlayer`가 반환하는 `md` 노드는 기본 컴파일러로 렌더링되며, 노드별로 `.use()`를 사용하여 태그를 재정의하세요.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // 서버 시작 시 한 번 실행됩니다. Intlayer 미들웨어 자체는
+    // 이 파일보다 앞서 통합에 의해 등록됩니다.
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    자체 마크다운 렌더러를 사용할 수도 있습니다:
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > 렌더러 자체를 지연 로드하려면 `installIntlayerMarkdownDynamic(async () => …)`를 사용하세요. 로더는 첫 번째 호출 시에만 실행됩니다.
+
+  </Tab>
 </Tabs>
 
 ## 서스펜스 (Suspense)
@@ -1326,6 +1554,40 @@ remark / rehype와 같은 다른 마크다운 파서와 비교할 때, Intlayer
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 3는 서버에서 렌더링하고 HTML을 스트리밍하므로 AST가 클라이언트로 전달될 필요가 없습니다. 한 번 파싱하고 페이지가 빌드되는 곳에서 AST를 렌더링하세요:
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. 마크다운을 직렬화 가능한 AST로 파싱 (예: 모듈 로드 시 한 번)
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. AST 렌더링: 렌더러는 원시 문자열 또는 파싱된 AST를 허용합니다
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro 페이지는 서버에서 렌더링되므로 AST가 클라이언트로 전달될 필요가 없습니다. 프론트매터에서 Markdown을 파싱하고 `set:html`로 렌더링하세요:
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. 마크다운을 직렬화 가능한 AST로 파싱
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. AST 렌더링: 렌더러는 원시 문자열 또는 파싱된 AST를 허용합니다 -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 이 패턴을 통해 마크다운 파싱 로직을 서버에서 완벽히 실행함으로써 클라이언트 사이드 실행 시간을 크게 단축하고 초기 하이드레이션 속도를 개선할 수 있습니다.

package/docs/ko/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Analog i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Analog 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="프로젝트 설정">
 
+### 아키텍처
+
+이 아키텍처에서 `angular-intlayer`는 `provideIntlayer()`를 제공하며, `src/app/app.config.ts`에 등록되어 모든 컴포넌트와 파일 기반 페이지가 `useIntlayer` 시그널을 통해 콘텐츠를 읽을 수 있습니다. Analog는 Vite를 기반으로 구축되므로 `vite.config.ts`에서 `analog()` 옆에 `vite-intlayer`의 `intlayer()` 플러그인이 추가되어 콘텐츠 선언을 감시하고 다시 빌드하며 로케일 프록시를 실행합니다. 콘텐츠 선언은 `src/app/`의 컴포넌트 및 페이지와 함께 배치됩니다.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── pages
+│   │   │   └── index.page.ts         # File-based route using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts                    # analog() and intlayer() Vite plugins
+```
+
+### 설정
+
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/ko/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 19 i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Angular 19 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -164,6 +164,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="프로젝트 구성">
 
+### 아키텍처
+
+이 아키텍처에서 `angular-intlayer`는 `provideIntlayer()`를 제공하며, `src/app/app.config.ts`에 등록되어 모든 컴포넌트가 `useIntlayer` 시그널을 통해 콘텐츠를 읽을 수 있습니다. Angular CLI는 커스텀 Webpack 빌더로 전환되며, `webpack.config.ts`는 Intlayer 플러그인을 빌드에 병합하여 콘텐츠 선언을 감시하고 다시 빌드합니다. 콘텐츠 선언은 `src/app/`의 컴포넌트와 함께 배치됩니다.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom Webpack builder for build and serve
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── webpack.config.ts                 # mergeConfig() from angular-intlayer/webpack
+```
+
+### 설정
+
 애플리케이션의 언어를 구성하기 위한 설정 파일을 생성합니다:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/ko/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 22 i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Angular 22 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="프로젝트 구성">
 
+### 아키텍처
+
+이 아키텍처에서 `angular-intlayer`는 `provideIntlayer()`를 제공하며, `src/app/app.config.ts`에 등록되어 모든 컴포넌트가 `useIntlayer` 시그널을 통해 콘텐츠를 읽을 수 있습니다. Angular CLI는 커스텀 esbuild 빌더로 전환되며, `esbuild.plugins.ts`는 Intlayer 플러그인을 빌드에 등록하여 콘텐츠 선언을 감시하고 다시 빌드합니다. 콘텐츠 선언은 `src/app/`의 컴포넌트와 함께 배치됩니다.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom esbuild builder for build and serve
+├── esbuild.plugins.ts                # intlayerEsbuildPlugin() from angular-intlayer/esbuild
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 설정
+
 애플리케이션의 언어를 구성하기 위해 구성 파일을 만듭니다:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/ko/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -160,6 +160,29 @@ bun add intlayer astro-intlayer
 </Step>
 <Step number={2} title="프로젝트 설정">
 
+### 아키텍처
+
+이 아키텍처에서 `astro.config.ts`에 등록된 `intlayer()` 통합은 사전을 빌드하고 모든 요청의 로케일을 확인하여 `Astro.locals.intlayer`에 노출하는 미들웨어를 추가합니다. 페이지는 `src/pages/[...locale]/` 나머지(rest) 세그먼트 아래에 위치하므로 기본 로케일은 접두사 없이 제공되고 다른 모든 로케일은 전용 URL을 갖습니다. `.astro` 파일은 `astro-intlayer`의 `useIntlayer` / `useLocale` 훅을 사용하여 콘텐츠를 읽으며, 콘텐츠 선언은 `src/`의 컴포넌트와 함께 배치됩니다.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── LocaleSwitcher.astro      # Locale switcher component
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page (rest param also serves the default locale)
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() integration
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 설정
+
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/ko/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Lit i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro + Lit 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -180,6 +180,30 @@ bun x intlayer init
 </Step>
 <Step number={2} title="프로젝트 설정">
 
+### 아키텍처
+
+이 아키텍처에서 `astro.config.ts`에 등록된 `intlayer()` 통합은 사전을 빌드하고 모든 요청의 로케일을 확인하여 `Astro.locals.intlayer`에 노출하는 미들웨어를 추가합니다. 페이지는 `src/pages/[...locale]/` 나머지(rest) 세그먼트 아래에 위치하므로 기본 로케일은 접두사 없이 제공되고 다른 모든 로케일은 전용 URL을 갖습니다. `.astro` 파일은 서버 렌더링을 위해 `astro-intlayer`의 `useIntlayer` / `useLocale` 훅을 사용하여 콘텐츠를 읽고, Lit 아일랜드(`src/components/lit/LitDemo.ts`)는 서버에서 감지된 로케일을 prop으로 받아 대화형 처리를 위해 `lit-intlayer`에 전달합니다. 콘텐츠 선언은 `src/`의 컴포넌트와 함께 배치됩니다.
+
+```bash
+.
+├── src
+│   ├── components
+│   │   └── lit
+│   │       ├── app.content.ts        # App content declaration
+│   │       └── LitDemo.ts            # Lit custom element (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the custom element
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and lit() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 설정
+
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/ko/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Preact i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro + Preact 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -179,6 +179,31 @@ bun x intlayer init
 </Step>
 <Step number={2} title="프로젝트 설정">
 
+### 아키텍처
+
+이 아키텍처에서 `astro.config.ts`에 등록된 `intlayer()` 통합은 사전을 빌드하고 모든 요청의 로케일을 확인하여 `Astro.locals.intlayer`에 노출하는 미들웨어를 추가합니다. 페이지는 `src/pages/[...locale]/` 나머지(rest) 세그먼트 아래에 위치하므로 기본 로케일은 접두사 없이 제공되고 다른 모든 로케일은 전용 URL을 갖습니다. `.astro` 파일은 서버 렌더링을 위해 `astro-intlayer`의 `useIntlayer` / `useLocale` 훅을 사용하여 콘텐츠를 읽고, Preact 아일랜드(`src/components/preact/PreactIsland.tsx`)는 서버에서 감지된 로케일을 prop으로 받아 대화형 처리를 위해 `preact-intlayer`에 전달합니다. 콘텐츠 선언은 `src/`의 컴포넌트와 함께 배치됩니다.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── preact
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── PreactIsland.tsx      # Preact island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and preact() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 설정
+
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/ko/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + React i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro + React 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -182,6 +182,31 @@ bun x intlayer init
 </Step>
 <Step number={2} title="프로젝트 설정">
 
+### 아키텍처
+
+이 아키텍처에서 `astro.config.ts`에 등록된 `intlayer()` 통합은 사전을 빌드하고 모든 요청의 로케일을 확인하여 `Astro.locals.intlayer`에 노출하는 미들웨어를 추가합니다. 페이지는 `src/pages/[...locale]/` 나머지(rest) 세그먼트 아래에 위치하므로 기본 로케일은 접두사 없이 제공되고 다른 모든 로케일은 전용 URL을 갖습니다. `.astro` 파일은 서버 렌더링을 위해 `astro-intlayer`의 `useIntlayer` / `useLocale` 훅을 사용하여 콘텐츠를 읽고, React 아일랜드(`src/components/react/ReactIsland.tsx`)는 서버에서 감지된 로케일을 prop으로 받아 대화형 처리를 위해 `react-intlayer`에 전달합니다. 콘텐츠 선언은 `src/`의 컴포넌트와 함께 배치됩니다.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── react
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── ReactIsland.tsx       # React island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and react() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 설정
+
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/ko/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Solid i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro + Solid 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -179,6 +179,31 @@ bun x intlayer init
 </Step>
 <Step number={2} title="프로젝트 설정">
 
+### 아키텍처
+
+이 아키텍처에서 `astro.config.ts`에 등록된 `intlayer()` 통합은 사전을 빌드하고 모든 요청의 로케일을 확인하여 `Astro.locals.intlayer`에 노출하는 미들웨어를 추가합니다. 페이지는 `src/pages/[...locale]/` 나머지(rest) 세그먼트 아래에 위치하므로 기본 로케일은 접두사 없이 제공되고 다른 모든 로케일은 전용 URL을 갖습니다. `.astro` 파일은 서버 렌더링을 위해 `astro-intlayer`의 `useIntlayer` / `useLocale` 훅을 사용하여 콘텐츠를 읽고, Solid 아일랜드(`src/components/solid/SolidIsland.tsx`)는 서버에서 감지된 로케일을 prop으로 받아 대화형 처리를 위해 `solid-intlayer`에 전달합니다. 콘텐츠 선언은 `src/`의 컴포넌트와 함께 배치됩니다.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── solid
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── SolidIsland.tsx       # Solid island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and solid() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 설정
+
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/ko/intlayer_with_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Svelte i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro + Svelte 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -179,6 +179,30 @@ bun x intlayer init
 </Step>
 <Step number={2} title="프로젝트 설정">
 
+### 아키텍처
+
+이 아키텍처에서 `astro.config.ts`에 등록된 `intlayer()` 통합은 사전을 빌드하고 모든 요청의 로케일을 확인하여 `Astro.locals.intlayer`에 노출하는 미들웨어를 추가합니다. 페이지는 `src/pages/[...locale]/` 나머지(rest) 세그먼트 아래에 위치하므로 기본 로케일은 접두사 없이 제공되고 다른 모든 로케일은 전용 URL을 갖습니다. `.astro` 파일은 서버 렌더링을 위해 `astro-intlayer`의 `useIntlayer` / `useLocale` 훅을 사용하여 콘텐츠를 읽고, Svelte 아일랜드(`src/components/svelte/SvelteIsland.svelte`)는 서버에서 감지된 로케일을 prop으로 받아 대화형 처리를 위해 `svelte-intlayer`에 전달합니다. 콘텐츠 선언은 `src/`의 컴포넌트와 함께 배치됩니다.
+
+```bash
+.
+├── src
+│   ├── app.content.ts                # App content declaration
+│   ├── components
+│   │   └── svelte
+│   │       └── SvelteIsland.svelte   # Svelte island (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and svelte() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 설정
+
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
 ```typescript fileName="intlayer.config.ts"