MD - MDX

DX(Markdown with JSX)에 대해 자세히 설명해드리겠습니다:

• MDX의 기본 개념:
• Markdown과 JSX를 결합한 파일 형식
• .mdx 확장자를 사용
• Markdown의 간결한 문법과 React 컴포넌트의 강력함을 모두 활용 가능

  # 제목
  **굵은 글씨**
  *기울임*

  import { Button } from './Button';
  
  <Button>클릭하세요</Button>

  import { Meta } from "@storybook/blocks";
  
  <Meta title="Colors" />

  # 색상 가이드
  
  <ColorGrid
    title="Gray"
    colors={[
      { name: "gray-50", hex: "#f1f1f1" }
    ]}
  />

MDX의 장점:

• 문서와 코드의 통합
• 동적 콘텐츠 생성 가능
• 재사용 가능한 컴포넌트 활용
• 스타일링과 레이아웃의 유연성

주의사항:

• JSX 문법과 Markdown 문법의 충돌 주의
• 컴포넌트 import 시 경로 확인
• 스타일 적용 시 CSS-in-JS 방식 사용

실제 사용 예시 (Colors.mdx):mdx

1. 실제 사용 예시 (Colors.mdx):mdx

import { Meta } from "@storybook/blocks";

// 커스텀 컴포넌트 정의
export const ColorGrid = ({ title, colors }) => (
  <div>
    <h2>{title}</h2>
    {colors.map(color => (
      <div key={color.name}>
        <div style={{ backgroundColor: color.hex }} />
        <span>{color.name}</span>
      </div>
    ))}
  </div>
);

// 스토리 설정
<Meta title="Colors" />

// 마크다운 내용
# 색상 가이드

이 가이드는 프로젝트에서 사용하는 모든 색상을 보여줍니다.

// 컴포넌트 사용
<ColorGrid
  title="Gray"
  colors={[
    { name: "gray-50", hex: "#f1f1f1" }
  ]}
/>

인라인

  <div style={{ color: 'red' }}>텍스트</div>

tailwind

  <div className="text-red-500">텍스트</div>

mdx 파일구조

// 1. import 문
import { Meta } from "@storybook/blocks";

// 2. 컴포넌트 정의
export const MyComponent = () => { ... };

// 3. 스토리 설정
<Meta title="MyStory" />

// 4. 마크다운 내용
# 제목

// 5. 컴포넌트 사용
<MyComponent />

// 6. 스타일 정의
<style>
  {`
  .my-style { ... }
  `}
</style>