한 달력에서 모두 공통적인 부분이 없는 것도 있어서 JS를 2종류로 나누어야 할 듯 함
메인캘린더,마이캘린더-약속이 있는 날 : 해당 약속 내용 모달
상대방이 보는 마이캘린더,모임캘린더-약속이 있는 날 : 모달창 없음
약속이 없는 날 : 약속을 잡는 모달
모임캘린더의 경우 해당 모임의 인원들 중 약속이 잡힌 날들을 합친 뒤 달력에 표시해서 없는 날에만 모달창을 띄우도록 해야한다.
이 때, 각각 인원들의 약속이 잡힌 날 값만 받아와서 표시해줘야 한다. 이 때 중복이 발생하게 되는데 중복배열을 제거하는 방법이 있다. 날짜 순서대로 정렬은 되지 않지만, 달력의 최대 표시는 많아도 61개인데 그 이상 배열을 만들지 않아도 된다.
중복배열 제거하는 방법 : https://jsikim1.tistory.com/227
또 다른 문제점 : 모달창이 나오는거까지는 되었는데 z-index 때문에 모달창 위에 bg에 지정한 배경값이 출력된다. 그렇다고 z-index 값을 unset을 하면 flex 때문에 일 부분이 클릭되지 않는다.
방법1. 일 부분 클릭을 포기하고 z-index를 없앤다
방법2. z-index로 모달창 값을 맨 위로 올리게 해본다
정리해본 문제점
- 모달창이 뜰 때 달력의 bg에 z-index를 넣은것 때문인지 모달창 위에 색이 입혀진다. 거기다 조건부로 모달창 위에 입혀진다. 모달창 보다 아래에 있는 달력 일을 누르면 정상이고 모달창 겹치는 부분 그 이상은 달력색이 모달창에 입혀진다. 추가로 모달창을 띄울 수 있는 해당 날짜까지만 색이 따로 입혀진다-의문점
- 모임캘린더의 경우 모임의 인원 모두의 약속 잡힌 날을 들고와서 겹치는 부분을 제외시켜서 달력에 표시하도록 해야함 – 실제로 굴려봐야할듯함
- react-big-calendar의 버튼 기능 대신 자체 제작하여서 1달,2달 전후로 옮기는 이벤트를 만들어야함(월요일부터 미해결 부분 – 똑같이 짠듯한 개인파일은 문제가 없었음.동일하게 짰음에도 불구하고 개인파일의 경우 맨 처음 마운트 시에 콘솔창에 에러가 나옴.
해당 오류 : Warning: Failed prop type: You have provided a `date` prop to `Calendar` without an `onNavigate` handler prop. This will render a read-only field. If the field should be mutable use `defaultDate`. Otherwise, set `onNavigate`.) - 달력의 해당날에 :hover시에 커서를 바꾸는 기능을 넣었을 때 정상작동한다. 다만 모달창 전체에도 hover일 때 커서 모양 바꾼 것이 그대로 들어간다.