캘린더 및 개인일정 추가, 상세보기 모달 UI

[wwwlnyy]

📌 개요

react-big-calendar 라이브러리 설치
캘린더 메인 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

💡관련 Issue

close #1599