Skip to Content
Nextra 4.0 is released 🎉

✏️ 작성 방법

본 문서는 문서 작성 방법에 대한 가이드를 제공합니다. 문서를 작성하기 전에 이 가이드를 읽어주세요.

🔗 링크 작성 가이드

로케일 반영하기

본 문서화 어플리케이션은 다국어를 지원합니다. 따라서 링크를 작성할 때는 반드시 경로(pathname)에 로케일이 지정되어 있어야 합니다. 즉, 로케일은 문서의 언어와 지역을 나타내며, URL 경로에 포함되어야 합니다.

기본 사용법

링크를 작성할 때는 로케일을 반영해야 합니다. 예를 들어, 한국어로 작성된 content/ko/sample.mdx 문서로의 링크는 /ko/sample로 설정해야 합니다. 다음은 올바른 링크 예시입니다:

[한국어 문서 샘플](/ko/sample)

이 문서화 어플리케이션에서는 <LocalizedLink> 컴포넌트를 제공합니다. 이 컴포넌트를 사용하면 로케일이 자동으로 반영된 링크를 생성할 수 있습니다.

예를 들어, 현재 사용자가 한국어 페이지를 보고 있다면, 다음과 같이 코드를 작성할 경우, 링크는 /ko/sample로 자동 변환됩니다:

현재 프로젝트에서 절대 경로 import 를 사용할 수 없습니다.
따라서, <LocalizedLink> 컴포넌트를 사용하여 링크를 작성할 때는 상대 경로를 사용해야 합니다.

link-usage.mdx
import LocalizedLink from "../../../components/LocalizedLink";
 
<LocalizedLink href="/setup/github-pages">
  한국어 문서 샘플
</LocalizedLink>
rendered-link.html
<a
  target="_blank"
  rel="noopener noreferrer"
  href="/ko/setup/github-pages"
>
  한국어 문서 샘플
</a>

이 문서화 어플리케이션에서는 <Callout> 컴포넌트를 제공합니다. 이 컴포넌트를 사용하면 코드 저장소 링크를 쉽게 작성할 수 있습니다.

예를 들어, 다음과 같이 코드를 작성할 경우, 링크는 GitHub 저장소의 해당 경로로 자동 변환됩니다:

code-repository-link-usage.mdx
import CodeRepositoryLink from "../../../components/CodeRepositoryLink";
 
<CodeRepositoryLink
  href="/packages/react-utils/src/hooks"
>
  react-utils/hooks
</CodeRepositoryLink>
rendered-code-repository-link.html
<a
  target="_blank"
  rel="noopener noreferrer"
  href="https://github.com/iamhoonse-dev/turborepo-template/tree/main/packages/react-utils/src/hooks"
>
  <!-- Note: iamhoonse-dev/turborepo-template 부분은 환경 변수 GITHUB_REPOSITORY 값으로 변경됩니다. -->
  react-utils/hooks
</a>

자동으로 생성되는 경로는 환경 변수 GITHUB_REPOSITORY에 따라 달라집니다. 예를 들어,

  • 환경 변수 GITHUB_REPOSITORY가 your-name/repo-name로 설정되어 있고,
  • 컴포넌트의 href 프로퍼티에 지정된 경로가 /packages/react-utils/src/hooks 라면,

최종적으로 생성되는 링크는 https://github.com/your-name/repo-name/tree/main/packages/react-utils/src/hooks로 생성됩니다. 관련하여 보다 자세한 내용은 CodeRepositoryLink 컴포넌트 코드를 참고하세요.

🖼️ 이미지 첨부 가이드

이미지 업로드

문서에서 사용할 이미지는 apps/docs/public 디렉토리에 업로드해야 합니다.

문서에 이미지 삽입하기

가령 apps/docs/public/assets/images/sample-image.png에 이미지를 업로드했다면, 문서에서 이미지를 삽입할 때는 다음과 같이 작성합니다:

image-usage.mdx
![이미지 설명](/assets/images/sample-image.png)
Last updated on