Skip to content

Latest commit

 

History

History
59 lines (37 loc) · 3.38 KB

calendar.MD

File metadata and controls

59 lines (37 loc) · 3.38 KB
Raw

[fullCalendar Docs] https://fullcalendar.io/docs#toc

[props 볼 때] https://velog.io/@vlck1111/React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-FullCalendar%EC%9D%98-Props-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0 https://velog.io/@youjunho613/FullCalendar-library

[모달창 만들 때] https://velog.io/@hwakyoung/React-fullcalendar-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 https://leego.tistory.com/entry/React-%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9C%BC%EB%A1%9C-%EB%AA%A8%EB%8B%AC-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0

[날찌 객체 다룰 때] https://ko.javascript.info/date#ref-44

  • 일단 대충 기본 예제 코드는 보았고, 전체적인 스타일링부터 해보려 한다.
  • 캘린터 헤더 툴바 스타일 지정은 기본 기능을 쓰려니, 안되어서 예진님처럼 직접 컴포넌트를 파서 api를 연결해야 할 것 같다.

캘린더 모달 구현

  • 캘린더에 필요한 모달 컨텐츠는 3개
  1. 일정 상세
  2. 삭제 확인
  3. 일정 추가

모달 컴포넌트를 놔두고, 3개를 돌아가며 컨텐츠를 갈아끼움

모달 내용이 전역으로 쓸 것까지는 아닌 것 같아서 내부 props으로 처리함

일단 지저분한 날짜 처리는 유틸 함수로 빼자

TODO: 머리 정리가 잘 안됐었는데, 구현 과정 정리하기

  1. 처음에는 calendar 컴포넌트에 모달 세개를 마구 넣고, 각각 setVisible로 관리하려고 했다. 근데 그러니까 너무 지저분하고, 복잡한거임.

  2. 그래서 구글링해서 몇개 찾아봤는데, 아니 이걸 전역 상태 관리로 빼서 하길래 리덕스랑 리코일 , 콘텍스트 API에 대해서 공부를 하였고, 최종적으로 나중에 전역 상태 관리는 리코일로 하기로 했다. 리덕스는 공부를 좀 더 해야할 듯. 잘 모른다.

  3. 어쨋든 그래서 모달 껍데기를 두고, 컨텐츠를 갈아 끼우는 방식으로 해봤는데, 구현하기 전에는 어려울 줄 알았는데 웬걸 생각보다 이지했다.

  4. 그래서 모달 컴포넌트를 하나로 두고, useState로 상태 관리를 했다. 그리고 원래는 각각 데이터를 props으로 주었는데, 이걸 event로 빼니까 아주 간단했다. 객체가 있으면 그걸 쓰고, 굳이 따로 넘기지 말자. 그치만 이런 내용에 대해서 전역 상태로 뺄지, 아니면 지금 상태로 둘지는 고민해봐야 할 듯. 진짜 렌더링되는 이벤트는 전역으로 빼도 괜찮겠고, 나머지는 잘 모르겠다. 더 생각해 봐야할 것 같다.

  5. 그리고 각 모달 컨텐츠 컴포넌트를 수정하면서 함수 최적화를 빼먹어서 이것도 해야한다.

  6. 그리고 ModalContent라고 폴더를 만들어서 객체 형식으로 정리하는 게 더 깔끔할 것 같다는 생각은 든다.

  7. 스토리북도 컨텐츠로 묶고, 그 안에서 케이스를 나누면 버그가 사라지지 않을까 생각이 든다.

스토리북 스토리 연결되게 붙어 놓는게 나을 것 같네? info스토리북에서 삭제 누르면 버그뜸 컨펌에서 아니요 누르면 반응안함

  • 작은 달력은 풀캘린더를 간단하게 해서 고치자!

예전에 캘린더 헤더 툴바 안됐던 이유는 마운트 끝난 후에 실행되는 함수 속성에 title 수정 함수를 넣어서 그런 거였음! 후련하다~~~~~~~~~ 그리고 고정값으로 보이던 것은 arg를 분석하여 title을 동적으로 반영하게 고침!