시간 선택 UI 변경 - 라이브러리 조사(react-schedule-selector)

[이슈 발생]

사용자 피드백으로 약속을 설정하기 위해 달력에서 날짜를 클릭하여 시간을 선택하는 과정이 필요한데 이때 시간 선택 UI가 불편하다는 피드백을 받음.

그래서 시간 선택 UI를 변경하기 위한 라이브러리 조사를 시작함

 

[고려 요소]

1. 무료로 사용할 수 있는 라이브러리 : 무료 라이브러리를 우선으로 선택했습니다.
2. 이해하기 쉬운 코드 및 변경 용이 : 코드가 직관적이며, 사용자가 쉽게 수정하고 커스터마이징할 수 있는지 확인했습니다.
3. 약속 요청 UI로의 적합성 : 시간 선택 UI로 사용하기에 적합한지 평가했습니다.

 

1. react-schedule-selector

GitHub - bibekg/react-schedule-selector: A mobile-friendly when2meet-style grid-based schedule selector

• 간단하고 직관적인 UI: 사용자가 선택 가능한 시간대를 쉽게 선택할 수 있도록 하는 그리드 기반 인터페이스를 제공
• 커스터마이징 가능: 다양한 속성들을 통해 UI를 사용자 맞춤형으로 설정.
• 모바일 화면에서도 사용가능

 

2. react-big-scheduler

GitHub - StephenChou1017/react-big-scheduler: A scheduler and resource planning component built for React and made for modern browsers (IE10+)

 

• Drag-and-Drop 지원: 일정을 드래그 앤 드롭으로 쉽게 조정할 수 있음.
• 다양한 기능 제공

⇒ 기능이 많아서 살짝 처음 익혀서 사용하기에는 조금 복잡할 수 있다.

⇒ 시간을 클릭해서 계획 생성하는 코드를 구성되었다.

⇒ 모바일 화면에서 보았지만 react-schedule-selector보다는 살짝 어색해보임.

 

 

3. react-calendar-timeline

GitHub - namespace-ee/react-calendar-timeline: A modern and responsive react timeline component.

 

⇒ 구현하고자 하는 UI모습과 다름

⇒ 드래그, 드롭 기능에 포커스를 맞춘 라이브러리 같음

⇒ 파일 구조, 기능 파악이 어려움. 코드가 복잡함

 

 

 

간단한 일정 선택 기능이 필요한 경우이기때문에 react-schedule-selector가 적합하다고 판단

 

간단한 기능을 제공하며, 쉽게 파악할 수 있을 것 같음

• 사용자 입장에서 사용하기 쉽고 직관적. 디자인 커스터마이징 가능
• 피그마에 나와 있는 UI와 유사한 디자인.