tone 사용법
tone은 컴포넌트의 감정을 정하는 값입니다. 내용의 성격에 맞춰 neutral, info, success, warning, danger 중 하나를 고릅니다.
처음에는 neutral은 일반 설명, info는 참고 정보, success는 완료/좋은 결론, warning은 주의, danger는 위험/실패 가능성으로 기억하면 충분합니다.
Preview
MDX
<Callout tone="info" title="정보">
독자가 알아두면 좋은 배경 설명을 적습니다.
</Callout>
<Callout tone="success" title="완료">
잘 끝난 작업이나 좋은 결론을 정리합니다.
</Callout>
<Callout tone="warning" title="주의">
놓치기 쉬운 확인 사항을 알려줍니다.
</Callout>More Examples
tone을 고르는 빠른 기준
neutral일반 메모, 차분한 정리, 강조가 크지 않은 보조 설명
info배경지식, 참고 설명, 팁, 독자가 알면 이해가 쉬워지는 정보
success완료된 작업, 좋은 결론, 권장 흐름, 긍정적인 회고
warning실수하기 쉬운 부분, 발행 전 확인, 놓치면 문제가 생길 수 있는 내용
danger삭제, 실패 가능성, 강한 주의가 필요한 위험한 작업
MDX
neutral: 일반 메모나 차분한 정리
info: 배경지식, 참고 설명, 팁
success: 완료, 좋은 결론, 권장 흐름
warning: 실수하기 쉬운 부분, 발행 전 확인
danger: 데이터 삭제, 실패 가능성, 강한 주의같은 문장을 tone만 바꿔 비교하기
MDX
<KeyPoint title="발행 전 확인" tone="info">
이미지를 올렸는지 확인합니다.
</KeyPoint>
<KeyPoint title="발행 전 확인" tone="warning">
이미지를 올리지 않으면 본문에서 깨져 보일 수 있습니다.
</KeyPoint>
<KeyPoint title="삭제 주의" tone="danger">
원격 브랜치를 지우기 전에는 반드시 대상 브랜치를 다시 확인합니다.
</KeyPoint>