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적으로도 깔끔하지만 밀린 일이 많기도 하고 기존에 구현했던 드래그 앤 드롭 기능을 내가 전부 이해하고 구현한 게 아니라 다른 사람의 코드를 따라치기 급급했기 때문에 내가 직접 짠 코드를 사용하는 게 여러모로 좋을 것 같다고 판단했다.