# 컴포넌트

Onedocs는 MDX 파일에서 가져오기 없이 사용할 수 있도록 Fumadocs UI 컴포넌트 모음을 등록합니다.

## 컴포넌트 사용하기

MDX 콘텐츠에 `mdxComponents`을 전달하세요:

```tsx title="src/app/docs/[[...slug]]/page.tsx"
import { DocsPage, mdxComponents } from "onedocs";

// In your page component:
<MDX components={mdxComponents} />
```

`mdxComponents`에는 Fumadocs UI 기본 컴포넌트(앵커 링크가 있는 제목, 코드 블록, 링크, 이미지, 표, `Card`, `Cards` 및 `Callout`)와 `Tab`, `Tabs`, `Step`, `Steps`, `Accordion`, `Accordions`, `File`, `Folder`, `Files`, `ImageZoom` 및 `TypeTable`가 포함됩니다. 아래 예시는 모두 그대로 사용할 수 있습니다.

## 안내 상자

중요한 정보를 강조합니다. `type`은 `info`(기본값), `warn`, `error`, `success` 또는 `idea` 중 하나입니다:

```mdx
<Callout type="info">
  This is an informational callout.
</Callout>

<Callout type="warn">
  This is a warning callout.
</Callout>

<Callout type="error">
  This is an error callout.
</Callout>
```

`title`으로 제목을 추가하세요:

```mdx
<Callout type="warn" title="Breaking change">
  The `docs` option was removed in version 2.
</Callout>
```

## 탭

콘텐츠를 탭으로 구성합니다. 각 `Tab` `value`은 `items`의 항목 하나에 대응합니다:

```mdx
<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
  <Tab value="npm">npm install onedocs</Tab>
  <Tab value="yarn">yarn add onedocs</Tab>
  <Tab value="pnpm">pnpm add onedocs</Tab>
  <Tab value="bun">bun add onedocs</Tab>
</Tabs>
```

## 카드

카드 그리드로 다른 페이지에 연결하세요:

```mdx
<Cards>
  <Card title="Getting Started" href="/docs/getting-started">
    Learn how to set up Onedocs
  </Card>
  <Card title="Configuration" href="/docs/configuration">
    Configure your documentation
  </Card>
</Cards>
```

## 단계

번호가 매겨진 단계를 표시하세요:

```mdx
<Steps>
  <Step>Install Onedocs</Step>
  <Step>Create configuration</Step>
  <Step>Write documentation</Step>
</Steps>
```

## 아코디언

FAQ와 선택적 세부 정보를 접을 수 있는 콘텐츠로 표시합니다. 한 번에 항목 하나만 열립니다:

```mdx
<Accordions>
  <Accordion title="What is Onedocs?">
    Layouts, components and SEO helpers for documentation sites built with Next.js and Fumadocs.
  </Accordion>
  <Accordion title="How do I install it?">
    Follow the install step in Getting Started.
  </Accordion>
</Accordions>
```

## 파일

파일 트리를 표시하세요:

```mdx
<Files>
  <Folder name="content" defaultOpen>
    <Folder name="docs" defaultOpen>
      <File name="index.mdx" />
      <File name="getting-started.mdx" />
    </Folder>
  </Folder>
  <File name="onedocs.config.ts" />
</Files>
```

## 이미지 확대

클릭하면 전체 크기로 열리는 이미지입니다. `public/`의 이미지를 사용할 때는 `width` 및 `height`이 필요합니다:

```mdx
<ImageZoom src="/screenshot.png" alt="Dashboard" width={1200} height={800} />
```

## 타입 표

API의 props 또는 옵션을 문서화하세요:

```mdx
<TypeTable
  type={{
    title: {
      type: "string",
      description: "Site name shown in the navbar.",
    },
    description: {
      type: "string",
      description: "Used for meta tags and the home page.",
      default: "undefined",
    },
  }}
/>
```

## 추가 컴포넌트

`onedocs`의 `InstallBlock` 및 `CodeBlock`은 `mdxComponents`에 포함되지 않습니다. MDX에서 사용하려면 전달하는 객체에 추가하세요:

```tsx title="src/app/docs/[[...slug]]/page.tsx"
import { CodeBlock, DocsPage, InstallBlock, mdxComponents } from "onedocs";

// In your page component:
<MDX components={{ ...mdxComponents, InstallBlock, CodeBlock }} />
```

그 외 컴포넌트는 MDX 파일의 Fumadocs UI에서 가져오거나 같은 방식으로 추가하세요:

```ts
import { Banner } from "fumadocs-ui/components/banner";
import { InlineTOC } from "fumadocs-ui/components/inline-toc";
```

전체 목록은 [Fumadocs 문서](https://fumadocs.dev/docs/ui/components)를 참조하세요.