시간 선택 라이브러리 react-schedule-selector 분석

사용할 라이브러리

 

react-schedule-selector

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

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

 

기본 사용법

기본 사용법은 selection과 onChange props를 제공하는 것입니다. selection은 선택된 날짜들의 배열이며, onChange는 선택된 날짜 목록이 변경될 때 호출됩니다.

 

분석한 작동 방식

1. useState를 사용하여 schedule이라는 상태를 만들어서 선택된 날짜와 시간들을 저장
2. onChange를 통하여 사용자가 시간을 선택하면 새로운 일정을 받아서 schedule배열에 추가하여 배경색 변경
3. renderCustomCell 함수를 통해서 시간별 셀을 어떻게 보여줄지 정의
4. 예시 ) 선택여부에 따른 배경색, 상자 모양 등 설정
5. renderDateLabel 함수는 날짜를 어떻게 표시할지 정의
6. 그 외에도 커스터마이징 존재
7. renderDateCell 함수는 각 셀이 나타내는 시간과 그 셀이 현재 선택되었는지 여부를 기준으로 React 요소를 반환하는 역할 → API와 통신하여 사용자가 선택한 일정에 따라 UI 업데이트 기능 구현 가능 예상

 

UI 커스터마이징 방법

1. 색상, 여백, 형식 등의 props 값을 지정하여 커스터마이징.
2. renderDateCell 렌더 prop을 사용하여 직접 렌더링을 처리.

 

주요 Props 설명

• selection (필수)
  • 타입: Array<Date>
  • 설명: 그리드에서 채워져야 할 날짜들의 목록.
• selectionScheme (선택)
  • 타입: 'square' | 'linear'
  • 설명: 드래그할 때의 선택 동작. square는 시작 및 종료 셀이 대각선에 있는 사각형을 선택하고, linear는 시작 및 종료 셀 사이의 모든 셀을 시간순으로 선택.
  • 기본값: 'square'
• onChange (필수)
  • 타입: (Array<Date>) => void
  • 설명: 선택된 날짜가 변경될 때 호출됩니다. 새로운 선택된 날짜 목록이 첫 번째 인자로 전달됩니다.
• startDate (선택)
  • 타입: Date
  • 설명: 그리드가 시작할 날짜 (시간 부분은 무시되고, 시작 시간은 minTime으로 지정).
  • 기본값: 오늘 날짜
• numDays (선택)
  • 타입: number
  • 설명: 오늘부터 시작하여 표시할 일수.
  • 기본값: 7일
• hourlyChunks (선택)
  • 타입: number
  • 설명: 각 시간을 몇 개의 구간으로 나눌지 (예: 2는 시간을 반 시간 단위로, 4는 15분 단위로 나눔).
  • 기본값: 1
• minTime (선택)
  • 타입: number
  • 설명: 표시할 최소 시간 (0-23).
  • 기본값: 9
• maxTime (선택)
  • 타입: number
  • 설명: 표시할 최대 시간 (0-23).
  • 기본값: 23
• dateFormat (선택)
  • 타입: string
  • 설명: 열 헤더에 사용할 날짜 형식.
  • 기본값: 'M/D'
• timeFormat (선택)
  • 타입: string
  • 설명: 행 레이블에 사용할 시간 형식.
  • 기본값: 'ha'
• columnGap (선택)
  • 타입: string
  • 설명: 그리드 열 사이의 간격, 유효한 CSS 단위로 지정.
  • 기본값: '4px'
• rowGap (선택)
  • 타입: string
  • 설명: 그리드 행 사이의 간격, 유효한 CSS 단위로 지정.
  • 기본값: '4px'
• unselectedColor (선택)
  • 타입: string
  • 설명: 선택되지 않은 셀의 색상.
  • 기본값: 'rgba(89, 154, 242, 1)'
• selectedColor (선택)
  • 타입: string
  • 설명: 선택된 셀의 색상.
  • 기본값: 'rgba(162, 198, 248, 1)'
• hoveredColor (선택)
  • 타입: string
  • 설명: 마우스 오버된 셀의 색상.
  • 기본값: '#dbedff'
• renderDateCell (선택)
  • 타입: (datetime: Date, selected: boolean, refSetter: (dateCell: HTMLElement | null) => void) => React.Node
  • 설명: 해당 셀이 나타내는 시간과 셀이 선택되었는지를 인자로 받아 React 요소를 반환하는 렌더 prop 함수. refSetter를 적용하지 않으면 터치 장치에서 제대로 작동하지 않음.
• renderTimeLabel (선택)
  • 타입: (time: Date) => React.Node
  • 설명: 해당 행이 나타내는 시간을 인자로 받아 React 요소를 반환하는 렌더 prop 함수.
• renderDateLabel (선택)
  • 타입: (date: Date) => React.Node
  • 설명: 해당 열이 나타내는 날짜를 인자로 받아 React 요소를 반환하는 렌더 prop 함수.

간단한 기능들은 제공해주지만 세부적으로 기능을 추가하고 싶다면 직접 코드로 구현해야될 것 같다.

원하는 UI를 만들기 위해서 구현해야 될 것을 아래에 적어보았다. 

 

[ 라이브러리를 사용하면 구현해야되는 것] 

• header(날짜 부분)에 날짜 이동 버튼 <,> 추가
• 디자인 커스터마이징
• 클릭시 API 연동
• 처음 로딩할때 관련 데이터 가져와서 표에 적용