위로 이동

    upCourse: (state: any, action) => {
      state.courseList = [...state.courseList];
      const i = state.courseList.findIndex(
        (item: any) => item.id === action.payload.id
      );
      if (i > 0) {
        let temp = state.courseList[i];
        state.courseList[i] = state.courseList[i - 1];
        state.courseList[i - 1] = temp;
      } else {
        alert("첫 번째 코스입니다.");
      }
    },

아래로 이동

    downCourse: (state: any, action) => {
      state.courseList = [...state.courseList];
      const i = state.courseList.findIndex(
        (item: any) => item.id === action.payload.id
      );
      if (i < state.courseList.length) {
        let temp = state.courseList[i];
        state.courseList[i] = state.courseList[i + 1];
        state.courseList[i + 1] = temp;
      } else {
        alert("마지막 코스입니다.");
      }
    },

에러

마지막 순서에서 아래로 이동 버튼 클릭시 예외처리가 일어나지 않고 빈화면 반환

원인

i < state.courseList.length

i는 0부터 시작하지만 배열의 길이는 1부터 시작하기 때문.

다시 말해 2개의 코스가 있다고 가정했을 때 두 번째 카드에서 아래로 이동 버튼을 클릭시, i와 state.courseList.length의 값이 모두 2가 되는데 2번 카드가 존재하지 않기 때문에 에러가 났던 것.

해결

i + 1 < state.courseList.length

i와 state.courseList.length의 기준을 통일.

해당 로직으로 구현시 아까와 같은 상황에서 i는 3, state.courseList.length는 2가 되기 때문에 예외 처리에 해당하게 된다.

원래는 드래그 앤 드롭으로 순서를 변경했었는데 UI가 변경되면서 계속해서 버그가 발생했다. 하루종일 고쳐보았으나 끝내 고치지 못해서 결국 순서 변경 버튼으로 방향을 선회했다. 드래그 앤 드롭이 훨씬 더 유저 친화적이고 UI적으로도 깔끔하지만 밀린 일이 많기도 하고 기존에 구현했던 드래그 앤 드롭 기능을 내가 전부 이해하고 구현한 게 아니라 다른 사람의 코드를 따라치기 급급했기 때문에 내가 직접 짠 코드를 사용하는 게 여러모로 좋을 것 같다고 판단했다.