캘린더 및 개인일정 추가, 상세보기 모달 UI과 관련 api, 기능 구현

[wwwlnyy]

📌 개요

react-big-calendar 라이브러리 설치
캘린더 메인 UI
개인일정 추가/수정 모달 UI
일정 상세보기 모달 UI

💻 작업사항

UI

1. 캘린더 메인 UI

• CalendarLayout: react-big-calendar를 사용해서 캘린더를 띄우는 컴포넌트
• CalendarHeader: 년, 월을 표기하는 헤더 부분 컴포넌트
• CalendarEvent: 캘린더 내 일정(이벤트) 컴포넌트
  • 일정 클릭 시 일정 상세보기 모달 띄우는 것도 해당 컴포넌트에서 관리
  • CalendarEventContent: CalendarEvent 내부 내용 표시하는 컴포넌트
• CalendarSidebar: 좌측 사이드바 컴포넌트
  • AccordianItem: 사이드바 내부 공식일정/개인일정 아코디언 메뉴 부분 컴포넌트
  • CheckboxItem: 아코디언 메뉴 하단 체크박스 컴포넌트
  • 프로필 관련 api 확인 후 해당 ui 및 기능 추가 필요
  • 체크박스로 일정 필터링하는 기능 현재 새로고침하면 초기화 되는데, 회의 후 수정 필요
  • 개인일정 메뉴에서 수정 버튼(연필모양) 클릭시 수정 모드로 바뀌는데, 해당 부분 어떤식으로 해놓을지 상의 필요해 보입니다.
    • 현재는 수정 버튼 클릭 시 사이드바 내부에서 수정 모드로 변경해 그룹 색상, 제목 수정하거나 삭제 가능
    • 그룹 색상 수정 시 GroupColorSelect 드롭다운으로 수정

3. recoil을 통해 모달 관리

• 기존 코드들 참고하여 recoil을 통해 calendarModalState, calendarModalProvider 만들어 관리
  type CalendarModalType = | 'detail' | 'AddSelect' | 'PrivateUpsert' | 'PublicUpsert';

4. 개인일정 추가/수정 모달(PrivateUpsert)

• 우선 개인일정 추가 전 AddSelect 모달을 띄워 개인일정/그룹일정 중 선택
  • AddSelect 모달은 현재 pc에서는 화면 중앙, 모바일에서는 바텀박스로 뜨게 해놓음
• 캘린더에서 빈 날짜 클릭/ 드래그 시 해당 날짜 00시 00분으로 시간 선택된 채 모달 나타남
• PrivateScheduleUpsert 컴포넌트
  • GroupSelect: 그룹 선택 드롭다운 컴포넌트

5. 일정 상세보기 모달(detail)

• ScheduleDetailModal 컴포넌트
• 개인일정 시 수정 버튼 클릭 시 PrivateScheduleUpsert 모달로 바뀜

6. 기타

• component의 CustomCalendar.tsx와 CustomDatepicker.tsx는 styled-components를 사용하여 라이브러리의 스타일을 덮어쓰기 위해 만들었습니다.
• scss는 거의 대부분 일반 css처럼 작성해서 추후 공통된 걸 정리하는 등 리팩토링이 필요할 것 같습니다.

_talkv_wxcJnWbYxx_9YreHc3fthGdKYw5jwYkvK_talkv_high.mp4

_talkv_wxcABN5Aj2_1BxLAgUXlE2WkHXLLUJgJ1_talkv_high.mp4

API
전체일정, 개인일정 모두 공통된 훅으로 관리

1. useScheduleGet
스케줄 하나를 가져오는 api

2. useScheduleRequest
스케줄 추가, 수정, 삭제 요청 api

3. useMonthScheduleGet
한 달 단위로 달의 전체 스케줄을 get 해오는 api
유저가 보고 있는 달이 달라질때마다 currentDate를 수정하고, currentDate가 바뀔 때마다 api 새로 요청

4. useScheduleGroupGet
커스텀 그룹(개인일정)을 가져오는 api

5. useScheduleGroupRequest
커스텀 그룹 추가, 수정, 삭제 요청 api

6. useGroupFilterStorage
캘린더에서 필터링 한 일정을 localStorage에 저장하고 불러오는 api

Context API

1. GroupContext
   커스텀 그룹 전체 목록 저장

2. userContext
   유저 intraId 저장, 추후 프로필 이미지까지 구현 필요

💡관련 Issue

close #1599