InformationCard
섹션 안에서 하나의 하위 주제를 독립적으로 보여주는 정보 카드입니다. 제목, 보조 라벨, 우측 액션, 본문 영역으로 구성되며, 본문에는 리스트, 표, 요약 정보, 상세 설명 등 하나의 맥락으로 묶인 콘텐츠를 담습니다.
import { InformationCard } from "@/shared/ui/widget"인터랙티브 데모
기업 기본 정보2
기업명
디캠프
대표자
홍길동
tsx
<InformationCard
title="기업 기본 정보"
label={2}
collapsible
>
<div className="flex flex-col gap-1">
<Info label="기업명">디캠프</Info>
<Info label="대표자">홍길동</Info>
</div>
</InformationCard>Variants
라벨, 접기/펼치기, 콘텐츠 유무에 따른 다양한 조합입니다.
기업 기본 정보
기업명
디캠프
대표자
홍길동
투자 이력3
총 투자 금액
10억 원
투자 라운드
Series A
투자 기관
D벤처캐피탈
재무 정보2
매출액
50억 원
영업이익
8억 원
재무 정보2
매출액
50억 원
영업이익
8억 원
메모비어 있음
Props
InformationCard
| Prop | Type | Required | Default | 설명 |
|---|---|---|---|---|
title | string | ✓ | — | 카드 제목 |
label | ReactNode | — | — | 제목 옆 보조 라벨 (예: 카운트 뱃지) |
action | ReactNode | — | — | 우측 액션 영역 (collapsible 사용 시 기본 토글 버튼 자동 제공) |
collapsible | boolean | — | false | 콘텐츠 접기/펼치기 활성화 |
defaultOpen | boolean | — | true | 초기 펼침 상태 (collapsible일 때만 유효) |
children | ReactNode | — | — | 본문 콘텐츠 |
className | string | — | — | 추가 CSS 클래스 |