@intlayer/docs 8.10.0 → 8.11.1

package/docs/ko/dictionary/markdown.md

@@ -66,13 +66,10 @@ Intlayer는 Markdown 구문을 사용하여 정의된 서식 있는 텍스트
     파일 구조 예시:
 
     ```text
-    content/
-    ├── en/
-    │   └── markdown-file.en.content.md
-    ├── fr/
-    │   └── markdown-file.fr.content.md
-    └── es/
-        └── markdown-file.es.content.md
+    content
+    ├── markdown-file.en.content.md
+    ├── markdown-file.fr.content.md
+    └── markdown-file.es.content.md
     ```
 
     [사전 정의](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)에 정의된 속성을 프런트매터에 추가할 수 있습니다.
@@ -130,8 +127,6 @@ Intlayer는 Markdown 구문을 사용하여 정의된 서식 있는 텍스트
   </Tab>
 </Tabs>
 
----
-
 ## Markdown 렌더링
 
 Intlayer는 Markdown을 렌더링하는 두 가지 독립적인 방법을 제공합니다:
@@ -147,7 +142,7 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
 ### 1. 자동 렌더링 (`useIntlayer`를 통한 방식)
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
     Markdown 노드는 JSX로 직접 렌더링할 수 있습니다.
 
     ```tsx fileName="App.tsx"
@@ -197,6 +192,57 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
     {myMarkdownContent.metadata.title}
     ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+    Markdown 노드는 JSX로 직접 렌더링할 수 있습니다.
+
+    ```tsx fileName="App.tsx"
+    import { useIntlayer } from "next-intlayer";
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    const AppContent = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div>{myMarkdownContent}</div>;
+    };
+
+    const App = () => (
+      <MarkdownProvider
+        components={{
+          h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+          MyButton: (props) => <button {...props} />, // MDX 컴포넌트
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
+    ```
+
+    > `MarkdownProvider`가 없는 경우 Intlayer는 기본 Markdown to JSX 파서를 사용하여 마크다운을 렌더링합니다.
+
+    `.use()` 메서드를 사용하여 특정 노드에 대한 로컬 재정의를 제공할 수도 있습니다:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+    })}
+    ```
+
+    문자열로 Markdown을 가져올 수 있습니다:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    그리고 다음과 같이 마크다운 메타데이터에 접근할 수 있습니다:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
     Vue에서 Markdown 콘텐츠는 내장 `component`를 사용하거나 노드로서 직접 렌더링될 수 있습니다.
@@ -441,7 +487,7 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
 이러한 유틸리티는 **순수 Markdown 문자열만** 렌더링하며 `useIntlayer`와 독립적입니다. 사전 외의 출처에서 Markdown을 렌더링해야 할 때 사용하세요.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
   
     #### `<MarkdownRenderer />` 컴포넌트
 
@@ -479,6 +525,45 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
     const jsx = renderMarkdown("# 내 제목", { forceBlock: true });
     ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+  
+    #### `<MarkdownRenderer />` 컴포넌트
+
+    특정 옵션으로 Markdown 문자열을 렌더링합니다.
+
+    ```tsx
+    import { MarkdownRenderer } from "next-intlayer/markdown";
+
+    <MarkdownRenderer forceBlock={true} tagfilter={true}>
+      {"# 내 제목"}
+    </MarkdownRenderer>
+    ```
+
+    #### `useMarkdownRenderer()` 훅
+
+    사전 구성된 렌더러 함수를 가져옵니다.
+
+    ```tsx
+    import { useMarkdownRenderer } from "next-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({
+      forceBlock: true,
+      components: { h1: (props) => <h1 {...props} className="custom" /> }
+    });
+
+    return renderMarkdown("# 내 제목");
+    ```
+
+    #### `renderMarkdown()` 유틸리티
+    컴포넌트 외부 렌더링용 독립 실행형 유틸리티.
+
+    ```tsx
+    import { renderMarkdown } from "next-intlayer/markdown";
+
+    const jsx = renderMarkdown("# 내 제목", { forceBlock: true });
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -608,14 +693,12 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
   </Tab>
 </Tabs>
 
----
-
 ## `MarkdownProvider`를 통한 전역 구성
 
 `MarkdownProvider`(또는 해당 프레임워크 기능)는 전체 애플리케이션의 Markdown 렌더링 파이프라인을 구성합니다. 이는 자동 `useIntlayer` 렌더링과 도우미 유틸리티 모두에 적용됩니다. 여기서 설정된 옵션이 기본값이며, `.use()`는 노드 수준에서 이를 덮어씁니다.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "react-intlayer/markdown";
@@ -633,6 +716,7 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
     );
     ```
 
+
     > MDX 지원 — Markdown 내부에서 사용된 모든 컴포넌트 이름(예: `<MyCustomJSXComponent />`)은 `components` 맵에서 확인됩니다.
 
     자체 마크다운 렌더러를 사용할 수도 있습니다:
@@ -655,6 +739,48 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
 
     > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션 번들 크기를 줄이는 좋은 방법입니다.
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    export const AppProvider = ({ children }) => (
+      <MarkdownProvider
+        components={{
+          h1: (props) => <h1 style={{color: 'green'}} {...props} />,
+          a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,
+          MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,
+        }}
+      >
+        {children}
+      </MarkdownProvider>
+    );
+    ```
+
+
+    > MDX 지원 — Markdown 내부에서 사용된 모든 컴포넌트 이름(예: `<MyCustomJSXComponent />`)은 `components` 맵에서 확인됩니다.
+
+    자체 마크다운 렌더러를 사용할 수도 있습니다:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    export const AppProvider = ({ children }) => (
+      <MarkdownProvider
+        renderMarkdown={async (md) => {
+          // Use dynamic import to reduce the bundle size of your application
+          const { renderMarkdown } = await import('next-intlayer/markdown');
+          return renderMarkdown(md);
+        }}
+      >
+        {children}
+      </MarkdownProvider>
+    );
+    ```
+
+    > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션 번들 크기를 줄이는 좋은 방법입니다.
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -680,6 +806,9 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
     app.mount("#app");
     ```
 
+
+    > MDX 지원 — Markdown 내부에서 사용된 모든 컴포넌트 이름(예: `<MyCustomJSXComponent />`)은 `components` 맵에서 확인됩니다.
+
     자체 마크다운 렌더러를 사용할 수도 있습니다:
 
     ```typescript fileName="main.ts"
@@ -721,6 +850,9 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
     </MarkdownProvider>
     ```
 
+
+    > MDX 지원 — Markdown 내부에서 사용된 모든 컴포넌트 이름(예: `<MyCustomJSXComponent />`)은 `components` 맵에서 확인됩니다.
+
     자체 마크다운 렌더러를 사용할 수도 있습니다:
 
     ```svelte fileName="App.svelte"
@@ -757,6 +889,9 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
     );
     ```
 
+
+    > MDX 지원 — Markdown 내부에서 사용된 모든 컴포넌트 이름(예: `<MyCustomJSXComponent />`)은 `components` 맵에서 확인됩니다.
+
     자체 마크다운 렌더러를 사용할 수도 있습니다:
 
     ```tsx fileName="AppProvider.tsx"
@@ -793,6 +928,9 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
     );
     ```
 
+
+    > MDX 지원 — Markdown 내부에서 사용된 모든 컴포넌트 이름(예: `<MyCustomJSXComponent />`)은 `components` 맵에서 확인됩니다.
+
     자체 마크다운 렌더러를 사용할 수도 있습니다:
 
     ```tsx fileName="AppProvider.tsx"
@@ -836,3 +974,191 @@ Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름
 
   </Tab>
 </Tabs>
+
+## 서스펜스 (Suspense)
+
+Intlayer Markdown 렌더러는 동적으로 로드됩니다. 최적화되어 있지만 기본 구문 분석기 청크는 약 55kb입니다. 이를 동기적으로 로드하면 초기 페이지 렌더링이 지연되고 FCP(First Contentful Paint)가 저하됩니다.
+
+UI 차단을 방지하기 위해 Intlayer는 React의 Suspense API와 통합됩니다. 백그라운드에서 구문 분석기를 가져오고 다운로드하는 동안 Promise를 던집니다.
+
+Intlayer Markdown을 렌더링하는 구성 요소를 `<Suspense>` 경계로 래핑하십시오. 이렇게 하면 청크가 다운로드되는 동안 현지화된 대체 상태가 표시되어 나머지 DOM이 즉시 렌더링될 수 있습니다.
+
+경고: `<Suspense>` 경계를 제공하지 않으면 React는 55kb 청크가 완전히 로드될 때까지 루트 수준에서 일시 중지하거나 전체 구성 요소 트리의 렌더링을 차단합니다.
+
+<Tabs>
+  <Tab label="Next.js" value="nextjs">
+
+Next.js 앱 라우터에서는 클라이언트 구성 요소에 대해 React `Suspense`를 사용하거나 서버 구성 요소에 대해 `loading.tsx` 파일을 사용할 수 있습니다.
+
+**클라이언트 컴포넌트:**
+
+```tsx fileName="components/MyComponent.tsx"
+"use client";
+import { useIntlayer } from "next-intlayer";
+import { Suspense } from "react";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+**`loading.tsx`가 있는 서버 컴포넌트:**
+
+```tsx fileName="app/loading.tsx"
+export default function Loading() {
+  return <div>Loading...</div>;
+}
+```
+
+```tsx fileName="app/page.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+const MyPage = () => {
+  const markdownContent = useIntlayer("my-markdown");
+  return <div>{markdownContent}</div>;
+};
+
+export default MyPage;
+```
+
+  </Tab>
+
+  <Tab label="React" value="react">
+
+```tsx
+import { useIntlayer } from "react-intlayer";
+import { Suspense } from "react";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+ 
+  <Tab label="Vue" value="vue">
+
+Vue에는 내장 `<Suspense>` 구성 요소가 있습니다. Markdown 콘텐츠를 렌더링하는 구성 요소를 `<Suspense>` 경계로 래핑하십시오.
+
+```vue fileName="MyComponent.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { markdownContent } = useIntlayer("my-markdown");
+</script>
+
+<template>
+  <Suspense>
+    <component :is="markdownContent" />
+    <template #fallback>
+      <div>Loading...</div>
+    </template>
+  </Suspense>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+Svelte에는 Suspense API에 해당하는 기능이 없습니다. Markdown 콘텐츠의 비동기 렌더링을 처리하려면 `{#await}` 블록을 사용하십시오.
+
+```svelte fileName="MyComponent.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my-markdown");
+</script>
+
+{#await $content.markdownContent}
+  <div>Loading...</div>
+{:then rendered}
+  {@html rendered}
+{/await}
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+Preact는 `preact/compat`를 통해 React의 Suspense API를 지원합니다.
+
+```tsx fileName="MyComponent.tsx"
+import { useIntlayer } from "preact-intlayer";
+import { Suspense } from "preact/compat";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+Solid는 `solid-js`의 자체 `<Suspense>` 구성 요소를 가지고 있습니다.
+
+```tsx fileName="MyComponent.tsx"
+import { useIntlayer } from "solid-intlayer";
+import { Suspense } from "solid-js";
+
+const MyComponent = () => {
+  const { markdownContent } = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+Angular에는 Suspense API가 없습니다. 지연 로드된 Markdown 콘텐츠를 처리하려면 Angular의 지연된 보기(`@defer`)를 사용하십시오(Angular 17+ 필요).
+
+```typescript fileName="my.component.ts"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-my",
+  template: `
+    @defer {
+      <div [innerHTML]="content().markdownContent"></div>
+    } @loading {
+      <div>Loading...</div>
+    }
+  `,
+})
+export class MyComponent {
+  content = useIntlayer("my-markdown");
+}
+```
+
+  </Tab>
+</Tabs>
+
+---
+
+## 옵션 참조
+
+이러한 옵션은 `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` 및 `renderMarkdown`에 전달될 수 있습니다.
+
+| Option                | Type        | Default | 설명                                                                              |
+| :-------------------- | :---------- | :------ | :-------------------------------------------------------------------------------- |
+| `forceBlock`          | `boolean`   | `false` | 출력을 블록 수준 요소(예: `<div>`)로 래핑하도록 강제합니다.                       |
+| `forceInline`         | `boolean`   | `false` | 출력을 인라인 요소(예: `<span>`)로 래핑하도록 강제합니다.                         |
+| `tagfilter`           | `boolean`   | `true`  | 위험한 HTML 태그를 제거하여 보안을 강화하기 위해 GitHub 태그 필터를 활성화합니다. |
+| `preserveFrontmatter` | `boolean`   | `false` | `true`인 경우 Markdown 문자열의 시작 부분에 있는 프런트매터가 제거되지 않습니다.  |
+| `components`          | `Overrides` | `{}`    | HTML 태그를 사용자 정의 구성 요소에 매핑(예: `{ h1: MyHeading }`).                |
+| `wrapper`             | `Component` | `null`  | 렌더링된 Markdown을 래핑하는 사용자 정의 구성 요소입니다.                         |
+| `renderMarkdown`      | `Function`  | `null`  | 기본 Markdown 컴파일러를 완전히 교체하는 사용자 정의 렌더링 기능입니다.           |

package/docs/ko/interest_of_intlayer.md

@@ -224,7 +224,7 @@ export const ComponentExample = () => {
 
 GitHub 스타는 프로젝트의 인기, 커뮤니티 신뢰 및 장기적인 관련성을 나타내는 강력한 지표입니다. 기술적 품질을 직접적으로 측정하는 것은 아니지만, 얼마나 많은 개발자가 프로젝트가 유용하다고 생각하고 진행 상황을 팔로우하며 채택할 가능성이 있는지를 반영합니다. 프로젝트의 가치를 평가할 때 스타는 대안 간의 견인력을 비교하는 데 도움이 되며 생태계 성장에 대한 통찰력을 제공합니다.
 
-[![Star History Chart](https://api.star-history.com/chart?repos=formatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Caymericzip/intlayer%2Copral/inlang&type=date&legend=top-left)](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&opral/paraglide-js&aymericzip/intlayer)
+[![Star History Chart](https://api.star-history.com/chart?repos=aymericzip/intlayer%2Cformatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Ccodingcommons/typesafe-i18n%2Copral/paraglide-js&type=date&legend=top-left)](https://www.star-history.com/#aymericzip/intlayer&formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&codingcommons/typesafe-i18n&opral/paraglide-js)
 
 ---
 

package/docs/ko/{intlayer_with_angular.md → intlayer_with_angular_19.md}

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-04-18
 updatedAt: 2026-05-06
-title: Angular i18n - Angular 앱을 번역하는 방법 2026
+title: Angular i18n - Angular 19 앱 (Webpack)을 번역하는 방법
 description: Angular 웹사이트를 다국어로 만드는 방법을 알아보세요. 국제화(i18n) 및 번역을 위해 문서를 따르세요.
 keywords:
   - 국제화
@@ -13,8 +13,9 @@ slugs:
   - doc
   - environment
   - angular
-applicationTemplate: https://github.com/aymericzip/intlayer-angular-template
-applicationShowcase: https://intlayer-angular-template.vercel.app
+  - 19
+applicationTemplate: https://github.com/aymericzip/intlayer-angular-19-template
+applicationShowcase: https://intlayer-angular-19-template.vercel.app
 history:
   - version: 8.9.0
     date: 2026-05-04
@@ -27,7 +28,7 @@ history:
     changes: "히스토리 초기화"
 ---
 
-# Intlayer를 사용하여 Angular 웹사이트 번역하기 | 국제화 (i18n)
+# Intlayer를 사용하여 Angular 19 (Webpack) 웹사이트 번역하기 | 국제화 (i18n)
 
 ## 목차
 
@@ -52,7 +53,7 @@ Intlayer를 사용하면 다음을 할 수 있습니다:
   <Tab label="코드" value="code">
 
 <iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-angular-template?file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-angular-19-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
   title="Demo CodeSandbox - Intlayer를 사용하여 애플리케이션을 국제화하는 방법"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -63,7 +64,7 @@ Intlayer를 사용하면 다음을 할 수 있습니다:
   <Tab label="데모" value="demo">
 
 <iframe
-  src="https://intlayer-angular-template.vercel.app"
+  src="https://intlayer-angular-19-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
   title="데모 - intlayer-angular-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -73,7 +74,7 @@ Intlayer를 사용하면 다음을 할 수 있습니다:
   </Tab>
 </Tabs>
 
-GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-angular-template)을 확인하세요.
+GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-angular-19-template)을 확인하세요.
 
 ### 1단계: 종속성 설치