10.07 항해 25일차 TIL

4주차 개인 프로젝트 '나만의 캘린더' 만들기
"Scheduler"

📌필수 구현 기능

✅ 게시글 목록 페이지

• 이전 월 보기, 다음 월 보기 버튼이 있고 해당 버튼 클릭 시 월 이동 가능하게 하기
• 일정 하나를 클릭할 시 팝업 띄우기
• 일정 추가하기 버튼 (페이지 우측 아래에 플로팅 버튼으로 처리) 클릭 시 일정 추가하기 페이지로 이동하기
• 캘린더 내 일정은 시간 순으로 정렬하기
  • [주의] 파이어스토어에서 필터해서 가져오지 말고 전체 데이터를 가져온 후, 리덕스에서 필터를 할 것 (컴포넌트에서도 가능)
• 우측 아래의 추가하기 버튼 위에 [완료된 일정 보기] 만들기
  • 클릭 시, 완료된 일정만 캘린더에 표시 되고 버튼 텍스트가 [모든 일정 보기]로 바뀌도록 하기
  • [모든 일정 보기] 버튼 클릭 시, 모든 일정 캘린더에 표시하기
• PC, 모바일, 태블릿 3가지로 확인했을 때 뷰가 깨지지 않게 하기
  
  
  

✅ 게시글 작성 페이지

• 일시, 일정 내용을 기입하지 않으면 팝업으로 경고하기
  • 실제로 파이어스토어에 들어가지 못하게 막기
• 일정 추가 시 캘린더 페이지로 이동하기

우측 아래의 추가하기 버튼 위에 [완료된 일정 보기] 만들기

• 문제점
  

// 현재 디스플레이 상태 체크
//  action ( sch_list, show_end = true ) 
if(action.payload.show_end){
        draft.sch_list =  action.payload.sch_list.map((s,idx)=>{
          if(!s.is_end){
            return {...s, display : 'none'}
          }
        })
      }

30분을 헤메이던 끝에 당연하게도 안되는 코드를 붙잡고 있었다는 것을 인지했다.
return 해주는 배열과 형식이 맞지 않은건가? 라는 의문을 시작으로 문제점을 찾았다.

• 해결방법
  애시당초 sch_list를 받아올 필요도 없이 원하는 결과를 얻을 수 있었다.

// action (true)
draft.show_end = action.payload.show_end;
// draft.show_end의 값이 true 일 때
if (draft.show_end) {
          draft.sch_list.map((s, idx) => {
            if (!s.is_end) {
              // draft.sch_list 에 display : 'none' 항목을 추가한다.
              draft.sch_list[idx] = { ...s, display: "none" };
            }
          });
        }

• 완성 코드
  아래와 같이 작성하여 우측 아래의 추가하기 버튼 위에 [완료된 일정 보기] 만들기 기능을 구현 했다.
  리듀서에서 if를 한번만 써서 할 수도 있을 것 같았는데 계속 문턱에 걸리는 느낌이여서 일단은 나중에 다시 해보기로 했다..

//dispatch (버튼에 적용)

const onEndSch = () => {
     if(!show_end){
      dispatch(schActions.showSch(true))
     }else{
      dispatch(schActions.showSch(false))
     }
  }




//createAction

const showSch = createAction(SHOW_SCH, (show_end) => ({ show_end }));





//reducer

[SHOW_SCH]: (state, action) =>
      produce(state, (draft) => {
        draft.show_end = action.payload.show_end;

        if (draft.show_end) {
          draft.sch_list.map((s, idx) => {
            if (!s.is_end) {
              draft.sch_list[idx] = { ...s, display: "none" };
            }
          });
        } else {
          draft.sch_list.map((s, idx) => {
            draft.sch_list[idx] = { ...s, display: "auto" };
            draft.show_end = false;
          });
        }
      })

캘린더 내 일정은 시간 순으로 정렬하기

• [주의] 파이어스토어에서 필터해서 가져오지 말고 전체 데이터를 가져온 후, 리덕스에서 필터를 할 것 (컴포넌트에서도 가능)

• 문제점

//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시가 되어 내일 다시 해보기로 했다..