COMPONENTS

컴포넌트 17종

ODS 컴포넌트 8종 + 합성 패턴 컴포넌트 8종 + 트랙(비ODS) 1종. 모든 컴포넌트는 포커스 링 절대 제거 금지, 모바일 터치 타깃 44×44pt 이상.

ODS Sourcing Rule — Figma 컴포넌트 사용 시: ① ODS에 있나? → ODS import. ② ODS에 없으면 BDS 마이그? → @bds-component. ③ 트랙 고유 변형? → 트랙 분리 + @non-ods. ④ 새 패턴이면 patterns/ 등록.

ODS 컴포넌트

8 components

BoxButtonODS

박스형 버튼. 페이지 이동은 Link 사용. variants 6종 × sizes 5종 × disabled/loading 토글.

variantsnormal · subtle · solid · outlined · brand-solid · brand-outlined

sizesXL 48 · L 44 · M 40 · S 32 · XS 28

IconButtonODS

아이콘만 가지는 버튼. aria-label 필수. 페이지 이동 X.

variantsghost · subtle · inverse

sizes24 · 32 · 40 · 48

Input (TextField)ODS

단일 라인 텍스트 입력. default · focus · error · disabled 4 상태.

heightsL 48 · M 40 · S 32

tokensradius-sm 4, focus border-strong

SectionODS

콘텐츠 그룹 컨테이너. 헤더(Heading20/18) + RightAction 옵션 + 본문.

paddingMobile 16 · Tablet 40 · Laptop+ 60

ChipODS

선택형/라벨용 작은 컨트롤. radius-full pill 기본.

heights28 · 32

selectedbg-brand-weak + border-brand

BottomSheetODS

모바일 우선 패턴. 상단 라운드 16, 핸들바 노출. 백드롭 backgroundDim.

radius상단 radius-xl 16

handlegray-200, 4×40

SnackbarODS

화면 하단 일시 피드백. 동시 1개 (큐잉).

duration2~4초

tokensbg-inverse, fg-inverse

EmptyODS

빈 상태. 일러스트/아이콘 + 안내 + 다음 액션 1개. "데이터가 없습니다" 한 줄 금지.

titleHeading18_Semibold

descBody14L20 fg-weak

합성 패턴 컴포넌트

8 patterns

시나리오 자족 재현을 위해 ODS 토큰을 조합한 표준 패턴. 트랙별 구현 시 동일한 토큰 조합 사용 권장.

ProductCard합성

상품 그리드 단위. 카드 보더 없음 — 여백으로 구분 (콘텐츠 우선 원칙). 사진 위 floating heart fav.

image1:1 (피드) / 3:4 (상세)

price{accent-red} 32% + 가격 fg

BottomNav합성

하단 4탭. height 56, border-top 1px. 활성 = filled icon + fg 검정 (brand 블루 X — ohouse 관습).

tabs홈 · 검색 · 집들이 · 마이

labelDetail10_Medium

ChipScroll합성

가로 스크롤 카테고리. flex + overflow-x:auto + scrollbar 숨김. selected = bg fg.

height32, padding 0 14

selectedbg foreground

Avatar합성

원형 아바타. radius-full. 이미지 없으면 그라디언트 배경 + 이니셜.

sizes24 · 32 · 40 · 64

Hero + Body합성

콘텐츠 상세 표준 레이아웃. Hero 3:4 full-bleed + Top bar floating + Body padding 20 16 24.

heroaspect-ratio 3/4

topbarabsolute + 그라디언트

Author Row합성

콘텐츠 작성자 정보 row. 왼쪽 정렬 (인스타식 가운데 정렬 X). Avatar + 이름·메타 + 팔로우.

nameBody14_Semibold

followbox-button-outlined S 32

Stats Row합성

좋아요·스크랩·댓글 카운터. border-top/bottom backgroundWeak. 활성 bookmark-filled + brand.

gap24, padding 16 0

count"1.2K", "8.9K" 한국식

Section Header합성

섹션 시작 헤더. 좌측 타이틀 + 우측 "더보기 →" (선택).

titleHeading18_Semibold / Heading20_Bold

moreDetail13 fg-weak + chevron-right

트랙 컴포넌트 (비ODS)

1 component

ODS Chip이 커버 못 하는 변형. 트랙 컴포넌트로 분리 + @non-ods: 마커. ODS 정식 편입 시 마커 제거.

Topic / Filter Chip@non-ods

Topic Chip: 콘텐츠 태그용 (평형/스타일/거주민). Filter Chip: 정렬·필터 토글 (funnel + 라벨 + chevron-down).

topicbg-weak, h 24~28

filter selbg-emphasis-weak + fg-emphasis

marker@non-ods:topic-chip