diff --git a/docs/src/content/docs/ko/components/card-grids.mdx b/docs/src/content/docs/ko/components/card-grids.mdx new file mode 100644 index 00000000000..7e4743fe5ac --- /dev/null +++ b/docs/src/content/docs/ko/components/card-grids.mdx @@ -0,0 +1,179 @@ +--- +title: 카드 그리드 +description: Starlight에서 여러 카드를 그리드로 묶는 방법을 알아보세요. +sidebar: + order: 4 +--- + +import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components'; + +여러 개의 [``](/ko/components/cards/) 또는 [``](/ko/components/link-cards/) 컴포넌트를 그리드에 래핑하려면 `` 컴포넌트를 사용합니다. + +import Preview from '~/components/component-preview.astro'; + + + + + + 시리우스, 베가, 베텔게우스 + + + 이오, 유로파, 가니메데 + + + + + +## 가져오기 + +```tsx +import { CardGrid } from '@astrojs/starlight/components'; +``` + +## 사용 + +### 카드 그룹화 + +충분한 공간이 있을 때 여러 개의 [``](/ko/components/cards/) 컴포넌트를 `` 컴포넌트로 그룹화하여 나란히 표시합니다. + + + +```mdx {3,10} +import { Card, CardGrid } from '@astrojs/starlight/components'; + + + + 강조하고 싶은 흥미로운 콘텐츠. + + + 공유하고 싶은 추가 정보. + + +``` + + + +```markdoc {1,9} +{% cardgrid %} +{% card title="확인하세요" icon="open-book" %} +강조하고 싶은 흥미로운 콘텐츠. +{% /card %} + +{% card title="기타 기능" icon="information" %} +공유하고 싶은 추가 정보. +{% /card %} +{% /cardgrid %} +``` + + + + + + 강조하고 싶은 흥미로운 콘텐츠. + + + 공유하고 싶은 추가 정보. + + + + + +### 링크 카드 그룹화 + +충분한 공간이 있을 때 여러 개의 [``](/ko/components/link-cards/) 컴포넌트를 `` 컴포넌트를 사용하여 그룹화하여 나란히 표시합니다. + + + +```mdx {3,6} +import { LinkCard, CardGrid } from '@astrojs/starlight/components'; + + + + + +``` + + + +```markdoc {1,5} +{% cardgrid %} +{% linkcard title="Markdown으로 콘텐츠 작성" href="/ko/guides/authoring-content/" /%} + +{% linkcard title="컴포넌트" href="/ko/components/using-components/" /%} +{% /cardgrid %} +``` + + + + + + + + + + +### 카드를 엇갈리게 배치 + +그리드의 두 번째 열을 수직으로 이동하여 시각적 흥미를 더하려면 `` 컴포넌트에 [`stagger`](#stagger) 속성을 추가합니다. + +이 속성은 홈 페이지에서 프로젝트의 주요 기능을 표시하는 데 유용합니다. + + + +```mdx "stagger" +import { Card, CardGrid } from '@astrojs/starlight/components'; + + + + 강조하고 싶은 흥미로운 콘텐츠. + + + 공유하고 싶은 추가 정보. + + +``` + + + +```markdoc "stagger=true" +{% cardgrid stagger=true %} +{% card title="확인하세요" icon="open-book" %} +강조하고 싶은 흥미로운 콘텐츠. +{% /card %} + +{% card title="기타 기능" icon="information" %} +공유하고 싶은 추가 정보. +{% /card %} +{% /cardgrid %} +``` + + + + + + 강조하고 싶은 흥미로운 콘텐츠. + + + 공유하고 싶은 추가 정보. + + + + + +## `` 속성 + +**구현:** [`CardGrid.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/CardGrid.astro) + +`` 컴포넌트는 다음과 같은 속성을 허용합니다: + +### `stagger` + +**타입:** `boolean` + +그리드에 카드를 엇갈리게 배치할지 여부를 정의합니다. diff --git a/docs/src/content/docs/ko/components/using-components.mdx b/docs/src/content/docs/ko/components/using-components.mdx new file mode 100644 index 00000000000..2521fa4247d --- /dev/null +++ b/docs/src/content/docs/ko/components/using-components.mdx @@ -0,0 +1,94 @@ +--- +title: 컴포넌트 사용 +description: Starlight와 함께 MDX 및 Markdoc에서 컴포넌트 사용. +sidebar: + order: 1 +--- + +컴포넌트를 사용하면 쉽고 일관되게 UI 조각이나 스타일을 재사용할 수 있습니다. +링크 카드나 YouTube 삽입 등을 예로 들 수 있습니다. +Starlight는 [MDX](https://mdxjs.com/) 및 [Markdoc](https://markdoc.dev/) 파일에서 컴포넌트 사용을 지원하며 사용할 수 있는 몇 가지 공통 컴포넌트를 제공합니다. + +[Astro 문서에서 컴포넌트 구축에 대해 자세히 알아보세요](https://docs.astro.build/ko/core-concepts/astro-components/). + +## MDX에서 컴포넌트 사용 + +MDX 파일에서 컴포넌트를 가져온 다음 JSX 태그로 렌더링하여 사용할 수 있습니다. +이는 HTML 태그처럼 보이지만 `import` 문에 있는 이름과 일치하는 대문자로 시작합니다. + +```mdx +--- +# src/content/docs/example.mdx +title: 내 문서에 오신 것을 환영합니다 +--- + +import { Icon } from '@astrojs/starlight/components'; +import CustomCard from '../../components/CustomCard.astro'; + + + +컴포넌트에는 **중첩된 콘텐츠**가 포함될 수도 있습니다. +``` + +Starlight는 Astro로 구동되므로 [지원되는 UI 프레임워크(React, Preact, Svelte, Vue, Solid, Alpine)](https://docs.astro.build/ko/core-concepts/framework-components/)로 빌드된 컴포넌트를 MDX 파일에 추가할 수 있습니다. +Astro 문서에서 [MDX에서 컴포넌트 사용](https://docs.astro.build/ko/guides/integrations-guide/mdx/#mdx에서-컴포넌트-사용)에 대해 자세히 알아보세요. + +## Markdoc에서 컴포넌트 사용 + +[Markdoc 설정 가이드](/ko/guides/authoring-content/#markdoc)에 따라 Markdoc에서 콘텐츠 작성에 대한 지원을 추가하세요. + +Starlight Markdoc 프리셋을 사용하면 Starlight의 내장 컴포넌트를 Markdoc의 `{% %}` 태그 구문과 함께 사용할 수 있습니다. +MDX와 달리 Markdoc에서는 컴포넌트를 가져올 필요가 없습니다. +다음 예시는 Starlight의 [카드 컴포넌트](/ko/components/cards/)를 Markdoc 파일에서 렌더링합니다: + +```markdoc +--- +# src/content/docs/example.mdoc +title: 내 문서에 오신 것을 환영합니다 +--- + +{% card title="별" icon="star" %} +시리우스, 베가, 베텔게우스 +{% /card %} +``` + +Markdoc 파일에서 컴포넌트를 사용하는 방법에 대한 자세한 내용은 [Astro Markdoc 통합 문서](https://docs.astro.build/ko/guides/integrations-guide/markdoc/#컴포넌트-렌더링)를 참조하세요. + +## 내장 컴포넌트 + +Starlight는 일반적인 문서 사용 사례를 위한 내장 컴포넌트를 제공합니다. +이러한 컴포넌트는 MDX 파일의 `@astrojs/starlight/components` 패키지와 Markdoc 파일의 [Starlight Markdoc 프리셋](/ko/guides/authoring-content/#markdoc)에서 사용할 수 있습니다. + +사용 가능한 컴포넌트 목록과 사용 방법은 사이드바를 참조하세요. + +## Starlight 스타일과의 호환성 + +Starlight는 요소 사이에 여백을 추가하는 등 Markdown 콘텐츠에 기본 스타일을 적용합니다. +이러한 스타일이 컴포넌트의 모양과 충돌하는 경우 컴포넌트에 `not-content` 클래스를 추가하여 비활성화하세요. + +```astro 'class="not-content"' +--- +// src/components/Example.astro +--- + +
+

Starlight의 기본 콘텐츠 스타일링의 영향을 받지 않습니다.

+
+``` + +## 컴포넌트 속성 + +컴포넌트 자체에서 내보내지 않더라도 컴포넌트에서 허용하는 `Props`를 참조하려면 `astro/types`의 [`ComponentProps`](https://docs.astro.build/ko/guides/typescript/#componentprops-타입) 타입을 사용합니다. +이는 기존 컴포넌트를 래핑하거나 확장할 때 유용할 수 있습니다. + +다음 예시는 `ComponentProps`를 사용하여 Starlight의 내장 `Icon` 컴포넌트가 허용하는 속성의 타입을 가져옵니다: + +```astro +--- +// src/components/Example.astro +import type { ComponentProps } from 'astro/types'; +import { Icon } from '@astrojs/starlight/icon'; + +type IconProps = ComponentProps; +--- +``` diff --git a/docs/src/content/docs/ko/guides/authoring-content.mdx b/docs/src/content/docs/ko/guides/authoring-content.mdx index 6e826fa4c9f..de4770edd35 100644 --- a/docs/src/content/docs/ko/guides/authoring-content.mdx +++ b/docs/src/content/docs/ko/guides/authoring-content.mdx @@ -389,7 +389,7 @@ Starlight는 목록 및 테이블과 같은 다른 모든 Markdown 작성 구문 ## 고급 Markdown 및 MDX 구성 -Starlight는 remark 및 rehype를 기반으로 구축된 Astro의 Markdown 및 MDX 렌더러를 사용합니다. Astro 구성 파일에 `remarkPlugins` 또는 `rehypePlugins`를 추가하여 사용자 정의 구문 및 동작에 대한 지원을 추가할 수 있습니다. 자세한 내용은 Astro 문서의 [Markdown 및 MDX 구성](https://docs.astro.build/ko/guides/markdown-content/#configuring-markdown-and-mdx)을 참조하세요. +Starlight는 remark 및 rehype를 기반으로 구축된 Astro의 Markdown 및 MDX 렌더러를 사용합니다. Astro 구성 파일에 `remarkPlugins` 또는 `rehypePlugins`를 추가하여 사용자 정의 구문 및 동작에 대한 지원을 추가할 수 있습니다. 자세한 내용은 Astro 문서의 [Markdown 플러그인](https://docs.astro.build/ko/guides/markdown-content/#markdown-플러그인)을 참조하세요. ## Markdoc diff --git a/docs/src/content/docs/ko/reference/icons.mdx b/docs/src/content/docs/ko/reference/icons.mdx new file mode 100644 index 00000000000..8b197a2a36e --- /dev/null +++ b/docs/src/content/docs/ko/reference/icons.mdx @@ -0,0 +1,19 @@ +--- +title: 아이콘 참조 +description: Starlight에서 사용할 수 있는 모든 아이콘에 대한 개요입니다. +--- + +Starlight는 `` 컴포넌트를 사용하여 콘텐츠에 표시할 수 있는 내장 아이콘 세트를 제공합니다. + +## 아이콘 사용 + +아이콘은 [``](/ko/components/icons/) 컴포넌트를 사용하여 표시할 수 있습니다. +또한 [카드](/ko/components/cards/)와 같은 다른 컴포넌트나 [히어로 액션](/ko/reference/frontmatter/#hero)과 같은 설정에서도 자주 사용됩니다. + +## 모든 아이콘 + +사용 가능한 모든 아이콘의 목록과 관련 이름이 아래에 나와 있습니다. 아이콘을 클릭하면 해당 이름을 클립보드에 복사할 수 있습니다. + +import IconsList from '~/components/icons-list.astro'; + +