4주차 개인 프로젝트 '나만의 캘린더' 만들기
"Scheduler"
📌필수 구현 기능
✅ 게시글 목록 페이지
이전 월 보기, 다음 월 보기 버튼이 있고 해당 버튼 클릭 시 월 이동 가능하게 하기일정 하나를 클릭할 시 팝업 띄우기일정 추가하기 버튼 (페이지 우측 아래에 플로팅 버튼으로 처리) 클릭 시 일정 추가하기 페이지로 이동하기캘린더 내 일정은 시간 순으로 정렬하기[주의] 파이어스토어에서 필터해서 가져오지 말고 전체 데이터를 가져온 후, 리덕스에서 필터를 할 것 (컴포넌트에서도 가능)
우측 아래의 추가하기 버튼 위에 [완료된 일정 보기] 만들기클릭 시, 완료된 일정만 캘린더에 표시 되고 버튼 텍스트가 [모든 일정 보기]로 바뀌도록 하기[모든 일정 보기] 버튼 클릭 시, 모든 일정 캘린더에 표시하기
PC, 모바일, 태블릿 3가지로 확인했을 때 뷰가 깨지지 않게 하기
✅ 게시글 작성 페이지
일시, 일정 내용을 기입하지 않으면 팝업으로 경고하기실제로 파이어스토어에 들어가지 못하게 막기
일정 추가 시 캘린더 페이지로 이동하기
캘린더 내 일정은 시간 순으로 정렬하기
- [주의] 파이어스토어에서 필터해서 가져오지 말고 전체 데이터를 가져온 후, 리덕스에서 필터를 할 것 (컴포넌트에서도 가능)
- 문제점
//state의 sch_list 가져옴
const sch_list = useSelector((state) => state.schedule.sch_list);
//배열의 insert_dt 항목을 기준으로 오름차순 정렬
const sort_sch_list = sch_list.sort(function (a, b) {
return moment([a.insert_dt], "YYYY-MM-DD hh:mm:ss")-
moment([b.insert_dt], "YYYY-MM-DD hh:mm:ss");
});
console.log(sort_sch_list);
오류가 난지 3시간 째.. 아무리 생각해도 이 방법이 맞는 것 같은데 안되는 이유를 모르겠다..
에러메시지를 확인해 보면 읽기 전용이라 0번에 property할 수 없다고 하는데 이리 저리 바꿔봐도 동작을 하지 않았고 이미 새벽 5시가 되어 내일 다시 해보기로 했다..
위에 까지가 어제 내용이였는데 오늘 너무 어이없는 방법으로 해결이 되었다.
저 에러메시지를 계속 생각을 해보다가 갑자기 든 생각이 그냥 읽기전용파일 느낌이라서 안되는 건가 싶어서 복사를 해서 리스트를 정렬하니 정렬이 되었다. 너무 허무해서 해결된 기쁨보다는 허탈함이 컸었다..
근데 더 어이가 없었던 것은 배열이 정렬 되는 걸 확인 했는데 View에는 계속 멋대로 나오길래 계속 헤메다가 다른분이 그냥 캘린더에서 이미 자동으로 정렬이 된다고 하셨다..
const sch_list = useSelector((state) => state.schedule.sch_list);
// 처음엔 그냥 이러면 복사 되는줄 알았다..
//const _sch_list = sch_list
// sch_list 복사
const _sch_list = sch_list.slice();
// 배열은 insert_dt 순으로 정렬이 되었는데
// calendar 에서는 여전히 멋대로 정렬을 한다.
// 알고보니 Fullcalander 자체적으로 sort를 했다!
const sort_sch_list = _sch_list.sort(function (a, b) {
return (
moment([a.insert_dt], "YYYY-MM-DD hh:mm:ss") -
moment([b.insert_dt], "YYYY-MM-DD hh:mm:ss")
);
});위 기능을 마지막으로 css를 적용했는데 살짝 헤메긴 했지만 저번주에 이것저것 써봐서 그런가 생각보다 오래걸리진 않고 과제를 제출했다.
-
메인화면
-
상세일정 팝업
-
완료 된 일정 보기
-
일정 추가
- 개인적으로 가장 거슬렸던 페이지인데, 일단 필수 기능에 페이지로 구별하라 해서 구분을 하긴 했지만 얘도 그냥 팝업으로 띄웠어도 되는게 아닌가? 싶었다.
- 개인적으로 가장 거슬렸던 페이지인데, 일단 필수 기능에 페이지로 구별하라 해서 구분을 하긴 했지만 얘도 그냥 팝업으로 띄웠어도 되는게 아닌가? 싶었다.
이번주 목표는 최대한 빠르게 필수기능을 끝내고 아직 제대로 넣지 못한 개념을 조금이라도 더 공부해보자 였으나 결국 여기저기서 질문을 받으며 예상 했던거 보다 더 많은 공부를 하지 않았나 싶다.
그래도 프로젝트 결과물만 보았을 때는 아쉬움이 많이 남는다.
당장 눈에 보이는 문제점과 충분히 추가할 수 있는 기능이 아직 많이 남아 있었는데 구현을 못하고 그냥 제출해서 찝찝한 기분이 들긴 하지만 일단은 여기서 만족 하려고 한다.
- 추가 예정 기능
- 일정 내용 수정
- 일정 완료 취소
- 달력 높이 고정 (이벤트 늘어나면 스크롤 되게 만들기)
- 버튼 hover 색 변경
- 추가, 일정보기 버튼
