결과물

Redux

import mockData from "data/mockdata.json";

const LOCAL_KEY = "letters";
const MODIFY_LETTER = "modify/letter";
const ADD_LETTER = "add/letter";
const DELETE_LETTER = "delete/letter";

export const modifyLetter = (paylod) => {
  return {
    type: MODIFY_LETTER,
    paylod
  };
};
export const addLetter = (paylod) => {
  return {
    type: ADD_LETTER,
    paylod
  };
};
export const deleteLetter = (paylod) => {
  return {
    type: DELETE_LETTER,
    paylod
  };
};

const localLetters = JSON.parse(localStorage.getItem(LOCAL_KEY))
  ? JSON.parse(localStorage.getItem(LOCAL_KEY))
  : mockData;

if (!localLetters) {
  localStorage.setItem(LOCAL_KEY, JSON.stringify(mockData));
}

export const modulesLetters = (state = localLetters, action) => {
  switch (action.type) {
    case MODIFY_LETTER: {
      const newState = state.map((letter) => {
        if (letter.id === action.paylod.id) {
          return { ...action.paylod };
        }
        return letter;
      });
      localStorage.setItem(LOCAL_KEY, JSON.stringify(newState));

      return newState;
    }
    case ADD_LETTER: {
      localStorage.setItem(LOCAL_KEY, JSON.stringify([...state, { ...action.paylod }]));

      return [...state, { ...action.paylod }];
    }
    case DELETE_LETTER: {
      console.log(action.paylod);
      const newState = state.filter((letter) => letter.id !== action.paylod);
      localStorage.setItem(LOCAL_KEY, JSON.stringify(newState));
      return newState;
    }
    default: {
      return state;
    }
  }
};

작업후기

• 스타일드컴포넌트를 어떻게 해야 효율적으로 쓸 수 있는지 감을 못잡았다.
• component폴더의 종류별 재사용 가능한 styled컴포넌트를 넣어두려고했으나 호락호락하지않았다.
• 중첩라우팅을 사용했는데 usenavigate로 이동 시 쿼리를 지워버린다 쿼리값을 유지한채로 이동하고싶었는데 방법을 찾지못했다 결국 usenavigate에 현재 쿼리값 + 이동할 url을 넣어야했다.
• 디자인의 통일성이나 색감 같은건 역시나 어렵다..
• 캐러샐을 만드는건 쉬우나 반응형으로 만들기는 아직 어려운 것 같다.
• 반응형을 구현하진않았지만 초기 구현단계에서 고려해야하는데 그부분이 참 어려운것 같다.

추가해야하는 기능

• url에 쿼리값으로 id를 추가하여 modal을 띄웠는데 페이지 이동시 애니메이션을 추가하고싶다.
• 반응형
• 페이지 간 이동시 스크롤 탑시켜줘야할 것 같다.
• 캐러샐에서 동영상 재생 시 화면에 보이지않을때는 자동으로 동영상을 멈춰주어야 할 것 같다.
• 인풋 값 체크로직 추가해야함

#오늘의 에너지#Git