[Nextra] Callout 컴포넌트

Nextra에서 Callout 컴포넌트

Nextra에서 Callout 컴포넌트는 읽는 사람에게 중요한 정보를 보여주는 기본 제공 컴포넌트이다.

---

 

Callout 컴포넌트의 사용방법

 

Default(기본)

import { Callout } from 'nextra/components'
 
<Callout emoji="👾">
  **스페이스 인베이더**는 니시카도 토모히로가 개발한 1978년 아케이드 게임입니다.
</Callout>

출력결과

Default(기본) 출력결과

---

Info(정보)

import { Callout } from 'nextra/components'
 
<Callout type="info" emoji="ℹ️">
  오늘은 금요일이에요.
</Callout>

출력결과

Info(정보) 출력결과

---

Warning(경고)

import { Callout } from 'nextra/components'
 
<Callout type="warning" emoji="⚠️">
  이 API는 곧 더 이상 사용되지 않습니다.
</Callout>

출력결과

Warning(경고)  출력결과

---

Error(에러)

import { Callout } from 'nextra/components'
 
<Callout type="error" emoji="️🚫">
  이것은 모든 것을 정지시킬 수 있는 위험한 에러입니다.
</Callout>

출력결과

Error(에러) 출력결과

---

 

Callout 컴포넌트는 다음과 같은 3가지 props를 사용한다.

1. Type (optional)

호출 유형은 아래와 같다.

 - Type: 'default' | 'info' | 'warning' | 'error'

 - Default: '기본값'

 

2. Emogi (optional)

Callout 컴포넌트에 표시할 아이콘입니다. 이 props를 사용하여 사용자 지정 아이콘을 표시할 수도 있다.

 - Type: ReactNode

 - 기본값: '💡'

 

3. Children (optional)

Callout 컴포넌트의 내용이다.

 - Type: ReactNode

 - 기본값: null