Viewport 의존성 제거를 통한 Component-level 반응형 설계 전환

Context

전역 Viewport 기반의 Media Queries는 컴포넌트가 배치될 실제 가용 공간을 반영하지 못하는 한계 존재. 이를 해결하기 위해 컨텍스트 기반의 CSS 클래스나 JavaScript ResizeObservers를 사용했으나, CSS 구조의 복잡도 증가와 런타임 성능 저하 문제 발생.

Technical Solution

• container-type 속성을 통한 부모 요소의 컨테이너 컨텍스트 정의
• @container 룰을 활용하여 뷰포트가 아닌 부모 요소의 크기에 반응하는 스타일링 구현
• Component-level 스타일링으로 전환하여 외부 환경에 독립적인 Atomic Component 구조 확보
• 부모 요소의 inline-size를 측정하여 자식 요소의 Layout-mode(예: flex-direction)를 동적으로 변경
• Ancestor-only Query 원칙을 통해 요소가 자기 자신의 크기를 측정하는 순환 참조 오류 방지