[FE,BE] Setting calendar startday

[msmk530]

📕 Issue Number

Close #105

📙 작업 내역

구현 내용 및 작업 했던 내역

• account book의 start day를 읽어서, calendar에 알맞은 header와 body를 그리도록함

• util에 template을 만들어 calendar body를 그릴때 사용하였다.

• 동적으로 할당할 수 있지만 경우의 수가 7가지 뿐 이고, 각각에 디자인 효과를 주기에는 오히려 나눠져서 관리되는 것도 괜찮을 것 같았다.

• calendar Header또한 7가지 경우의 수이기 때문에, 별도로 컴포넌트를 분리 한 후 start day에 따라 다르게 그려주도록 하였다.

• 마찬가지로 각 요일에 대한 디자인등을 할 때 더 편리할 것 같아서 동적으로 할당하지 않았다.

• 추후 리팩토링 가능

• setting page의 calendar탭을 구현하였다.

• 시작요일을 설정하는 컨텐츠를 위치시켰다.

• 이후 GMT 설정란이 생길 수 있어서 우선 꽉차게 구현하지 않았다.

• 라디오 버튼에 따라 calendar header가 어떻게 변할지 시각적으로 확인할 수 있도록 하였다.

• save버튼 클릭시 바로 적용하는게 아니라 modal형태로 한번 되묻도록 하였다.

• setting탭 save modal 분리

• 변경 사항을 저장할 것인지 되묻는 모달이 여러군데서 사용될 수 있을 것 같아서 분리하였다.

• modal을 끄는 setSaveModal, 변경데이터인 updateData, save ok버튼 클릭시 행해질 함수인 saveAction을 prop으로 받는다.

---

• 아래와 같은 모습으로 setting - calendar 탭을 꾸몄습니다.
• 논의 후 변경될 수 있습니다~

• 저장버튼 클릭시 되묻는 모달을 아래와 같이 구현하였습니다.

• 수요일로 시작요일을 바꾼후 디테일 페이지에 돌아가보면 달력의 시작요일이 잘 바뀌어있는 것을 확인할 수 있습니다.

멘토님 멘셔닝

@boostcamp-2020/accountbook_mentor