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

package/docs/ko/intlayer_with_svelte_kit.md

@@ -155,39 +155,59 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 └── vite.config.ts
 ```
 
-### 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 svelte-intlayer
 npm install vite-intlayer --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer svelte-intlayer
 pnpm add vite-intlayer --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer svelte-intlayer
 yarn add vite-intlayer --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer svelte-intlayer
 bun add vite-intlayer --save-dev
-bun x intlayer init
 ```
 
 - **intlayer**: 핵심 i18n 패키지입니다.
 - **svelte-intlayer**: Svelte/SvelteKit용 컨텍스트 제공자와 스토어를 제공합니다.
 - **vite-intlayer**: 콘텐츠 선언을 빌드 프로세스와 통합하는 Vite 플러그인입니다.
 
-### 2단계: 프로젝트 구성
+</Step>
+
+<Step number={2} title="프로젝트 구성">
 
 프로젝트 루트에 구성 파일을 생성합니다:
 
@@ -204,7 +224,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### 3단계: Vite 구성에 Intlayer 통합하기
+</Step>
+
+<Step number={3} title="Vite 구성에 Intlayer 통합하기">
 
 `vite.config.ts` 파일을 업데이트하여 Intlayer 플러그인을 포함하세요. 이 플러그인은 콘텐츠 파일의 트랜스파일을 처리합니다.
 
@@ -218,7 +240,9 @@ export default defineConfig({
 });
 ```
 
-### 4단계: 콘텐츠 선언하기
+</Step>
+
+<Step number={4} title="콘텐츠 선언하기">
 
 `src` 폴더 내 어디에서든 콘텐츠 선언 파일을 생성하세요 (예: `src/lib/content` 또는 컴포넌트와 함께). 이 파일들은 각 로케일별로 `t()` 함수를 사용하여 애플리케이션의 번역 가능한 콘텐츠를 정의합니다.
 
@@ -239,7 +263,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### 5단계: 컴포넌트에서 Intlayer 사용하기
+</Step>
+
+<Step number={5} title="컴포넌트에서 Intlayer 사용하기">
 
 이제 어떤 Svelte 컴포넌트에서든 `useIntlayer` 함수를 사용할 수 있습니다. 이 함수는 locale이 변경될 때 자동으로 업데이트되는 반응형 스토어를 반환합니다. 이 함수는 SSR과 클라이언트 사이드 내비게이션 모두에서 현재 locale을 자동으로 인식합니다.
 
@@ -270,6 +296,10 @@ export default heroContent;
 
 # Intlayer를 사용하여 SvelteKit 웹사이트 번역하기 | 국제화(i18n)
 
+</Step>
+
+</Steps>
+
 ## 목차
 
 <TOC/>
@@ -331,39 +361,59 @@ Intlayer를 사용하면 다음을 할 수 있습니다:
 └── vite.config.ts
 ```
 
-### 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 svelte-intlayer
 npm install vite-intlayer --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer svelte-intlayer
 pnpm add vite-intlayer --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer svelte-intlayer
 yarn add vite-intlayer --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer svelte-intlayer
 bun add vite-intlayer --save-dev
-bun x intlayer init
 ```
 
 - **intlayer**: 핵심 i18n 패키지입니다.
 - **svelte-intlayer**: Svelte/SvelteKit용 컨텍스트 제공자와 스토어를 제공합니다.
 - **vite-intlayer**: 콘텐츠 선언을 빌드 프로세스와 통합하는 Vite 플러그인입니다.
 
-### 2단계: 프로젝트 구성
+</Step>
+
+<Step number={2} title="프로젝트 구성">
 
 프로젝트 루트에 구성 파일을 생성합니다:
 
@@ -380,7 +430,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### 3단계: Vite 구성에 Intlayer 통합하기
+</Step>
+
+<Step number={3} title="Vite 구성에 Intlayer 통합하기">
 
 `vite.config.ts` 파일을 업데이트하여 Intlayer 플러그인을 포함하세요. 이 플러그인은 콘텐츠 파일의 트랜스파일을 처리합니다.
 
@@ -394,7 +446,9 @@ export default defineConfig({
 });
 ```
 
-### 4단계: 콘텐츠 선언하기
+</Step>
+
+<Step number={4} title="콘텐츠 선언하기">
 
 `src` 폴더 내 어디에서든 콘텐츠 선언 파일을 생성하세요 (예: `src/lib/content` 또는 컴포넌트와 함께). 이 파일들은 각 로케일별로 `t()` 함수를 사용하여 애플리케이션의 번역 가능한 콘텐츠를 정의합니다.
 
@@ -415,7 +469,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### 5단계: 컴포넌트에서 Intlayer 사용하기
+</Step>
+
+<Step number={5} title="컴포넌트에서 Intlayer 사용하기">
 
 접두사를 사용해야 합니다 (예: `$content.title`).
 
@@ -437,7 +493,9 @@ export default heroContent;
 <div aria-label={String($content.title)}></div>
 ```
 
-### (선택 사항) 6단계: 라우팅 설정하기
+</Step>
+
+<Step number={6} title="라우팅 설정하기" isOptional={true}>
 
 다음 단계에서는 SvelteKit에서 로케일 기반 라우팅을 설정하는 방법을 보여줍니다. 이를 통해 URL에 로케일 접두사(e.g., `/en/about`, `/fr/about`)를 포함시켜 SEO 및 사용자 경험을 향상시킬 수 있습니다.
 
@@ -462,7 +520,9 @@ export default heroContent;
         └── +layout.svelte         # 폰트 및 전역 스타일을 위한 루트 레이아웃
 ```
 
-### 7단계: 서버 사이드 로케일 감지 처리 (Hooks)
+</Step>
+
+<Step number={7} title="서버 사이드 로케일 감지 처리 (Hooks)">
 
 SvelteKit에서는 SSR 중에 올바른 콘텐츠를 렌더링하기 위해 서버가 사용자의 로케일을 알아야 합니다. 우리는 URL이나 쿠키에서 로케일을 감지하기 위해 `hooks.server.ts`를 사용합니다.
 
@@ -674,7 +734,9 @@ export const prerender = true;
 </style>
 ```
 
-### (선택 사항) 8단계: 국제화된 링크
+</Step>
+
+<Step number={8} title="국제화된 링크" isOptional={true}>
 
 SEO를 위해 경로에 로케일 접두사를 붙이는 것이 권장됩니다(예: `/en/about`, `/fr/about`). 이 컴포넌트는 현재 로케일로 모든 링크에 자동으로 접두사를 붙입니다.
 
@@ -707,7 +769,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // 로케일에 따라 /en/about 또는 /fr/about로 이동합니다.
 ```
 
-### (선택 사항) 9단계: 언어 전환기
+</Step>
+
+<Step number={9} title="언어 전환기" isOptional={true}>
 
 사용자가 언어를 전환할 수 있도록 URL을 업데이트합니다.
 
@@ -748,7 +812,9 @@ goto(localizedPath); // 로케일에 따라 /en/about 또는 /fr/about로 이동
 </style>
 ```
 
-### (선택 사항) 10단계: 백엔드 프록시 추가
+</Step>
+
+<Step number={10} title="백엔드 프록시 추가" isOptional={true}>
 
 SvelteKit 애플리케이션에 백엔드 프록시를 추가하려면 `vite-intlayer` 플러그인이 제공하는 `intlayerProxy` 함수를 사용할 수 있습니다. 이 플러그인은 URL, 쿠키 및 브라우저 언어 설정을 기반으로 사용자에게 가장 적합한 로케일을 자동으로 감지합니다.
 
@@ -767,7 +833,9 @@ export default defineConfig({
 });
 ```
 
-### (선택 사항) 11단계: intlayer 에디터 / CMS 설정하기
+</Step>
+
+<Step number={11} title="intlayer 에디터 / CMS 설정하기" isOptional={true}>
 
 intlayer 에디터를 설정하려면 [intlayer 에디터 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)를 따라야 합니다.
 
@@ -792,6 +860,10 @@ intlayer 에디터 선택기를 시각화하려면 intlayer 콘텐츠에서 컴
 </div>
 ```
 
+</Step>
+
+</Steps>
+
 ### Git 구성
 
 Intlayer가 생성한 파일은 무시하는 것이 권장됩니다.

package/docs/ko/intlayer_with_tanstack+solid.md

@@ -124,36 +124,56 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-tanstack-start-solid-template)을 확인하세요.
 
-### 1단계: 프로젝트 생성
+<Steps>
+
+<Step number={1} title="프로젝트 생성">
 
 먼저 TanStack Start 웹사이트의 [새 프로젝트 시작](https://tanstack.com/start/latest/docs/framework/solid/quick-start) 가이드에 따라 새로운 TanStack Start 프로젝트를 생성합니다.
 
-### 2단계: Intlayer 패키지 설치
+</Step>
+
+<Step number={2} title="Intlayer 패키지 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다.
 
+```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 solid-intlayer
 npm install vite-intlayer --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer solid-intlayer
 pnpm add vite-intlayer --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer solid-intlayer
 yarn add vite-intlayer --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer solid-intlayer
 bun add vite-intlayer --dev
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -166,7 +186,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayer를 [Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 통합하기 위한 Vite 플러그인과 사용자의 선호 로케일 감지, 쿠키 관리 및 URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
 
-### 3단계: 프로젝트 구성
+</Step>
+
+<Step number={3} title="프로젝트 구성">
 
 애플리케이션의 언어를 구성하기 위한 구성 파일을 만듭니다.
 
@@ -187,7 +209,9 @@ export default config;
 
 > 이 구성 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔의 Intlayer 로그 비활성화 등을 수행할 수 있습니다. 사용 가능한 전체 매개변수 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 4단계: Vite 구성에 Intlayer 통합
+</Step>
+
+<Step number={4} title="Vite 구성에 Intlayer 통합">
 
 Vite 구성에 intlayer 플러그인을 추가합니다.
 
@@ -215,7 +239,9 @@ export default defineConfig({
 
 > `intlayer()` Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. Vite 애플리케이션 내에 Intlayer 환경 변수를 정의합니다. 또한 성능 최적화를 위한 별칭(alias)을 제공합니다.
 
-### 5단계: 루트 레이아웃 생성
+</Step>
+
+<Step number={5} title="루트 레이아웃 생성">
 
 `useParams`를 사용하여 현재 로케일을 감지하고 `html` 태그에 `lang` 및 `dir` 속성을 설정하여 국제화를 지원하도록 루트 레이아웃을 구성합니다.
 
@@ -256,7 +282,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### 6단계: 로케일 레이아웃 생성 (선택 사항)
+</Step>
+
+<Step number={6} title="로케일 레이아웃 생성 (선택 사항)" isOptional={true}>
 
 로케일 접두사를 처리하고 유효성 검사를 수행하는 레이아웃을 만듭니다. 이 레이아웃은 유효한 로케일만 처리되도록 보장합니다.
 
@@ -291,7 +319,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > `'prefix-all'` 모드의 경우 슬롯을 `$locale`로 전환하는 것을 선호할 수 있습니다.
 > `'no-prefix'` 또는 `'search-params'` 모드의 경우 슬롯을 완전히 제거할 수 있습니다.
 
-### 7단계: 콘텐츠 선언
+</Step>
+
+<Step number={7} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다.
 
@@ -337,7 +367,9 @@ export default appContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 8단계: 로케일 인식 컴포넌트 및 훅 활용
+</Step>
+
+<Step number={8} title="로케일 인식 컴포넌트 및 훅 활용">
 
 로케일 인식 내비게이션을 위해 `LocalizedLink` 컴포넌트를 만듭니다.
 
@@ -416,7 +448,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### 9단계: 페이지에서 Intlayer 사용
+</Step>
+
+<Step number={9} title="페이지에서 Intlayer 사용">
 
 애플리케이션 전체에서 콘텐츠 딕셔너리에 접근하세요.
 
@@ -459,7 +493,9 @@ function RouteComponent() {
 >
 > `useIntlayer` 훅에 대해 자세히 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/solid-intlayer/useIntlayer.md)를 참조하세요.
 
-### 10단계: 로케일 스위처 컴포넌트 생성
+</Step>
+
+<Step number={10} title="로케일 스위처 컴포넌트 생성">
 
 사용자가 언어를 변경할 수 있도록 하는 컴포넌트를 만듭니다.
 
@@ -503,7 +539,9 @@ export default LocaleSwitcher;
 >
 > `useLocale` 훅에 대해 자세히 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/solid-intlayer/useLocale.md)를 참조하세요.
 
-### 11단계: HTML 속성 관리
+</Step>
+
+<Step number={11} title="HTML 속성 관리">
 
 5단계에서 본 것처럼 루트 컴포넌트에서 `useParams`를 사용하여 `html` 태그의 `lang` 및 `dir` 속성을 관리할 수 있습니다. 이를 통해 서버와 클라이언트 모두에서 올바른 속성이 설정되도록 할 수 있습니다.
 
@@ -522,7 +560,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### 12단계: 미들웨어 추가 (선택 사항)
+</Step>
+
+<Step number={12} title="미들웨어 추가 (선택 사항)" isOptional={true}>
 
 `intlayerProxy`를 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 플러그인은 사용자의 브라우저 언어 환경설정에 따라 가장 적절한 로케일을 결정합니다. 감지된 로케일이 없으면 기본 로케일로 리디렉션합니다.
 
@@ -553,7 +593,9 @@ export default defineConfig({
 
 ---
 
-### 12단계: 메타데이터 국제화 (선택 사항)
+</Step>
+
+<Step number={12} title="메타데이터 국제화 (선택 사항)" isOptional={true}>
 
 로케일 인식 메타데이터를 위해 `head` 로더 내에서 `getIntlayer` 함수를 사용하여 콘텐츠 딕셔너리에 접근할 수도 있습니다.
 
@@ -600,7 +642,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### 13단계: 서버 액션에서 로케일 검색 (선택 사항)
+</Step>
+
+<Step number={13} title="서버 액션에서 로케일 검색 (선택 사항)" isOptional={true}>
 
 서버 액션이나 API 엔드포인트 내에서 현재 로케일에 접근하고 싶을 수 있습니다.
 `intlayer`의 `getLocale` 헬퍼를 사용하여 이를 수행할 수 있습니다.
@@ -637,7 +681,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### 14단계: 찾을 수 없는 페이지 관리 (선택 사항)
+</Step>
+
+<Step number={14} title="찾을 수 없는 페이지 관리 (선택 사항)" isOptional={true}>
 
 사용자가 존재하지 않는 페이지를 방문할 때 사용자 지정 404 페이지를 표시할 수 있으며, 로케일 접두사가 404 페이지가 트리거되는 방식에 영향을 줄 수 있습니다.
 
@@ -711,7 +757,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### 15단계: 컴포넌트의 콘텐츠 추출 (선택 사항)
+</Step>
+
+<Step number={15} title="컴포넌트의 콘텐츠 추출 (선택 사항)" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 것은 시간이 많이 걸릴 수 있습니다.
 
@@ -824,7 +872,9 @@ bun run build # 또는 bun run dev
 
 ---
 
-### 16단계: 사이트맵 생성 (선택 사항)
+</Step>
+
+<Step number={16} title="사이트맵 생성 (선택 사항)" isOptional={true}>
 
 Intlayer에는 애플리케이션의 사이트맵을 쉽게 만들 수 있는 내장 사이트맵 생성기가 포함되어 있습니다. 로컬라이즈된 경로를 처리하고 검색 엔진에 필요한 메타데이터를 추가합니다.
 
@@ -897,7 +947,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### 17단계: TypeScript 구성 (선택 사항)
+</Step>
+
+<Step number={17} title="TypeScript 구성 (선택 사항)" isOptional={true}>
 
 Intlayer는 모듈 보강(module augmentation)을 사용하여 TypeScript의 이점을 얻고 코드베이스를 더 강력하게 만듭니다.
 
@@ -915,6 +967,10 @@ TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Git 구성
 
 Intlayer에 의해 생성된 파일은 무시하는 것이 좋습니다. 이를 통해 Git 저장소에 해당 파일을 커밋하지 않을 수 있습니다.