프로젝트 내 모든 컨텐츠 카드 컴포넌트 가이드
모든 기능을 on/off 조합하여 사용 가능
┌─────────────────────────────┐ │ [좌상단] [우상단] │ │ index rating │ │ selectable topRight │ │ saved Node │ │ │ │ 썸네일 이미지 │ │ │ │ [좌하단] [우하단] │ │ celebCount avgRating│ │ userCount checkbox │ │ ────그라데이션 오버레이──── │ └─────────────────────────────┘ │ 제목 / 작가 │ └─────────────────────────────┘
헤르만 헤세
<ContentCard title="..." creator="..." />유발 하라리
contentId="..." // 인원 구성 뱃지 자동 조회rating={4.7}onStatsClick={...}조지 오웰
올더스 헉슬리
selectableisSelected={...}onSelect={() => ...}클릭해서 선택/해제 테스트
크리스토퍼 놀란
rating={4.8}topRightNode={<Button />}닌텐도
saved아이유
recommendableuserContentId="..."작가명
aspectRatio="3/4"| Prop | 타입 | 슬롯 | 설명 |
|---|---|---|---|
selectable | boolean | 좌상단 | 체크박스 모드 |
saved | boolean | 좌상단 | 보관됨 뱃지 |
rating | number | 우상단 | 별점 뱃지 |
topRightNode | ReactNode | 우상단 | 커스텀 노드 |
celebCount | number | 좌하단 | 셀럽 수 뱃지 |
userCount | number | 좌하단 | 유저 수 (셀럽과 함께) |
avgRating | number | 우하단 | 평균 별점 |
bottomRightCheckbox | boolean | 우하단 | 일괄선택 체크박스 |
작가명
리뷰 내용이 여기에...
| 페이지 | 위치 | 카드 |
|---|---|---|
| 홈 | 기록관 프리뷰 | ContentCard |
| 검색 | 검색 결과 (콘텐츠) | ContentCard |
| 기록관 | 일반 콘텐츠 목록 | ContentCard |
| 기록관 | 자격증 섹션 | ContentCard |
| 관심 목록 | 일반 콘텐츠 | ContentCard |
| 관심 목록 | 자격증 섹션 | ContentCard |
| 컬렉션 상세 | 콘텐츠 선택 모달 | ContentCard |
| 작품 (지혜의 서가) | 공통 서가 | ContentCard |
| 작품 (지혜의 서가) | 길의 갈래 (분야별) | ContentCard |
| 작품 (지혜의 서가) | 오늘의 인물 | ContentCard |
| 작품 (지혜의 서가) | 시대의 작품 (시대별) | ContentCard |
| 셀럽 피드 | 셀럽 리뷰 피드 | ContentCard |
| 친구 활동 | 친구 활동 피드 | ContentCard |
| 알림 | 추천 알림 | RecommendationCard |
ContentCompactCard → ContentCard (saved, topRightNode 슬롯)SelectableContentCard → ContentCard (selectable 슬롯)RecordCard → ContentCard (리뷰 모드: headerNode, saved/addable)ScriptureCard → ContentCard (인라인 래퍼 패턴)ReviewCard → ContentCard (인라인 래퍼 패턴)CertificateCard → ContentCard (thumbnail 폴백: 그라데이션 배경 + 골드 스탬프)