i18n(ko-KR): create tabs.mdx (#2361)

Co-authored-by: HiDeoo <[email protected]>
withastro · Sep 19, 2024 · c74a19e · c74a19e
1 parent 210aba3
commit c74a19e
Showing 1 changed file with 221 additions and 0 deletions.
diff --git a/docs/src/content/docs/ko/components/tabs.mdx b/docs/src/content/docs/ko/components/tabs.mdx
@@ -0,0 +1,221 @@
+---
+title: 탭
+description: Starlight에서 탭 인터페이스를 만들어 동등한 정보를 그룹화하는 방법을 알아보세요.
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+탭 인터페이스를 만들려면 `<Tabs>` 및 `<TabItem>` 컴포넌트를 사용합니다.
+탭은 사용자가 여러 옵션 중 하나만 확인해야 하는 경우 동등한 정보를 그룹화하는 데 유용합니다.
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<Tabs slot="preview">
+	<TabItem label="별">시리우스, 베가, 베텔게우스</TabItem>
+	<TabItem label="달">이오, 유로파, 가니메데</TabItem>
+</Tabs>
+
+</Preview>
+
+## 가져오기
+
+```tsx
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+```
+
+## 사용
+
+탭 인터페이스는 `<Tabs>` 및 `<TabItem>` 컴포넌트를 사용하여 표시합니다.
+각 `<TabItem>`에는 사용자에게 표시할 [`label`](#label)이 있어야 합니다.
+
+<Preview>
+
+```mdx
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+<Tabs>
+	<TabItem label="별">시리우스, 베가, 베텔게우스</TabItem>
+	<TabItem label="달">이오, 유로파, 가니메데</TabItem>
+</Tabs>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% tabs %}
+{% tabitem label="별" %}
+시리우스, 베가, 베텔게우스
+{% /tabitem %}
+
+{% tabitem label="달" %}
+이오, 유로파, 가니메데
+{% /tabitem %}
+{% /tabs %}
+```
+
+</Fragment>
+
+<Tabs slot="preview">
+	<TabItem label="별">시리우스, 베가, 베텔게우스</TabItem>
+	<TabItem label="달">이오, 유로파, 가니메데</TabItem>
+</Tabs>
+
+</Preview>
+
+### 탭 동기화
+
+[`syncKey`](#synckey) 속성을 추가하여 여러 탭 그룹을 동기화된 상태로 유지합니다.
+
+`syncKey` 값이 같은 페이지의 모든 `<Tabs>`는 동일한 활성 레이블을 표시합니다.
+이렇게 하면 독자가 운영 체제나 패키지 관리자 등을 한 번 선택하면 페이지 탐색 간 선택한 내용이 유지되는 것을 확인할 수 있습니다.
+
+관련 탭을 동기화하려면 각 `<Tabs>` 컴포넌트에 동일한 `syncKey` 속성을 추가하고 모두 동일한 `<TabItem>` 레이블을 사용하는지 확인하세요.
+
+<Preview>
+
+```mdx 'syncKey="별자리"'
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+_별:_	
+
+<Tabs syncKey="별자리">	
+	<TabItem label="오리온자리">벨라트릭스, 리겔, 베텔게우스</TabItem>	
+	<TabItem label="쌍둥이자리">폴룩스, 캐스터 A, 캐스터 B</TabItem>	
+</Tabs>	
+
+_외계 행성:_	
+
+<Tabs syncKey="별자리">	
+	<TabItem label="오리온자리">HD 34445 b, 글리제 179 b, Wasp-82 b</TabItem>	
+	<TabItem label="쌍둥이자리">폴룩스 b, HAT-P-24b, HD 50554 b</TabItem>	
+</Tabs>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc 'syncKey="별자리"'
+_별:_
+
+{% tabs syncKey="별자리" %}
+{% tabitem label="오리온자리" %}
+벨라트릭스, 리겔, 베텔게우스
+{% /tabitem %}
+
+{% tabitem label="쌍둥이자리" %}
+폴룩스, 캐스터 A, 캐스터 B
+{% /tabitem %}
+{% /tabs %}
+
+_외계 행성:_
+
+{% tabs syncKey="별자리" %}
+{% tabitem label="오리온자리" %}
+HD 34445 b, 글리제 179 b, Wasp-82 b
+{% /tabitem %}
+
+{% tabitem label="쌍둥이자리" %}
+폴룩스 b, HAT-P-24b, HD 50554 b
+{% /tabitem %}
+{% /tabs %}
+```
+
+</Fragment>
+
+<Fragment slot="preview">
+
+_별:_	
+
+<Tabs syncKey="별자리">	
+	<TabItem label="오리온자리">벨라트릭스, 리겔, 베텔게우스</TabItem>	
+	<TabItem label="쌍둥이자리">폴룩스, 캐스터 A, 캐스터 B</TabItem>	
+</Tabs>	
+
+_외계 행성:_	
+
+<Tabs syncKey="별자리">	
+	<TabItem label="오리온자리">HD 34445 b, 글리제 179 b, Wasp-82 b</TabItem>	
+	<TabItem label="쌍둥이자리">폴룩스 b, HAT-P-24b, HD 50554 b</TabItem>	
+</Tabs>
+
+</Fragment>
+
+</Preview>
+
+### 탭에 아이콘 추가
+
+[Starlight의 내장 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 [`icon`](#icon) 속성을 사용하여 탭 항목에 아이콘을 포함하면 레이블 옆에 아이콘이 표시됩니다.
+
+<Preview>
+
+```mdx /icon="\w+"/
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+<Tabs>
+	<TabItem label="별" icon="star">
+		시리우스, 베가, 베텔게우스
+	</TabItem>
+	<TabItem label="달" icon="moon">
+		이오, 유로파, 가니메데
+	</TabItem>
+</Tabs>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc /icon="\w+"/
+{% tabs %}
+{% tabitem label="별" icon="star" %}
+시리우스, 베가, 베텔게우스
+{% /tabitem %}
+
+{% tabitem label="달" icon="moon" %}
+이오, 유로파, 가니메데
+{% /tabitem %}
+{% /tabs %}
+```
+
+</Fragment>
+
+<Tabs slot="preview">
+	<TabItem label="별" icon="star">
+		시리우스, 베가, 베텔게우스
+	</TabItem>
+	<TabItem label="달" icon="moon">
+		이오, 유로파, 가니메데
+	</TabItem>
+</Tabs>
+
+</Preview>
+
+## `<Tabs>` 속성
+
+**구현:** [`Tabs.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Tabs.astro)
+
+`<Tabs>` 컴포넌트는 여러 개의 `<TabItem>` 컴포넌트를 그룹화하고 다음과 같은 속성을 허용합니다:
+
+### `syncKey`
+
+**타입:** `string`
+
+여러 페이지에서 여러 탭 그룹을 동기화하는 데 사용되는 키입니다.
+
+## `<TabItem>` 속성
+
+**구현:** [`TabItem.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/TabItem.astro)
+
+탭 세트는 탭 항목으로 구성되며, 각 항목에는 다음과 같은 속성이 있습니다:
+
+### `label`
+
+**필수**  
+**타입:** `string`
+
+탭 항목에는 탭에 표시될 텍스트로 설정된 `label` 속성이 포함되어야 합니다.
+
+### `icon`
+
+**타입:** `string`
+
+각 탭 항목에는 [Starlight의 내장 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 `icon` 속성을 포함하여 레이블 옆에 아이콘을 표시할 수 있습니다.