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

package/docs/ko/intlayer_with_nuxt.md

@@ -121,32 +121,50 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-nuxt-4-template)을 확인하세요.
 
-### 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 vue-intlayer
 npm install --save-dev nuxt-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer vue-intlayer
 pnpm add --save-dev nuxt-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer vue-intlayer
 yarn add --save-dev nuxt-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer vue-intlayer
 bun add --dev nuxt-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -159,7 +177,9 @@ bun x intlayer init
 - **nuxt-intlayer**
   Nuxt 애플리케이션과 Intlayer를 통합하는 Nuxt 모듈입니다. 자동 설정, 로케일 감지를 위한 미들웨어, 쿠키 관리 및 URL 리디렉션을 제공합니다.
 
-### 2단계: 프로젝트 구성
+</Step>
+
+<Step number={2} title="프로젝트 구성">
 
 애플리케이션의 언어를 구성하기 위한 설정 파일을 만드세요:
 
@@ -183,7 +203,9 @@ export default config;
 
 > 이 구성 파일을 통해 지역화된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔에서 Intlayer 로그 비활성화 등 다양한 설정을 할 수 있습니다. 사용 가능한 모든 매개변수 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: Nuxt 구성에 Intlayer 통합하기
+</Step>
+
+<Step number={3} title="Nuxt 구성에 Intlayer 통합하기">
 
 Nuxt 구성에 intlayer 모듈을 추가하세요:
 
@@ -198,7 +220,9 @@ export default defineNuxtConfig({
 
 > `nuxt-intlayer` 모듈은 Intlayer와 Nuxt의 통합을 자동으로 처리합니다. 콘텐츠 선언 빌드를 설정하고, 개발 모드에서 파일을 모니터링하며, 로케일 감지를 위한 미들웨어를 제공하고, 지역화된 라우팅을 관리합니다.
 
-### 4단계: 콘텐츠 선언하기
+</Step>
+
+<Step number={4} title="콘텐츠 선언하기">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리하세요:
 
@@ -233,7 +257,9 @@ export default content;
 
 > 자세한 내용은 [content 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 5단계: 코드에서 Intlayer 사용하기
+</Step>
+
+<Step number={5} title="코드에서 Intlayer 사용하기">
 
 `useIntlayer` 컴포저블을 사용하여 Nuxt 애플리케이션 전반에서 콘텐츠 사전을 접근할 수 있습니다:
 
@@ -302,7 +328,9 @@ Intlayer는 콘텐츠에 접근할 수 있는 다양한 API를 제공합니다:
   - `const content = useIntlayer("myContent");`를 사용하고 `{{ content.myContent }}` / `<content.myContent />`를 사용하세요.
   - 또는 `const { myContent } = useIntlayer("myContent");`를 사용하고 `{{ myContent}}` / `<myContent/>`를 사용하여 콘텐츠를 구조 분해 할당하세요.
 
-### (선택 사항) 6단계: 콘텐츠의 언어 변경하기
+</Step>
+
+<Step number={6} title="콘텐츠의 언어 변경하기" isOptional={true}>
 
 콘텐츠의 언어를 변경하려면 `useLocale` 컴포저블에서 제공하는 `setLocale` 함수를 사용할 수 있습니다. 이 함수는 애플리케이션의 로케일을 설정하고 그에 따라 콘텐츠를 업데이트할 수 있게 해줍니다.
 
@@ -346,7 +374,9 @@ const { locale, availableLocales, setLocale } = useLocale();
 </template>
 ```
 
-### (선택 사항) 6b단계: 내비게이션이 포함된 레이아웃 생성
+</Step>
+
+<Step number={6b} title="내비게이션이 포함된 레이아웃 생성" isOptional={true}>
 
 Nuxt 레이아웃을 사용하면 페이지에 공통 구조를 정의할 수 있습니다. 로케일 스위처와 내비게이션을 포함하는 기본 레이아웃을 생성하세요:
 
@@ -373,7 +403,9 @@ import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
 
 `Links` 컴포넌트(아래에 표시됨)는 내부 내비게이션 링크가 자동으로 현지화되도록 보장합니다.
 
-### (선택 사항) 7단계: 애플리케이션에 현지화된 라우팅 추가하기
+</Step>
+
+<Step number={7} title="애플리케이션에 현지화된 라우팅 추가하기" isOptional={true}>
 
 Nuxt는 `nuxt-intlayer` 모듈을 사용할 때 현지화된 라우팅을 자동으로 처리합니다. 이는 페이지 디렉토리 구조를 기반으로 각 언어별 경로를 자동으로 생성합니다.
 
@@ -447,7 +479,9 @@ useHead({
 - 로케일 쿠키 관리
 - 사용자를 적절한 로컬라이즈된 URL로 리디렉션
 
-### (선택 사항) 8단계: 로컬라이즈된 링크 컴포넌트 생성
+</Step>
+
+<Step number={8} title="로컬라이즈된 링크 컴포넌트 생성" isOptional={true}>
 
 애플리케이션의 내비게이션이 현재 로케일을 준수하도록 하려면, 커스텀 `Links` 컴포넌트를 생성할 수 있습니다. 이 컴포넌트는 내부 URL에 현재 언어를 자동으로 접두사로 붙여주며, 이는 **SEO 및 페이지 발견 가능성**에 필수적입니다.
 
@@ -515,7 +549,9 @@ import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
 > - 사용자가 지역화된 URL을 직접 공유할 수 있습니다.
 > - 브라우저 히스토리가 로케일 접두사가 붙은 URL에서 올바르게 작동합니다.
 
-### (선택 사항) 9단계: 메타데이터 및 SEO 처리
+</Step>
+
+<Step number={9} title="메타데이터 및 SEO 처리" isOptional={true}>
 
 Nuxt는 `useHead` 컴포저블(자동 임포트)을 통해 뛰어난 SEO 기능을 제공합니다. Intlayer를 사용하여 `.raw` 또는 `.value` 접근자를 통해 원시 문자열 값을 얻어 지역화된 메타데이터를 처리할 수 있습니다:
 
@@ -616,6 +652,10 @@ export default aboutPageContent;
 }
 ```
 
+</Step>
+
+</Steps>
+
 ### Git 설정
 
 Intlayer가 생성하는 파일들은 Git 저장소에 커밋하지 않도록 무시하는 것이 권장됩니다.

package/docs/ko/intlayer_with_react_native+expo.md

@@ -156,28 +156,44 @@ bun add --dev 반응 네이티브-인레이어
 
 React Native 프로젝트에서 다음 패키지들을 설치하세요:
 
+```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 react-intlayer
 npm install --save-dev react-native-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
 pnpm add --save-dev react-native-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer react-intlayer
 yarn add --save-dev react-native-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer react-intlayer
 bun add --dev react-native-intlayer
-bun x intlayer init
 ```
 
 ### 패키지

package/docs/ko/intlayer_with_react_router_v7.md

@@ -100,32 +100,50 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 ## React Router v7 애플리케이션에서 Intlayer 설정 단계별 가이드
 
-### 1단계: 의존성 설치
+<Steps>
+
+<Step number={1} title="의존성 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치하세요:
 
+```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 react-intlayer
 npm install vite-intlayer --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
 pnpm add vite-intlayer --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer react-intlayer
 yarn add vite-intlayer --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer react-intlayer
 bun add vite-intlayer --dev
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -139,7 +157,13 @@ bun x intlayer init
 - **vite-intlayer**  
   Intlayer를 [Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 통합하기 위한 Vite 플러그인과, 사용자의 선호 로케일 감지, 쿠키 관리, URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
 
-### 2단계: 프로젝트 구성
+</Step>
+
+<Step number={2} title="프로젝트 구성">
+
+</Step>
+
+</Steps>
 
 ## 파일 시스템 기반 라우트를 사용한 React Router v7 애플리케이션에서 Intlayer 설정을 위한 단계별 가이드
 
@@ -192,7 +216,9 @@ export default config;
 
 > 이 구성 파일을 통해 지역화된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔에서 Intlayer 로그 비활성화 등 다양한 설정을 할 수 있습니다. 사용 가능한 모든 매개변수 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: Vite 구성에 Intlayer 통합하기
+<Steps>
+
+<Step number={3} title="Vite 구성에 Intlayer 통합하기">
 
 구성에 intlayer 플러그인을 추가하세요:
 
@@ -208,6 +234,10 @@ export default defineConfig({
 
 > `intlayer()` Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 이 플러그인은 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. 또한 Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의하며, 성능 최적화를 위한 별칭(alias)도 제공합니다.
 
+</Step>
+
+</Steps>
+
 <Steps>
 
 <Step number={4} title="React Router v7 라우트 구성">
@@ -325,9 +355,7 @@ bun run build # Or bun run dev
 
 </Step>
 
-</Steps>
-
-### 5단계: 레이아웃 컴포넌트 생성
+<Step number={5} title="레이아웃 컴포넌트 생성">
 
 루트 레이아웃과 로케일별 레이아웃을 설정하세요:
 
@@ -381,7 +409,9 @@ export function Layout({
 }
 ```
 
-### 6단계: 콘텐츠 선언하기
+</Step>
+
+<Step number={6} title="콘텐츠 선언하기">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리하세요:
 
@@ -421,7 +451,9 @@ export default pageContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 7단계: 로케일 인식 컴포넌트 생성
+</Step>
+
+<Step number={7} title="로케일 인식 컴포넌트 생성">
 
 로케일 인식 내비게이션을 위한 `LocalizedLink` 컴포넌트를 생성합니다:
 
@@ -483,7 +515,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### 8단계: 페이지에서 Intlayer 활용하기
+</Step>
+
+<Step number={8} title="페이지에서 Intlayer 활용하기">
 
 애플리케이션 전반에서 콘텐츠 사전을 액세스하세요:
 
@@ -535,7 +569,9 @@ export default function Page() {
 
 > `useIntlayer` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayer.md)를 참조하세요.
 
-### 9단계: 로케일 스위처 컴포넌트 만들기
+</Step>
+
+<Step number={9} title="로케일 스위처 컴포넌트 만들기">
 
 사용자가 언어를 변경할 수 있도록 컴포넌트를 만드세요:
 
@@ -596,7 +632,9 @@ export const LocaleSwitcher: FC = () => {
 
 > `useLocale` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md)를 참조하세요.
 
-### 10단계: HTML 속성 관리 추가 (선택 사항)
+</Step>
+
+<Step number={10} title="HTML 속성 관리 추가 (선택 사항)" isOptional={true}>
 
 HTML의 lang 및 dir 속성을 관리하는 훅을 만듭니다:
 
@@ -634,6 +672,10 @@ export default function RootLayout() {
 }
 ```
 
+</Step>
+
+</Steps>
+
 ## Configure TypeScript
 
 Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
@@ -699,7 +741,9 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 for a fully internationalized application with locale-aware routing and TypeScript support.
 
-### 11단계: 미들웨어 추가 (선택 사항)
+<Steps>
+
+<Step number={11} title="미들웨어 추가 (선택 사항)" isOptional={true}>
 
 `intlayerProxy`를 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 플러그인은 사용자의 브라우저 언어 설정을 기반으로 가장 적합한 로케일을 결정합니다. 로케일이 감지되지 않으면 기본 로케일로 리디렉션합니다.
 
@@ -722,6 +766,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## TypeScript 구성
 
 Intlayer는 모듈 확장을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.

package/docs/ko/intlayer_with_react_router_v7_fs_routes.md

@@ -99,32 +99,50 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 ## React Router v7 애플리케이션에서 Intlayer 설정 단계별 가이드
 
-### 1단계: 의존성 설치
+<Steps>
+
+<Step number={1} title="의존성 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치하세요:
 
+```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 react-intlayer
 npm install vite-intlayer --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
 pnpm add vite-intlayer --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer react-intlayer
 yarn add vite-intlayer --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer react-intlayer
 bun add vite-intlayer --dev
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -138,7 +156,13 @@ bun x intlayer init
 - **vite-intlayer**  
   Intlayer를 [Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 통합하기 위한 Vite 플러그인과, 사용자의 선호 로케일 감지, 쿠키 관리, URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
 
-### 2단계: 프로젝트 구성
+</Step>
+
+<Step number={2} title="프로젝트 구성">
+
+</Step>
+
+</Steps>
 
 ## 파일 시스템 기반 라우트를 사용한 React Router v7 애플리케이션에서 Intlayer 설정을 위한 단계별 가이드
 
@@ -191,7 +215,9 @@ export default config;
 
 > 이 구성 파일을 통해 지역화된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔에서 Intlayer 로그 비활성화 등 다양한 설정을 할 수 있습니다. 사용 가능한 모든 매개변수 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: Vite 구성에 Intlayer 통합하기
+<Steps>
+
+<Step number={3} title="Vite 구성에 Intlayer 통합하기">
 
 구성에 intlayer 플러그인을 추가하세요:
 
@@ -207,6 +233,10 @@ export default defineConfig({
 
 > `intlayer()` Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 이 플러그인은 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. 또한 Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의하며, 성능 최적화를 위한 별칭(alias)도 제공합니다.
 
+</Step>
+
+</Steps>
+
 <Steps>
 
 <Step number={4} title="React Router v7 라우트 구성">
@@ -326,9 +356,7 @@ bun run build # Or bun run dev
 
 </Step>
 
-</Steps>
-
-### 5단계: 레이아웃 컴포넌트 생성
+<Step number={5} title="레이아웃 컴포넌트 생성">
 
 루트 레이아웃과 로케일별 레이아웃을 설정하세요:
 
@@ -351,7 +379,9 @@ export default function RootLayout({ params }: Route.ComponentProps) {
 }
 ```
 
-### 6단계: 콘텐츠 선언하기
+</Step>
+
+<Step number={6} title="콘텐츠 선언하기">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리하세요:
 
@@ -391,7 +421,9 @@ export default pageContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 7단계: 로케일 인식 컴포넌트 생성
+</Step>
+
+<Step number={7} title="로케일 인식 컴포넌트 생성">
 
 로케일 인식 내비게이션을 위한 `LocalizedLink` 컴포넌트를 생성합니다:
 
@@ -453,7 +485,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### 8단계: 페이지에서 Intlayer 활용하기
+</Step>
+
+<Step number={8} title="페이지에서 Intlayer 활용하기">
 
 애플리케이션 전반에서 콘텐츠 사전을 액세스하세요:
 
@@ -480,7 +514,9 @@ export default function Page() {
 
 > `useIntlayer` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayer.md)를 참조하세요.
 
-### 9단계: 로케일 스위처 컴포넌트 만들기
+</Step>
+
+<Step number={9} title="로케일 스위처 컴포넌트 만들기">
 
 사용자가 언어를 변경할 수 있도록 컴포넌트를 만드세요:
 
@@ -541,7 +577,9 @@ export const LocaleSwitcher: FC = () => {
 
 > `useLocale` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md)를 참조하세요.
 
-### 10단계: HTML 속성 관리 추가 (선택 사항)
+</Step>
+
+<Step number={10} title="HTML 속성 관리 추가 (선택 사항)" isOptional={true}>
 
 HTML의 lang 및 dir 속성을 관리하는 훅을 만듭니다:
 
@@ -579,6 +617,10 @@ export default function RootLayout() {
 }
 ```
 
+</Step>
+
+</Steps>
+
 ## Configure TypeScript
 
 Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
@@ -645,7 +687,9 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 using file-system based routing for a fully internationalized application with locale-aware routing and TypeScript support.
 
-### 11단계: 미들웨어 추가 (선택 사항)
+<Steps>
+
+<Step number={11} title="미들웨어 추가 (선택 사항)" isOptional={true}>
 
 `intlayerProxy`를 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 플러그인은 사용자의 브라우저 언어 설정을 기반으로 가장 적합한 로케일을 결정합니다. 로케일이 감지되지 않으면 기본 로케일로 리디렉션합니다.
 
@@ -668,6 +712,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## TypeScript 구성
 
 Intlayer는 모듈 확장을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.

package/docs/ko/intlayer_with_storybook.md

@@ -98,7 +98,9 @@ Storybook은 UI 컴포넌트를 독립적으로 개발하고 문서화하기 위
 <Tabs>
 <Tab value="Vite Setup">
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -128,7 +130,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### 2단계: Intlayer 구성 생성
+</Step>
+
+<Step number={2} title="Intlayer 구성 생성">
 
 프로젝트 루트(또는 디자인 시스템 패키지 내부)에 `intlayer.config.ts`를 생성합니다:
 
@@ -157,7 +161,9 @@ export default config;
 
 ---
 
-### 3단계: Storybook에 Vite 플러그인 추가
+</Step>
+
+<Step number={3} title="Storybook에 Vite 플러그인 추가">
 
 Storybook의 `viteFinal` 훅을 사용하면 내부 Vite 구성을 확장할 수 있습니다. 여기에 `intlayer()` 플러그인을 가져와서 추가합니다:
 
@@ -198,7 +204,9 @@ export default config;
 
 ---
 
-### 4단계: `IntlayerProvider` 데코레이터 및 로케일 도구 모음 추가
+</Step>
+
+<Step number={4} title="`IntlayerProvider` 데코레이터 및 로케일 도구 모음 추가">
 
 Storybook의 `preview` 파일은 모든 스토리를 `IntlayerProvider`로 감싸고 도구 모음에 로케일 스위처를 노출하기에 적합한 장소입니다:
 
@@ -255,7 +263,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### 1단계: 종속성 설치
+</Step>
+
+<Step number={1} title="종속성 설치">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -279,7 +289,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### 2단계: Intlayer 구성 생성
+</Step>
+
+<Step number={2} title="Intlayer 구성 생성">
 
 프로젝트 루트에 `intlayer.config.ts`를 생성합니다:
 
@@ -301,7 +313,9 @@ export default config;
 
 ---
 
-### 3단계: Storybook의 Webpack 구성
+</Step>
+
+<Step number={3} title="Storybook의 Webpack 구성">
 
 Webpack 기반 Storybook 설정(예: `@storybook/react-webpack5`)의 경우, `webpackFinal`을 통해 webpack 구성을 확장하여 Intlayer 별칭(alias) 및 로더를 추가합니다:
 
@@ -328,7 +342,9 @@ export default config;
 
 ---
 
-### 4단계: `IntlayerProvider` 데코레이터 및 로케일 도구 모음 추가
+</Step>
+
+<Step number={4} title="`IntlayerProvider` 데코레이터 및 로케일 도구 모음 추가">
 
 Vite 설정과 동일하게 `.storybook/preview.tsx`에 데코레이터와 전역 로케일 유형을 추가합니다:
 
@@ -374,6 +390,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## 콘텐츠 선언
 
 각 컴포넌트 옆에 `*.content.ts` 파일을 생성합니다. Intlayer는 컴파일 중에 이를 자동으로 감지합니다.