card practice

프로필 카드 실습은 스타일링 전략을 역할별로 섞어 완성한다

반응형 카드 목록을 만들 때 전역 스타일, CSS 모듈, Styled-components, 동적 필터 스타일이 각자 맡는 책임을 구분합니다.

전역 토대

index.css에는 body 기본값, 앱 컨테이너, 공통 유틸리티처럼 넓게 쓰는 규칙을 둡니다.

카드 구조

CardList와 CardItem을 나누고 CSS 모듈로 카드 내부 스타일 충돌을 줄입니다.

필터 상태

선택된 카테고리는 state로 관리하고 버튼의 active 스타일은 props 기반으로 반영합니다.

layout

카드 목록이 Grid나 Flexbox로 폭에 따라 열 수를 바꾸는지 본다.

module

CardItem 전용 클래스가 CSS 모듈로 연결됐는지 확인한다.

filter

카테고리 선택이 목록 데이터와 버튼 스타일 모두에 반영된다.

mobile

모바일에서 카드 이미지와 텍스트가 세로 흐름으로 안정적인지 본다.