@intlayer/docs 6.1.5 → 6.1.6

package/docs/ko/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
 updatedAt: 2025-09-09
-title: Tanstack Start에서 Intlayer로 시작하는 국제화
-description: Intlayer를 사용하여 Tanstack Start 애플리케이션에 국제화(i18n)를 추가하는 방법을 알아보세요. 로케일 인식 라우팅으로 앱을 다국어 지원으로 만드는 종합 가이드를 따라가세요.
+title: Tanstack Start에서 Intlayer로 시작하는 국제화(i18n)
+description: Intlayer를 사용하여 Tanstack Start 애플리케이션에 국제화(i18n)를 추가하는 방법을 배우세요. 로케일 인식 라우팅으로 앱을 다국어 지원으로 만드는 종합 가이드를 따르세요.
 keywords:
   - 국제화
   - 문서
@@ -15,15 +15,13 @@ keywords:
 slugs:
   - doc
   - environment
-  - vite-and-react
   - tanstack-start
-applicationTemplate: https://github.com/AydinTheFirst/tanstack-start-intlayer
-author: AydinTheFirst
+applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-template
 ---
 
 # Intlayer와 Tanstack Start로 시작하는 국제화(i18n)
 
-이 가이드는 Tanstack Start 프로젝트에서 로케일 인식 라우팅, TypeScript 지원 및 최신 개발 방식을 활용하여 **Intlayer**를 원활하게 통합하는 방법을 보여줍니다.
+이 가이드는 로케일 인식 라우팅, TypeScript 지원 및 최신 개발 방식을 갖춘 Tanstack Start 프로젝트에서 **Intlayer**를 통합하여 원활한 국제화(i18n)를 구현하는 방법을 보여줍니다.
 
 ## Intlayer란 무엇인가요?
 
@@ -33,8 +31,8 @@ Intlayer를 사용하면 다음을 할 수 있습니다:
 
 - **컴포넌트 수준에서 선언적 사전을 사용하여 번역을 쉽게 관리**할 수 있습니다.
 - **메타데이터, 라우트 및 콘텐츠를 동적으로 현지화**할 수 있습니다.
-- **자동 생성된 타입으로 TypeScript 지원을 보장**하여 자동 완성 및 오류 감지를 개선합니다.
-- **동적 로케일 감지 및 전환과 같은 고급 기능**을 활용할 수 있습니다.
+- **자동 생성된 타입으로 TypeScript 지원을 보장**하여 자동 완성 및 오류 감지를 향상시킵니다.
+- **동적 로케일 감지 및 전환과 같은 고급 기능을 활용**할 수 있습니다.
 - **Tanstack Start의 파일 기반 라우팅 시스템을 사용하여 로케일 인식 라우팅 활성화**.
 
 ---
@@ -73,7 +71,7 @@ pnpm add vite-intlayer --save-dev
 
 애플리케이션의 언어를 구성하기 위한 설정 파일을 만드세요:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts"
 import type { IntlayerConfig } from "intlayer";
 
 import { Locales } from "intlayer";
@@ -81,79 +79,31 @@ import { Locales } from "intlayer";
 const config: IntlayerConfig = {
   internationalization: {
     defaultLocale: Locales.ENGLISH,
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // 다른 로케일들
-    ],
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
   },
 };
 
 export default config;
 ```
 
-```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,
-      // 다른 로케일들
-    ],
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    defaultLocale: Locales.ENGLISH,
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // 다른 로케일들
-    ],
-  },
-};
-
-module.exports = config;
-```
-
-> 이 구성 파일을 통해 지역화된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔에서 Intlayer 로그 비활성화 등 다양한 설정을 할 수 있습니다. 사용 가능한 모든 매개변수 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
+> 이 설정 파일을 통해 지역화된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자, 콘솔에서 Intlayer 로그 비활성화 등 다양한 설정을 할 수 있습니다. 사용 가능한 모든 매개변수 목록은 [설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
 ### 4단계: Vite 구성에 Intlayer 통합하기
 
-intlayer 플러그인을 구성에 추가하세요:
+구성에 intlayer 플러그인을 추가하세요:
 
-```typescript fileName="vite.config.ts" codeFormat="typescript"
+```typescript fileName="vite.config.ts"
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
-import { intlayerMiddlewarePlugin, intlayer } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [
-    reactRouter(),
-    tsconfigPaths(),
-    intlayer(),
-    intlayerMiddlewarePlugin(),
-  ],
+  plugins: [reactRouter(), tsconfigPaths(), intlayer()],
 });
 ```
 
-> `intlayer()` Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 이 플러그인은 콘텐츠 선언 파일을 빌드하고 개발 모드에서 이를 모니터링합니다. 또한 Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의하며, 성능 최적화를 위해 별칭(alias)도 제공합니다.
+> `intlayer()` Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 이 플러그인은 콘텐츠 선언 파일을 빌드하고 개발 모드에서 이를 모니터링합니다. 또한 Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의합니다. 추가로, 성능 최적화를 위한 별칭(alias)도 제공합니다.
 
 ### 5단계: 레이아웃 컴포넌트 생성
 
@@ -161,10 +111,8 @@ export default defineConfig({
 
 #### 루트 레이아웃
 
-```tsx fileName="src/routes/{-$locale}/route.tsx" codeFormat="typescript"
-// src/routes/{-$locale}/route.tsx
+```tsx fileName="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";
@@ -174,21 +122,22 @@ export const Route = createFileRoute("/{-$locale}")({
 });
 
 function LayoutComponent() {
+  const { defaultLocale } = useLocale();
   const { locale } = Route.useParams();
 
   return (
-    <IntlayerProvider locale={locale}>
+    <IntlayerProvider locale={defaultLocale}>
       <Outlet />
     </IntlayerProvider>
   );
 }
 ```
 
-### 6단계: 콘텐츠 선언하기
+### 6단계: 콘텐츠 선언
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리하세요:
 
-```tsx fileName="src/contents/page.content.ts" contentDeclarationFormat="typescript"
+```tsx fileName="src/contents/page.content.ts"
 import type { Dictionary } from "intlayer";
 
 import { t } from "intlayer";
@@ -197,25 +146,29 @@ const appContent = {
   content: {
     links: {
       about: t({
+        ko: "소개",
         en: "About",
         es: "Acerca de",
         fr: "À propos",
       }),
       home: t({
-        en: "홈",
+        ko: "홈",
+        en: "Home",
         es: "Inicio",
         fr: "Accueil",
       }),
     },
     meta: {
       description: t({
-        en: "이것은 TanStack Router와 함께 Intlayer를 사용하는 예제입니다",
+        ko: "이것은 TanStack Router와 함께 Intlayer를 사용하는 예제입니다",
+        en: "This is an example of using Intlayer with TanStack Router",
         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({
-      en: "Intlayer + TanStack Router에 오신 것을 환영합니다",
+      ko: "Intlayer + TanStack Router에 오신 것을 환영합니다",
+      en: "Welcome to Intlayer + TanStack Router",
       es: "Bienvenido a Intlayer + TanStack Router",
       fr: "Bienvenue à Intlayer + TanStack Router",
     }),
@@ -226,7 +179,7 @@ const appContent = {
 export default appContent;
 ```
 
-> 콘텐츠 선언은 애플리케이션 내 어디에서든 정의할 수 있으며, `contentDir` 디렉토리(기본값은 `./app`)에 포함되기만 하면 됩니다. 그리고 콘텐츠 선언 파일 확장자(기본값은 `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`)와 일치해야 합니다.
+> 콘텐츠 선언은 애플리케이션 내 어디에서나 정의할 수 있으며, `contentDir` 디렉토리(기본값: `./app`)에 포함되면 자동으로 인식됩니다. 또한 콘텐츠 선언 파일 확장자(기본값: `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`)와 일치해야 합니다.
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/get_started.md)를 참조하세요.
 
@@ -234,59 +187,99 @@ export default appContent;
 
 로케일 인식 내비게이션을 위한 `LocalizedLink` 컴포넌트를 생성합니다:
 
-```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";
+```tsx fileName="src/components/localized-link.tsx"
+import type { FC } from "react";
+
+import { Link, type LinkComponentProps } from "@tanstack/react-router";
 import { useLocale } from "react-intlayer";
 
+export const LOCALE_ROUTE = "{-$locale}" as const;
+
+// 주요 유틸리티
+export type RemoveLocaleParam<T> = T extends string
+  ? RemoveLocaleFromString<T>
+  : T;
+
+export type To = RemoveLocaleParam<LinkComponentProps["to"]>;
+
+type CollapseDoubleSlashes<S extends string> =
+  S extends `${infer H}//${infer T}` ? CollapseDoubleSlashes<`${H}/${T}`> : S;
+
 type LocalizedLinkProps = {
-  to: string;
-} & Omit<LinkProps, "to">;
+  to?: To;
+} & Omit<LinkComponentProps, "to">;
 
-export function LocalizedLink(props: LocalizedLinkProps) {
-  const { locale } = useLocale();
+// 헬퍼 함수들
+type RemoveAll<
+  S extends string,
+  Sub extends string,
+> = S extends `${infer H}${Sub}${infer T}` ? RemoveAll<`${H}${T}`, Sub> : S;
 
-  const isExternal = (to: string) => {
-    return /^(https?:)?\/\//.test(to);
-  };
+type RemoveLocaleFromString<S extends string> = CollapseDoubleSlashes<
+  RemoveAll<S, typeof LOCALE_ROUTE>
+>;
 
-  const to = isExternal(props.to)
-    ? props.to
-    : getLocalizedUrl(props.to, locale);
+export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {
+  const { locale } = useLocale();
 
-  return <Link {...props} to={to as LinkProps["to"]} />;
-}
+  return (
+    <Link
+      {...props}
+      params={{
+        locale,
+        ...(typeof props?.params === "object" ? props?.params : {}),
+      }}
+      to={`/${LOCALE_ROUTE}${props.to}` as LinkComponentProps["to"]}
+    />
+  );
+};
 ```
 
-프로그래밍 방식 내비게이션을 위한 `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";
+- URL에서 불필요한 `{-$locale}` 접두사를 제거합니다.
+- URL에 locale 매개변수를 주입하여 사용자가 로컬라이즈된 경로로 직접 리디렉션되도록 보장합니다.
 
-type LocalizedNavigateOptions = {
-  to: string;
-} & Omit<NavigateOptions, "to">;
+그 다음, 프로그래밍 방식의 내비게이션을 위해 `useLocalizedNavigate` 훅을 생성할 수 있습니다:
+
+```tsx fileName="src/hooks/useLocalizedNavigate.tsx"
+import { useLocale } from "react-intlayer";
+import { useNavigate } from "@tanstack/react-router";
+import { LOCALE_ROUTE } from "@/components/localized-link";
+import type { FileRouteTypes } from "@/routeTree.gen";
 
 export const useLocalizedNavigate = () => {
   const navigate = useNavigate();
+
   const { locale } = useLocale();
 
-  const isExternal = (to: string) => {
-    return /^(https?:)?\/\//.test(to);
-  };
+  type StripLocalePrefix<T extends string> = T extends
+    | `/${typeof LOCALE_ROUTE}`
+    | `/${typeof LOCALE_ROUTE}/`
+    ? "/"
+    : T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`
+      ? `/${Rest}`
+      : never;
+
+  type LocalizedTo = StripLocalePrefix<FileRouteTypes["to"]>;
+
+  interface LocalizedNavigate {
+    (to: LocalizedTo): ReturnType<typeof navigate>;
+    (
+      opts: { to: LocalizedTo } & Record<string, unknown>
+    ): ReturnType<typeof navigate>;
+  }
+
+  const localizedNavigate: LocalizedNavigate = (args: any) => {
+    if (typeof args === "string") {
+      return navigate({ to: `/${LOCALE_ROUTE}${args}`, params: { locale } });
+    }
+
+    const { to, ...rest } = args;
 
-  const localizedNavigate = (options: LocalizedNavigateOptions) => {
-    const to = isExternal(options.to)
-      ? options.to
-      : getLocalizedUrl(options.to, locale);
+    const localedTo = `/${LOCALE_ROUTE}${to}` as any;
 
-    navigate({ ...options, to: to as NavigateOptions["to"] });
+    return navigate({ to: localedTo, params: { locale, ...rest } as any });
   };
 
   return localizedNavigate;
@@ -295,25 +288,11 @@ export const useLocalizedNavigate = () => {
 
 ### 8단계: 페이지에서 Intlayer 사용하기
 
-애플리케이션 전반에서 콘텐츠 사전을 접근하세요:
+애플리케이션 전반에서 콘텐츠 사전을 액세스하세요:
 
-#### 루트 리디렉션 페이지
-
-```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();
+#### 현지화된 홈 페이지
 
-  return <Navigate replace to={locale} />;
-}
-```
-
-#### 지역화된 홈 페이지
-
-```tsx fileName="src/routes/{-$locale}/index.tsx" codeFormat="typescript"
+```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createFileRoute } from "@tanstack/react-router";
 import { getIntlayer } from "intlayer";
 import { useIntlayer } from "react-intlayer";
@@ -342,16 +321,15 @@ function RouteComponent() {
   const navigate = useLocalizedNavigate();
 
   return (
-    <div className="grid place-items-center h-screen">
-      <div className="flex flex-col gap-4 items-center text-center">
+    <div>
+      <div>
         {content.title}
         <LocaleSwitcher />
-        <div className="flex gap-4">
-          <a href="/">인덱스</a>
+        <div>
           <LocalizedLink to="/">{content.links.home}</LocalizedLink>
           <LocalizedLink to="/about">{content.links.about}</LocalizedLink>
         </div>
-        <div className="flex gap-4">
+        <div>
           <button onClick={() => navigate({ to: "/" })}>
             {content.links.home}
           </button>
@@ -365,63 +343,71 @@ function RouteComponent() {
 }
 ```
 
-> `useIntlayer` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayer.md)를 참조하세요.
+> `useIntlayer` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayer.md)를 참고하세요.
 
 ### 9단계: 로케일 스위처 컴포넌트 만들기
 
 사용자가 언어를 변경할 수 있도록 컴포넌트를 만듭니다:
 
-```tsx fileName="src/components/locale-switcher.tsx" codeFormat="typescript"
+```tsx fileName="src/components/locale-switcher.tsx"
+import type { FC } from "react";
+
 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); // 새로운 로케일 경로로 페이지를 대체합니다.
-    },
-  });
+import { getHTMLTextDir, getLocaleName, getPathWithoutLocale } from "intlayer";
+import { setLocaleCookie, useIntlayer, useLocale } from "react-intlayer";
+
+import { LocalizedLink, To } from "./localized-link";
+
+export const LocaleSwitcher: FC = () => {
+  const { localeSwitcherLabel } = useIntlayer("locale-switcher");
+  const { pathname } = useLocation();
+
+  const { availableLocales, locale } = useLocale();
+
+  const pathWithoutLocale = getPathWithoutLocale(pathname);
 
   return (
-    <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>
+    <ol>
+      {availableLocales.map((localeEl) => (
+        <li key={localeEl}>
+          <LocalizedLink
+            aria-current={localeEl === locale ? "page" : undefined}
+            aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeEl)}`}
+            onClick={() => setLocaleCookie(localeEl)}
+            params={{ locale: localeEl }}
+            to={pathWithoutLocale as To}
+          >
+            <span>
+              {/* 로케일 - 예: FR */}
+              {localeItem}
+            </span>
+            <span>
+              {/* 해당 로케일 내 언어 - 예: Français */}
+              {getLocaleName(localeItem, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
+              {/* 현재 로케일 내 언어 - 예: 현재 로케일이 Locales.SPANISH일 때 Francés */}
+              {getLocaleName(localeItem)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* 영어로 된 언어 - 예: French */}
+              {getLocaleName(localeItem, Locales.ENGLISH)}
+            </span>
+          </LocalizedLink>
+        </li>
       ))}
-    </select>
+    </ol>
   );
-}
+};
 ```
 
 > `useLocale` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md)를 참조하세요.
 
 ### 10단계: HTML 속성 관리 추가 (선택 사항)
 
-HTML lang 및 dir 속성을 관리하는 훅을 만듭니다:
+HTML의 lang 및 dir 속성을 관리하는 훅을 만듭니다:
 
-```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
+```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx"
 // src/hooks/useI18nHTMLAttributes.tsx
 import { getHTMLTextDir } from "intlayer";
 import { useEffect } from "react";
@@ -439,9 +425,8 @@ export const useI18nHTMLAttributes = () => {
 
 그런 다음 루트 컴포넌트에서 사용하세요:
 
-```tsx fileName="src/routes/{-$locale}/index.tsx" codeFormat="typescript"
+```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createFileRoute, Navigate, Outlet } from "@tanstack/react-router";
-import { configuration } from "intlayer";
 import { IntlayerProvider, useLocale } from "react-intlayer";
 
 import { useI18nHTMLAttributes } from "@/hooks/useI18nHTMLAttributes"; // 훅을 임포트합니다.
@@ -451,57 +436,56 @@ export const Route = createFileRoute("/{-$locale}")({
 });
 
 function LayoutComponent() {
-  useI18nHTMLAttributes(); // 이 줄을 추가하세요
+  useI18nHTMLAttributes(); // 이 줄을 추가합니다.
 
+  const { defaultLocale } = useLocale();
   const { locale } = Route.useParams();
 
   return (
-    <IntlayerProvider locale={locale}>
+    <IntlayerProvider locale={locale ?? defaultLocale}>
       <Outlet />
     </IntlayerProvider>
   );
 }
 ```
 
-### 11단계: 애플리케이션 빌드 및 실행
+---
 
-콘텐츠 사전을 빌드하고 애플리케이션을 실행하세요:
+### 11단계: 미들웨어 추가 (선택 사항)
 
-```bash packageManager="npm"
-# Intlayer 사전 빌드
-npm run intlayer:build
+`intlayerMiddleware`를 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 플러그인은 사용자의 브라우저 언어 설정을 기반으로 가장 적합한 로케일을 결정합니다. 로케일이 감지되지 않으면 기본 로케일로 리디렉션합니다.
 
-# 개발 서버 시작
-npm run dev
-```
+> `intlayerMiddleware`를 프로덕션 환경에서 사용하려면 `vite-intlayer` 패키지를 `devDependencies`에서 `dependencies`로 변경해야 한다는 점에 유의하세요.
 
-```bash packageManager="pnpm"
-# Intlayer 사전 빌드
-pnpm intlayer:build
+```typescript {3,7} fileName="vite.config.ts"
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
+import tsconfigPaths from "vite-tsconfig-paths";
 
-# 개발 서버 시작
-pnpm dev
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    reactRouter(),
+    tsconfigPaths(),
+    intlayer(),
+    intlayerMiddleware(),
+  ],
+});
 ```
 
-```bash packageManager="yarn"
-# Intlayer 사전 빌드
-yarn intlayer:build
-
-# 개발 서버 시작
-yarn dev
-```
+---
 
 ### 12단계: TypeScript 구성 (선택 사항)
 
-Intlayer는 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만들기 위해 모듈 확장을 사용합니다.
+Intlayer는 모듈 확장을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
 
 TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요:
 
 ```json5 fileName="tsconfig.json"
 {
-  compilerOptions: {
-    // ... 기존 TypeScript 구성
-  },
+  // ... 기존 구성
   include: [
     // ... 기존 포함 항목
     ".intlayer/**/*.ts", // 자동 생성된 타입 포함
@@ -509,91 +493,37 @@ TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하
 }
 ```
 
+---
+
 ### Git 구성
 
-Intlayer가 생성한 파일들은 Git 저장소에 커밋하지 않도록 무시하는 것이 권장됩니다.
+Intlayer가 생성한 파일은 Git 저장소에 커밋하지 않도록 무시하는 것이 권장됩니다.
 
-이를 위해 `.gitignore` 파일에 다음 내용을 추가할 수 있습니다:
+이를 위해 `.gitignore` 파일에 다음 지침을 추가할 수 있습니다:
+
+이를 위해 `.gitignore` 파일에 다음 지침을 추가할 수 있습니다:
 
 ```plaintext fileName=".gitignore"
-# Intlayer가 생성한 파일 무시
+# Intlayer에서 생성된 파일 무시
 .intlayer
 ```
 
 ---
 
-### 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} />;
-  }
-
-  // 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 코드 확장 기능
+## VS 코드 확장 프로그램
 
-Intlayer 개발 경험을 향상시키기 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치할 수 있습니다.
+Intlayer와 함께 개발 경험을 향상시키기 위해 공식 **Intlayer VS 코드 확장 프로그램**을 설치할 수 있습니다.
 
-[VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[VS 코드 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
 이 확장 프로그램은 다음을 제공합니다:
 
-- 번역 키에 대한 **자동 완성** 기능.
+- 번역 키에 대한 **자동 완성**.
 - 누락된 번역에 대한 **실시간 오류 감지**.
 - 번역된 콘텐츠의 **인라인 미리보기**.
 - 번역을 쉽게 생성하고 업데이트할 수 있는 **빠른 작업**.
 
-확장 프로그램 사용 방법에 대한 자세한 내용은 [Intlayer VS Code 확장 프로그램 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
+확장 기능 사용 방법에 대한 자세한 내용은 [Intlayer VS Code 확장 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
 
 ---
 
@@ -603,19 +533,19 @@ Intlayer 개발 경험을 향상시키기 위해 공식 **Intlayer VS Code 확
 
 ---
 
-## 문서 참조
+## 문서 참고 자료
 
 - [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)
+- [설정](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)
 
 이 종합 가이드는 지역 인식 라우팅과 TypeScript 지원을 갖춘 완전한 국제화 애플리케이션을 위해 Intlayer를 Tanstack Start와 통합하는 데 필요한 모든 것을 제공합니다.
 
 ## 문서 이력
 
-| 버전  | 날짜       | 변경 사항               |
-| ----- | ---------- | ----------------------- |
-| 5.8.1 | 2025-09-09 | Tanstack Start용 추가됨 |
+| 버전  | 날짜       | 변경 사항             |
+| ----- | ---------- | --------------------- |
+| 5.8.1 | 2025-09-09 | Tanstack Start용 추가 |