card debug map

카드 목록 문제는 데이터 흐름과 스타일 책임을 나눠 추적한다

필터가 틀렸는지, props가 비었는지, CSS 모듈과 동적 색상 중 어디가 깨졌는지 순서대로 좁히면 실습 오류를 빠르게 찾을 수 있다.

값 이동 순서

data state filter props style
CardList

상태와 필터

category 버튼 클릭이 filterCategory를 바꾸고 filteredCards를 다시 계산하는지 확인한다.

CardItem

props 렌더링

title, description, imgUrl, category가 모두 내려오는지 먼저 본다.

module

카드 내부 스타일

styles.card, styles.cardImage처럼 모듈 객체의 키가 실제 클래스와 맞는지 점검한다.

inline

배지 색상

categoryColorMap에 없는 카테고리는 기본 색으로 내려가는지 확인한다.