그리드·리스트·테이블 3종 뷰토글과 group-data variant 전환 기법입니다.
그리드·리스트·테이블 사이를 전환하는 목록 상단 뷰토글입니다. 그리드/리스트는 카드 마크업을 공유하고, 테이블만 별도 컴포넌트로 교체됩니다.
신규 합류자가 첫 주에 완료해야 할 항목을 단계별로 정리합니다.
태그 푸시 시 CHANGELOG를 자동 생성하는 CI 구성을 설명합니다.
색상·간격·타이포 토큰을 일관되게 명명하는 규칙입니다.
서비스 장애 발생 시 1차 대응자가 따라야 할 절차입니다.
엔드포인트별 호출 제한과 초과 시 처리 방식을 안내합니다.
이번 릴리스의 주요 변경점과 마이그레이션 가이드입니다.
const [view, setView] = useState<"grid" | "list" | "table">("grid")
{view === "table" ? (
<ContentTable items={items} />
) : (
<ul data-view={view} className="group/feed grid grid-cols-1 gap-3 data-[view=grid]:sm:grid-cols-2">
{items.map((item) => (
<li key={item.id}><ContentCard item={item} /></li>
))}
</ul>
)}동일한 ContentCard 마크업이 조상의 data-view 값만 다를 때 어떻게 레이아웃이 바뀌는지 나란히 비교합니다.
data-view="grid"
신규 합류자가 첫 주에 완료해야 할 항목을 단계별로 정리합니다.
data-view="list"
신규 합류자가 첫 주에 완료해야 할 항목을 단계별로 정리합니다.
/* ContentCard.tsx — 카드 하나에 두 레이아웃이 공존한다 */
<div className="flex flex-col gap-2 p-4
group-data-[view=list]/feed:flex-row
group-data-[view=list]/feed:items-center
group-data-[view=list]/feed:gap-4
group-data-[view=list]/feed:p-3"
>
{/* ... */}
</div>