card debug map

카드 목록 오류는 데이터, 필터, props, 스타일 순서로 좁힌다

카드 실습에서 화면이 깨지면 한 번에 모두 고치려 하지 말고 값 이동 경로를 따라 확인합니다. 필터 상태와 CSS 모듈 키가 만나는 지점이 핵심입니다.

source

mockCards

원본 데이터의 id, title, category, imgUrl이 완전한지 봅니다.

filter

filteredCards

선택된 category와 비교 문자열이 같은 체계인지 확인합니다.

props

CardItem

카드 컴포넌트에 필요한 값이 props로 빠짐없이 내려갑니다.

style

module key

styles.card와 categoryColorMap이 렌더링 지점에서 함께 적용됩니다.

증상먼저 볼 곳조치
카드가 한 줄에 몰림CardsContainer grid 규칙repeat, minmax, media query 범위를 확인합니다.
스타일이 안 먹음module.css 이름과 import실제 export된 className 키만 연결합니다.
필터가 안 바뀜onClick, active, 비교값버튼 라벨과 category 값을 같은 문자열로 맞춥니다.
debug order

오류 위치는 화면에서 거꾸로 찾기보다 원본 데이터에서 필터, props, 스타일 적용 지점으로 이동하며 좁히는 편이 안전합니다.