TOSEL Design Library

TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리

Component

컴포넌트들은 기본적으로 기능 단위로만 구성한다.

도메인은 구분하지 않는다. 단, Layout 컴포넌트에 대해서만 예외적으로 허용한다.

Board

Board 컴포넌트는 가장 큰 단위의 컨테이너이다.

일반적으로

Card

Card 컴포넌트는 여러가지 요소를 담고 있는 컨테이너이다.

일반적으로 가장 최소 단위의 컴포넌트로 사용되며, 다양한 요소를 담을 수 있다.

Layout

Layout 컴포넌트는 여러가지 컴포넌트를 담고 있는 컨테이너이다.

Layout 컴포넌트는 특정 프로젝트에서 반복적으로 사용되는 컴포넌트의 구조를 형성한다.

Navigation

Navigation 컴포넌트는 여러가지 링크를 담고 있는 컨테이너이다.

각각의 링크 컴포넌트의 스타일링은 buttonClassNames로 전달받는다.

(Next.js의 Link Component와 React의 Link Component는 호환이 되지 않기 때문.)

Shelf

Shelf 컴포넌트는 Board 컴포넌트 내부에 위치하며 여러가지 Deck 컴포넌트를 담고 있는 컨테이너이다.

Shelf 컴포넌트는 담고있는 Deck 컴포넌트들을 수직 정렬한다.