밥약 프로젝트
시간 선택 라이브러리 react-schedule-selector 분석
우주속공간
2024. 6. 19. 15:57
사용할 라이브러리
react-schedule-selector
GitHub - bibekg/react-schedule-selector: A mobile-friendly when2meet-style grid-based schedule selector
A mobile-friendly when2meet-style grid-based schedule selector - bibekg/react-schedule-selector
github.com
기본 사용법
기본 사용법은 selection과 onChange props를 제공하는 것입니다. selection은 선택된 날짜들의 배열이며, onChange는 선택된 날짜 목록이 변경될 때 호출됩니다.
분석한 작동 방식
- useState를 사용하여 schedule이라는 상태를 만들어서 선택된 날짜와 시간들을 저장
- onChange를 통하여 사용자가 시간을 선택하면 새로운 일정을 받아서 schedule배열에 추가하여 배경색 변경
- renderCustomCell 함수를 통해서 시간별 셀을 어떻게 보여줄지 정의
- 예시 ) 선택여부에 따른 배경색, 상자 모양 등 설정
- renderDateLabel 함수는 날짜를 어떻게 표시할지 정의
- 그 외에도 커스터마이징 존재
- renderDateCell 함수는 각 셀이 나타내는 시간과 그 셀이 현재 선택되었는지 여부를 기준으로 React 요소를 반환하는 역할 → API와 통신하여 사용자가 선택한 일정에 따라 UI 업데이트 기능 구현 가능 예상
UI 커스터마이징 방법
- 색상, 여백, 형식 등의 props 값을 지정하여 커스터마이징.
- 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 연동
- 처음 로딩할때 관련 데이터 가져와서 표에 적용