ListCard

Dark Mode

클릭 가능한 리스트 아이템 카드. 기관/인물/그룹/검색결과 등 목록에서 반복되는 Flat Card 스타일 버튼. default(다단)와 compact(한 줄) 두 가지 모드를 지원하며, ListCardIcon·ListCardAvatar·ListCardDot 헬퍼로 좌측 비주얼을 구성합니다.

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

인터랙티브 데모

Mode

Visual

Options

tsx

<ListCard
  mode="default"
  visual={<ListCardAvatar text="테크" color="#FF5E27" />}
  title="테크스타트(주)"
  subtitle="TechStart Inc."
  description="AI 기반 기업 분석 솔루션"
  showChevron
  onClick={() => {}}
/>

Variants

다양한 사용처별 구성 예시

상태

기본 · hover · 선택 · 비활성

기본

Hover

선택

비활성

기관명

Org Name

Props

ListCard

Prop	Type	Required	Default	설명
`visual`	`ReactNode`	—	—	좌측 비주얼 영역 (ListCardIcon, ListCardAvatar, ListCardDot 등)
`title`	`string`	✓	—	제목
`subtitle`	`string`	—	—	부제목 (영문명, 직함 등) — default 모드만
`description`	`string`	—	—	설명 텍스트 (최대 2줄) — default 모드만
`badges`	`ReactNode`	—	—	뱃지 영역 (ContentBadge 등)
`meta`	`ReactNode`	—	—	우측 메타 정보 (건수, 날짜 등)
`footer`	`ReactNode`	—	—	하단 풋터 영역 — default 모드만
`actions`	`ReactNode`	—	—	보조 액션 (편집/삭제 등) — border-top 구분선 포함, default 모드만
`onClick`	`() => void`	—	—	클릭 핸들러 — 있으면 button 렌더링
`href`	`string`	—	—	링크 대상 — 있으면 next/link 렌더링
`mode`	`"default" \| "compact"`	—	"default"	표시 모드
`showChevron`	`boolean`	—	false	우측 셰브론(→) 표시
`bordered`	`boolean`	—	true	border 표시 — 흰색 바탕 목록에서 true, 배경색 위에서는 false
`selected`	`boolean`	—	false	선택 상태 (border-primary + bg-primary-10)
`disabled`	`boolean`	—	false	비활성 (opacity-50, cursor-not-allowed)
`className`	`string`	—	—	추가 CSS 클래스