elast ui

조립하듯 쉽게 사용하고, 변경하는 UI 라이브러리

기간

2024.03 ~ 2024.07

인원

3명

주요 기능

합성 컴포넌트 패턴을 활용한 컴포넌트 조합 방식의 UI 라이브러리

TailwindCSS를 이용한 자유로운 커스터마이징

Select, Dropdown, Combobox, Modal, Tabs, Switch 제공

What I used

NPM

Node.js의 패키지를 관리할 수 있는 도구입니다.

Reactjs

React.js는 Single Page Application을 개발하는 데 사용되는 자바스크립트 라이브러리입니다.

TypeScript

타입스크립트는 타입을 미리 정의하여 개발 과정의 실수를 방지할 수 있는 자바스크립트의 슈퍼셋인 프로그래밍 언어입니다.

What I did

합성 컴포넌트 패턴을 사용해 UI 개발의 생산성과 가독성을 높였습니다.

Git과 Jira를 활용해 프로젝트 기획과 일정 관리를 진행했습니다.

Select, Combobox, Modal, Tabs 컴포넌트를 구현했습니다.

dataset을 이용해 TailwindCSS로 요소의 가상 클래스별 스타일링을 가능하게 했습니다.

키보드 방향키로 컴포넌트를 조작할 수 있도록 키보드 이벤트 처리를 구현했습니다.

Tabs.Content의 순서에 맞춰 Tabs.Item에 클릭 이벤트가 자동으로 바인딩되도록, cloneElement를 사용해 자식 요소를 재구성했습니다.

Combobox의 검색 기능을 구현하기 위해 React.Children을 활용해 자식 요소를 탐색하고 필터링했습니다.

npm 배포 및 소개 페이지를 직접 제작했습니다.

EUNHYEOK LEEEUNHYEOK LEE