우리테크만의 디자인 시스템 및 UI 컴포넌트 라이브러리 만들기(금요일 오전 9시)

[Malloc72P]

우리테크만의 디자인 시스템 및 UI 컴포넌트 라이브러리 만들기

목표

• 피그마로 디자인 시스템 구축( 색상, 타이포그래피, 아이콘, 주요 컴포넌트 )
• 컴포넌트 라이브러리 만들기( Mantine 참고 )
• 이번에 만들 Forest UI는, Mantine처럼 리액트 기반의 컴포넌트 라이브러리를 만든다

Forest UI 컴포넌트 목록

• 버튼 컴포넌트 만들기(디자인 + 구현)
• 모달
• notification
• Menu(DropDown)
• 툴팁
• Input(input + lable + error message)
• 아코디언

컴포넌트 작업방식

1. 피그마 디자인을 한다
2. 디자인대로 리액트 컴포넌트를 구현한다

주의사항

• 순수 바닐라 JS로 구현한다( 단, TS, React는 사용한다)
• 스토리북을 꼭 작성한다

일정(2달 + 1주)

• 1월, 2월 합쳐서 8주 일정 잡는다

1주차

• 디자인 시스템 Base 구성( 색상, 타이포그래피, Tabler==Icon )
• 깃헙 저장소 구성(준비물: 모노레포 템플릿)

2주차

• 스토리북 세팅
• NPM 패키지 배포 및 자동화

3주차

• 버튼 컴포넌트 만들기(디자인 + 구현)

4주차

• 카드 컴포넌트 만들기
• 사이트 레이아웃

5주차

• 체크박스

6주차

• 탭

7주차

• 네비게이션 레일

8주차 9주차

[stale[bot]]

60일 동안 이슈의 활동 내역이 없으므로 오랫동안 방치된 라벨이 설정되었습니다.