목록 화면은 데이터, 필터, props, 스타일 책임을 분리해 읽는다
버튼 클릭은 필터 상태를 바꾸고, 남은 데이터만 자식 컴포넌트로 내려갑니다. 스타일은 전역 기본값, 목록 레이아웃, 컴포넌트 내부, 작은 동적 색으로 책임을 나누면 추적이 쉬워집니다.| 구간 | 맡는 책임 | 확인 기준 | 버그 단서 |
|---|---|---|---|
| mockCards | title, description, category, imgUrl 보유 | 원본 데이터 구조가 일정한가 | 필수 필드 누락과 잘못된 category |
| filterCategory | 버튼 클릭으로 필터 state 변경 | active 버튼과 filteredCards 일치 | 대소문자 불일치와 초기값 오류 |
| CardItem props | 남은 데이터 하나를 렌더링 |
key와 props 이름 확인
|
index key와 잘못된 구조 분해 |
| style scope | 전역, styled, module, inline 분리 | 변하는 값만 inline 처리 | 클래스 충돌과 과도한 inline style |
data
목록 원본의 필드 이름과 category 값을 먼저 봅니다.
state
필터 버튼이 어떤 state 값을 만드는지 확인합니다.
props
자식 컴포넌트가 받은 값만 렌더링하는지 추적합니다.
style
고정 스타일과 데이터 기반 색을 분리합니다.