원문: https://github.com/facebook/astryx/wiki/Bug-Bash · 번역 기준: 2026-09-03

2026년 2월 bug bash에서 증류한 품질 패턴 — 사람들이 한 방에 모여 실제로 컴포넌트를 사용해 보며 발견한 것들입니다.

이것은 리뷰 체크리스트가 아닙니다. PR을 리뷰하거나 컴포넌트를 감사할 때는 Component Audit Rubric을 사용하세요: 같은 내용을 severity, 강제 메커니즘, 항목별 점수와 함께 다룹니다. 이 페이지는 무엇이 잘못되기 쉬운가를 담은 것으로, 보기 전에 안목을 벼리는 용도로 읽으세요.

Storybook

• 유한한 값을 가진 모든 prop에, 컴포넌트를 실제로 업데이트하는 동작하는 control이 있다
• 설명(description)이 존재하고, 사람이 직접 작성했으며, 컴포넌트가 무엇을 하는지 설명한다
• 스토리 상단의 코드 예시가 올바르게 렌더링된다 (파싱 문제 없음)
• 모든 prop variant, status 상태, loading 상태에 최소 하나의 스토리가 있다
• 인터랙티브 동작이 시연된다 (스크롤, 드래그, 토글)

간격과 크기 (Spacing & Sizing)

• padding, height, border-radius 값이 디자인 token과 정확히 일치한다
• 크기 variant(sm/md/lg)의 시각적 진행이 자연스럽다 — 튀는 구간 없음
• 클릭 가능 영역이 형제 요소들과 일관된다; nav 항목의 edge padding이 균일하다

Prop API

• 비슷한 prop은 컴포넌트 간에 같은 이름을 쓴다 (onChange / onValueChange / changeAction을 섞지 않는다)
• 상호 배타적인 boolean들은 하나의 enum이어야 한다
• Field를 사용하는 모든 폼 요소는 같은 field 수준 prop(description, status, statusMessage)을 노출한다
• isLabelHidden은 레이블만이 아니라 레이블에 인접한 모든 콘텐츠를 숨긴다

시각 (Visual)