@intlayer/docs 5.8.1-canary.0 → 6.0.0-canary.0

package/docs/ko/intlayer_with_tanstack.md

@@ -1,457 +1,621 @@
 ---
-createdAt: 2025-08-11
-updatedAt: 2025-08-11
-title: TanStack Start (React)에서 Intlayer 시작하기
-description: Intlayer를 사용하여 TanStack Start 앱에 i18n 추가하기 - 컴포넌트 수준 사전, 지역화된 URL, SEO 친화적 메타데이터.
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Tanstack Start에서 Intlayer로 시작하는 국제화
+description: Intlayer를 사용하여 Tanstack Start 애플리케이션에 국제화(i18n)를 추가하는 방법을 알아보세요. 로케일 인식 라우팅으로 앱을 다국어 지원으로 만드는 종합 가이드를 따라가세요.
 keywords:
   - 국제화
   - 문서
   - Intlayer
-  - TanStack Start
-  - TanStack Router
+  - Tanstack Start
   - React
   - i18n
-  - 자바스크립트
+  - TypeScript
+  - 로케일 라우팅
 slugs:
   - doc
   - environment
+  - vite-and-react
   - tanstack-start
+applicationTemplate: https://github.com/AydinTheFirst/tanstack-start-intlayer
+author: AydinTheFirst
 ---
 
-# Intlayer와 TanStack Start (React)로 국제화(i18n) 시작하기
+# Intlayer와 Tanstack Start로 시작하는 국제화(i18n)
+
+이 가이드는 Tanstack Start 프로젝트에서 로케일 인식 라우팅, TypeScript 지원 및 최신 개발 방식을 활용하여 **Intlayer**를 원활하게 통합하는 방법을 보여줍니다.
 
 ## Intlayer란 무엇인가요?
 
-**Intlayer**는 React 앱을 위한 오픈 소스 i18n 툴킷입니다. 다음을 제공합니다:
+**Intlayer**는 현대 웹 애플리케이션에서 다국어 지원을 간소화하기 위해 설계된 혁신적이고 오픈 소스인 국제화(i18n) 라이브러리입니다.
 
-- **TypeScript 안전성을 갖춘 컴포넌트 로컬 사전**.
-- **동적 메타데이터 및 라우트** (SEO 준비 완료).
-- **런타임 로케일 전환** (로케일 감지/유지 도우미 포함).
-- **Vite 플러그인** 빌드 타임 변환 및 개발자 경험 향상용.
+Intlayer를 사용하면 다음을 할 수 있습니다:
 
-이 가이드는 Intlayer를 **TanStack Start** 프로젝트에 연결하는 방법을 보여줍니다 (TanStack Start는 내부적으로 Vite와 TanStack Router를 라우팅/SSR에 사용합니다).
+- **컴포넌트 수준에서 선언적 사전을 사용하여 번역을 쉽게 관리**할 수 있습니다.
+- **메타데이터, 라우트 및 콘텐츠를 동적으로 현지화**할 수 있습니다.
+- **자동 생성된 타입으로 TypeScript 지원을 보장**하여 자동 완성 및 오류 감지를 개선합니다.
+- **동적 로케일 감지 및 전환과 같은 고급 기능**을 활용할 수 있습니다.
+- **Tanstack Start의 파일 기반 라우팅 시스템을 사용하여 로케일 인식 라우팅 활성화**.
 
 ---
 
-## 1단계: 의존성 설치
+## Tanstack Start 애플리케이션에서 Intlayer 설정 단계별 가이드
 
-```bash
-# npm
-npm i intlayer react-intlayer
-npm i -D vite-intlayer
+### 1단계: 프로젝트 생성
 
-# pnpm
-pnpm add intlayer react-intlayer
-pnpm add -D vite-intlayer
+TanStack Start 웹사이트의 [새 프로젝트 시작하기](https://tanstack.com/start/latest/docs/framework/react/quick-start) 가이드를 따라 새 TanStack Start 프로젝트를 생성합니다.
+
+### 2단계: Intlayer 패키지 설치
 
-# yarn
-yarn add intlayer react-intlayer
-yarn add -D vite-intlayer
+선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:
+
+```bash packageManager="npm"
+npm install intlayer react-intlayer
+npm install vite-intlayer --save-dev
 ```
 
-- **intlayer**: 코어 (설정, 사전, CLI/변환).
-- **react-intlayer**: React용 `<IntlayerProvider>` 및 훅.
-- **vite-intlayer**: Vite 플러그인, 선택적 미들웨어 포함 (로케일 감지/리다이렉트용, 개발 및 SSR/미리보기에서 작동; 프로덕션 SSR 시 `dependencies`로 이동).
+```bash packageManager="pnpm"
+pnpm add intlayer react-intlayer
+pnpm add vite-intlayer --save-dev
+```
 
----
+- **intlayer**
+
+핵심 패키지로서 구성 관리, 번역, [콘텐츠 선언](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/get_started.md), 트랜스파일링 및 [CLI 명령어](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_cli.md)를 위한 국제화 도구를 제공합니다.
+
+- **react-intlayer**  
+  Intlayer를 React 애플리케이션과 통합하는 패키지입니다. React 국제화를 위한 컨텍스트 프로바이더와 훅을 제공합니다.
 
-## 2단계: Intlayer 구성
+- **vite-intlayer**  
+  Intlayer를 [Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 통합하기 위한 Vite 플러그인과, 사용자의 선호 로케일 감지, 쿠키 관리, URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
 
-프로젝트 루트에 `intlayer.config.ts` 파일을 생성하세요:
+### 3단계: 프로젝트 구성
 
-```ts fileName="intlayer.config.ts"
-import { Locales, type IntlayerConfig } from "intlayer";
+애플리케이션의 언어를 구성하기 위한 설정 파일을 만드세요:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import type { IntlayerConfig } from "intlayer";
+
+import { Locales } from "intlayer";
 
 const config: IntlayerConfig = {
   internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     defaultLocale: Locales.ENGLISH,
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // 다른 로케일들
+    ],
   },
-  // contentDir, contentFileExtensions, 미들웨어 옵션 등도 조정할 수 있습니다.
 };
 
 export default config;
 ```
 
-CommonJS/ESM 변형은 `cjs`/`mjs`를 선호하는 경우 원본 문서와 동일합니다.
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    defaultLocale: Locales.ENGLISH,
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // 다른 로케일들
+    ],
+  },
+};
 
-> 전체 구성 참조는 Intlayer의 구성 문서를 참고하세요.
+export default config;
+```
 
----
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
 
-## 3단계: Vite 플러그인 추가 (및 선택적 미들웨어)
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    defaultLocale: Locales.ENGLISH,
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // 다른 로케일들
+    ],
+  },
+};
+
+module.exports = config;
+```
 
-**TanStack Start는 Vite를 사용하므로**, Intlayer의 플러그인을 `vite.config.ts`에 추가하세요:
+> 이 구성 파일을 통해 지역화된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔에서 Intlayer 로그 비활성화 등 다양한 설정을 할 수 있습니다. 사용 가능한 모든 매개변수 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-```ts fileName="vite.config.ts"
+### 4단계: Vite 구성에 Intlayer 통합하기
+
+intlayer 플러그인을 구성에 추가하세요:
+
+```typescript fileName="vite.config.ts" codeFormat="typescript"
+import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayerMiddlewarePlugin, intlayerPlugin } from "vite-intlayer";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [
-    react(),
+    reactRouter(),
+    tsconfigPaths(),
     intlayerPlugin(),
-    // 선택 사항이지만 로케일 감지, 쿠키 및 리디렉션에 권장됩니다:
-    intLayerMiddlewarePlugin(),
+    intlayerMiddlewarePlugin(),
   ],
 });
 ```
 
-> SSR을 배포하는 경우, 미들웨어가 프로덕션에서 실행되도록 `vite-intlayer`를 `dependencies`로 이동하세요.
+> `intlayerPlugin()` Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 이 플러그인은 콘텐츠 선언 파일을 빌드하고 개발 모드에서 이를 모니터링합니다. 또한 Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의하며, 성능 최적화를 위해 별칭(alias)도 제공합니다.
 
----
+### 5단계: 레이아웃 컴포넌트 생성
+
+루트 레이아웃과 로케일별 레이아웃을 설정하세요:
+
+#### 루트 레이아웃
 
-## 4단계: 콘텐츠 선언하기
+```tsx fileName="src/routes/{-$locale}/route.tsx" codeFormat="typescript"
+// src/routes/{-$locale}/route.tsx
+import { createFileRoute, Navigate, Outlet } from "@tanstack/react-router";
+import { configuration } from "intlayer";
+import { IntlayerProvider, useLocale } from "react-intlayer";
+
+import { useI18nHTMLAttributes } from "@/hooks/useI18nHTMLAttributes";
+
+export const Route = createFileRoute("/{-$locale}")({
+  component: LayoutComponent,
+});
+
+function LayoutComponent() {
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+```
 
-사전(dictionary)을 기본 `contentDir`인 `./src` 아래 아무 곳에나 배치하세요. 예시:
+### 6단계: 콘텐츠 선언하기
 
-```tsx fileName="src/app.content.tsx"
-import { t, type Dictionary } from "intlayer";
-import type { ReactNode } from "react";
+번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리하세요:
+
+```tsx fileName="src/contents/page.content.ts" contentDeclarationFormat="typescript"
+import type { Dictionary } from "intlayer";
+
+import { t } from "intlayer";
 
 const appContent = {
-  key: "app",
   content: {
-    viteLogo: t({
-      ko: "Vite 로고",
-      en: "Vite logo",
-      fr: "Logo Vite",
-      es: "Logo Vite",
-    }),
-    reactLogo: t({
-      ko: "React 로고",
-      en: "React logo",
-      fr: "Logo React",
-      es: "Logo React",
-    }),
+    links: {
+      about: t({
+        en: "About",
+        es: "Acerca de",
+        fr: "À propos",
+      }),
+      home: t({
+        en: "홈",
+        es: "Inicio",
+        fr: "Accueil",
+      }),
+    },
+    meta: {
+      description: t({
+        en: "이것은 TanStack Router와 함께 Intlayer를 사용하는 예제입니다",
+        es: "Este es un ejemplo de uso de Intlayer con TanStack Router",
+        fr: "Ceci est un exemple d'utilisation d'Intlayer avec TanStack Router",
+      }),
+    },
     title: t({
-      ko: "TanStack Start + React",
-      en: "TanStack Start + React",
-      fr: "TanStack Start + React",
-      es: "TanStack Start + React",
-    }),
-    count: t({
-      ko: "카운트는 ",
-      en: "count is ",
-      fr: "le compte est ",
-      es: "el recuento es ",
-    }),
-    edit: t<ReactNode>({
-      ko: (
-        <>
-          <code>src/routes/index.tsx</code>를 편집하고 저장하여 HMR을
-          테스트하세요
-        </>
-      ),
-      en: (
-        <>
-          Edit <code>src/routes/index.tsx</code> and save to test HMR
-        </>
-      ),
-      fr: (
-        <>
-          Éditez <code>src/routes/index.tsx</code> et enregistrez pour tester
-          HMR
-        </>
-      ),
-      es: (
-        <>
-          Edita <code>src/routes/index.tsx</code> y guarda para probar HMR
-        </>
-      ),
-    }),
-    readTheDocs: t({
-      en: "Click the logos to learn more",
-      fr: "Cliquez sur les logos pour en savoir plus",
-      es: "Haz clic en los logotipos para saber más",
+      en: "Intlayer + TanStack Router에 오신 것을 환영합니다",
+      es: "Bienvenido a Intlayer + TanStack Router",
+      fr: "Bienvenue à Intlayer + TanStack Router",
     }),
   },
+  key: "app",
 } satisfies Dictionary;
 
 export default appContent;
 ```
 
-JSON/ESM/CJS 변형은 원본 문서와 동일하게 작동합니다.
+> 콘텐츠 선언은 애플리케이션 내 어디에서든 정의할 수 있으며, `contentDir` 디렉토리(기본값은 `./app`)에 포함되기만 하면 됩니다. 그리고 콘텐츠 선언 파일 확장자(기본값은 `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`)와 일치해야 합니다.
 
-> TSX 콘텐츠인가요? 설정에 따라 `import React from "react"`를 잊지 마세요.
+> 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/get_started.md)를 참조하세요.
 
----
+### 7단계: 로케일 인식 컴포넌트 및 훅 생성
 
-## 5단계: TanStack Start를 Intlayer로 감싸기
+로케일 인식 내비게이션을 위한 `LocalizedLink` 컴포넌트를 생성합니다:
 
-TanStack Start에서는 **루트 경로(root route)**가 프로바이더를 설정하기에 적합한 위치입니다.
+```tsx fileName="src/components/localized-link.tsx" codeFormat="typescript"
+// src/components/localized-link.tsx
+// eslint-disable-next-line no-restricted-imports
+import { Link, type LinkProps } from "@tanstack/react-router";
+import { getLocalizedUrl } from "intlayer";
+import { useLocale } from "react-intlayer";
 
-```tsx fileName="src/routes/__root.tsx"
-import {
-  Outlet,
-  createRootRoute,
-  Link as RouterLink,
-} from "@tanstack/react-router";
-import { IntlayerProvider, useIntlayer } from "react-intlayer";
-
-function AppShell() {
-  // 최상위에서 사전을 사용하는 예:
-  const content = useIntlayer("app");
+type LocalizedLinkProps = {
+  to: string;
+} & Omit<LinkProps, "to">;
 
-  return (
-    <div>
-      <nav className="flex gap-3 p-3">
-        <RouterLink to="/">홈</RouterLink>
-        <RouterLink to="/about">소개</RouterLink>
-      </nav>
-      <main className="p-6">
-        <h1>{content.title}</h1>
-        <Outlet />
-      </main>
-    </div>
-  );
-}
+export function LocalizedLink(props: LocalizedLinkProps) {
+  const { locale } = useLocale();
 
-export const Route = createRootRoute({
-  component: () => (
-    <IntlayerProvider>
-      <AppShell />
-    </IntlayerProvider>
-  ),
-});
-```
+  const isExternal = (to: string) => {
+    return /^(https?:)?\/\//.test(to);
+  };
 
-그런 다음 페이지에서 콘텐츠를 사용하세요:
+  const to = isExternal(props.to)
+    ? props.to
+    : getLocalizedUrl(props.to, locale);
 
-```tsx fileName="src/routes/index.tsx"
-import { createFileRoute } from "@tanstack/react-router";
-import { useIntlayer } from "react-intlayer";
-import reactLogo from "../assets/react.svg";
-
-export const Route = createFileRoute("/")({
-  component: () => {
-    const content = useIntlayer("app");
-    return (
-      <>
-        <button>{content.count}0</button>
-        <p>{content.edit}</p>
-        <img
-          src={reactLogo}
-          alt={content.reactLogo.value}
-          width={48}
-          height={48}
-        />
-        <p className="opacity-70">{content.readTheDocs}</p>
-      </>
-    );
-  },
-});
+  return <Link {...props} to={to as LinkProps["to"]} />;
+}
 ```
 
-> 문자열 속성(`alt`, `title`, `aria-label` 등)은 `.value`가 필요합니다:
->
-> ```jsx
-> <img alt={c.reactLogo.value} />
-> ```
+프로그래밍 방식 내비게이션을 위한 `useLocalizedNavigate` 훅을 생성하세요:
 
----
+```tsx fileName="src/hooks/useLocalizedNavigate.tsx" codeFormat="typescript"
+// src/hooks/useLocalizedNavigate.tsx
+// eslint-disable-next-line no-restricted-imports
+import { NavigateOptions, useNavigate } from "@tanstack/react-router";
+import { getLocalizedUrl } from "intlayer";
+import { useLocale } from "react-intlayer";
 
-## (선택 사항) 6단계: 로케일 전환 (클라이언트)
+type LocalizedNavigateOptions = {
+  to: string;
+} & Omit<NavigateOptions, "to">;
 
-```tsx fileName="src/components/LocaleSwitcher.tsx"
-import { Locales } from "intlayer";
-import { useLocale } from "react-intlayer";
+export const useLocalizedNavigate = () => {
+  const navigate = useNavigate();
+  const { locale } = useLocale();
 
-export function LocaleSwitcher() {
-  const { setLocale } = useLocale();
-  return (
-    <div className="flex gap-2">
-      <button onClick={() => setLocale(Locales.ENGLISH)}>영어</button>
-      <button onClick={() => setLocale(Locales.FRENCH)}>프랑스어</button>
-      <button onClick={() => setLocale(Locales.SPANISH)}>스페인어</button>
-    </div>
-  );
-}
+  const isExternal = (to: string) => {
+    return /^(https?:)?\/\//.test(to);
+  };
+
+  const localizedNavigate = (options: LocalizedNavigateOptions) => {
+    const to = isExternal(options.to)
+      ? options.to
+      : getLocalizedUrl(options.to, locale);
+
+    navigate({ ...options, to: to as NavigateOptions["to"] });
+  };
+
+  return localizedNavigate;
+};
 ```
 
----
+### 8단계: 페이지에서 Intlayer 사용하기
 
-## (선택 사항) 7단계: 지역화된 라우팅 (SEO 친화적 URL)
+애플리케이션 전반에서 콘텐츠 사전을 접근하세요:
 
-TanStack Start에는 **두 가지 좋은 패턴**이 있습니다. 하나를 선택하세요.
+#### 루트 리디렉션 페이지
 
-동적 세그먼트 폴더 `src/routes/$locale/`를 생성하여 URL이 `/:locale/...` 형식이 되도록 합니다. `$locale` 레이아웃에서 `params.locale`을 검증하고, `<IntlayerProvider locale=...>`를 설정한 후 `<Outlet />`을 렌더링합니다. 이 방법은 간단하지만, 나머지 라우트들은 `$locale` 하위에 마운트되며, 기본 로케일 접두사를 원하지 않는 경우 별도의 접두사 없는 트리가 필요합니다.
+```tsx fileName="src/routes/page.tsx" codeFormat="typescript"
+// src/routes/page.tsx
+import { useLocale } from "intlayer";
+import { Navigate } from "react-router";
 
----
+export default function Page() {
+  const { locale } = useLocale();
 
-## (선택 사항) 8단계: 로케일 전환 시 URL 업데이트
+  return <Navigate replace to={locale} />;
+}
+```
 
-패턴 A (basepath)에서는 로케일을 전환하면 **다른 basepath로 이동**하는 것을 의미합니다:
+#### 지역화된 홈 페이지
 
-```tsx fileName="src/components/LocaleSwitcherNavigate.tsx"
-import { useRouter } from "@tanstack/react-router";
-import { Locales, getLocalizedUrl } from "intlayer";
-import { useLocale } from "react-intlayer";
+```tsx fileName="src/routes/{-$locale}/index.tsx" codeFormat="typescript"
+import { createFileRoute } from "@tanstack/react-router";
+import { getIntlayer } from "intlayer";
+import { useIntlayer } from "react-intlayer";
 
-export function LocaleSwitcherNavigate() {
-  const router = useRouter();
-  const { locale, setLocale } = useLocale();
-
-  const change = async (next: Locales) => {
-    if (next === locale) return;
-    const nextPath = getLocalizedUrl(
-      window.location.pathname + window.location.search,
-      next
-    );
-    await router.navigate({ to: nextPath }); // 기록을 유지합니다
-    setLocale(next);
-  };
+import LocaleSwitcher from "@/components/locale-switcher";
+import { LocalizedLink } from "@/components/localized-link";
+import { useLocalizedNavigate } from "@/hooks/useLocalizedNavigate";
+
+export const Route = createFileRoute("/{-$locale}/")({
+  component: RouteComponent,
+  head: ({ params }) => {
+    const { locale } = params;
+    const metaContent = getIntlayer("app", locale);
+
+    return {
+      meta: [
+        { title: metaContent.title },
+        { content: metaContent.meta.description, name: "description" },
+      ],
+    };
+  },
+});
+
+function RouteComponent() {
+  const content = useIntlayer("app");
+  const navigate = useLocalizedNavigate();
 
   return (
-    <div className="flex gap-2">
-      <button onClick={() => change(Locales.ENGLISH)}>English</button>
-      <button onClick={() => change(Locales.FRENCH)}>Français</button>
-      <button onClick={() => change(Locales.SPANISH)}>Español</button>
+    <div className="grid place-items-center h-screen">
+      <div className="flex flex-col gap-4 items-center text-center">
+        {content.title}
+        <LocaleSwitcher />
+        <div className="flex gap-4">
+          <a href="/">인덱스</a>
+          <LocalizedLink to="/">{content.links.home}</LocalizedLink>
+          <LocalizedLink to="/about">{content.links.about}</LocalizedLink>
+        </div>
+        <div className="flex gap-4">
+          <button onClick={() => navigate({ to: "/" })}>
+            {content.links.home}
+          </button>
+          <button onClick={() => navigate({ to: "/about" })}>
+            {content.links.about}
+          </button>
+        </div>
+      </div>
     </div>
   );
 }
 ```
 
----
+> `useIntlayer` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayer.md)를 참조하세요.
 
-## (선택 사항) 9단계: `<html lang>` 및 `dir` (TanStack Start 문서)
+### 9단계: 로케일 스위처 컴포넌트 만들기
 
-TanStack Start는 사용자 정의가 가능한 **Document**(루트 HTML 셸)를 제공합니다. 접근성 및 SEO를 위해 `lang`과 `dir`을 설정하세요:
+사용자가 언어를 변경할 수 있도록 컴포넌트를 만듭니다:
 
-```tsx fileName="src/routes/__root.tsx" {4,15}
-import { Outlet, createRootRoute } from "@tanstack/react-router";
-import { IntlayerProvider } from "react-intlayer";
-import { getHTMLTextDir } from "intlayer";
+```tsx fileName="src/components/locale-switcher.tsx" codeFormat="typescript"
+import { useLocation } from "@tanstack/react-router";
+import {
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+  Locales,
+} from "intlayer";
+import { useIntlayer, useLocale } from "react-intlayer";
+
+export default function LocaleSwitcher() {
+  const { pathname, searchStr } = useLocation();
+  const content = useIntlayer("locale-switcher");
+
+  const { availableLocales, locale, setLocale } = useLocale({
+    onLocaleChange: (newLocale) => {
+      const pathWithLocale = getLocalizedUrl(pathname + searchStr, newLocale);
+      location.replace(pathWithLocale); // 새로운 로케일 경로로 페이지를 대체합니다.
+    },
+  });
 
-function Document({
-  locale,
-  children,
-}: {
-  locale: string;
-  children: React.ReactNode;
-}) {
   return (
-    <html lang={locale} dir={getHTMLTextDir(locale)}>
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        {/* ... */}
-      </head>
-      <body>{children}</body>
-    </html>
+    <select
+      aria-label={content.label.toString()} // 접근성을 위한 라벨
+      onChange={(e) => setLocale(e.target.value)} // 선택된 로케일로 변경
+      value={locale} // 현재 선택된 로케일 값
+    >
+      {availableLocales.map((localeItem) => (
+        <option
+          dir={getHTMLTextDir(localeItem)}
+          key={localeItem}
+          lang={localeItem}
+          value={localeItem}
+        >
+          {/* 예시: Français (프랑스어) */}
+          {getLocaleName(localeItem, locale)} (
+          {getLocaleName(localeItem, Locales.ENGLISH)})
+        </option>
+      ))}
+    </select>
   );
 }
-
-export const Route = createRootRoute({
-  component: () => (
-    <IntlayerProvider>
-      {/* 서버에서 로케일을 계산하는 경우 Document에 전달하세요; 그렇지 않으면 클라이언트가 하이드레이션 후 수정합니다 */}
-      <Document locale={document?.documentElement?.lang || "en"}>
-        <Outlet />
-      </Document>
-    </IntlayerProvider>
-  ),
-});
 ```
 
-클라이언트 측 수정을 위해, 다음과 같은 작은 훅을 유지할 수도 있습니다:
+> `useLocale` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md)를 참조하세요.
+
+### 10단계: HTML 속성 관리 추가 (선택 사항)
+
+HTML lang 및 dir 속성을 관리하는 훅을 만듭니다:
 
-```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx"
+```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
+// src/hooks/useI18nHTMLAttributes.tsx
+import { getHTMLTextDir } from "intlayer";
 import { useEffect } from "react";
 import { useLocale } from "react-intlayer";
-import { getHTMLTextDir } from "intlayer";
 
 export const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
+
   useEffect(() => {
-    document.documentElement.lang = locale; // 문서의 언어 속성을 현재 로케일로 설정
-    document.documentElement.dir = getHTMLTextDir(locale); // 문서의 텍스트 방향 설정
+    document.documentElement.lang = locale;
+    document.documentElement.dir = getHTMLTextDir(locale);
   }, [locale]);
 };
 ```
 
----
+그런 다음 루트 컴포넌트에서 사용하세요:
 
-## (선택 사항) 10단계: 지역화된 Link 컴포넌트
+```tsx fileName="src/routes/{-$locale}/index.tsx" codeFormat="typescript"
+import { createFileRoute, Navigate, Outlet } from "@tanstack/react-router";
+import { configuration } from "intlayer";
+import { IntlayerProvider, useLocale } from "react-intlayer";
 
-TanStack Router는 `<Link/>`를 제공하지만, 내부 URL에 자동으로 접두사를 붙이는 일반 `<a>` 태그가 필요할 경우:
+import { useI18nHTMLAttributes } from "@/hooks/useI18nHTMLAttributes"; // 훅을 임포트합니다.
 
-```tsx fileName="src/components/Link.tsx"
-import { getLocalizedUrl } from "intlayer";
-import {
-  forwardRef,
-  type AnchorHTMLAttributes,
-  type DetailedHTMLProps,
-} from "react";
-import { useLocale } from "react-intlayer";
+export const Route = createFileRoute("/{-$locale}")({
+  component: LayoutComponent,
+});
 
-export interface LinkProps
-  extends DetailedHTMLProps<
-    AnchorHTMLAttributes<HTMLAnchorElement>,
-    HTMLAnchorElement
-  > {}
-
-const isExternal = (href?: string) => /^https?:\/\//.test(href ?? "");
-
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ href, children, ...props }, ref) => {
-    const { locale } = useLocale();
-    const hrefI18n =
-      href && !isExternal(href) ? getLocalizedUrl(href, locale) : href;
-    return (
-      <a href={hrefI18n} ref={ref} {...props}>
-        {children}
-      </a>
-    );
-  }
-);
-Link.displayName = "Link";
+function LayoutComponent() {
+  useI18nHTMLAttributes(); // 이 줄을 추가하세요
+
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
 ```
 
-> 패턴 A(basepath)를 사용하는 경우, TanStack의 `<Link to="/about" />`는 이미 `basepath`를 통해 `/fr/about`로 해결되므로, 커스텀 링크는 선택 사항입니다.
+### 11단계: 애플리케이션 빌드 및 실행
 
----
+콘텐츠 사전을 빌드하고 애플리케이션을 실행하세요:
+
+```bash packageManager="npm"
+# Intlayer 사전 빌드
+npm run intlayer:build
 
-## TypeScript
+# 개발 서버 시작
+npm run dev
+```
+
+```bash packageManager="pnpm"
+# Intlayer 사전 빌드
+pnpm intlayer:build
+
+# 개발 서버 시작
+pnpm dev
+```
+
+```bash packageManager="yarn"
+# Intlayer 사전 빌드
+yarn intlayer:build
 
-Intlayer가 생성한 타입을 포함하세요:
+# 개발 서버 시작
+yarn dev
+```
+
+### 12단계: TypeScript 구성 (선택 사항)
+
+Intlayer는 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만들기 위해 모듈 확장을 사용합니다.
+
+TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요:
 
 ```json5 fileName="tsconfig.json"
 {
-  "include": ["src", ".intlayer/**/*.ts"],
+  compilerOptions: {
+    // ... 기존 TypeScript 구성
+  },
+  include: [
+    // ... 기존 포함 항목
+    ".intlayer/**/*.ts", // 자동 생성된 타입 포함
+  ],
 }
 ```
 
----
+### Git 구성
 
-## Git
+Intlayer가 생성한 파일들은 Git 저장소에 커밋하지 않도록 무시하는 것이 권장됩니다.
 
-Intlayer가 생성한 아티팩트를 무시하세요:
+이를 위해 `.gitignore` 파일에 다음 내용을 추가할 수 있습니다:
 
-```gitignore
+```plaintext fileName=".gitignore"
+# Intlayer가 생성한 파일 무시
 .intlayer
 ```
 
 ---
 
-## VS 코드 확장
+### 13단계: 리디렉션 생성 (선택 사항)
+
+```typescript fileName="src/routes/{-$locale}/rotue.tsx" codeFormat="typescript"
+function LayoutComponent() {
+  useI18nHTMLAttributes();
+
+  const { locale } = Route.useParams();
+  const { locale: selectedLocale } = useLocale();
+  const { defaultLocale } = configuration.internationalization;
+  const { prefixDefault } = configuration.middleware;
+
+  // prefixDefault가 true일 때 URL에 로케일이 없으면 기본 로케일로 리디렉션
+  if (selectedLocale === defaultLocale && !locale && prefixDefault) {
+    return <Navigate replace to={defaultLocale} />;
+  }
 
-- **Intlayer VS 코드 확장** → 자동완성, 오류, 인라인 미리보기, 빠른 작업.
-  마켓플레이스: `intlayer.intlayer-vs-code-extension`
+  // URL의 로케일이 선택된 로케일과 다르면 선택된 로케일로 리디렉션
+  if (selectedLocale !== defaultLocale && !locale) {
+    return <Navigate replace to={selectedLocale} />;
+  }
+
+  return (
+    <IntlayerProvider locale={locale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+```
+
+## 프로덕션 배포
+
+애플리케이션을 배포할 때:
+
+1. **애플리케이션 빌드:**
+
+   ```bash
+   npm run build
+   ```
+
+2. **Intlayer 사전 빌드:**
+
+   ```bash
+   npm run intlayer:build
+   ```
+
+3. **프로덕션에서 미들웨어를 사용하는 경우 `vite-intlayer`를 dependencies로 이동:**
+   ```bash
+   npm install vite-intlayer --save
+   ```
+
+이제 애플리케이션은 다음을 지원합니다:
+
+- **URL 구조**: `/en`, `/en/about`, `/tr`, `/tr/about`
+- **브라우저 환경설정을 기반으로 한 자동 로케일 감지**
+- **Tanstack Start를 이용한 로케일 인식 라우팅**
+- **자동 생성 타입을 포함한 TypeScript 지원**
+- **적절한 로케일 처리를 포함한 서버 사이드 렌더링**
+
+## VS 코드 확장 기능
+
+Intlayer 개발 경험을 향상시키기 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치할 수 있습니다.
+
+[VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+이 확장 프로그램은 다음을 제공합니다:
+
+- 번역 키에 대한 **자동 완성** 기능.
+- 누락된 번역에 대한 **실시간 오류 감지**.
+- 번역된 콘텐츠의 **인라인 미리보기**.
+- 번역을 쉽게 생성하고 업데이트할 수 있는 **빠른 작업**.
+
+확장 프로그램 사용 방법에 대한 자세한 내용은 [Intlayer VS Code 확장 프로그램 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
 
 ---
 
 ## 더 나아가기
 
-- 비주얼 에디터
-- CMS 모드
-- 엣지/어댑터에서의 로케일 감지
+더 나아가려면 [비주얼 에디터](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)를 사용하여 콘텐츠를 외부화할 수 있습니다.
 
 ---
 
+## 문서 참조
+
+- [Intlayer 문서](https://intlayer.org)
+- [Tanstack Start 문서](https://reactrouter.com/)
+- [useIntlayer 훅](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayer.md)
+- [useLocale 훅](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md)
+- [콘텐츠 선언](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/get_started.md)
+- [구성](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)
+
+이 종합 가이드는 지역 인식 라우팅과 TypeScript 지원을 갖춘 완전한 국제화 애플리케이션을 위해 Intlayer를 Tanstack Start와 통합하는 데 필요한 모든 것을 제공합니다.
+
 ## 문서 이력
 
-| 버전  | 날짜       | 변경 사항                |
-| ----- | ---------- | ------------------------ |
-| 1.0.0 | 2025-08-11 | TanStack Start 적응 추가 |
+| 버전  | 날짜       | 변경 사항               |
+| ----- | ---------- | ----------------------- |
+| 5.8.1 | 2025-09-09 | Tanstack Start용 추가됨 |