반응형

화면이 넓어도 사이드 패널이나 카드 안의 공간은 좁을 수 있습니다. PLY는 컴포넌트가 놓인 영역의 너비를 기준으로 줄바꿈하거나 내부 스크롤을 제공합니다.

디자인 원칙에 따라 반응형은 모든 컴포넌트에 적용합니다. 너비뿐 아니라 낮은 화면, 확대, 긴 콘텐츠, 입력 방식과 가상 키보드도 고려합니다. 아래 내용은 현재 구현 규칙이며, 모든 기기와 보조기기의 검증 완료를 의미하지 않습니다.

내용이 긴 경우

Button과 Badge는 주어진 너비 안에서 줄바꿈합니다. 한 줄일 때는 기존 크기를 유지하고, 여러 줄이면 내용에 맞춰 높이가 늘어납니다. List·Dialog·메뉴 등의 긴 주소나 공백 없는 이름도 표면 밖으로 넘치지 않게 줄바꿈합니다.

가로로 이어지는 UI

Table은 자체 가로 스크롤 영역을 갖습니다. 실제 table 요소와 캡션·셀의 의미는 유지하며 ref, className, style은 표에 전달합니다. 바깥 스크롤 영역의 속성은 containerProps로 설정할 수 있습니다.

Tabs·Toolbar·Menubar는 영역 내부에서 가로로 스크롤합니다. 키보드로 화면 밖 항목에 이동할 수 있고, Tabs는 코드로 선택값이 바뀌어도 해당 탭이 보이도록 스크롤합니다. 세로 방향을 지원하는 파트는 세로 배치를 사용합니다.

페이지 이동

Pagination은 숫자 버튼이 들어갈 공간이 부족하면 이전·다음 버튼과 페이지 입력칸을 표시합니다. 입력 후 Enter를 누르거나 입력칸을 벗어나면 이동합니다. 잘못된 입력은 현재 페이지로 되돌리고, 범위를 벗어난 숫자는 처음이나 마지막 페이지로 제한합니다.

페이지 수가 줄어 현재 페이지가 사라지면 선택 상태를 보정하고 onPageChange로 보정된 페이지를 전달합니다. 앱은 이 값을 실제 데이터 조회에 사용할 수 있습니다.

팝업

팝업은 화면에 남은 너비와 높이를 넘지 않도록 제한합니다. Portal은 선언된 영역의 테마와 글자 방향을 상속하며, Portal에 직접 지정한 data-theme가 있으면 해당 테마를 사용합니다.

Dialog·Alert Dialog·Drawer는 긴 내용을 내부에서 스크롤합니다. 화면이 낮아져도 마지막 작업 버튼까지 키보드로 이동하고, 닫은 후 적절한 위치로 포커스가 복귀하는지 확인합니다. 긴 본문의 Dialog는 initialFocus로 제목 등 읽기 시작점을 지정할 수 있습니다.

모바일 Sidebar는 긴 제목 영역의 높이를 제한하고 제목과 목록을 각각 스크롤합니다. 닫기 버튼과 탐색 목록에 접근할 공간을 유지합니다.

Toast는 본문과 액션이 들어갈 공간이 부족하면 줄을 바꾸고, 전체 높이가 화면을 넘으면 내부에서 스크롤합니다. 긴 설명의 주된 전달 수단으로 사용하지 말고 상세 내용은 본문이나 별도 화면에서 제공합니다.

컴포넌트 조합

Layout의 Stack, Inline, Grid, ControlGroup으로 간격과 줄 전환을 정합니다. Button·Badge는 내용 너비를 유지하므로 카드나 세로 배치에 넣어도 자동으로 가로 전체를 채우지 않습니다. 입력·선택은 가용 너비를 사용합니다.

스타일 우선순위

PLY는 theme → base → components → utilities 레이어 순서를 선언합니다. 기본 스타일은 components.ply-base, 개별 스타일은 components.ply에 둡니다. Tailwind 유틸리티나 레이어 밖의 사용자 CSS는 기본 스타일보다 우선합니다. !important 없이 크기·간격을 바꿀 수 있습니다.

프로젝트의 전역 reset은 @layer base에 둡니다. 예를 들어 레이어 밖의 button { font: inherit }은 모든 컴포넌트보다 우선하므로, 의도적인 사용자 스타일이 아니라면 base 레이어로 옮깁니다.