<aside> 📍 How to use Chips

• 정의된 스타일을 적절한 상황에 사용해야 하며, 정의되지 않은 새로운 스타일은 재사용성이 높을 경우에만 담당자와 논의하여 가이드에 추가하여 관리합니다.
• 요소별로 클릭 액션과 필터링 목적에 따라 적절한 스타일을 사용하고 컴포넌트 종류를 혼동하지 않습니다. </aside>

Chips

정보, 선택, 콘텐츠 필터링이나 특정 액션을 유도하는 데에 사용합니다. 특히나 콘텐츠를 필터링하는 기능으로 주로 사용합니다.

Basic filter와 Curation filter로 구성합니다.

Basic

최소 2개 이상의 옵션이 있는 경우 필터링을 하기 위한 목적으로 사용합니다. 한가지 주제에 대한 카테고리의 데이터가 세분화되어 있을 때 분류를 목적으로 사용합니다. 하나를 선택할 때 즉각적으로 액션과 데이터가 노출됩니다.

Variants - Size

두가지 사이즈로 구성되며 36X36 사이즈는 Main과 같은 주요 페이지에서 주로 사용됩니다. 32X32 사이즈의 경우 보조적인 Filter chip으로 2depth 이상의 상세 페이지 등에서 사용합니다.

State

Selected/Unselected에 따라 분류하며 각각의 State에 따른 스타일을 명시합니다.

Bahaviors

Chips가 디바이스의 Width 값을 넘어갈 경우에 요소가 가려지며 가로 스크롤을 적용합니다.

Placement

가운데 정렬을 기본으로 하며, 두줄 이상의 형태로 사용 가능합니다. 좌측 마진은 Both Sides Spacing에 맞게 24px로 고정합니다. (Spacing 관련 내용은 Spacing 참조)

Curation

상품 카테고리, 할인, 연관 검색어, 콘텐츠 등 맞춤형 추천 필터링을 목적으로 사용하고 다중 선택이 가능합니다.

State

Selected/Unselected에 따라 분류하며 각각의 State에 따른 스타일을 명시합니다.

Placement

좌측 정렬을 기본으로 하며, 두줄 이상의 형태로 사용 가능합니다. 좌측 마진은 Both Sides Spacing에 맞게 24px로 고정합니다. (Spacing 관련 내용은 Spacing 참조)

• 추후 도입 제안

목차