[#89] docs: draft-mode 번역

pages/docs/pages/building-your-application/configuring/draft-mode.mdx

@@ -3,23 +3,21 @@ title: Draft Mode
 description: Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with Pages Router.
 ---
 
-{/* TODO: 번역이 필요합니다. */}
-
 # Draft Mode
 
-In the [Pages documentation](/docs/pages/building-your-application/routing/pages-and-layouts) and the [Data Fetching documentation](/docs/pages/building-your-application/data-fetching), we talked about how to pre-render a page at build time (**Static Generation**) using `getStaticProps` and `getStaticPaths`.
+[Pages 문서](/docs/pages/building-your-application/routing/pages-and-layouts) 및 [Data Fetching 문서](/docs/pages/building-your-application/data-fetching)에서 `getStaticProps`와 `getStaticPaths`를 사용하여 빌드 타임에 페이지를 사전 렌더링(**정적 생성**)하는 방법에 대해 이야기했습니다.
 
-Static Generation is useful when your pages fetch data from a headless CMS. However, it’s not ideal when you’re writing a draft on your headless CMS and want to view the draft immediately on your page. You’d want Next.js to render these pages at **request time** instead of build time and fetch the draft content instead of the published content. You’d want Next.js to bypass Static Generation only for this specific case.
+정적 생성은 페이지가 헤드리스 CMS에서 데이터를 가져올 때 유용합니다. 하지만 헤드리스 CMS에서 초안을 작성하고 페이지에서 바로 보는 것을 원할 때는 이상적이지 않습니다. 이러한 경우 Next.js가 이 페이지들을 빌드 타임이 아닌 **요청 타임**에 렌더링하고 게시된 컨텐츠 대신 초안 컨텐츠를 가져오도록 하고 싶을 것입니다. 이와 같이 Next.js가 특정 경우에 정적 생성을 우회하기를 원할 수 있습니다.
 
-Next.js has a feature called **Draft Mode** which solves this problem. Here are instructions on how to use it.
+Next.js에는 이러한 문제를 해결하는 **Draft Mode**라는 기능을 제공합니다. 사용 방법은 다음과 같습니다.
 
 ## Step 1: Create and access the API route
 
-> Take a look at the [API Routes documentation](/docs/pages/building-your-application/routing/api-routes) first if you’re not familiar with Next.js API Routes.
+> Next.js API Routes를 잘 모르는 경우 [API Routes 문서](/docs/pages/building-your-application/routing/api-routes)을 먼저 참조하십시오.
 
-First, create the **API route**. It can have any name - e.g. `pages/api/draft.ts`
+먼저 **초안 API route**를 만듭니다. 이름은 자유롭게 설정할 수 있습니다 - 예: `pages/api/draft.js`
 
-In this API route, you need to call `setDraftMode` on the response object.
+이 API route에서 응답 객체에 `setDraftMode`를 호출해야 합니다.
 
 ```js
 export default function handler(req, res) {
@@ -29,100 +27,99 @@ export default function handler(req, res) {
 }
 ```
 
-This will set a **cookie** to enable draft mode. Subsequent requests containing this cookie will trigger **Draft Mode** changing the behavior for statically generated pages (more on this later).
+이렇게 하면 draft 모드를 활성화하는 **쿠키**가 설정됩니다. 이러한 쿠키를 포함한 후속 요청은 **Draft Mode**를 트리거하여 정적으로 생성된 페이지의 동작을 변경합니다(이후에 더 설명함).
 
-You can test this manually by creating an API route like below and accessing it from your browser manually:
+브라우저에서 직접 액세스하여 수동으로 테스트할 수 있도록 다음과 같은 API route를 만들고 액세스해보세요:
 
 ```ts filename="pages/api/draft.ts"
-// simple example for testing it manually from your browser.
+// 브라우저에서 수동으로 테스트하기 위한 간단한 예제입니다.
 export default function handler(req, res) {
   res.setDraftMode({ enable: true })
   res.end('Draft mode is enabled')
 }
 ```
 
-If you open your browser’s developer tools and visit `/api/draft`, you’ll notice a `Set-Cookie` response header with a cookie named `__prerender_bypass`.
+브라우저의 개발자 도구를 열고 `/api/draft`를 확인하면 `__prerender_bypass`라는 이름의 쿠키가 포함된 `Set-Cookie` 응답 헤더를 확인할 수 있습니다.
 
 ### Securely accessing it from your Headless CMS
 
-In practice, you’d want to call this API route _securely_ from your headless CMS. The specific steps will vary depending on which headless CMS you’re using, but here are some common steps you could take.
+실제로는 헤드리스 CMS에서 이 라우트 핸들러를 _보안_ 방식으로 호출하고 싶을 것입니다. 사용 중인 헤드리스 CMS에 따라 구체적인 단계는 다를 수 있지만, 다음과 같은 일반적인 단계를 따를 수 있습니다.
 
-These steps assume that the headless CMS you’re using supports setting **custom draft URLs**. If it doesn’t, you can still use this method to secure your draft URLs, but you’ll need to construct and access the draft URL manually.
+이 단계는 사용 중인 헤드리스 CMS가 **사용자 정의 초안 URL** 설정을 지원한다고 가정합니다. 지원하지 않는 경우에도 이 방법을 사용하여 초안 URL을 보호할 수 있지만, 초안 URL을 수동으로 구성하고 접근해야 합니다.
 
-**First**, you should create a **secret token string** using a token generator of your choice. This secret will only be known by your Next.js app and your headless CMS. This secret prevents people who don’t have access to your CMS from accessing draft URLs.
+**먼저**, 원하는 토큰 생성기를 사용하여 **시크릿 토큰 문자열**을 생성해야 합니다. 이 시크릿은 Next.js 앱과 헤드리스 CMS만 알고 있어야 합니다. 이 시크릿은 CMS에 액세스할 수 없는 사람들이 초안 URL에 접근하는 것을 방지합니다.
 
-**Second**, if your headless CMS supports setting custom draft URLs, specify the following as the draft URL. This assumes that your draft API route is located at `pages/api/draft.ts`.
+**두 번째**, 헤드리스 CMS가 사용자 정의 초안 URL 설정을 지원하는 경우, 다음을 초안 URL로 지정합니다. 이는 초안 API route가 `pages/api/draft.js`에 위치한다고 가정합니다.
 
 ```bash filename="Terminal"
 https://<your-site>/api/draft?secret=<token>&slug=<path>
 ```
 
-- `<your-site>` should be your deployment domain.
-- `<token>` should be replaced with the secret token you generated.
-- `<path>` should be the path for the page that you want to view. If you want to view `/posts/foo`, then you should use `&slug=/posts/foo`.
+- `<your-site>`는 배포 도메인이어야 합니다.
+- `<token>`은 생성한 시크릿 토큰으로 교체해야 합니다.
+- `<path>` 는 보려고 하는 페이지의 경로여야 합니다. `/posts/foo`를 보고자 한다면 `&slug=/posts/foo`를 사용해야 합니다.
 
-Your headless CMS might allow you to include a variable in the draft URL so that `<path>` can be set dynamically based on the CMS’s data like so: `&slug=/posts/{entry.fields.slug}`
+사용중인 헤드리스 CMS가 변수 삽입을 지원하는 경우 `<path>`를 CMS 데이터에 따라 동적으로 설정할 수 있습니다: `&slug=/posts/{entry.fields.slug}`
 
-**Finally**, in the draft API route:
+**마지막으로**, 초안 API route에서:
 
-- Check that the secret matches and that the `slug` parameter exists (if not, the request should fail).
--
-- Call `res.setDraftMode`.
-- Then redirect the browser to the path specified by `slug`. (The following example uses a [307 redirect](https://developer.mozilla.org/docs/Web/HTTP/Status/307)).
+- 시크릿이 일치하고 `slug` 매개변수가 존재하는지 확인합니다(존재하지 않으면 요청이 실패해야 합니다).
+- `res.setDraftMode`를 호출합니다.
+- 그런 다음 브라우저를 `slug`로 지정된 경로로 리디렉션합니다(다음 예제에서는 [307 redirect](https://developer.mozilla.org/docs/Web/HTTP/Status/307)을 사용합니다).
 
 ```js
 export default async (req, res) => {
-  // Check the secret and next parameters
-  // This secret should only be known to this API route and the CMS
+  // 시크릿과 다음 매개변수를 확인합니다.
+  // 이 시크릿은 이 API route와 CMS만 알고 있어야 합니다.
   if (req.query.secret !== 'MY_SECRET_TOKEN' || !req.query.slug) {
     return res.status(401).json({ message: 'Invalid token' })
   }
 
-  // Fetch the headless CMS to check if the provided `slug` exists
-  // getPostBySlug would implement the required fetching logic to the headless CMS
+  // 제공된 `slug`가 존재하는지 확인하기 위해 헤드리스 CMS를 가져옵니다.
+  // getPostBySlug는 헤드리스 CMS에 필요한 fetching 로직을 구현합니다.
   const post = await getPostBySlug(req.query.slug)
 
-  // If the slug doesn't exist prevent draft mode from being enabled
+  // slug가 존재하지 않으면 Draft Mode가 활성화되지 않도록 합니다.
   if (!post) {
     return res.status(401).json({ message: 'Invalid slug' })
   }
 
-  // Enable Draft Mode by setting the cookie
+  // 쿠키를 설정하여 Draft Mode를 활성화합니다.
   res.setDraftMode({ enable: true })
 
-  // Redirect to the path from the fetched post
-  // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
+  // 가져온 게시물의 경로로 리디렉션합니다.
+  // req.query.slug로 리디렉션하지 않는 이유는 open redirect 취약점이 발생할 수 있기 때문입니다.
   res.redirect(post.slug)
 }
 ```
 
-If it succeeds, then the browser will be redirected to the path you want to view with the draft mode cookie.
+성공하면 브라우저는 설정된 draft mode 쿠키와 함께 보고자 하는 경로로 리디렉션됩니다.
 
 ## Step 2: Update `getStaticProps`
 
-The next step is to update `getStaticProps` to support draft mode.
+다음 단계는 `getStaticProps`를 업데이트하여 draft mode를 지원하는 것입니다.
 
-If you request a page which has `getStaticProps` with the cookie set (via `res.setDraftMode`), then `getStaticProps` will be called at **request time** (instead of at build time).
+`res.setDraftMode`를 통해 쿠키가 설정된 페이지를 요청하면 `getStaticProps`가 **빌드 타임**이 아닌 **요청 타임**에 호출됩니다.
 
-Furthermore, it will be called with a `context` object where `context.draftMode` will be `true`.
+또한, `context.draftMode`가 `true`인 `context` 객체와 함께 호출됩니다.
 
 ```js
 export async function getStaticProps(context) {
   if (context.draftMode) {
-    // dynamic data
+    // 동적 데이터
   }
 }
 ```
 
-We used `res.setDraftMode` in the draft API route, so `context.draftMode` will be `true`.
+우리는 초안 API route에서 `res.setDraftMode`를 사용했으므로 `context.draftMode`는 `true`가 됩니다.
 
-If you’re also using `getStaticPaths`, then `context.params` will also be available.
+`getStaticPaths`를 사용하는 경우, `context.params`도 사용할 수 있습니다.
 
 ### Fetch draft data
 
-You can update `getStaticProps` to fetch different data based on `context.draftMode`.
+`getStaticProps`를 업데이트하여 `context.draftMode`에 따라 다른 데이터를 가져올 수 있습니다.
 
-For example, your headless CMS might have a different API endpoint for draft posts. If so, you can modify the API endpoint URL like below:
+예를 들어, 헤드리스 CMS가 초안 게시물에 대해 다른 API 엔드포인트를 가지고 있는 경우, 아래와 같이 API 엔드포인트 URL을 수정할 수 있습니다:
 
 ```js
 export async function getStaticProps(context) {
@@ -134,9 +131,9 @@ export async function getStaticProps(context) {
 }
 ```
 
-That’s it! If you access the draft API route (with `secret` and `slug`) from your headless CMS or manually, you should now be able to see the draft content. And if you update your draft without publishing, you should be able to view the draft.
+이제 초안 API route(`시크릿` 및 `slug` 포함)를 헤드리스 CMS 또는 수동으로 접근하면 초안 컨텐츠를 볼 수 있어야 합니다. 초안을 게시하지 않고 업데이트하더라도 초안을 볼 수 있어야 합니다.
 
-Set this as the draft URL on your headless CMS or access manually, and you should be able to see the draft.
+헤드리스 CMS에 이를 초안 URL로 설정하거나 수동으로 접근하면 초안을 볼 수 있습니다.
 
 ```bash filename="Terminal"
 https://<your-site>/api/draft?secret=<token>&slug=<path>
@@ -146,40 +143,39 @@ https://<your-site>/api/draft?secret=<token>&slug=<path>
 
 ### Clear the Draft Mode cookie
 
-By default, the Draft Mode session ends when the browser is closed.
+기본적으로 초안 모드 세션은 브라우저를 닫으면 종료됩니다.
 
-To clear the Draft Mode cookie manually, create an API route that calls `setDraftMode({ enable: false })`:
+초안 모드 쿠키를 수동으로 지우려면 `setDraftMode({ enable: false })`를 호출하는 API route를 만듭니다:
 
 ```ts filename="pages/api/disable-draft.ts"
 export default function handler(req, res) {
   res.setDraftMode({ enable: false })
 }
 ```
 
-Then, send a request to `/api/disable-draft` to invoke the API Route. If calling this route using [`next/link`](/docs/pages/api-reference/components/link), you must pass `prefetch={false}` to prevent accidentally deleting the cookie on prefetch.
+그런 다음 `/api/disable-draft`에 요청을 보내 API Route를 호출합니다. [`next/link`](/docs/pages/api-reference/components/link)를 사용하여 이 라우트를 호출하는 경우, 쿠키가 prefech 중에 실수로 삭제되지 않도록 `prefetch={false}`를 전달해야 합니다.
 
 ### Works with `getServerSideProps`
 
-Draft Mode works with `getServerSideProps`, and is available as a `draftMode` key in the [`context`](/docs/pages/api-reference/functions/get-server-side-props#context-parameter) object.
+Draft mode는 `getServerSideProps`와 함께 작동하며, `context` 객체에 `draftMode` 키로 사용할 수 있습니다.
 
-> **Good to know**: You shouldn't set the `Cache-Control` header when using Draft Mode because it cannot be bypassed. Instead, we recommend using [ISR](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration).
+> **참고**: Draft Mode를 사용할 때 `Cache-Control` 헤더를 설정하면 우회할 수 없으므로 설정하지 않아야 합니다. 대신, [ISR](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration)을 사용하는 것을 추천합니다.
 
 ### Works with API Routes
 
-API Routes will have access to `draftMode` on the request object. For example:
+API Routes는 요청 객체에서 `draftMode`에 접근할 수 있습니다. 예를 들어:
 
 ```js
 export default function myApiRoute(req, res) {
   if (req.draftMode) {
-    // get draft data
+    // 초안 데이터를 가져옵니다.
   }
 }
 ```
 
 ### Unique per `next build`
 
-A new bypass cookie value will be generated each time you run `next build`.
-
-This ensures that the bypass cookie can’t be guessed.
+`next build`를 실행할 때마다 새로운 우회 쿠키 값이 생성됩니다.
+이를 통해서 우회 쿠키를 추측할 수 없도록 합니다.
 
-> **Good to know**: To test Draft Mode locally over HTTP, your browser will need to allow third-party cookies and local storage access.
+> **참고**: 로컬에서 HTTP를 통해 Draft Mode를 테스트하려면 브라우저에서 서드 파티 쿠키와 로컬 스토리지 액세스를 허용해야 합니다.