yunkoo.dev

CompareBox

두 선택지의 차이를 나란히 비교합니다.

leftItems와 rightItems는 | 로 구분합니다. 두 선택지를 같은 기준으로 비교할 때 가장 읽기 좋습니다.

tone 사용 팁: 평범한 설명은 neutral, 참고 정보는 info, 좋은 결론은 success, 주의할 점은 warning, 위험한 작업은 danger를 먼저 떠올리면 됩니다. 자세한 기준은 tone 사용법에 모아두었습니다.

Preview

MDX

<CompareBox
  leftTitle="Markdown"
  rightTitle="MDX"
  leftItems="문서 작성에 집중|문법이 단순함"
  rightItems="컴포넌트 사용 가능|표현을 확장하기 좋음"
  leftTone="neutral"
  rightTone="info"
/>

More Examples

운영 방식 비교

MDX

<CompareBox
  leftTitle="수동 확인"
  rightTitle="자동 검증"
  leftItems="맥락을 직접 판단하기 좋음|시간이 더 걸림"
  rightItems="반복 작업에 강함|초기 설정이 필요함"
  leftTone="neutral"
  rightTone="success"
/>