컴포넌트 카탈로그

버튼, 카드, 그리드, 테이블, 오버레이를 조합해 반복 가능한 화면 블록을 구성합니다.

Action 컴포넌트

버튼과 링크는 사용자가 다음 행동을 이해하는 가장 직접적인 신호입니다. 같은 화면 안에서 primary action은 하나로 제한하고 보조 action은 시각적 무게를 낮추면 반복 업무 화면이 읽기 쉬워집니다.

- 링크와 버튼의 의미를 구분합니다.

- 위험 action은 확인 단계를 둡니다.

- 아이콘 버튼은 접근성 이름을 함께 둡니다.

카드는 반복되는 항목이나 독립된 도구를 담을 때 효과적입니다. 하지만 페이지 section 전체를 카드처럼 감싸면 화면이 무거워지므로 정보 단위와 레이아웃 단위를 구분해야 합니다.

- 반복 item에만 card를 우선 사용합니다.

- radius는 8px 이하로 유지합니다.

- 카드 내부에 또 다른 카드를 넣지 않습니다.

테이블, 리스트, badge, stat은 같은 데이터를 서로 다른 밀도로 보여줍니다. 사용자가 비교해야 하는 정보는 table로, 빠르게 훑는 정보는 list나 compact card로 구성하는 편이 좋습니다.

- 상태 값은 색만으로 구분하지 않습니다.

- 숫자는 단위와 기준일을 함께 보여줍니다.

- 긴 텍스트는 줄바꿈과 최대 폭을 지정합니다.

modal은 사용자의 주의를 잠시 고정해야 할 때만 사용합니다. 세부 조회나 긴 편집은 별도 route가 더 안정적이며, modal은 확인, 짧은 입력, 선택 보조에 적합합니다.

- 닫기와 취소 동작을 분리합니다.

- focus가 modal 안에 머무르게 합니다.

- 모바일에서 높이와 스크롤을 확인합니다.