# BUWANG Design System

> 이륜차 정비소 통합 관리 플랫폼 부왕(BUWANG)의 디자인 시스템. 정비소 웹(React), 정비사 앱(Flutter), 라이더 앱(Flutter) 세 클라이언트의 토큰과 공용 컴포넌트를 코드에서 추출해 정리한다. 값은 앱마다 다를 수 있으며(통일 아님) 각 앱의 코드가 정본이다.

## 사용 규칙
- 새 화면·컴포넌트를 만들 때 아래 목록의 기존 컴포넌트와 토큰 이름을 우선 사용한다. 색·간격 hex/px 를 직접 쓰지 말고 토큰 이름으로 참조한다.
- 플랫폼을 먼저 확정한다: web(정비소 웹, React+AntD) / mechanic(정비사 앱, Flutter) / rider(라이더 앱, Flutter V1·V2).
- 상세 스펙은 아래 JSON 을 fetch 해 읽는다. 전체 마크다운은 llms-full.txt.

## 데이터
- [components.json](https://design.buwang.co.kr/data/components.json): 컴포넌트 211개 — id, platform, category, purpose, variants, props, tokens, sizes, file(레포 경로), usage_count, notes
- [tokens.json](https://design.buwang.co.kr/data/tokens.json): 플랫폼별 토큰(colors/typography/spacing/radii/shadows)
- [llms-full.txt](https://design.buwang.co.kr/llms-full.txt): 전체 스펙 마크다운
- [컴포넌트 카탈로그](https://design.buwang.co.kr/components), [파운데이션](https://design.buwang.co.kr/foundations)

## 정비소 웹 (web) — React 19 · Vite · Ant Design · 77개 · `apps/admin-web/src/components/design-system/`
- AssistantFab [버튼]: 작은 흰 원형 부품 도우미 열기 버튼. 포커스 복원용 ref와 expanded 상태를 전달한다. — `apps/admin-web/src/components/design-system/button/AssistantFab.tsx`
- Button [버튼]: 크기·색상·좌우 아이콘을 지원하는 공통 액션 버튼 — `apps/admin-web/src/components/design-system/button/Button.tsx`
- IconToggle [버튼]: 활성 상태를 aria-pressed로 표현하는 원형 아이콘 버튼 — `apps/admin-web/src/components/design-system/input/IconToggle.tsx`
- MascotHelperButton [버튼]: 마우스 진입과 키보드 포커스에 반응하는 투명 너트·부부 캐릭터 버튼 — `apps/design-site/public/characters/v2/mascot-button.js`
- AccidentToolbar [입력]: 3D 사고 견적 툴바 — 사고 유형 프리셋 칩 + 부위 토글 버튼 — `apps/admin-web/src/features/estimates/three3d/AccidentToolbar.tsx`
- CartDestinationPicker [입력]: 담은 부품을 어느 차량 묶음에 넣을지 고르는 선택기 — `apps/admin-web/src/features/partsCommerce/CartDestination.tsx`
- Checkbox [입력]: 숨겨진 네이티브 입력과 시각 체크박스로 구성된 체크 컨트롤 — `apps/admin-web/src/components/design-system/input/Checkbox.tsx`
- ChipGroup [입력]: 선택 칩 묶음 — 후보를 한 줄에 늘어놓고 하나를 고른다(소모품 바로 찾기·연식·내 차량) — `apps/admin-web/src/components/design-system/input/ChipGroup.tsx`
- ColourMark [입력]: 읽기 전용 색 견본. 알려진 hex만 표시하고 미상은 빗금 처리 — `apps/admin-web/src/components/design-system/layout/Workbench.tsx`
- Dropdown [입력]: 옵션 목록을 고르는 네이티브 셀렉트 — `apps/admin-web/src/components/design-system/input/Dropdown.tsx`
- EstimateModeSwitch [입력]: 견적 작성 표면 전환(일반 견적 ↔ 3D 견적) 세그먼트 — `apps/admin-web/src/features/estimates/EstimateModeSwitch.tsx`
- EstimatePhotoUploader [입력]: 견적 사진 첨부 — 새로 고른 파일과 이미 저장된 사진을 한 자리에서 다룬다 — `apps/admin-web/src/features/estimates/EstimatePhotoUploader.tsx`
- Field [입력]: 라벨 + 입력 한 칸 — 부품 커머스 폼의 기본 필드 — `apps/admin-web/src/features/partsCommerce/ui.tsx`
- FilterBar [입력]: 필터 필드와 초기화·조회 버튼을 묶는 검색 영역 — `apps/admin-web/src/components/design-system/filter/FilterBar.tsx`
- FormField [입력]: 입력 라벨·필수 표시·도움말·오류 문구를 묶는 폼 필드 — `apps/admin-web/src/components/design-system/input/FormField.tsx`
- SearchBar [입력]: 검색 입력과 선택적 추가 액션 버튼을 묶는 검색 폼 — `apps/admin-web/src/components/design-system/input/SearchBar.tsx`
- SuggestionListbox [입력]: 입력 아래에 뜨는 제안 목록 — 항목명 자동완성과 차량 후보가 함께 쓴다 — `apps/admin-web/src/features/estimates/SuggestionListbox.tsx`
- SwatchGroup [입력]: 색 견본 묶음 — 차량 도장 색처럼 눈으로 고르는 선택지를 한 줄에(ChipGroup 의 자매). 원형 견본 + 이름·코드 — `apps/admin-web/src/components/design-system/input/SwatchGroup.tsx`
- TextInput [입력]: 두 크기와 아이콘·비밀번호 표시 토글을 지원하는 텍스트 입력 — `apps/admin-web/src/components/design-system/input/TextInput.tsx`
- VehicleCombobox [입력]: 브랜드·모델을 직접 치면서 고르는 자동완성 콤보박스(별칭 검색 포함) — `apps/admin-web/src/features/partsCommerce/VehicleCombobox.tsx`
- VehicleEditor [입력]: 브랜드·모델·연식을 한 벌로 받는 차량 입력기 — 부품을 찾을 대상 차량을 정한다 — `apps/admin-web/src/features/partsCommerce/VehicleSelection.tsx`
- VehiclePicker [입력]: 3D 견적 상단 차종 선택기 — 제조사 → 모델 → 연식 — `apps/admin-web/src/features/estimates/three3d/VehiclePicker.tsx`
- ViewModeToggle [입력]: 목록 보기 전환 — 리스트형·앨범형·카드형 아이콘 세그먼트 — `apps/admin-web/src/features/community/components/ViewModeToggle.tsx`
- EstimateStatusTag [배지]: 견적 상태(작성중·완료·발송됨·수락·거절·만료)를 같은 폭으로 보여 주는 배지 — `apps/admin-web/src/features/estimates/EstimateStatusTag.tsx`
- ProBadge [배지]: 프로 구독 전용 기능을 미리 표시하는 골드 배지 — `apps/admin-web/src/components/design-system/badge/ProBadge.tsx`
- ProSwitch [배지]: 프로 구독 중임을 '켜진 스위치'와 금관으로 알리는 상태 표시 버튼 — `apps/admin-web/src/components/design-system/badge/ProSwitch.tsx`
- Status [배지]: 부품 주문의 진행 상태 배지 한 개 + 보조 한 줄 — 정비소/판매자 관점을 같은 자리에서 바꿔 보여 준다 — `apps/admin-web/src/features/partsCommerce/ui.tsx`
- StatusBadge [배지]: 정비·예약 상태를 솔리드 색상 배지로 표시 — `apps/admin-web/src/components/design-system/badge/StatusBadge.tsx`
- BrandItem [카드]: 브랜드 이름을 작은 색상 점과 함께 표시하는 항목 — `apps/admin-web/src/components/design-system/card/BrandItem.tsx`
- CalloutFigure [카드]: 도면(분해도) 위 콜아웃 — 카탈로그에 이미 인쇄된 번호 위에 투명한 링을 얹어 누르게 한다(숫자를 다시 그리지 않는다). 좌표는 도면 폭·높이 비율(0~1) — `apps/admin-web/src/components/design-system/media/CalloutFigure.tsx`
- ChoiceTile [카드]: 고르는 타일 — 사진(아이콘) + 이름 + 보조 글 한 장. 카테고리·모델·차량처럼 여럿 중 하나를 그림으로 고른다. ChoiceTileGrid 가 열 수에 맞춰 늘어놓는다 — `apps/admin-web/src/components/design-system/card/ChoiceTile.tsx`
- EstimateSectionCard [카드]: 견적 작성 화면의 카드 섹션 — 제목·개수 배지·부제·오른쪽 슬롯 — `apps/admin-web/src/features/estimates/EstimateSectionCard.tsx`
- SectionCard [카드]: 제목과 우측 슬롯을 갖춘 표준 흰색 섹션 카드 — `apps/admin-web/src/components/design-system/layout/SectionCard.tsx`
- StaffCard [카드]: 직원 프로필과 월 정비·매출 통계를 표시하는 카드 — `apps/admin-web/src/components/design-system/card/StaffCard.tsx`
- StatCard [카드]: 지표 값·단위와 증감 추세를 표시하는 요약 카드 — `apps/admin-web/src/components/design-system/card/StatCard.tsx`
- TaskCard [카드]: 번호판·정비 작업·담당자·진행 상태를 표시하는 작업 카드 — `apps/admin-web/src/components/design-system/card/TaskCard.tsx`
- VehicleGroupView [카드]: 차량 묶음 머리글과 대표 사진 — 장바구니·주문이 차량 단위로 갈리는 자리 — `apps/admin-web/src/features/partsCommerce/VehicleGroupView.tsx`
- VehicleHeaderCard [카드]: 번호판·제조사 이미지·모델 정보를 표시하는 차량 헤더 — `apps/admin-web/src/components/design-system/card/VehicleHeaderCard.tsx`
- CellSlot [표]: 표 셀 안의 '버튼 자리' — 같은 칸이 상태에 따라 버튼 ⇄ 글자/배지로 바뀌어도 줄 높이가 안 튀게 양쪽을 같은 최소 높이 상자에 넣는다 — `apps/admin-web/src/components/design-system/table/CellSlot.tsx`
- DataTable [표]: 열 정의에 따라 데이터를 렌더하는 범용 HTML 테이블 — `apps/admin-web/src/components/design-system/table/DataTable.tsx`
- EstimateItemRows [표]: 견적 수리 항목 입력 표 — 항목명·작업·부품비·공임·수량·소계를 인라인으로 적는다 — `apps/admin-web/src/features/estimates/EstimateItemRows.tsx`
- GroupedOrderLines [표]: 차량별로 묶어 보여 주는 주문 품목 표 — `apps/admin-web/src/features/partsCommerce/GroupedOrderLines.tsx`
- ChartCard [차트]: 제목과 우측 슬롯을 갖춘 차트·표 콘텐츠 카드 — `apps/admin-web/src/components/design-system/chart/ChartCard.tsx`
- MenuBar [내비]: 쇼핑몰형 가로 메뉴바 — 항목을 누르면 아래에 패널이 열린다. 눌린 항목(진열 축)과 열린 패널을 따로 둔다 — `apps/admin-web/src/components/design-system/filter/MenuBar.tsx`
- Pagination [내비]: 페이지 번호·생략 기호·이전/다음 이동을 제공하는 페이지네이션 — `apps/admin-web/src/components/design-system/table/Pagination.tsx`
- PartNavigation [내비]: 고정 순서의 부위 목록. 선택은 primarySoft 배경과 왼쪽 표시선. — `apps/admin-web/src/components/design-system/filter/PartNavigation.tsx`
- SegmentedControl [내비]: 회색 바탕과 흰 선택 칸의 구매 대상·보기 전환. 방향키와 Home/End 지원. — `apps/admin-web/src/components/design-system/filter/SegmentedControl.tsx`
- TabBar [내비]: 아이콘 탭과 우측 액션 슬롯을 제공하는 탭 내비게이션 — `apps/admin-web/src/components/design-system/filter/TabBar.tsx`
- AlertBanner [피드백]: 주요 안내 문구와 선택적 이동 버튼을 표시하는 배너 — `apps/admin-web/src/components/design-system/feedback/AlertBanner.tsx`
- ErrorScreen [피드백]: 전체 화면 오류 상태 — 제목·설명·복구 버튼 한 벌 — `apps/admin-web/src/components/ErrorScreen.tsx`
- Loading [피드백]: 불러오는 중 / 실패 상태 한 벌 — 실패일 때만 다시 불러오기 버튼 — `apps/admin-web/src/features/partsCommerce/ui.tsx`
- Note [피드백]: 부품 커머스의 한 줄 안내·오류문 — `apps/admin-web/src/features/partsCommerce/ui.tsx`
- NotificationItem [피드백]: 알림 심각도·내용·시간·읽음 여부를 표시하는 목록 행 — `apps/admin-web/src/components/design-system/feedback/NotificationItem.tsx`
- AnchoredOverlay [오버레이]: 작업대를 밀지 않는 포털 메뉴. 화면 경계 보정, 포커스 순환, Esc·바깥 클릭 닫기, 150ms 페이드. — `apps/admin-web/src/components/design-system/overlay/AnchoredOverlay.tsx`
- AssistantDock [오버레이]: 부품 도우미 독 — 화면 오른쪽 아래에 떠 있는 부품 찾기·담기 패널 — `apps/admin-web/src/features/partsCommerce/AssistantDock.tsx`
- CascadeMenu [오버레이]: 글자 경로와 검색 가능한 단계별 캐스케이드 메뉴. hover 미리보기, 키보드 탐색, 1100px 이하 두 열. — `apps/admin-web/src/components/design-system/overlay/CascadeMenu.tsx`
- MediaLightbox [오버레이]: 이미지·동영상을 크게 보고 이전·다음 항목으로 이동하는 뷰어 — `apps/admin-web/src/components/design-system/overlay/MediaLightbox.tsx`
- Modal [오버레이]: 제목·본문·확인/취소 버튼을 제공하는 공통 대화상자 — `apps/admin-web/src/components/design-system/overlay/Modal.tsx`
- Overlay [오버레이]: 화면을 덮는 배경과 중앙 정렬 콘텐츠를 제공하는 오버레이 — `apps/admin-web/src/components/design-system/overlay/Overlay.tsx`
- PhotoLightbox [오버레이]: 단일 사진을 화면 중앙에서 크게 보는 이미지 뷰어 — `apps/admin-web/src/components/design-system/overlay/PhotoLightbox.tsx`
- ChartContainer [레이아웃]: 대시보드 차트 섹션을 세로로 쌓는 컨테이너 — `apps/admin-web/src/components/design-system/chart/ChartContainer.tsx`
- ChartRow [레이아웃]: 최소 아이템 너비를 기준으로 자동 줄바꿈하는 차트 그리드 행 — `apps/admin-web/src/components/design-system/chart/ChartContainer.tsx`
- EstimateFormPanel [레이아웃]: 3D 견적의 실제 견적서 패널 — 차량 선택 + 담긴 항목 인라인 편집 + 합계 + 저장 — `apps/admin-web/src/features/estimates/three3d/EstimateFormPanel.tsx`
- OemPartsPanel [레이아웃]: 3D 견적 부품 패널(DB OEM) — 고른 부위의 순정 부품·파츠넘버를 눌러 견적에 담는다 — `apps/admin-web/src/features/estimates/three3d/OemPartsPanel.tsx`
- PageContainer [레이아웃]: 페이지 섹션을 공통 세로 간격으로 배치하는 루트 래퍼 — `apps/admin-web/src/components/design-system/layout/PageContainer.tsx`
- PageHeader [레이아웃]: 페이지 내부 제목·설명·아이콘과 우측 액션을 배치하는 헤더 — `apps/admin-web/src/components/design-system/layout/PageHeader.tsx`
- PartListPanel [레이아웃]: 3D 사고 견적의 부품 패널(정적 카탈로그) — 부위 → 부품 → 상세부품(번호·코드·가격) — `apps/admin-web/src/features/estimates/three3d/PartListPanel.tsx`
- SelectionPopover [레이아웃]: 페이지를 밀지 않는 앵커 선택 목록. Escape·바깥 클릭 닫기 — `apps/admin-web/src/components/design-system/layout/Workbench.tsx`
- Shell [레이아웃]: 부품 커머스 공통 셸 — 눈썹줄·제목·설명·역할 전환 링크 + 탭 내비 — `apps/admin-web/src/features/partsCommerce/ui.tsx`
- Stack [레이아웃]: 행·열 간격과 정렬 레이아웃 — `apps/admin-web/src/components/design-system/layout/Workbench.tsx`
- Text [레이아웃]: 강조·보조·상태·오류 텍스트 — `apps/admin-web/src/components/design-system/layout/Workbench.tsx`
- ThreeDEstimateWorkspace [레이아웃]: 3D 견적 작업대 — 참고 모델로 부위를 가리키고 실제 차량 기준 부품을 담는다 — `apps/admin-web/src/features/estimates/three3d/ThreeDEstimateWorkspace.tsx`
- Workbench [레이아웃]: 상단 선택 띠·부위·뷰어·관련 목록·하단 내역을 배치하는 반응형 작업대 — `apps/admin-web/src/components/design-system/layout/Workbench.tsx`
- Avatar [기타]: 이미지 또는 이니셜을 표시하는 원형 아바타 — `apps/admin-web/src/components/design-system/avatar/Avatar.tsx`
- CommentList [기타]: 댓글 목록 + 입력줄 — 커뮤니티 글과 장터 매물 상세가 함께 쓴다 — `apps/admin-web/src/features/community/components/CommentList.tsx`
- PartImage [기타]: 부품 사진 섬네일 — 사진이 없으면 '사진 준비 중' 자리표시로 대체 — `apps/admin-web/src/features/partsCommerce/PartCandidates.tsx`
- SentenceText [기타]: 문장 단위로 줄을 끊어 보여 주는 표시 전용 텍스트 래퍼 — `apps/admin-web/src/components/SentenceText.tsx`

## 정비사 앱 (mechanic) — Flutter · Riverpod · 58개 · `apps/mobile/lib/shared/widgets/`
- AcceptButton [버튼]: 예약 수락용 그라데이션 버튼. — `apps/mobile/lib/shared/widgets/buttons/accept_button.dart`
- ActionButtons [버튼]: 보조·주 액션을 같은 폭의 가로 버튼 두 개로 표시한다. — `apps/mobile/lib/shared/widgets/buttons/action_buttons.dart`
- BwDialogActions [버튼]: 다이얼로그의 확인·취소 액션을 한 행 또는 전폭 버튼으로 배치한다. — `apps/mobile/lib/shared/widgets/overlays/bw_dialog_actions.dart`
- BwLargeTextToggleButton [버튼]: 화면 상단에서 큰 글씨 모드를 즉시 켜고 끄는 텍스트형 퀵 액션 pill. — `apps/mobile/lib/shared/widgets/accessibility/bw_large_text_toggle_button.dart`
- BwOutlineButton [버튼]: 브랜드 색상 테두리와 라벨의 아웃라인 버튼. — `apps/mobile/lib/shared/widgets/buttons/outline_button.dart`
- BwScanButton [버튼]: 뷰파인더와 움직이는 스캔선을 갖춘 번호판 인식 진입 버튼. — `apps/mobile/lib/shared/widgets/cards/bw_scan_button.dart`
- FabButton [버튼]: 추가 액션용 원형 플로팅 버튼. — `apps/mobile/lib/shared/widgets/buttons/fab_button.dart`
- GhostButton [버튼]: 중립 색상 테두리와 라벨의 보조 버튼. — `apps/mobile/lib/shared/widgets/buttons/ghost_button.dart`
- PressableButton [버튼]: 버튼 크기·배경·테두리·비활성 스타일을 받는 공용 베이스. — `apps/mobile/lib/shared/widgets/buttons/pressable_button.dart`
- PrimaryCtaButton [버튼]: 주요 제출·진행 액션을 표시하는 로딩 지원 CTA. — `apps/mobile/lib/shared/widgets/buttons/primary_cta_button.dart`
- RejectButton [버튼]: 예약 거절용 빨간 라벨의 테두리 버튼. — `apps/mobile/lib/shared/widgets/buttons/reject_button.dart`
- BwBoxedTextField [입력]: 리스트 내부와 인라인 폼에 쓰는 박스형 텍스트 입력. — `apps/mobile/lib/shared/widgets/forms/bw_boxed_text_field.dart`
- BwChoiceChip [입력]: 작업 유형·결제 수단 등을 선택하는 pill 칩. — `apps/mobile/lib/shared/widgets/chips/bw_choice_chip.dart`
- BwCommentInputBar [입력]: 화면 하단에 댓글·채팅 입력과 전송 버튼을 배치한다. — `apps/mobile/lib/shared/widgets/forms/bw_comment_input_bar.dart`
- BwFilterTab [입력]: 목록 필터의 활성 상태를 pill 탭으로 표시한다. — `apps/mobile/lib/shared/widgets/forms/filter_tab.dart`
- BwInputField [입력]: 라벨·아이콘·검증 오류를 갖춘 폼 입력 필드. — `apps/mobile/lib/shared/widgets/forms/bw_input_field.dart`
- BwQuantityStepper [입력]: 최솟값·최댓값 범위에서 수량을 증감한다. — `apps/mobile/lib/shared/widgets/forms/bw_quantity_stepper.dart`
- BwSearchField [입력]: 검색어 입력과 지우기 액션을 제공하는 검색 필드. — `apps/mobile/lib/shared/widgets/forms/bw_search_field.dart`
- CollapsiblePriceInput [입력]: 금액 한 필드와 부품비·공임비 상세 입력 사이를 전환한다. — `apps/mobile/lib/shared/widgets/forms/collapsible_price_input.dart`
- NumberInputToolbar [입력]: 숫자 키보드 위에서 금액 추가와 필드 간 이동을 제공한다. — `apps/mobile/lib/shared/widgets/forms/number_input_toolbar.dart`
- BwStatusBadge [배지]: 예약·정비 상태를 색상과 라벨로 표시하는 pill 배지. — `apps/mobile/lib/shared/widgets/badges/status_badge.dart`
- TitleRarityBadge [배지]: 칭호 희귀도와 표시 문맥에 맞춰 색·글로우·쉬머를 표시한다. — `apps/mobile/lib/shared/widgets/profile/title_rarity_badge.dart`
- BwActionCard [카드]: 큰 아이콘과 짧은 문구로 주요 액션을 강조하는 카드. — `apps/mobile/lib/shared/widgets/cards/bw_action_card.dart`
- BwHistoryCard [카드]: 차량 정보와 정비 상태·시간을 표시하는 대시보드 이력 카드. — `apps/mobile/lib/shared/widgets/cards/history_card.dart`
- BwLargeTextSettingCard [카드]: 큰 글씨 모드를 설명하고 스위치로 켜고 끄는 설정 카드. — `apps/mobile/lib/shared/widgets/accessibility/bw_large_text_setting_card.dart`
- BwListTileCard [카드]: 제목·설명과 선택적 앞뒤 콘텐츠를 배치하는 리스트 카드. — `apps/mobile/lib/shared/widgets/cards/bw_list_tile_card.dart`
- BwMaintenanceTimeline [카드]: 정비 기록을 상태별 카드 목록과 선택적 날짜 구분으로 표시한다. — `apps/mobile/lib/shared/widgets/sections/bw_maintenance_timeline.dart`
- BwProfileCard [카드]: 프로필 사진·레벨·칭호·활동 통계를 세 가지 크기로 표시한다. — `apps/mobile/lib/shared/widgets/profile/bw_profile_card.dart`
- BwReservationCard [카드]: 예약 시간·상태·번호판·차종·요청 정비항목·고객 정보를 위계 순으로 보여주는 목록 카드. — `apps/mobile/lib/shared/widgets/cards/reservation_card.dart`
- BwTimelineHistoryCard [카드]: 정비 날짜·제목·금액·상태를 좌측 레일과 함께 표시하는 타임라인 한 행. — `apps/mobile/lib/shared/widgets/cards/bw_timeline_history_card.dart`
- BwVehicleBanner [카드]: 차량 사진·번호판·모델·주행거리를 브랜드 배너로 표시한다. — `apps/mobile/lib/shared/widgets/cards/bw_vehicle_banner.dart`
- MaintenanceCollapsedCard [카드]: 정비 항목을 접힌 그라데이션 카드와 완료 표시로 보여준다. — `apps/mobile/lib/shared/widgets/cards/maintenance_item_card.dart`
- MaintenanceExpandedHeader [카드]: 펼친 정비 항목 카드의 접기 가능한 상단 헤더. — `apps/mobile/lib/shared/widgets/cards/maintenance_item_card.dart`
- BwBackHeader [내비]: 뒤로가기와 제목·선택적 우측 콘텐츠를 표시하는 헤더. — `apps/mobile/lib/shared/widgets/headers/back_header.dart`
- BwBottomNavBar [내비]: 홈·정비 이력·차량 관리·부왕장터·설정의 하단 탐색 탭. — `apps/mobile/lib/shared/widgets/navigation/bottom_nav_bar.dart`
- BwSettingsMenuItem [내비]: 설정 메뉴의 아이콘·라벨·보조 콘텐츠·셰브론 행. — `apps/mobile/lib/shared/widgets/forms/settings_menu_item.dart`
- BwTopAppBarLogo [내비]: BUWANG 텍스트 로고와 알림·프로필 액션을 표시한다. — `apps/mobile/lib/shared/widgets/headers/top_app_bar_logo.dart`
- BwEmptyState [피드백]: 데이터가 없는 화면에 안내와 선택적 액션을 표시한다. — `apps/mobile/lib/shared/widgets/states/bw_empty_state.dart`
- BwErrorState [피드백]: 로드 실패 메시지와 필수 재시도 버튼을 표시한다. — `apps/mobile/lib/shared/widgets/states/bw_error_state.dart`
- BwInfoBanner [피드백]: 상태별 안내 메시지와 선택적 액션·닫기를 표시한다. — `apps/mobile/lib/shared/widgets/states/bw_info_banner.dart`
- BwLoadingState [피드백]: 화면 중앙에 로딩 표시와 선택적 메시지를 보여준다. — `apps/mobile/lib/shared/widgets/states/bw_loading_state.dart`
- BwOfflineBanner [피드백]: 네트워크가 끊겼을 때 빨간 연결 없음 배너를 표시한다. — `apps/mobile/lib/shared/widgets/states/bw_offline_banner.dart`
- BwScrollMoreHint [피드백]: 스크롤 아래쪽에 남은 콘텐츠가 있음을 화살표 배지로 알린다. — `apps/mobile/lib/shared/widgets/indicators/bw_scroll_more_hint.dart`
- BwToastMessage [피드백]: 성공·오류·경고 메시지를 하단 플로팅 토스트로 표시한다. — `apps/mobile/lib/shared/widgets/overlays/toast_message.dart`
- XpToast [피드백]: XP 획득과 레벨 상승을 상단 애니메이션 토스트로 알린다. — `apps/mobile/lib/shared/widgets/overlays/xp_toast.dart`
- BwBottomSheetMenu [오버레이]: 제목과 아이콘 메뉴 목록을 모달 하단 시트로 표시한다. — `apps/mobile/lib/shared/widgets/overlays/bottom_sheet_menu.dart`
- BwConfirmDialog [오버레이]: 질문 아이콘과 설명·확인·취소를 표시하는 공용 확인 팝업. — `apps/mobile/lib/shared/widgets/overlays/confirm_dialog.dart`
- BwLoadingOverlay [오버레이]: 중복 표시를 막으며 루트 내비게이터에 로딩 모달을 띄운다. — `apps/mobile/lib/shared/widgets/overlays/loading_overlay.dart`
- BwRejectReasonSheet [오버레이]: 예약 거절·취소 사유를 프리셋 또는 직접 입력으로 선택한다. — `apps/mobile/lib/shared/widgets/overlays/reject_reason_sheet.dart`
- ProfileDetailSheet [오버레이]: 공개 프로필·매너온도·거래 통계·후기를 하단 시트에서 보여준다. — `apps/mobile/lib/shared/widgets/profile/profile_detail_sheet.dart`
- TitleUnlockPopup [오버레이]: 칭호 해제를 축하하고 즉시 장착 또는 나중에 선택하게 한다. — `apps/mobile/lib/shared/widgets/profile/title_unlock_popup.dart`
- BwAmountRow [레이아웃]: 라벨과 원화 금액을 양끝 정렬하고 합계를 강조한다. — `apps/mobile/lib/shared/widgets/text/bw_amount_row.dart`
- BwReservationRow [레이아웃]: 대시보드 예약 요약의 시간·차량·서비스를 한 행에 표시한다. — `apps/mobile/lib/shared/widgets/sections/reservation_row.dart`
- BwSectionHeader [레이아웃]: 왼쪽 브랜드 막대와 우측 텍스트 액션이 있는 섹션 헤더. — `apps/mobile/lib/shared/widgets/sections/section_header.dart`
- BwSectionHeader [레이아웃]: 정비 요약 등에서 단순 섹션 제목 텍스트를 표시한다. — `apps/mobile/lib/shared/widgets/text/bw_section_header.dart`
- BwSectionLabel [레이아웃]: 섹션의 작은 디스플레이 라벨을 표시한다. — `apps/mobile/lib/shared/widgets/sections/section_label.dart`
- BwBottomSheetMenuItem [기타]: 하단 메뉴 항목의 아이콘·라벨·색·콜백을 전달하는 데이터 객체. — `apps/mobile/lib/shared/widgets/overlays/bottom_sheet_menu.dart`
- BwPressable [기타]: 앱 공통 탭·길게누르기 눌림 피드백을 적용하는 래퍼. — `apps/mobile/lib/shared/widgets/interaction/bw_pressable.dart`

## 라이더 앱 (rider) — Flutter · V1/V2 UI 공존 · 76개 · `apps/rider/lib/shared/widgets/`
- BwOutlineCtaV2 [버튼]: V2 링크색 테두리와 흰 배경의 보조 동작 버튼이다. — `apps/rider/lib/shared/widgets/buttons/bw_primary_cta_v2.dart`
- BwPrimaryCtaV2 [버튼]: 그라데이션과 로딩 표시를 제공하는 전체 폭 기본 동작 버튼이다. — `apps/rider/lib/shared/widgets/buttons/bw_primary_cta_v2.dart`
- PrimaryCtaButton [버튼]: 누름 축소 효과와 로딩 표시가 있는 기본 CTA를 표시한다. — `apps/rider/lib/shared/widgets/buttons/primary_cta_button.dart`
- BwBrandModelCascade [입력]: 제조사 선택에 따라 모델 선택을 연결하는 비동기 드롭다운을 표시한다. — `apps/rider/lib/shared/widgets/forms/bw_brand_model_cascade.dart`
- BwFilterTab [입력]: 목록 필터의 활성 상태를 캡슐 탭으로 표시한다. — `apps/rider/lib/shared/widgets/forms/filter_tab.dart`
- BwInputField [입력]: 라벨·아이콘·오류·비밀번호 가림 기능을 갖춘 입력 필드다. — `apps/rider/lib/shared/widgets/forms/bw_input_field.dart`
- BwOcrResultEditor [입력]: OCR 결과를 수정하고 저신뢰 항목 확인·재촬영·확정을 제공한다. — `apps/rider/lib/shared/widgets/ocr/bw_ocr_result_editor.dart`
- BwRatingStars [입력]: 별점 값을 별 아이콘으로 보여주거나 탭으로 선택한다. — `apps/rider/lib/shared/widgets/ratings/bw_rating_stars.dart`
- BwSosSymptomTile [입력]: 선택 상태와 위험 아이콘을 표시하는 SOS 증상 타일이다. — `apps/rider/lib/shared/widgets/bw_sos_symptom_tile.dart`
- BwTermsAgreementList [입력]: 전체동의와 개별 약관 체크·본문 펼치기를 제공한다. — `apps/rider/lib/shared/widgets/progress/bw_terms_agreement_list.dart`
- BwTextScaleSettingV2 [입력]: 앱 설정에서 큰 글씨 모드를 즉시 켜고 끄는 설명형 스위치 행이다. — `apps/rider/lib/shared/widgets/settings/bw_text_scale_setting_v2.dart`
- BwTimeSlotPicker [입력]: 예약 시간의 선택·마감 상태를 V1 또는 V2 스타일로 표시한다. — `apps/rider/lib/shared/widgets/forms/bw_time_slot_picker.dart`
- AutoBadge [배지]: 정비비가 자동 입력된 항목임을 경고색 소형 배지로 표시한다. — `apps/rider/lib/features/delivery_ledger/presentation/widgets/delivery_components.dart`
- BwBuwangBadge [배지]: 파란 그라데이션 위에 BUWANG 파트너 워드마크를 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_shop_card_v2.dart`
- BwCompletedStepChip [배지]: 완료한 입력 단계의 이름·값과 수정 동작을 표시한다. — `apps/rider/lib/shared/widgets/progress/bw_completed_step_chip.dart`
- BwReservationStatusBadge [배지]: 예약 상태 문구를 호출부가 지정한 배경색과 글자색으로 표시한다. — `apps/rider/lib/shared/widgets/badges/bw_reservation_status_badge.dart`
- BwSosStatusCard [배지]: SOS 진행 상태를 캡슐 형태로 표시한다. — `apps/rider/lib/shared/widgets/badges/bw_sos_status_card.dart`
- PlatformChip [배지]: 배달 플랫폼을 플랫폼색 점과 라벨의 알약 칩으로 표시한다. — `apps/rider/lib/features/delivery_ledger/presentation/widgets/delivery_components.dart`
- BwHomeBikeCard [카드]: 차량 별칭·브랜드·누적 주행거리와 업데이트 동작을 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_home_bike_card.dart`
- BwMaintenanceItemCard [카드]: 정비 항목과 제품 정보·부품비·공임비를 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_maintenance_item_card.dart`
- BwMaintenanceItemRow [카드]: 정비 내역의 항목·차량 번호·날짜·비용·상태를 한 행으로 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_maintenance_item_row.dart`
- BwMaintenanceRowV2 [카드]: 소모품의 잔여 거리·교체 상태와 사용률 막대를 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_maintenance_row_v2.dart`
- BwMechanicCard [카드]: 배정 정비소·정비사·전화번호·거리·도착 예상과 전화 동작을 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_mechanic_card.dart`
- BwNextCheckRowV2 [카드]: 다음 점검 소모품과 상태·잔여 거리를 간결한 행으로 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_next_check_row_v2.dart`
- BwNotificationCard [카드]: 알림 아이콘·제목·본문·상대 시각과 읽음 상태를 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_notification_card.dart`
- BwPushPermissionCardV2 [카드]: 기기 알림이 꺼진 상태를 설명하고 알림 활성화 동작을 제공한다. — `apps/rider/lib/shared/widgets/cards/bw_push_permission_card_v2.dart`
- BwScoreCard [카드]: 정비 점수·등급·설명을 짙은 브랜드 그라데이션 카드에 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_score_card.dart`
- BwScoreCardV2 [카드]: 원형 정비 점수와 등급·백분위·지난달 대비 변화를 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_score_card_v2.dart`
- BwSettingsCardV2 [카드]: 설정 위젯들을 둥근 테두리 안에 구분선과 함께 배치한다. — `apps/rider/lib/shared/widgets/lists/bw_settings_tile_v2.dart`
- BwShopCard [카드]: 정비소 정보와 인증·광고·서비스 태그·전화 버튼을 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_shop_card.dart`
- BwShopCardV2 [카드]: 정비소의 대표 사진·메타 정보·태그·전화·미니 지도·예약 동작을 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_shop_card_v2.dart`
- BwStatsCard [카드]: 브랜드 그라데이션 카드 중앙에 통계 이름과 값을 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_stats_card.dart`
- BwStatTile [카드]: 통계 이름·값·단위를 작은 테두리 카드에 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_stat_tile.dart`
- BwVehicleCard [카드]: 차량 이름·번호판·주행거리·브랜드 이미지와 기본 차량 여부를 표시한다. — `apps/rider/lib/shared/widgets/cards/bw_vehicle_card.dart`
- BwVehicleCardV2 [카드]: 차량 사진 면과 정비 점수·소모품 상태 면을 뒤집어 보여주는 홈 카드다. — `apps/rider/lib/shared/widgets/cards/bw_vehicle_card_v2.dart`
- ModelChecklistCardV2 [카드]: 기종별 필수 점검 시트로 들어가는 옅은 파랑 진입 카드를 표시한다. — `apps/rider/lib/features/vehicle/presentation/model_checklist_card_v2.dart`
- BwMileageChart [차트]: 누적 주행거리 추세와 처음·마지막 날짜를 선형 차트로 표시한다. — `apps/rider/lib/shared/widgets/charts/bw_mileage_chart.dart`
- ScoreGauge [차트]: 0~100 정비 점수를 그라데이션 도넛과 선택적 숫자로 표시한다. — `apps/rider/lib/shared/widgets/charts/score_gauge.dart`
- BwBackHeader [내비]: 뒤로가기 동작·제목·선택적 우측 위젯을 표시한다. — `apps/rider/lib/shared/widgets/headers/back_header.dart`
- BwBackHeaderV2 [내비]: V2 배경과 제목 스타일로 뒤로가기 헤더를 표시한다. — `apps/rider/lib/shared/widgets/headers/bw_back_header_v2.dart`
- BwBottomNavBar [내비]: 홈·정비·정비소·MY 네 개 탭과 현재 선택 상태를 표시한다. — `apps/rider/lib/shared/widgets/navigation/bottom_nav_bar.dart`
- BwBottomNavBarV2 [내비]: 홈·차량관리·정비소·MY 네 개 V2 탭을 표시한다. — `apps/rider/lib/shared/widgets/navigation/bw_bottom_nav_bar_v2.dart`
- BwGlobalHeader [내비]: 부왕 로고와 미읽음 알림 배지가 있는 상단 헤더다. — `apps/rider/lib/shared/widgets/headers/bw_global_header.dart`
- BwGlobalHeaderV2 [내비]: 인사말·부왕 워드마크·SOS와 알림 버튼을 표시하는 헤더다. — `apps/rider/lib/shared/widgets/headers/bw_global_header_v2.dart`
- BwSettingsRowV2 [내비]: 설정 아이콘·이름·우측 위젯 또는 화살표를 한 행으로 표시한다. — `apps/rider/lib/shared/widgets/lists/bw_settings_tile_v2.dart`
- BwEmptyState [피드백]: 빈 목록의 아이콘·제목·설명과 선택적 기본 동작을 표시한다. — `apps/rider/lib/shared/widgets/states/bw_empty_state.dart`
- BwEmptyStateV2 [피드백]: V2 빈 상태 안내와 선택적 CTA를 일반 또는 작은 간격으로 표시한다. — `apps/rider/lib/shared/widgets/states/bw_empty_state_v2.dart`
- BwErrorState [피드백]: 오류 설명과 재시도·선택적 보조 동작을 표시한다. — `apps/rider/lib/shared/widgets/states/bw_error_state.dart`
- BwInfoBanner [피드백]: 아이콘과 제목·설명·선택적 동작으로 안내 상태를 표시한다. — `apps/rider/lib/shared/widgets/banners/bw_info_banner.dart`
- BwLoadingState [피드백]: 콘텐츠 영역 중앙에 로딩 스피너와 선택적 메시지를 표시한다. — `apps/rider/lib/shared/widgets/states/bw_loading_state.dart`
- BwSosStepIndicator [피드백]: 증상·위치·매칭·추적·완료의 SOS 다섯 단계 진행을 표시한다. — `apps/rider/lib/shared/widgets/progress/bw_sos_step_indicator.dart`
- BwSosStepIndicatorV2 [피드백]: 요청·매칭·출동·완료의 네 단계를 연결된 원으로 표시한다. — `apps/rider/lib/shared/widgets/progress/bw_sos_step_indicator_v2.dart`
- BwSosWaitingPulse [피드백]: SOS 정비사 매칭 대기 애니메이션과 경과 시간을 표시한다. — `apps/rider/lib/shared/widgets/bw_sos_waiting_pulse.dart`
- BwStepProgressBar [피드백]: 현재 단계와 전체 단계 수를 얇은 선형 진행률로 표시한다. — `apps/rider/lib/shared/widgets/progress/bw_step_progress_bar.dart`
- BwToastMessage [피드백]: 성공·오류·경고 메시지를 키보드 위 슬라이드 토스트로 표시한다. — `apps/rider/lib/shared/widgets/overlays/toast_message.dart`
- BwVehicleGateV2 [피드백]: 차량이 필요한 화면에서 등록 안내와 차량 등록 CTA를 표시한다. — `apps/rider/lib/shared/widgets/states/bw_vehicle_gate_v2.dart`
- SubProgress [피드백]: 차량 등록 4단계(안내·촬영·확인·완료) 진행을 점·선 스테퍼로 표시한다. — `apps/rider/lib/features/vehicle/presentation/registration/sub_progress.dart`
- BwConfirmDialog [오버레이]: 취소·확인과 파괴적 동작 변형을 제공하는 확인 대화상자다. — `apps/rider/lib/shared/widgets/overlays/confirm_dialog.dart`
- BwLoadingOverlay [오버레이]: 중복 표시를 막는 차단형 로딩 대화상자를 연다. — `apps/rider/lib/shared/widgets/overlays/loading_overlay.dart`
- BwOcrCaptureFrame [오버레이]: 카메라 위에 문서 정렬 프레임·모서리·안내 문구를 표시한다. — `apps/rider/lib/shared/widgets/ocr/bw_ocr_capture_frame.dart`
- BwPromptDialog [오버레이]: 설명 또는 사용자 위젯과 기본·보조 동작을 세로로 표시한다. — `apps/rider/lib/shared/widgets/overlays/bw_prompt_dialog.dart`
- MileageBottomSheetV2 [오버레이]: 주행거리를 직접 입력해 갱신하는 V2 바텀시트를 표시한다. — `apps/rider/lib/features/vehicle/presentation/v2/mileage_bottom_sheet_v2.dart`
- BwAutoFitLabel [레이아웃]: 주어진 글자 크기 목록에서 영역에 맞는 크기와 줄 수를 선택한다. — `apps/rider/lib/shared/widgets/text/bw_auto_fit_label.dart`
- BwQuickActionGrid [레이아웃]: 빠른 실행 항목을 두 열의 높이 맞춤 타일로 배치한다. — `apps/rider/lib/shared/widgets/cards/bw_quick_action_grid.dart`
- BwReservationStepper [레이아웃]: 번호 원과 제목 아래에 예약 단계 콘텐츠를 배치한다. — `apps/rider/lib/shared/widgets/progress/bw_reservation_stepper.dart`
- DeliverySectionHeader [레이아웃]: 섹션 제목을 브랜드색 세로 알약 + 제목 + 우측 텍스트 액션으로 표시한다. — `apps/rider/lib/features/delivery_ledger/presentation/widgets/delivery_components.dart`
- RiderTextScaleScope [레이아웃]: 기기 접근성 글자 배율과 앱의 기본·크게 모드를 합성해 하위 화면 전체에 적용한다. — `apps/rider/lib/shared/theme/app_text_scale.dart`
- BwCascadeOption [기타]: 제조사·모델 선택에 사용하는 ID·라벨·배기량 정보를 전달한다. — `apps/rider/lib/shared/widgets/forms/bw_brand_model_cascade.dart`
- BwMileagePoint [기타]: 주행거리 차트의 날짜와 누적 주행거리를 전달한다. — `apps/rider/lib/shared/widgets/charts/bw_mileage_chart.dart`
- BwOcrField [기타]: OCR 항목의 키·라벨·값·신뢰도와 입력 형식을 전달한다. — `apps/rider/lib/shared/widgets/ocr/bw_ocr_result_editor.dart`
- BwQuickAction [기타]: 빠른 실행 타일의 아이콘·제목·설명·동작·활성 상태를 전달한다. — `apps/rider/lib/shared/widgets/cards/bw_quick_action_grid.dart`
- BwTermsItem [기타]: 동의 항목의 키·제목·약관 본문·체크 상태를 전달한다. — `apps/rider/lib/shared/widgets/progress/bw_terms_agreement_list.dart`
- BwTrackingMap [기타]: 라이더·정비사·정비소 위치를 네이버 지도에 표시한다. — `apps/rider/lib/shared/widgets/bw_tracking_map.dart`
- MaintenanceIcons [기타]: 정비 카테고리 이름을 아이콘 자산·Lucide 라인 아이콘으로 바꾸는 SSOT 와 원형·그리드·타일 표시 헬퍼를 제공한다. — `apps/rider/lib/shared/icons/maintenance_icons.dart`
- ShopMarker [기타]: 지도에 표시할 정비소 ID·이름·위치·부왕 여부를 전달한다. — `apps/rider/lib/shared/widgets/bw_tracking_map.dart`
- VehicleImage [기타]: 차량 사진에서 카탈로그·차종 실루엣·호출부 대체 이미지로 순차 대체한다. — `apps/rider/lib/shared/widgets/vehicle/vehicle_image.dart`