MDX에서 표 대신 React 컴포넌트로 시각화하기: 설계와 패턴

## CLI 도구 비교
 
<CompareCard
  items={[
    { name: "ripgrep", strength: "속도", weakness: "옵션 기억 어려움" },
    { name: "ag", strength: "출력 가독성", weakness: "느림" },
  ]}
/>
 
위 도구들 중 ripgrep을 추천한다.

type CompareItem = {
  name: string;
  pros: string[];
  cons: string[];
};
 
export default function CompareCard({ items }: { items: CompareItem[] }) {
  return (
    <div className="grid md:grid-cols-2 gap-4 my-6">
      {items.map((item) => (
        <div key={item.name} className="rounded-lg border border-zinc-800 p-4">
          <h4 className="font-bold mb-2">{item.name}</h4>
          <div className="text-sm">
            <p className="text-emerald-400 mb-1">+ 장점</p>
            <ul className="space-y-1 mb-3">
              {item.pros.map((p) => <li key={p}>{p}</li>)}
            </ul>
            <p className="text-rose-400 mb-1">- 단점</p>
            <ul className="space-y-1">
              {item.cons.map((c) => <li key={c}>{c}</li>)}
            </ul>
          </div>
        </div>
      ))}
    </div>
  );
}

type FlowStep = { number: number; title: string; description: string };
 
export default function FlowCard({ steps }: { steps: FlowStep[] }) {
  return (
    <div className="space-y-3 my-6">
      {steps.map((step) => (
        <div key={step.number} className="flex gap-4">
          <div className="flex-shrink-0 w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold">
            {step.number}
          </div>
          <div>
            <h4 className="font-semibold">{step.title}</h4>
            <p className="text-sm text-zinc-400">{step.description}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

type Keyword = { key: string; desc: string };
 
export default function KeywordCard({ keywords }: { keywords: Keyword[] }) {
  return (
    <div className="grid md:grid-cols-2 gap-2 my-6">
      {keywords.map((kw) => (
        <div key={kw.key} className="flex gap-3 items-baseline rounded border border-zinc-800 p-3">
          <code className="font-mono text-sm bg-zinc-900 px-2 py-1 rounded text-amber-400">{kw.key}</code>
          <span className="text-sm">{kw.desc}</span>
        </div>
      ))}
    </div>
  );
}

type Bar = { label: string; value: number; max: number };
 
export default function BarCard({ bars }: { bars: Bar[] }) {
  return (
    <div className="space-y-2 my-6">
      {bars.map((b) => (
        <div key={b.label}>
          <div className="flex justify-between text-sm mb-1">
            <span>{b.label}</span>
            <span className="text-zinc-400">{b.value}/{b.max}</span>
          </div>
          <div className="h-2 bg-zinc-800 rounded">
            <div
              className="h-2 bg-blue-500 rounded"
              style={{ width: `${(b.value / b.max) * 100}%` }}
            />
          </div>
        </div>
      ))}
    </div>
  );
}

// ❌ 어색하다
<CompareCard>
  <CompareItem name="A">...</CompareItem>
  <CompareItem name="B">...</CompareItem>
</CompareCard>
 
// ✓ MDX 친화적
<CompareCard items={[
  { name: "A", ... },
  { name: "B", ... },
]} />

<div className="rounded-2xl border border-border bg-card-bg">
  <span className="text-text-primary">{value}</span>
  <span className="text-text-muted">{label}</span>
</div>

// src/components/MDXComponents.tsx
import CompareCard from "./CompareCard";
import FlowCard from "./FlowCard";
import KeywordCard from "./KeywordCard";
import BarCard from "./BarCard";
 
export const mdxComponents = {
  CompareCard,
  FlowCard,
  KeywordCard,
  BarCard,
};
 
// 사용처
<MDXRemote source={content} components={mdxComponents} />

<DataTableCard rows={[{ name: "A", value: 1 }]} />

options={{ blockJS: false }}