Info

Dark Mode

라벨과 콘텐츠를 함께 표시하는 정보 표시용 위젯입니다. 선택적 불릿 포인트와 라벨/콘텐츠 각각에 도움말 Tooltip을 설정할 수 있습니다.

import { Info } from "@/shared/ui/widget"

사용 컴포넌트:Tooltip

인터랙티브 데모

기업명

디캠프

Options

tsx

<Info
  label="기업명"
  labelTooltip="기업의 공식 등록 명칭입니다."
>
  디캠프
</Info>

불릿, Tooltip 조합에 따른 다양한 사용 예시입니다.

기업명

디캠프

기업명

디캠프

기업명

디캠프

투자 금액

5억 원

지분율

10.5%

children에 ReactNode를 전달하여 자유로운 콘텐츠를 표시할 수 있습니다.

상태

정상 운영 중

여러 Info를 세로로 나열하면 정보 목록을 구성할 수 있습니다.

기업명

디캠프

대표자

홍길동

설립일

2020.01.15

투자 금액

5억 원

Prop	Type	Required	Default	설명
`label`	`string`	✓	—	라벨 텍스트
`children`	`ReactNode`	✓	—	콘텐츠 영역 (문자열 또는 커스텀 JSX)
`showBullet`	`boolean`	—	true	좌측 주황색 불릿 포인트 표시 여부
`labelTooltip`	`ReactNode`	—	—	전달 시 라벨 옆에 도움말 아이콘 및 Tooltip 노출
`contentTooltip`	`ReactNode`	—	—	전달 시 콘텐츠 옆에 도움말 아이콘 및 Tooltip 노출
`className`	`string`	—	—	추가 CSS 클래스