10.06 항해 24일차 TIL

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

📌필수 구현 기능

✅ 게시글 목록 페이지

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

✅ 게시글 작성 페이지

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

파이어베이스를 제외한 crud 기능 구현

이 부분은 큰 막힘 없이 구현 가능 했던 것 같다.

//action
const LOAD_SCH = "LOAD_SCH";
const ADD_SCH = "ADD_SCH";
const EDIT_SCH = "EDIT_SCH";
const DEL_SCH = "DEL_SCH";
const ON_POPUP = "ON_POPUP";
const SHOW_SCH = "SHOW_SCH";

//action creator
const loadSch = createAction(LOAD_SCH, (sch_list) => ({ sch_list }));
const addSch = createAction(ADD_SCH, (sch) => ({ sch }));
const editSch = createAction(EDIT_SCH, (sch_id) => ({ sch_id }));
const delSch = createAction(DEL_SCH, (sch_id) => ({ sch_id }));
const onPopup = createAction(ON_POPUP, (is_popup) => ({ is_popup }));
const showSch = createAction(SHOW_SCH, (show_end) => ({ show_end }));

//reducer
export default handleActions(
  {
    [LOAD_SCH]: (state, action) =>
      produce(state, (draft) => {
        draft.sch_list = action.payload.sch_list;
      }),

    [ADD_SCH]: (state, action) =>
      produce(state, (draft) => {
        draft.sch_list.unshift(action.payload.sch);
      }),
    
    [EDIT_SCH]: (state, action) =>
      produce(state, (draft) => {
        let idx = draft.sch_list.findIndex(
          (s) => s.id === action.payload.sch_id
        );

        draft.sch_list[idx] = {
          ...draft.sch_list[idx],
          is_end: true,
          color: "green",
        };
      }),
    
    [DEL_SCH]: (state, action) =>
      produce(state, (draft) => {
        let idx = draft.sch_list.findIndex(
          (s) => s.id === action.payload.sch_id
        );
        draft.sch_list.splice(idx, 1);
      }),
    
    [ON_POPUP]: (state, action) =>
      produce(state, (draft) => {
        draft.is_popup = action.payload.is_popup;
      }),
    
    [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;
          });
        }
      }),
  },
  initialState
);

요즘 느끼는 것

아무런 베이스도 없이 항해를 시작 하며 난생 처음 코딩을 하게 되어서 아직 아는게 별로 없는데도 불구하고 감사하게도 나한테 질문을 꾸준히 해주시는 분들이 계신다.

배운 기간이 길지도 않고 아직 경험도 없기에 물어보시는 질문의 99%는 경험해 보지 못한 에러여서 해결 하는데 시간이 조금 오래 걸리지만 오는 질문을 절대 마다하지 않고 내 에러를 처리한다는 생각으로 끝까지 파고들기에 대부분은 결국 해결이 되는 것 같다.

강의를 들으며 얕게 배운 코드를 다른 분들의 질문을 통해 조금 더 자세하게 하나 하나 보게 되고 오히려 질문을 받은 내가 더 배우면서 같이 에러를 찾아 나가기 때문에 가장 많은 성장을 한다고 느끼고 있는 부분이다.

아무래도 이제 팀 프로젝트에 들어가면 이렇게 마음놓고 질문을 주고 받기가 힘들 것 같아 이번주에 최대한 많이 공부하고 해결하며 기본을 다져 놓아야겠다는 생각이 있다.