design-system

유명 디자인 시스템 코드를 이해하기 어려워서 만드는 쉬운 컴포넌트
emotion, styled-components, scss 버전의 공용 컴포넌트

목차

1. 폴더 구조
   1-1.주요 디렉토리 설명
2. 실행 방법

폴더 구조 ↑

design-system/
├─ src/
│ ├─ components/
│ │ ├─ common/          # 스타일링 방법과 관계없는 공통 컴포넌트 폴더
│ │ ├─ button/          # Button 컴포넌트
│ │ │ ├─ buttonEmotion/ # Emotion으로 구현된 컴포넌트
│ │ │ ├─ buttonSCSS/    # SCSS로 구현된 컴포넌트
│ │ │ ├─ buttonStyled/  # Styled-components로 구현된 컴포넌트
│ │ │ ├─ ...ts          # 해당 컴포넌트에서 공용으로 사용하는 로직 훅 들
│ │ └─ ...              # 다른 공통 컴포넌트들도 동일한 구조
│ │
│ ├─ hooks/             # 공용 훅
│ │ └─ ...              # 여러 컴포넌트에서 공통으로 사용하는 로직
│ │
│ ├─ stories/           # 스토리북 파일
│ │ ├─ Emotion/         # Emotion 기반 컴포넌트의 스토리북
│ │ ├─ SCSS/            # SCSS 기반 컴포넌트의 스토리북
│ │ └─ Styled/          # Styled-components 기반 컴포넌트의 스토리북
│ │
│ ├─ styles/            # 글로벌 스타일 파일
│ │ ├─ Emotion/         # Emotion 전용 글로벌 스타일 파일
│ │ ├─ SCSS/            # SCSS 전용 글로벌 스타일 파일
│ │ ├─ Styled/          # Styled-components 전용 글로벌 스타일 파일
│ │ └─ ...              # 전역 스타일
│ │
│ ├─ types/             # 공용 타입 정의
└─ ...

주요 디렉토리 설명 ↑

src/components/

• 모든 컴포넌트를 관리하는 폴더입니다.
• 하위의 common폴더는 스타일링 관계없이 사용가능한 공통 컴포넌트가 있습니다.
• 각 컴포넌트는 하위에 Emotion, SCSS, Styled 폴더를 포함하여 스타일링 방법에 따라 구현된 버전을 제공합니다.
• 해당 컴포넌트에서만 사용하는 공용 로직이나 훅은 각 컴포넌트 폴더 내에서 독립된 파일로 관리됩니다.

src/hooks/

• 특정 컴포넌트에 국한되지 않고, 두 개 이상의 컴포넌트에서 공통으로 사용되는 훅이 포함된 폴더입니다.

src/stories/

• 각 스타일링 방식(Emotion, SCSS, Styled)에 따라 컴포넌트 스토리북 파일이 위치합니다.

src/styles/

• 글로벌 스타일 파일이 포함된 폴더입니다.
• 스타일링 방식별(Emotion, SCSS, Styled)로 분리되어 있으며, 공용으로 사용되는 세부 스타일 파일이 존재합니다.

src/types/

• 모든 컴포넌트에서 공용으로 사용하는 타입 정의 파일이 포함된 폴더입니다.

실행 방법 ↑

스토리북 실행방법

npm run storybook
# or
yarn storybook

컴포넌트 설명

자세한 사용법과 props 설명은 JSDocs와 Storybook을 참고해주세요.

Badge	Divider
Drawer	Switch
Menu	Table
SVG	Tooltip
Modal

컴포넌트	기능	설명
Badge↑	기본뱃지	색상 커스텀 보여짐 여부 상태관리 오버랩 지원 (원형기준 / 사각기준) 뱃지위치(상/하/좌/우) 점 형태 지원(dot)
	숫자뱃지	표시할 숫자 최대 숫자제한 숫자가 0일 때 뱃지 표시 여부 (기본값: 표시X)
Divider↑	길이 형태 (위치)	전체 길이 뒤에만 있는 선 앞에만 있는 선 가운데만 있는 선
	수직, 수평	기본 값은 수평
	자식 컴포넌트를 이용한 렌더링	자식 없음 텍스트 자식일 때 컴포넌트 자식일 때
	자식 위치	왼쪽 위치 (수직일 때는 위로) 가운데 위치 오른쪽 위치 (수직일 때는 아래로)
	List 안에 배치	li 태그로 감싸 return
Drawer↑	열리는 방향	Top Bottom Left Right
	Scrim 유무	있음 없음
	백그라운드 컨트롤	클릭 시 닫힘 클릭해도 안 닫힘
	키보드 컨트롤	ESC 컨트롤 유무
	영역 차지	인라인 (바디 안에 영역 차지) 아웃라인 (바디 위에 영역 차지)
	드로워 손잡이	size만큼 열리는 방향에 맞는 방향쪽에 드로워 보임
	못닫게 하기	닫는 버튼 없는 Drawer
Menu↑	메뉴 버튼	클릭으로 열고 닫음 열려있을 때 클릭 시 메뉴 닫힘 children 타입에 따른 스타일 적용
	메뉴 리스트 (ol)	메뉴의 열고 닫히는 상태를 관리 클릭된 메뉴 아이템을 포커스 키보드 액션과 관련된 상태 관리
	열리는 포지션	Left (direction 수직 : 위) Right (direction 수직 :아래)
	열리는 방향	Top Bottom Left Right
	선택한 메뉴 기억	true: 클릭된 메뉴 아이템을 포커스 true: 선택된 메뉴 옆에 체크 버튼 false: 항상 최상위 아이템 포커스 false: 선택된 메뉴 옆에 체크 버튼 없음
	메뉴 리스트 키보드 컨트롤	상하 키보드를 통해 메뉴 아이템 변경 ESC 버튼을 통해 메뉴 닫기 Enter 버튼을 통해 메뉴 아이템 선택 키보드 컨트롤 사용하지 않음
	메뉴 리스트 백그라운드 컨트롤	true: 외부 영역 클릭 시 메뉴가 바로 닫힘 false: 외부 영역 클릭 시 메뉴가 닫히지 않음
	메뉴 그룹 (ol)	타이틀 표시 하위 컴포넌트 일정한 들여쓰기 스타일 커스텀
	메뉴 아이템 (li)	메뉴 아이템 스타일 커스텀 컴포넌트로 전달했을 때 메뉴 기본 스타일 적용하지 않음 string으로 전달했을 때 메뉴 기본 스타일 적용
SVG↑	기본기능	크기 조절 이름만으로 SVG 렌더링
	커스텀 스타일 적용	배경색 커스텀 색상 커스텀
Modal↑	모달 상태 관리	모달 오픈 상태 관리 모달 포털링 (Portal) 모달 내용 렌더링 모달 오픈 함수 제공 모달 클로즈 함수 제공 모달 온/오프 상태 값 제공 모달 백그라운드 제공
	스크롤 제한	배경 스크롤 방지(true) 외부 스크롤 가능(false) 모달 바디 내 내부 영역 크기 설정
	키보드 컨트롤	ESC 키로 모달 닫기 포커스 트랩 (모달 내부에서만 탭 이동) 단일 버튼일 시 Enter 키 활성화
	컨펌 모달	>: focus가 없을 경우 왼쪽 첫 버튼 focus <: focus가 없을 경우 오른쪽 첫 버튼 focus
	스타일링	크기 조절 가능 (sm, md, lg, full) 위치 설정 (center, top, bottom) 애니메이션 지원
Switch↑	상태	토글 on/off 상태 관리(필수 값) 상태 값 변경 onChange 이벤트 핸들링 상태 값 변경 디바운스 처리
	스타일링	외부 스타일 props로 스타일링 적용 onColor/offColor 적용 기본 트랙 색상: 블랙 thumbOnColor/thumbOffColor 설정
	크기(size)	XS, S, M, L 기본 값: M
Table↑	기본기능	기본 테이블 구조 (thead, tbody, tfoot) 컬럼 헤더 구현 헤더 고정 on/off 로우(행) 데이터 표시 반응형 테이블 레이아웃 지원
	스타일링	테이블 사이즈 (sm/md/lg/full) 호버 효과 선택된 행 스타일 커스텀 스타일 적용
Tooltip↑	값	툴팁의 기준이 되는 컴포넌트를 children으로 전달 label: 툴팁 내부 값(컴포넌트, 텍스트 등)
	스타일링	color: 툴팁 배경 색상 기본 색상: 블랙 외부 스타일 props로 스타일링
	위치(position)	기준 컴포넌트로부터 상/하/좌/우 위치 설정 12가지 위치 옵션 제공