From b4ed731a53e6881eea9bea4129d1f11e1a3a302c Mon Sep 17 00:00:00 2001 From: JoChaeWoo Date: Wed, 21 Jun 2023 18:56:21 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Docs=20:=20=EB=AC=B8=EC=84=9C=20=EB=B2=88?= =?UTF-8?q?=EC=97=AD=20=EC=B4=88=EC=95=88=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-routing/09-intercepting-routes.mdx | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx b/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx index 9ae0950ce..5bff5d0dd 100644 --- a/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx +++ b/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx @@ -1,16 +1,16 @@ --- -title: Intercepting Routes -description: Use intercepting routes to load a new route within the current layout while masking the browser URL, useful for advanced routing patterns such as modals. +title: 인터셉팅 라우트 +description: 인터셉팅 라우트를 사용해 현재 레이아웃 내에서 새 경로를 로드하는 동시에 브라우저 URL을 마스킹합니다. 인터셉팅 라우트는 모달과 같은 고급 라우팅 패턴에 유용합니다. related: - title: Next Steps - description: Learn how to use modals with Intercepted and Parallel Routes. + title: 다음 단계 + description: 인터셉트와 병렬 라우트를 이용한 모달 사용 학습하기 links: - app/building-your-application/routing/parallel-routes --- -Intercepting routes allows you to load a route within the current layout while keeping the context for the current page. This routing paradigm can be useful when you want to "intercept" a certain route to show a different route. +인터셉팅 라우트를 사용해서 현재 페이지의 컨텍스트를 유지한 상태에서 현재 레이아웃 안에 경로를 로드할 수 있습니다. 당신이 다른 경로를 보여주기 위해서 특정한 경로를 "가로채고" 싶을 때 인터셉팅 라우트는 매우 유용한 패러다임입니다. -For example, when clicking on a photo from within a feed, a modal overlaying the feed should show up with the photo. In this case, Next.js intercepts the `/feed` route and "masks" this URL to show `/photo/123` instead. +예를 들어 피드 안에 있는 사진을 클릭할 때, 사진을 보여주기 위한 모달이 피드 위에 표시됩니다. 이 경우에, Next.js는 `/feed` 경로를 가로채고 URL이 `/photo/123`으로 대신 보이도록 "마스킹"합니다. Intercepting routes soft navigation -However, when navigating to the photo directly by for example when clicking a shareable URL or by refreshing the page, the entire photo page should render instead of the modal. No route interception should occur. +하지만 공유 가능한 URL로 접근하거나 페이지를 새로고침 하면서 사진에 직접적으로 navigating 하는 경우 사진 페이지 전체가 모달 대신 렌더링 되어야 하며 인터셉팅 라우트가 발생하면 안됩니다. Intercepting routes hard navigation -## Convention +## 규칙 -Intercepting routes can be defined with the `(..)` convention, which is similar to relative path convention `../` but for segments. +인터셉팅 라우트는 상대 경로 규칙 `../`과 유사한 `(..)` 규칙으로 정의할 수 있습니다. `(..)` 규칙은 세그먼트를 기준으로 합니다. -You can use: +이렇게 사용할 수 있습니다. -- `(.)` to match segments on the **same level** -- `(..)` to match segments **one level above** -- `(..)(..)` to match segments **two levels above** -- `(...)` to match segments from the **root** `app` directory +- `(.)` **동등한 레벨**의 세그먼트와 일치 +- `(..)` **한 단계 상위 레벨**의 세그먼트와 일치 +- `(..)(..)` **두 단계 상위 레벨**의 세그먼트와 일치 +- `(...)` **루트** `app` 디렉토리의 세그먼트와 일치 -For example, you can intercept the `photo` segment from within the `feed` segment by creating a `(..)photo` directory. +예를들어 `(..)photo` 디렉토리를 생성하여 `feed` 세그먼트 안에서 `photo` 세그먼트를 가로챌 수 있습니다 Intercepting routes folder structure -> Note that the `(..)` convention is based on _route segments_, not the file-system. +> 중요합니다!
`(..)` 컨벤션은 file-system이 아닌 *route segments*를 기준으로 합니다. -## Examples +## 예시 ### Modals -Intercepting Routes can be used together with [Parallel Routes](/docs/app/building-your-application/routing/parallel-routes) to create modals. +모달을 생성하기 위해서 인터셉팅 라우트는 [병렬 라우트](/docs/app/building-your-application/routing/parallel-routes)와 같이 사용할 수 있습니다. -Using this pattern to create modals overcomes some common challenges when working with modals, by allowing you to: +이 패턴을 사용하여 모달을 생성하면 모달 작업 시 흔히 격는 여려움을 해결할 수 있으며 아래와 같은 것들이 가능합니다. -- Make the modal content **shareable through a URL** -- **Preserve context** when the page is refreshed, instead of closing the modal -- **Close the modal on backwards navigation** rather than going to the previous route -- **Reopen the modal on forwards navigation** +- **URL을 통해서 공유 가능한** 모달 컨탠츠를 만들 수 있습니다. +- 페이지가 새로고침 될 때 모달을 닫지 않고 **컨탠츠를 유지**할 수 있습니다. +- **뒤로 가기** 상황에 이전 페이지로 가지 않고 **모달을 닫을 수 있습니다.** +- **앞으로 가기** 상황에서 **모달을 다시 열 수 있습니다.** Intercepting routes modal example -> In the above example, the path to the `photo` segment can use the `(..)` matcher since `@modal` is a _slot_ and not a _segment_. This means that the `photo` route is only one _segment_ level higher, despite being two _file-system_ levels higher. +> 위의 예에서 `@modal`은 세그먼트가 아닌 슬롯이므로 `사진` 세그먼트에 대한 경로에서 `(..)` 일치자를 사용할 수 있습니다. 즉, 두 개의 파일 시스템 수준이 더 높음에도 불구하고 `사진` 경로가 한 세그먼트 수준만 더 높음을 의미합니다. -Other examples could include opening a login modal in a top navbar while also having a dedicated `/login` page, or opening a shopping cart in a side modal. +다른 예로는 전용 `/login` 페이지가 있는 상태에서 상단 navbar에서 로그인 모달을 열거나 사이드 모달에서 쇼핑 카트를 여는 경우입니다. -[View an example](https://github.com/vercel-labs/nextgram) of modals with Intercepted and Parallel Routes. +인터셉트와 병렬 라우트를 활용한 모달의 [예시](https://github.com/vercel-labs/nextgram) From 3969e7661c1a014233441bf0d8126b88394b6afc Mon Sep 17 00:00:00 2001 From: JoChaeWoo Date: Wed, 21 Jun 2023 20:00:01 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Docs=20:=20=EC=98=A4=ED=83=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95,=20=EC=96=B4=EC=83=89=ED=95=9C=20=ED=91=9C=ED=98=84?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-routing/09-intercepting-routes.mdx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx b/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx index 5bff5d0dd..f943f50c8 100644 --- a/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx +++ b/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx @@ -8,9 +8,9 @@ related: - app/building-your-application/routing/parallel-routes --- -인터셉팅 라우트를 사용해서 현재 페이지의 컨텍스트를 유지한 상태에서 현재 레이아웃 안에 경로를 로드할 수 있습니다. 당신이 다른 경로를 보여주기 위해서 특정한 경로를 "가로채고" 싶을 때 인터셉팅 라우트는 매우 유용한 패러다임입니다. +인터셉팅 라우트를 사용해서 현재 페이지의 환경을 유지한 상태에서 현재 레이아웃 안에 경로를 로드할 수 있습니다. 인터셉팅 라우트는 다른 경로를 보여주기 위해 특정한 경로를 "가로채고" 싶을 때 매우 유용한 개념입니다. -예를 들어 피드 안에 있는 사진을 클릭할 때, 사진을 보여주기 위한 모달이 피드 위에 표시됩니다. 이 경우에, Next.js는 `/feed` 경로를 가로채고 URL이 `/photo/123`으로 대신 보이도록 "마스킹"합니다. +예를 들어 피드 안에 있는 사진을 클릭할 때, 사진을 보여주기 위한 모달이 피드 위에 표시됩니다. 이 경우에 Next.js는 `/feed` 경로를 가로채고 URL이 `/photo/123`으로 보이도록 "마스킹"합니다. Intercepting routes soft navigation -하지만 공유 가능한 URL로 접근하거나 페이지를 새로고침 하면서 사진에 직접적으로 navigating 하는 경우 사진 페이지 전체가 모달 대신 렌더링 되어야 하며 인터셉팅 라우트가 발생하면 안됩니다. +하지만 공유 가능한 URL로 접근하거나 페이지를 새로고침 하면서 사진을 직접적으로 탐색하는 경우에 사진 페이지가 모달 대신 렌더링 되어야 하며 인터셉팅 라우트가 동작하면 안 됩니다. Intercepting routes hard navigation -> 위의 예에서 `@modal`은 세그먼트가 아닌 슬롯이므로 `사진` 세그먼트에 대한 경로에서 `(..)` 일치자를 사용할 수 있습니다. 즉, 두 개의 파일 시스템 수준이 더 높음에도 불구하고 `사진` 경로가 한 세그먼트 수준만 더 높음을 의미합니다. +> 위의 예시에서 `@modal`은 _세그먼트_ 가 아닌 _슬롯_ 입니다. 따라서 `사진` 세그먼트에 대한 경로에서 `(..)` 일치자를 사용할 수 있습니다. _파일 시스템_ 레벨이 두 단계 더 높지만 `사진` 경로의 _세그먼트_ 레벨이 한 단계 더 높음을 의미합니다. -다른 예로는 전용 `/login` 페이지가 있는 상태에서 상단 navbar에서 로그인 모달을 열거나 사이드 모달에서 쇼핑 카트를 여는 경우입니다. +또 다른 예시로 전용 `/login` 페이지가 있는 상태에서 상단 네비게이션 바에서 로그인 모달을 열거나 사이드 모달에서 쇼핑 카트를 여는 경우가 있습니다. 인터셉트와 병렬 라우트를 활용한 모달의 [예시](https://github.com/vercel-labs/nextgram) From a7ec2e07ae4ad236379de159eec2ef770f95e13d Mon Sep 17 00:00:00 2001 From: JoChaeWoo Date: Fri, 23 Jun 2023 00:20:42 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Docs=20:=20=EC=96=B4=EC=83=89=ED=95=9C=20?= =?UTF-8?q?=ED=91=9C=ED=98=84=20=EC=88=98=EC=A0=95,=20prettier=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/pull_request_template.md | 1 + .../01-routing/09-intercepting-routes.mdx | 30 +++++++++---------- packages/next/README.md | 1 - readme.md | 2 +- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 5fab450ef..7fa8af385 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -12,6 +12,7 @@ https://github.com/reactjs/ko.react.dev --> ## Progress + - [ ] `pnpm prettier-fix` - [ ] 번역 초안 작성 (Draft translation) - [ ] [공통 스타일 가이드 확인 (Check the common style guide)](https://github.com/reactjs/ko.reactjs.org/blob/master/UNIVERSAL-STYLE-GUIDE.md) diff --git a/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx b/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx index f943f50c8..1cf78313f 100644 --- a/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx +++ b/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx @@ -3,14 +3,14 @@ title: 인터셉팅 라우트 description: 인터셉팅 라우트를 사용해 현재 레이아웃 내에서 새 경로를 로드하는 동시에 브라우저 URL을 마스킹합니다. 인터셉팅 라우트는 모달과 같은 고급 라우팅 패턴에 유용합니다. related: title: 다음 단계 - description: 인터셉트와 병렬 라우트를 이용한 모달 사용 학습하기 + description: 인터셉트 라우트와 병렬 라우트를 이용한 모달 사용 학습하기 links: - app/building-your-application/routing/parallel-routes --- -인터셉팅 라우트를 사용해서 현재 페이지의 환경을 유지한 상태에서 현재 레이아웃 안에 경로를 로드할 수 있습니다. 인터셉팅 라우트는 다른 경로를 보여주기 위해 특정한 경로를 "가로채고" 싶을 때 매우 유용한 개념입니다. +인터셉팅 라우트는 현재 페이지의 환경을 유지하면서 레이아웃 안에 경로를 로드할 수 있습니다. 인터셉팅 라우트는 특정한 경로를 "가로채고" 다른 경로를 보여주고 싶을 때 유용한 라우팅 방식입니다. -예를 들어 피드 안에 있는 사진을 클릭할 때, 사진을 보여주기 위한 모달이 피드 위에 표시됩니다. 이 경우에 Next.js는 `/feed` 경로를 가로채고 URL이 `/photo/123`으로 보이도록 "마스킹"합니다. +예를 들어 피드 안에 있는 사진을 클릭할 때 사진을 보여주기 위한 모달이 피드 위에 표시되야 합니다. 이 경우에 Next.js는 `/feed` 경로를 가로채고 URL이 `/photo/123`으로 보이도록 "마스킹"합니다. Intercepting routes soft navigation -하지만 공유 가능한 URL로 접근하거나 페이지를 새로고침 하면서 사진을 직접적으로 탐색하는 경우에 사진 페이지가 모달 대신 렌더링 되어야 하며 인터셉팅 라우트가 동작하면 안 됩니다. +하지만 공유 가능한 URL을 클릭하거나 페이지를 새로고침하는 경우처럼 사진을 직접적으로 탐색할 때 모달 대신 전체 사진 페이지를 렌더링 해야 하며 경로를 가로채지 않습니다. Intercepting routes hard navigation -> 중요합니다!
`(..)` 컨벤션은 file-system이 아닌 *route segments*를 기준으로 합니다. +> `(..)` 규칙은 file-system이 아닌 *route 세그먼트*를 기준으로 하는 것에 유의하세요. ## 예시 ### 모달 -모달을 생성하기 위해서 인터셉팅 라우트를 [병렬 라우트](/docs/app/building-your-application/routing/parallel-routes)와 같이 사용할 수 있습니다. +모달을 생성하기 위해서 인터셉팅 라우트와 [병렬 라우트](/docs/app/building-your-application/routing/parallel-routes)를 같이 사용할 수 있습니다. -이 패턴을 사용해서 모달을 생성하면 모달 작업 시 흔히 격는 여려움을 해결할 수 있으며 아래와 같은 동작이 가능합니다. +이 패턴을 사용해서 모달을 생성하면 모달 작업 시 흔히 격는 여려움을 해결할 수 있고 아래와 같은 동작이 가능합니다. -- **URL을 통해서 공유 가능한** 모달 컨탠츠를 만들 수 있습니다. -- 페이지가 새로고침 될 때 모달을 닫지 않고 **컨탠츠를 유지**할 수 있습니다. -- **뒤로 가기** 상황에서 이전 페이지로 가지 않고 **모달을 닫을 수 있습니다.** -- **앞으로 가기** 상황에서 **모달을 다시 열 수 있습니다.** +- **URL로 공유 가능한** 모달 콘텐츠를 만들 수 있습니다. +- 페이지가 새로고침 될 때 모달을 닫지 않고 **실행 상태를 유지**할 수 있습니다. +- **뒤로 가기**로 이전 페이지로 이동하는 대신 **모달을 닫을 수 있습니다.** +- **앞으로 가기로 모달을 다시 열 수 있습니다.** Intercepting routes modal example -> 위의 예시에서 `@modal`은 _세그먼트_ 가 아닌 _슬롯_ 입니다. 따라서 `사진` 세그먼트에 대한 경로에서 `(..)` 일치자를 사용할 수 있습니다. _파일 시스템_ 레벨이 두 단계 더 높지만 `사진` 경로의 _세그먼트_ 레벨이 한 단계 더 높음을 의미합니다. +> 위의 예시에서 `@modal`은 _세그먼트_ 가 아닌 _슬롯_ 이기 때문에 `photo` 세그먼트의 경로에 `(..)` 일치자를 사용할 수 있습니다. `photo` 경로가 _파일 시스템_ 기준에서 두 단계 상위에 있지만 _세그먼트_ 기준에서 한 단계 상위에 있음을 의미합니다. -또 다른 예시로 전용 `/login` 페이지가 있는 상태에서 상단 네비게이션 바에서 로그인 모달을 열거나 사이드 모달에서 쇼핑 카트를 여는 경우가 있습니다. +다른 예시로 전용 `/login` 페이지가 있는 상태에서 상단 네비게이션 바에서 로그인 모달을 여는 경우 또는 사이드 모달에서 쇼핑 카트를 여는 경우가 있습니다. -인터셉트와 병렬 라우트를 활용한 모달의 [예시](https://github.com/vercel-labs/nextgram) +인터셉트와 병렬 라우트를 사용한 모달의 [예시 보기](https://github.com/vercel-labs/nextgram) diff --git a/packages/next/README.md b/packages/next/README.md index 8921e1831..53028e6dd 100644 --- a/packages/next/README.md +++ b/packages/next/README.md @@ -158,7 +158,6 @@ title: description: 컴포넌트에 대한 API 참조입니다. source: app/api-reference/components/link --- - ``` 따라서 한 곳에서 콘텐츠를 편집하여 두 섹션에 모두 반영할 수 있습니다. diff --git a/readme.md b/readme.md index 29e4f3032..50c7f2bd6 120000 --- a/readme.md +++ b/readme.md @@ -1 +1 @@ -packages/next/README.md \ No newline at end of file +packages/next/README.md From 6b86aaf09bd3de644d1a134fe0189bfb88f3cedc Mon Sep 17 00:00:00 2001 From: chaewoo-jo Date: Mon, 11 Sep 2023 13:53:48 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Revert=20"Docs=20:=20=EC=96=B4=EC=83=89?= =?UTF-8?q?=ED=95=9C=20=ED=91=9C=ED=98=84=20=EC=88=98=EC=A0=95,=20prettier?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit a7ec2e07ae4ad236379de159eec2ef770f95e13d. --- .github/pull_request_template.md | 1 - .../01-routing/09-intercepting-routes.mdx | 30 +++++++++---------- packages/next/README.md | 1 + readme.md | 2 +- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 7fa8af385..5fab450ef 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -12,7 +12,6 @@ https://github.com/reactjs/ko.react.dev --> ## Progress - - [ ] `pnpm prettier-fix` - [ ] 번역 초안 작성 (Draft translation) - [ ] [공통 스타일 가이드 확인 (Check the common style guide)](https://github.com/reactjs/ko.reactjs.org/blob/master/UNIVERSAL-STYLE-GUIDE.md) diff --git a/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx b/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx index 1cf78313f..f943f50c8 100644 --- a/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx +++ b/docs/02-app/01-building-your-application/01-routing/09-intercepting-routes.mdx @@ -3,14 +3,14 @@ title: 인터셉팅 라우트 description: 인터셉팅 라우트를 사용해 현재 레이아웃 내에서 새 경로를 로드하는 동시에 브라우저 URL을 마스킹합니다. 인터셉팅 라우트는 모달과 같은 고급 라우팅 패턴에 유용합니다. related: title: 다음 단계 - description: 인터셉트 라우트와 병렬 라우트를 이용한 모달 사용 학습하기 + description: 인터셉트와 병렬 라우트를 이용한 모달 사용 학습하기 links: - app/building-your-application/routing/parallel-routes --- -인터셉팅 라우트는 현재 페이지의 환경을 유지하면서 레이아웃 안에 경로를 로드할 수 있습니다. 인터셉팅 라우트는 특정한 경로를 "가로채고" 다른 경로를 보여주고 싶을 때 유용한 라우팅 방식입니다. +인터셉팅 라우트를 사용해서 현재 페이지의 환경을 유지한 상태에서 현재 레이아웃 안에 경로를 로드할 수 있습니다. 인터셉팅 라우트는 다른 경로를 보여주기 위해 특정한 경로를 "가로채고" 싶을 때 매우 유용한 개념입니다. -예를 들어 피드 안에 있는 사진을 클릭할 때 사진을 보여주기 위한 모달이 피드 위에 표시되야 합니다. 이 경우에 Next.js는 `/feed` 경로를 가로채고 URL이 `/photo/123`으로 보이도록 "마스킹"합니다. +예를 들어 피드 안에 있는 사진을 클릭할 때, 사진을 보여주기 위한 모달이 피드 위에 표시됩니다. 이 경우에 Next.js는 `/feed` 경로를 가로채고 URL이 `/photo/123`으로 보이도록 "마스킹"합니다. Intercepting routes soft navigation -하지만 공유 가능한 URL을 클릭하거나 페이지를 새로고침하는 경우처럼 사진을 직접적으로 탐색할 때 모달 대신 전체 사진 페이지를 렌더링 해야 하며 경로를 가로채지 않습니다. +하지만 공유 가능한 URL로 접근하거나 페이지를 새로고침 하면서 사진을 직접적으로 탐색하는 경우에 사진 페이지가 모달 대신 렌더링 되어야 하며 인터셉팅 라우트가 동작하면 안 됩니다. Intercepting routes hard navigation -> `(..)` 규칙은 file-system이 아닌 *route 세그먼트*를 기준으로 하는 것에 유의하세요. +> 중요합니다!
`(..)` 컨벤션은 file-system이 아닌 *route segments*를 기준으로 합니다. ## 예시 ### 모달 -모달을 생성하기 위해서 인터셉팅 라우트와 [병렬 라우트](/docs/app/building-your-application/routing/parallel-routes)를 같이 사용할 수 있습니다. +모달을 생성하기 위해서 인터셉팅 라우트를 [병렬 라우트](/docs/app/building-your-application/routing/parallel-routes)와 같이 사용할 수 있습니다. -이 패턴을 사용해서 모달을 생성하면 모달 작업 시 흔히 격는 여려움을 해결할 수 있고 아래와 같은 동작이 가능합니다. +이 패턴을 사용해서 모달을 생성하면 모달 작업 시 흔히 격는 여려움을 해결할 수 있으며 아래와 같은 동작이 가능합니다. -- **URL로 공유 가능한** 모달 콘텐츠를 만들 수 있습니다. -- 페이지가 새로고침 될 때 모달을 닫지 않고 **실행 상태를 유지**할 수 있습니다. -- **뒤로 가기**로 이전 페이지로 이동하는 대신 **모달을 닫을 수 있습니다.** -- **앞으로 가기로 모달을 다시 열 수 있습니다.** +- **URL을 통해서 공유 가능한** 모달 컨탠츠를 만들 수 있습니다. +- 페이지가 새로고침 될 때 모달을 닫지 않고 **컨탠츠를 유지**할 수 있습니다. +- **뒤로 가기** 상황에서 이전 페이지로 가지 않고 **모달을 닫을 수 있습니다.** +- **앞으로 가기** 상황에서 **모달을 다시 열 수 있습니다.** Intercepting routes modal example -> 위의 예시에서 `@modal`은 _세그먼트_ 가 아닌 _슬롯_ 이기 때문에 `photo` 세그먼트의 경로에 `(..)` 일치자를 사용할 수 있습니다. `photo` 경로가 _파일 시스템_ 기준에서 두 단계 상위에 있지만 _세그먼트_ 기준에서 한 단계 상위에 있음을 의미합니다. +> 위의 예시에서 `@modal`은 _세그먼트_ 가 아닌 _슬롯_ 입니다. 따라서 `사진` 세그먼트에 대한 경로에서 `(..)` 일치자를 사용할 수 있습니다. _파일 시스템_ 레벨이 두 단계 더 높지만 `사진` 경로의 _세그먼트_ 레벨이 한 단계 더 높음을 의미합니다. -다른 예시로 전용 `/login` 페이지가 있는 상태에서 상단 네비게이션 바에서 로그인 모달을 여는 경우 또는 사이드 모달에서 쇼핑 카트를 여는 경우가 있습니다. +또 다른 예시로 전용 `/login` 페이지가 있는 상태에서 상단 네비게이션 바에서 로그인 모달을 열거나 사이드 모달에서 쇼핑 카트를 여는 경우가 있습니다. -인터셉트와 병렬 라우트를 사용한 모달의 [예시 보기](https://github.com/vercel-labs/nextgram) +인터셉트와 병렬 라우트를 활용한 모달의 [예시](https://github.com/vercel-labs/nextgram) diff --git a/packages/next/README.md b/packages/next/README.md index 53028e6dd..8921e1831 100644 --- a/packages/next/README.md +++ b/packages/next/README.md @@ -158,6 +158,7 @@ title: description: 컴포넌트에 대한 API 참조입니다. source: app/api-reference/components/link --- + ``` 따라서 한 곳에서 콘텐츠를 편집하여 두 섹션에 모두 반영할 수 있습니다. diff --git a/readme.md b/readme.md index 50c7f2bd6..29e4f3032 120000 --- a/readme.md +++ b/readme.md @@ -1 +1 @@ -packages/next/README.md +packages/next/README.md \ No newline at end of file