1
mockCards가 화면의 원본 데이터
title, description, category, imgUrl이 카드 하나의 표시 단위가 된다.
{ id, title, description, category, imgUrl }
데이터와 상태가 렌더링을 결정
2
filterCategory가 목록을 좁힘
필터 버튼을 누르면 상태가 바뀌고, `filteredCards.map`이 다시 렌더링할 카드만 남긴다.
3
CardItem이 카드 단위 UI를 담당
데이터 한 개가 `CardItem`의 props로 들어가고, 제목, 설명, 이미지, 카테고리 배지로 분해된다.
스타일 책임을 섞되 역할은 분리
A
CardsContainer는 그리드와 반응형
Styled-components 안의 `grid-template-columns`와 media query가 3열, 2열, 1열 전환을 만든다.
B
CardItem.module.css는 카드 내부 스코프
`.card`, `.cardImage`, `.cardContent`가 컴포넌트 내부에서만 유효하므로 이름 충돌을 피한다.
C
categoryColorMap은 동적 배지 색상
카테고리 값에 따라 작은 인라인 스타일만 바꾸고, 카드의 기본 구조는 CSS 모듈에 맡긴다.