[#111] docs: pages-and-layouts 번역 (#114)

pages/docs/pages/building-your-application/routing/pages-and-layouts.mdx

@@ -3,17 +3,15 @@ title: Pages and Layouts
 description: Create your first page and shared layout with the Pages Router.
 ---
 
-{/* TODO: 번역이 필요합니다. */}
-
 # Pages and Layouts
 
-The Pages Router has a file-system based router built on the concept of pages.
+페이지 라우터는 페이지 개념에 기반한 파일 시스템 기반 라우터를 가지고 있습니다.
 
-When a file is added to the `pages` directory, it's automatically available as a route.
+`pages` 디렉토리에 파일을 추가하면 자동으로 라우트로 사용 가능해집니다.
 
-In Next.js, a **page** is a [React Component](https://react.dev/learn/your-first-component) exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in the `pages` directory. Each page is associated with a route based on its file name.
+Next.js에서 **페이지**는 `pages` 디렉토리의 `.js`, `.jsx`, `.ts`, 또는 `.tsx` 파일에서 내보내진 [React 컴포넌트](https://react.dev/learn/your-first-component)입니다. 각 페이지는 파일 이름을 기반으로 한 라우트와 연결됩니다.
 
-**Example**: If you create `pages/about.js` that exports a React component like below, it will be accessible at `/about`.
+**예시**: 아래와 같이 React 컴포넌트를 내보내는 `pages/about.js`를 생성하면, `/about`에서 접근할 수 있습니다.
 
 ```jsx
 export default function About() {
@@ -23,27 +21,27 @@ export default function About() {
 
 ## Index routes
 
-The router will automatically route files named `index` to the root of the directory.
+라우터는 `index`라는 이름의 파일을 디렉토리의 루트로 자동 라우팅합니다.
 
 - `pages/index.js` → `/`
 - `pages/blog/index.js` → `/blog`
 
 ## Nested routes
 
-The router supports nested files. If you create a nested folder structure, files will automatically be routed in the same way still.
+라우터는 중첩 파일을 지원합니다. 중첩 폴더 구조를 생성하면 파일들이 여전히 같은 방식으로 자동 라우팅됩니다.
 
 - `pages/blog/first-post.js` → `/blog/first-post`
 - `pages/dashboard/settings/username.js` → `/dashboard/settings/username`
 
 ## Pages with Dynamic Routes
 
-Next.js supports pages with dynamic routes. For example, if you create a file called `pages/posts/[id].js`, then it will be accessible at `posts/1`, `posts/2`, etc.
+Next.js는 동적 라우트를 가진 페이지를 지원합니다. 예를 들어, `pages/posts/[id].js`라는 파일을 생성하면, `posts/1`, `posts/2` 등에서 접근할 수 있습니다.
 
-> To learn more about dynamic routing, check the [Dynamic Routing documentation](/docs/pages/building-your-application/routing/dynamic-routes).
+> 동적 라우팅에 대해 더 알아보려면 [동적 라우팅 문서](/docs/pages/building-your-application/routing/dynamic-routes)를 확인하세요.
 
 ## Layout Pattern
 
-The React model allows us to deconstruct a [page](/docs/pages/building-your-application/routing/pages-and-layouts) into a series of components. Many of these components are often reused between pages. For example, you might have the same navigation bar and footer on every page.
+React 모델을 사용하면 [페이지](/docs/pages/building-your-application/routing/pages-and-layouts)를 여러 컴포넌트로 분해할 수 있습니다. 이 컴포넌트들은 종종 페이지 간에 재사용됩니다. 예를 들어, 모든 페이지에 같은 네비게이션 바와 푸터를 가질 수 있습니다.
 
 ```jsx filename="components/layout.js"
 import Navbar from './navbar'
@@ -64,7 +62,7 @@ export default function Layout({ children }) {
 
 ### Single Shared Layout with Custom App
 
-If you only have one layout for your entire application, you can create a [Custom App](/docs/pages/building-your-application/routing/custom-app) and wrap your application with the layout. Since the `<Layout />` component is re-used when changing pages, its component state will be preserved (e.g. input values).
+전체 애플리케이션에 하나의 레이아웃만 있는 경우, [커스텀 앱](/docs/pages/building-your-application/routing/custom-app)을 생성하고 애플리케이션을 레이아웃으로 감쌀 수 있습니다. 페이지 변경 시 `<Layout />` 컴포넌트가 재사용되므로 컴포넌트 상태가 유지됩니다(예: input values).
 
 ```jsx filename="pages/_app.js"
 import Layout from '../components/layout'
@@ -80,7 +78,7 @@ export default function MyApp({ Component, pageProps }) {
 
 ### Per-Page Layouts
 
-If you need multiple layouts, you can add a property `getLayout` to your page, allowing you to return a React component for the layout. This allows you to define the layout on a _per-page basis_. Since we're returning a function, we can have complex nested layouts if desired.
+여러 레이아웃이 필요한 경우, 페이지에 `getLayout` 속성을 추가하여 레이아웃을 반환할 수 있는 React 컴포넌트를 지정할 수 있습니다. 이를 통해 페이지별로 레이아웃을 정의할 수 있습니다. 함수를 반환하므로 원하는 경우 복잡한 중첩 레이아웃을 가질 수 있습니다.
 
 ```jsx filename="pages/index.js"
 
@@ -89,7 +87,7 @@ import NestedLayout from '../components/nested-layout'
 
 export default function Page() {
   return (
-    /** Your content */
+    /** 여기에 내용을 넣으세요 */
   )
 }
 
@@ -104,22 +102,22 @@ Page.getLayout = function getLayout(page) {
 
 ```jsx filename="pages/_app.js"
 export default function MyApp({ Component, pageProps }) {
-  // Use the layout defined at the page level, if available
+  // 가능하다면, 페이지 수준에서 정의된 레이아웃을 사용하세요
   const getLayout = Component.getLayout ?? ((page) => page)
 
   return getLayout(<Component {...pageProps} />)
 }
 ```
 
-When navigating between pages, we want to _persist_ page state (input values, scroll position, etc.) for a Single-Page Application (SPA) experience.
+페이지 간에 이동할 때, 단일 페이지 애플리케이션(SPA) 경험을 위해 페이지 상태(입력 값, 스크롤 위치 등)를 유지 하고자 합니다.
 
-This layout pattern enables state persistence because the React component tree is maintained between page transitions. With the component tree, React can understand which elements have changed to preserve state.
+이 레이아웃 패턴은 페이지 전환 사이에 React 컴포넌트 트리가 유지되므로 상태 유지를 가능하게 합니다. 컴포넌트 트리를 통해 React는 어떤 요소가 변경되었는지 파악하여 상태를 보존할 수 있습니다.
 
-> **Good to know**: This process is called [reconciliation](https://react.dev/learn/preserving-and-resetting-state), which is how React understands which elements have changed.
+> **알아두면 좋습니다**: 이 과정을 [재조정](https://react.dev/learn/preserving-and-resetting-state)이라고 하며, React가 어떤 요소가 변경되었는지 이해하는 방법입니다.
 
 ### With TypeScript
 
-When using TypeScript, you must first create a new type for your pages which includes a `getLayout` function. Then, you must create a new type for your `AppProps` which overrides the `Component` property to use the previously created type.
+타입스크립트를 사용할 때는 먼저 `getLayout` 함수를 포함하는 페이지의 새 타입을 생성해야 합니다. 그런 다음, 이전에 생성된 타입을 사용하도록 `Component` 속성을 오버라이드하는 `AppProps`의 새 타입을 생성해야 합니다.
 
 ```tsx filename="pages/index.tsx" switcher
 import type { ReactElement } from 'react'
@@ -175,7 +173,7 @@ type AppPropsWithLayout = AppProps & {
 }
 
 export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
-  // Use the layout defined at the page level, if available
+  // 가능하다면, 페이지 수준에서 정의된 레이아웃을 사용하세요
   const getLayout = Component.getLayout ?? ((page) => page)
 
   return getLayout(<Component {...pageProps} />)
@@ -184,7 +182,7 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
 
 ```jsx filename="pages/_app.js" switcher
 export default function MyApp({ Component, pageProps }) {
-  // Use the layout defined at the page level, if available
+  // 가능하다면, 페이지 수준에서 정의된 레이아웃을 사용하세요
   const getLayout = Component.getLayout ?? ((page) => page)
 
   return getLayout(<Component {...pageProps} />)
@@ -193,7 +191,7 @@ export default function MyApp({ Component, pageProps }) {
 
 ### Data Fetching
 
-Inside your layout, you can fetch data on the client-side using `useEffect` or a library like [SWR](https://swr.vercel.app/). Because this file is not a [Page](/docs/pages/building-your-application/routing/pages-and-layouts), you cannot use `getStaticProps` or `getServerSideProps` currently.
+레이아웃 내에서 `useEffect` 또는 [SWR](https://swr.vercel.app/) 같은 라이브러리를 사용하여 클라이언트 측에서 데이터를 가져올 수 있습니다. 이 파일이 [페이지](/docs/pages/building-your-application/routing/pages-and-layouts)가 아니기 때문에 현재 `getStaticProps`나 `getServerSideProps`는 사용할 수 없습니다.
 
 ```jsx filename="components/layout.js"
 import useSWR from 'swr'