React로 달력 스케줄 만들기 삽질 기록

React 생활코딩으로 공부하고 그 기반으로

이전에 퍼블리싱 작업했던 스케줄을 React로 변환하는 스터디를 했다

 

Javascript로 달력을 계산하고 날짜와 해당날짜의 스케줄을 출력하는 부분까지 잘 구현이 되었다

라고 생각했다

 

component는 아래 4개로 구성되었다

calendar.js

detail.js

list.js

schedule.js

 

- calendar.js

: 달력 table의 tbody부분 출력(날짜부분)

 

- detail.js

: 달력에서 날짜를 눌렀을때 상세 Layer 부분

상세에서 이전날 일정/다음날 일정 선택할수 있다

 

- lists.js

: 스케줄 내용 출력. 달력의 스케줄과 상세레이어의 스케줄 공통사항(마크업 똑같음)

 

 

- schedule.js

: 스케줄 메인페이지. 이전달/다음달 이동, 오늘날짜 이동 가능