Styled 기준
styled 태그는 화면 구조 이름보다 재사용되는 UI 역할 이름으로 둡니다.
Styled-components 기초 UI 규칙
styled-components는 스타일을 컴포넌트 경계에 붙이지만, prop 설계와 theme 구조가 흐트러지면 CSS보다 더 숨기 어렵습니다.
Prop 기준
스타일 전용 prop은 DOM으로 새지 않게 transient prop이나 필터링을 씁니다.
Theme 기준
theme 객체는 색상 이름보다 의미 토큰 중심으로 구성합니다.
공통 컴포넌트와 페이지 전용 styled 선언을 같은 파일에 쌓지 않습니다.
간격과 색상은 theme에서 읽어 다크 모드 전환 비용을 줄입니다.
media query는 숨기기보다 breakpoint 기준을 공유합니다.