Writing UI 컴포넌트 쇼케이스

MDX 문서 작성을 위한 아름다운 UI 컴포넌트들을 소개합니다. 이 페이지에서는 각 컴포넌트의 실제 사용 예시를 확인할 수 있습니다.

1. Callout 컴포넌트

다양한 타입의 메시지를 표시하는 데 사용됩니다.

2. CodeBlock 컴포넌트

코드를 아름답게 표시하고 복사 기능을 제공합니다. 일반 마크다운 코드 블록(```) 을 사용하면 자동으로 CodeBlock 컴포넌트로 렌더링됩니다.

import React from 'react';

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  variant?: 'primary' | 'secondary';
}

export function Button({
  children,
  onClick,
  variant = 'primary',
}: ButtonProps) {
  return (
    <button
      onClick={onClick}
      className={`px-4 py-2 rounded ${
        variant === 'primary'
          ? 'bg-blue-500 text-white'
          : 'bg-gray-200 text-gray-800'
      }`}
    >
      {children}
    </button>
  );
}

npm install @/components/writing-ui
# 또는
yarn add @/components/writing-ui

3. Steps 컴포넌트

단계별 가이드를 만들 때 사용합니다.

</Step>

{' '}
<Step title='컴포넌트 설정'>
writing-ui 컴포넌트를 프로젝트에 복사합니다.
<Callout type='info' title='팁'>
  components/writing-ui 폴더를 프로젝트 루트의 components 폴더에 복사하세요.
</Callout>
</Step>

<Step title='사용 시작'>
  이제 MDX 파일에서 컴포넌트를 Import 없이 사용할 수 있습니다! ```mdx
  <Callout type='success' title='완료!'>
    설정이 완료되었습니다.
  </Callout>

4. Tabs 컴포넌트

여러 내용을 탭으로 구분해서 표시할 때 사용합니다.

import React from 'react'

function App() {
  return (
    <div>
      <h1>Hello React!</h1>
      <button onClick={() => alert('Hello!')}>클릭하세요</button>
    </div>
  )
}

export default App

5. Card 컴포넌트

정보를 카드 형태로 표시할 때 사용합니다.

6. Blockquote 컴포넌트

인용문을 표시할 때 사용합니다.

Stay hungry, stay foolish.

대부분의 사람들은 기술의 변화를 과대평가하고, 장기적 영향을 과소평가한다.

7. Badge 컴포넌트

라벨이나 상태를 표시할 때 사용합니다.

8. Reference 컴포넌트

참고자료를 표시할 때 사용합니다.

컴포넌트 조합 예시

여러 컴포넌트를 조합해서 사용하는 예시입니다.

NEXT_PUBLIC_API_KEY=your_api_key_here

const response = await fetch('/api/data', {
  headers: {
    'Authorization': 'Bearer ' + process.env.API_KEY
  }
})

9. 표 (Table)

MDX에서 GitHub Flavored Markdown 표 구문을 사용할 수 있습니다.

기본 표

정렬된 표

복잡한 표