@intlayer/docs 6.1.6-canary.0 → 7.0.0-canary.0

package/docs/ko/intlayer_with_react_router_v7.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2025-09-04
-title: React Router v7에서 Intlayer로 시작하는 국제화(i18n)
-description: Intlayer를 사용하여 React Router v7 애플리케이션에 국제화(i18n)를 추가하는 방법을 배우세요. 로케일 인식 라우팅으로 앱을 다국어 지원으로 만드는 종합 가이드입니다.
+updatedAt: 2025-10-03
+title: React Router v7 앱 번역하는 방법 – i18n 가이드 2025
+description: Intlayer를 사용하여 React Router v7 애플리케이션에 국제화(i18n)를 추가하는 방법을 배우세요. 로케일 인식 라우팅으로 앱을 다국어로 만드는 종합 가이드를 따르세요.
 keywords:
   - 국제화
   - 문서
@@ -17,13 +17,19 @@ slugs:
   - environment
   - vite-and-react
   - react-router-v7
-applicationTemplate: https://github.com/AydinTheFirst/react-router-intlayer
-author: AydinTheFirst
+applicationTemplate: https://github.com/aymericzip/intlayer-react-router-v7-template
+history:
+  - version: 6.1.5
+    date: 2025-10-03
+    changes: 문서 업데이트
+  - version: 5.8.2
+    date: 2025-09-04
+    changes: React Router v7 지원 추가
 ---
 
-# Intlayer와 React Router v7로 시작하는 국제화(i18n)
+# Intlayer로 React Router v7 번역하기 | 국제화(i18n)
 
-이 가이드는 React Router v7 프로젝트에서 로케일 인식 라우팅, TypeScript 지원 및 최신 개발 방식을 활용하여 **Intlayer**를 원활한 국제화(i18n) 통합에 사용하는 방법을 보여줍니다.
+이 가이드는 React Router v7 프로젝트에서 로케일 인식 라우팅, TypeScript 지원 및 최신 개발 방식을 활용하여 **Intlayer**를 통합해 원활한 국제화(i18n)를 구현하는 방법을 보여줍니다.
 
 ## Intlayer란 무엇인가요?
 
@@ -34,7 +40,7 @@ Intlayer를 사용하면 다음을 할 수 있습니다:
 - **컴포넌트 수준에서 선언적 사전을 사용하여 번역을 쉽게 관리**할 수 있습니다.
 - **메타데이터, 라우트 및 콘텐츠를 동적으로 현지화**할 수 있습니다.
 - **자동 생성된 타입으로 TypeScript 지원을 보장**하여 자동 완성 및 오류 감지를 향상시킵니다.
-- **동적 로케일 감지 및 전환과 같은 고급 기능**을 활용할 수 있습니다.
+- **동적 로케일 감지 및 전환과 같은 고급 기능을 활용**할 수 있습니다.
 - **React Router v7의 구성 기반 라우팅 시스템을 사용하여 로케일 인식 라우팅 활성화**.
 
 ---
@@ -61,7 +67,7 @@ pnpm add vite-intlayer --save-dev
   구성 관리, 번역, [콘텐츠 선언](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 국제화를 위한 컨텍스트 프로바이더와 훅을 제공합니다.
+  Intlayer를 React 애플리케이션과 통합하는 패키지로, React 국제화를 위한 컨텍스트 제공자와 훅을 제공합니다.
 
 - **vite-intlayer**  
   Intlayer를 [Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 통합하기 위한 Vite 플러그인과, 사용자의 선호 로케일 감지, 쿠키 관리, URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
@@ -75,11 +81,8 @@ import { type IntlayerConfig, Locales } from "intlayer";
 
 const config: IntlayerConfig = {
   internationalization: {
-    defaultLocale: Locales.ENGLISH,
-    locales: [Locales.ENGLISH, Locales.TURKISH],
-  },
-  middleware: {
-    prefixDefault: true, // URL에 항상 기본 로케일 접두사 추가
+    defaultLocale: Locales.ENGLISH, // 기본 로케일 설정
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], // 지원하는 로케일 목록
   },
 };
 
@@ -92,11 +95,8 @@ import { Locales } from "intlayer";
 /** @type {import('intlayer').IntlayerConfig} */
 const config = {
   internationalization: {
-    defaultLocale: Locales.ENGLISH,
-    locales: [Locales.ENGLISH, Locales.TURKISH],
-  },
-  middleware: {
-    prefixDefault: true,
+    defaultLocale: Locales.ENGLISH, // 기본 로케일 설정
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], // 지원하는 로케일 목록
   },
 };
 
@@ -110,10 +110,7 @@ const { Locales } = require("intlayer");
 const config = {
   internationalization: {
     defaultLocale: Locales.ENGLISH,
-    locales: [Locales.ENGLISH, Locales.TURKISH],
-  },
-  middleware: {
-    prefixDefault: true,
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
   },
 };
 
@@ -122,43 +119,37 @@ module.exports = config;
 
 > 이 구성 파일을 통해 지역화된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔에서 Intlayer 로그 비활성화 등 다양한 설정을 할 수 있습니다. 사용 가능한 모든 매개변수 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: React Router v7 라우트 구성
+### 3단계: Vite 구성에 Intlayer 통합하기
 
-로케일 인식 라우트로 라우팅 구성을 설정하세요:
+구성에 intlayer 플러그인을 추가하세요:
 
-```typescript fileName="app/routes.ts" codeFormat="typescript"
-import { layout, route, type RouteConfig } from "@react-router/dev/routes";
-
-export default [
-  layout("routes/layout.tsx", [
-    route("/", "routes/page.tsx"), // 루트 페이지 - 로케일로 리디렉션
-    route("/:lang", "routes/[lang]/page.tsx"), // 로케일별 홈 페이지
-    route("/:lang/about", "routes/[lang]/about/page.tsx"), // 로케일별 소개 페이지
-  ]),
-] satisfies RouteConfig;
-```
-
-### 4단계: Vite 구성에 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)도 제공합니다.
+
+### Step 4: React Router v7 라우트 구성
+
+로케일 인식 라우트로 라우팅 구성을 설정하세요:
+
+```typescript fileName="app/routes.ts"
+import { layout, route, type RouteConfig } from "@react-router/dev/routes";
+
+export default [
+  layout("routes/layout.tsx", [
+    route("/:lang?", "routes/page.tsx"), // 지역화된 홈 페이지
+    route("/:lang?/about", "routes/about/page.tsx"), // 지역화된 소개 페이지
+  ]),
+] satisfies RouteConfig;
+```
 
 ### 5단계: 레이아웃 컴포넌트 생성
 
@@ -166,15 +157,17 @@ export default defineConfig({
 
 #### 루트 레이아웃
 
-```tsx fileName="app/routes/layout.tsx" codeFormat="typescript"
-tsx fileName="app/routes/layout.tsx" codeFormat="typescript"
-// app/routes/layout.tsx
-import { Outlet } from "react-router";
+```tsx fileName="app/routes/layout.tsx"
 import { IntlayerProvider } from "react-intlayer";
+import { Outlet } from "react-router";
+
+import type { Route } from "./+types/layout";
+
+export default function RootLayout({ params }: Route.ComponentProps) {
+  const { locale } = params;
 
-export default function RootLayout() {
   return (
-    <IntlayerProvider>
+    <IntlayerProvider locale={locale}>
       <Outlet />
     </IntlayerProvider>
   );
@@ -185,7 +178,7 @@ export default function RootLayout() {
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리하세요:
 
-```tsx fileName="app/routes/[lang]/page.content.ts" contentDeclarationFormat="typescript"
+```tsx fileName="app/routes/[lang]/page.content.ts"
 import { t, type Dictionary } from "intlayer";
 
 const pageContent = {
@@ -193,19 +186,23 @@ const pageContent = {
   content: {
     title: t({
       en: "Welcome to React Router v7 + Intlayer",
-      tr: "React Router v7 + Intlayer'a Hoş Geldiniz",
+      es: "Bienvenido a React Router v7 + Intlayer",
+      fr: "Bienvenue sur React Router v7 + Intlayer",
     }),
     description: t({
       en: "Build multilingual applications with ease using React Router v7 and Intlayer.",
-      tr: "React Router v7 ve Intlayer kullanarak kolayca çok dilli uygulamalar geliştirin.",
+      es: "Cree aplicaciones multilingües fácilmente usando React Router v7 y Intlayer.",
+      fr: "Créez des applications multilingues facilement avec React Router v7 et Intlayer.",
     }),
     aboutLink: t({
       en: "Learn About Us",
-      tr: "Hakkımızda Öğrenin",
+      es: "Aprender Sobre Nosotros",
+      fr: "En savoir plus sur nous",
     }),
     homeLink: t({
       en: "Home",
-      tr: "Ana Sayfa",
+      es: "Inicio",
+      fr: "Accueil",
     }),
   },
 } satisfies Dictionary;
@@ -213,104 +210,91 @@ const pageContent = {
 export default pageContent;
 ```
 
-> 콘텐츠 선언은 애플리케이션 내 어디에서든 정의할 수 있으며, `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)를 참조하세요.
 
 ### 7단계: 로케일 인식 컴포넌트 생성
 
-로케일 인식 내비게이션을 위한 `LocalizedLink` 컴포넌트를 만드세요:
-
-```tsx fileName="app/components/localized-link.tsx" codeFormat="typescript"
-// app/components/localized-link.tsx
-import { getLocalizedUrl } from "intlayer";
-import { useLocale } from "react-intlayer";
-import React from "react";
-import { Link, useLocation } from "react-router";
+로케일 인식 내비게이션을 위한 `LocalizedLink` 컴포넌트를 생성합니다:
 
-type RouterLinkProps = React.ComponentProps<typeof Link>;
+```tsx fileName="app/components/localized-link.tsx"
+import type { FC } from "react";
 
-export default function LocalizedLink({ to, ...props }: RouterLinkProps) {
-  const { locale } = useLocale();
-  const location = useLocation();
+import { getLocalizedUrl, type LocalesValues } from "intlayer";
+import { useLocale } from "react-intlayer";
+import { Link, type LinkProps, type To } from "react-router";
 
-  const isExternal = (path: string) =>
-    /^([a-z][a-z0-9+.-]*:)?\/\//i.test(path) || path.startsWith("mailto:");
+const isExternalLink = (to: string) => /^(https?:)?\/\//.test(to);
 
+// 외부 링크인지 확인하는 함수
+export const locacalizeTo = (to: To, locale: LocalesValues): To => {
   if (typeof to === "string") {
-    if (to.startsWith("/") && !isExternal(to)) {
-      return <Link to={getLocalizedUrl(to, locale)} {...props} />;
+    if (isExternalLink(to)) {
+      return to; // 외부 링크면 그대로 반환
     }
-    return <Link to={to} {...props} />;
+
+    return getLocalizedUrl(to, locale); // 내부 링크면 로케일에 맞게 변환
   }
 
-  if (to && typeof to === "object") {
-    const pathname = (to as { pathname?: string }).pathname;
-    if (pathname && pathname.startsWith("/") && !isExternal(pathname)) {
-      return (
-        <Link
-          to={{ ...to, pathname: getLocalizedUrl(pathname, locale) }}
-          {...props}
-        />
-      );
-    }
-    return <Link to={to} {...props} />;
+  if (isExternalLink(to.pathname ?? "")) {
+    return to; // 외부 링크면 그대로 반환
   }
 
-  return (
-    <Link
-      to={getLocalizedUrl(location.pathname + location.search, locale)}
-      {...props}
-    />
-  );
-}
-```
+  return {
+    ...to,
+    pathname: getLocalizedUrl(to.pathname ?? "", locale), // 내부 경로를 로케일에 맞게 변환
+  };
+};
+
+export const LocalizedLink: FC<LinkProps> = (props) => {
+  const { locale } = useLocale();
 
-### 8단계: 페이지에서 Intlayer 사용하기
+  return <Link {...props} to={locacalizeTo(props.to, locale)} />;
+};
+```
 
-애플리케이션 전반에서 콘텐츠 사전을 접근하세요:
+로컬라이즈된 경로로 이동하려는 경우, `useLocalizedNavigate` 훅을 사용할 수 있습니다:
 
-#### 루트 리디렉션 페이지
+```tsx fileName="app/hooks/useLocalizedNavigate.ts"
+import { useLocale } from "intlayer";
+import { type NavigateOptions, type To, useNavigate } from "react-router";
 
-```tsx fileName="app/routes/page.tsx" codeFormat="typescript"
-// app/routes/page.tsx
-import { useLocale } from "react-intlayer";
-import { Navigate } from "react-router";
+import { locacalizeTo } from "~/components/localized-link";
 
-export default function Page() {
+export const useLocalizedNavigate = () => {
+  const navigate = useNavigate();
   const { locale } = useLocale();
 
-  return <Navigate replace to={locale} />;
-}
+  const localizedNavigate = (to: To, options?: NavigateOptions) => {
+    const localedTo = locacalizeTo(to, locale);
+
+    navigate(localedTo, options);
+  };
+
+  return localizedNavigate;
+};
 ```
 
-#### 지역화된 홈 페이지
+### 8단계: 페이지에서 Intlayer 활용하기
 
-```tsx fileName="app/routes/[lang]/page.tsx" codeFormat="typescript"
+애플리케이션 전반에서 콘텐츠 사전을 액세스하세요:
+
+#### 현지화된 홈 페이지
+
+```tsx fileName="app/routes/[lang]/page.tsx"
 import { useIntlayer } from "react-intlayer";
-import LocalizedLink from "~/components/localized-link";
+import { LocalizedLink } from "~/components/localized-link";
 
 export default function Page() {
-  const content = useIntlayer("page");
+  const { title, description, aboutLink } = useIntlayer("page");
 
   return (
-    <div style={{ padding: "2rem", textAlign: "center" }}>
-      <h1>{content.title}</h1>
-      <p>{content.description}</p>
-      <nav style={{ marginTop: "2rem" }}>
-        <LocalizedLink
-          to="/about"
-          style={{
-            display: "inline-block",
-            padding: "0.5rem 1rem",
-            backgroundColor: "#007bff",
-            color: "white",
-            textDecoration: "none",
-            borderRadius: "4px",
-          }}
-        >
-          {content.aboutLink}
-        </LocalizedLink>
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+      <nav>
+        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
       </nav>
     </div>
   );
@@ -319,47 +303,62 @@ export default function Page() {
 
 > `useIntlayer` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayer.md)를 참조하세요.
 
-### 9단계: 로케일 전환기 컴포넌트 만들기
+### 9단계: 로케일 스위처 컴포넌트 만들기
 
-사용자가 언어를 변경할 수 있도록 컴포넌트를 만듭니다:
+사용자가 언어를 변경할 수 있도록 컴포넌트를 만드세요:
 
-```tsx fileName="app/components/locale-switcher.tsx" codeFormat="typescript"
-import { getLocalizedUrl, getLocaleName } from "intlayer";
-import { useLocale } from "react-intlayer";
-import { useLocation, useNavigate } from "react-router";
+```tsx fileName="app/components/locale-switcher.tsx"
+import type { FC } from "react";
 
-export default function LocaleSwitcher() {
-  const { locale, availableLocales, setLocale } = useLocale();
-  const location = useLocation();
-  const navigate = useNavigate();
+import {
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+  getPathWithoutLocale,
+} from "intlayer";
+import { setLocaleCookie, useIntlayer, useLocale } from "react-intlayer";
+import { Link, useLocation } from "react-router";
 
-  const handleLocaleChange = (newLocale: string) => {
-    const localizedUrl = getLocalizedUrl(
-      location.pathname + location.search,
-      newLocale
-    );
-    setLocale(newLocale);
-    navigate(localizedUrl);
-  };
+export const LocaleSwitcher: FC = () => {
+  const { localeSwitcherLabel } = useIntlayer("locale-switcher");
+  const { pathname } = useLocation();
+
+  const { availableLocales, locale } = useLocale();
+
+  const pathWithoutLocale = getPathWithoutLocale(pathname);
 
   return (
-    <div style={{ margin: "1rem 0" }}>
-      <label htmlFor="locale-select">언어 선택: </label>
-      <select
-        id="locale-select"
-        value={locale}
-        onChange={(e) => handleLocaleChange(e.target.value)}
-        style={{ padding: "0.25rem", marginLeft: "0.5rem" }}
-      >
-        {availableLocales.map((availableLocale) => (
-          <option key={availableLocale} value={availableLocale}>
-            {getLocaleName(availableLocale)}
-          </option>
-        ))}
-      </select>
-    </div>
+    <ol>
+      {availableLocales.map((localeItem) => (
+        <li key={localeItem}>
+          <Link
+            aria-current={localeItem === locale ? "page" : undefined}
+            aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
+            onClick={() => setLocaleCookie(localeItem)}
+            to={getLocalizedUrl(pathWithoutLocale, localeItem)}
+          >
+            <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>
+          </Link>
+        </li>
+      ))}
+    </ol>
   );
-}
+};
 ```
 
 > `useLocale` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md)를 참조하세요.
@@ -368,8 +367,7 @@ export default function LocaleSwitcher() {
 
 HTML의 lang 및 dir 속성을 관리하는 훅을 만듭니다:
 
-```tsx fileName="app/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
-// app/hooks/useI18nHTMLAttributes.tsx
+```tsx fileName="app/hooks/useI18nHTMLAttributes.tsx"
 import { getHTMLTextDir } from "intlayer";
 import { useEffect } from "react";
 import { useLocale } from "react-intlayer";
@@ -386,12 +384,11 @@ export const useI18nHTMLAttributes = () => {
 
 그런 다음 루트 컴포넌트에서 사용하세요:
 
-```tsx fileName="app/root.tsx" codeFormat="typescript"
-// app/routes/layout.tsx
+```tsx fileName="app/routes/layout.tsx"
 import { Outlet } from "react-router";
 import { IntlayerProvider } from "react-intlayer";
 
-import { useI18nHTMLAttributes } from "app/hooks/useI18nHTMLAttributes"; // 훅을 임포트합니다
+import { useI18nHTMLAttributes } from "app/hooks/useI18nHTMLAttributes"; // 훅을 가져옵니다
 
 export default function RootLayout() {
   useI18nHTMLAttributes(); // 훅을 호출합니다
@@ -404,35 +401,26 @@ export default function RootLayout() {
 }
 ```
 
-### 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 { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
-# 개발 서버 시작
-pnpm dev
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), intlayer(), intlayerMiddleware()],
+});
 ```
 
-```bash packageManager="yarn"
-# Intlayer 사전 빌드
-yarn intlayer:build
-
-# 개발 서버 시작
-yarn dev
-```
+---
 
-### 12단계: TypeScript 구성 (선택 사항)
+## TypeScript 구성
 
 Intlayer는 모듈 확장을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
 
@@ -440,15 +428,7 @@ TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하
 
 ```json5 fileName="tsconfig.json"
 {
-  compilerOptions: {
-    // ... 기존 TypeScript 구성
-  },
-  include: [
-json5 fileName="tsconfig.json"
-{
-  compilerOptions: {
-    // ... 기존 TypeScript 설정
-  },
+  // ... 기존 구성
   include: [
     // ... 기존 포함 항목
     ".intlayer/**/*.ts", // 자동 생성된 타입 포함
@@ -456,11 +436,13 @@ json5 fileName="tsconfig.json"
 }
 ```
 
-### Git 설정
+---
+
+## Git 구성
 
-Intlayer가 생성하는 파일들은 Git 저장소에 커밋하지 않도록 무시하는 것이 권장됩니다.
+Intlayer가 생성한 파일은 Git 저장소에 커밋하지 않도록 무시하는 것이 좋습니다.
 
-이를 위해 `.gitignore` 파일에 다음 내용을 추가할 수 있습니다:
+이를 위해 `.gitignore` 파일에 다음 지침을 추가할 수 있습니다:
 
 ```plaintext fileName=".gitignore"
 # Intlayer가 생성한 파일 무시
@@ -469,50 +451,20 @@ Intlayer가 생성하는 파일들은 Git 저장소에 커밋하지 않도록
 
 ---
 
-## 프로덕션 배포
+## VS 코드 확장
 
-애플리케이션을 배포할 때:
+Intlayer 개발 경험을 향상시키기 위해 공식 **Intlayer VS 코드 확장**을 설치할 수 있습니다.
 
-1. **애플리케이션 빌드:**
+[VS 코드 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-   ```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`
-- 브라우저 환경 설정에 따른 **자동 로케일 감지**
-- React Router v7과 함께하는 **로케일 인식 라우팅**
-- 자동 생성 타입을 통한 **TypeScript 지원**
-- 적절한 로케일 처리를 포함한 **서버 사이드 렌더링**
-
-## VS Code 확장 프로그램
-
-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)를 참조하세요.
+확장 사용 방법에 대한 자세한 내용은 [Intlayer VS 코드 확장 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
 
 ---
 
@@ -522,7 +474,7 @@ Intlayer와 함께 개발 경험을 향상시키기 위해 공식 **Intlayer VS
 
 ---
 
-## 문서 참고
+## 문서 참조
 
 - [Intlayer 문서](https://intlayer.org)
 - [React Router v7 문서](https://reactrouter.com/)
@@ -531,10 +483,4 @@ Intlayer와 함께 개발 경험을 향상시키기 위해 공식 **Intlayer VS
 - [콘텐츠 선언](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)
 
-이 포괄적인 가이드는 React Router v7과 Intlayer를 통합하여 로케일 인식 라우팅과 TypeScript 지원이 포함된 완전한 국제화 애플리케이션을 구축하는 데 필요한 모든 내용을 제공합니다.
-
-## 문서 이력
-
-| 버전  | 날짜      | 변경 사항              |
-| ----- | --------- | ---------------------- |
-| 5.8.2 | 2025-09-4 | React Router v7용 추가 |
+이 포괄적인 가이드는 Intlayer를 React Router v7과 통합하여 로케일 인식 라우팅과 TypeScript 지원이 포함된 완전한 국제화 애플리케이션을 구축하는 데 필요한 모든 것을 제공합니다.