MDX Kitchen Sink

🔔 Typography

(1) Headings

Heading은 1부터 6까지 구성되어 있습니다.

heading1 - #

heading2 - ##

heading3 - ###

heading4 - ####

heading5 - #####

heading6 - ######

(2) Paragraph

일반적인 본문 텍스트입니다.

두 번째 문단입니다. 문단 사이의 간격이 적절한지 확인합니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

(3) Emphasis

이것은 bold 텍스트입니다.

이것은 italic 텍스트입니다.

이것은 bold italic 텍스트입니다.

이것은 strikethrough 텍스트입니다.

(4) Links

내부 링크는 같은 탭에서 열립니다.

외부 링크는 새 탭에서 열립니다.

(5) Lists

Unordered List

• 첫 번째 항목
• 두 번째 항목
  • 중첩 항목 A
  • 중첩 항목 B
    • 더 깊은 중첩
• 세 번째 항목

Ordered List

1. React 컴포넌트 설계
2. 상태 관리 구현
   1. 로컬 상태 정의
   2. 전역 상태 연결
3. 스타일링 적용
4. 테스트 작성

Task List

• 프로젝트 초기 설정
• 라우팅 구현
• 다크 모드 최적화
• 배포

(6) Blockquote

좋은 코드는 그 자체로 최고의 문서다. 주석을 달려고 할 때, 스스로에게 물어봐라. "이 주석이 필요 없도록 코드를 개선할 수 없을까?"

— Steve McConnell

갑자기 뼈맞기...

(7) Inline Code

npm install 명령어로 패키지를 설치합니다. 컴포넌트에서 useState와 useEffect를 조합하면 대부분의 상태 관리를 처리할 수 있습니다. 파일 경로는 src/components/mdx/callout.tsx처럼 표시됩니다.

(8) Code Block

import { useState } from "react";
 
interface CounterProps {
  initial?: number;
}
 
export function Counter({ initial = 0 }: CounterProps) {
  const [count, setCount] = useState(initial);
 
  return (
    <button
      onClick={() => setCount((c) => c + 1)}
      className="rounded-lg bg-accent px-4 py-2 text-white"
    >
      Count: {count}
    </button>
  );
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

# 개발 서버 실행
pnpm dev
 
# 프로덕션 빌드
pnpm build && pnpm start

(9) Table

(10) Image

🔔 Custom Components

(11) Callout — Info (기본)

Callout — Info with Title

Callout — Warning

Callout — Success

Callout — Danger

🔔 조합 테스트

(12) 코드 블록 + Callout

<Callout variant="info" title="제목">
  콜아웃 내용을 여기에 작성합니다.
</Callout>

(13) 리스트 + Bold + Code

• compileMDX로 MDX 문자열을 React Elements로 변환
• mdxComponents에 등록된 컴포넌트를 자동 매핑
• Tailwind Typography의 prose 클래스로 기본 스타일 적용

(14) Blockquote + Link

MDX를 사용하면 마크다운 안에서 React 컴포넌트를 자유롭게 사용할 수 있습니다. 이 블로그는 next-mdx-remote를 통해 서버 사이드에서 MDX를 컴파일합니다.