혼자서 여러 시도를 해보다 너무 오랜 시간을 허비하게 되어 이렇게 글을 쓰게 되었습니다.

현재 카드 내용을 가지고 이동을 시키긴 했지만 크게 두가지 문제점이 있습니다.

첫번째로

splice를 쓰기 위해 객체를 배열로 바꾼뒤 그 배열을 리턴하여 구성했더니
기존 key값이 숫자로 대체되는 현상입니다.

배열을 문자키를 가진 객체로 다시 구성하기 위한 좋은 로직이 생각이 안납니다...

보드 이동 로직은 아래처럼 구성했습니다. 카드 이동은 정상작동중이라 코드에 추가하지 않았습니다.

const onDragEnd = (info: DropResult) => {
    const { destination, source, draggableId } = info;
    const category = draggableId.slice(9);
    // console.log(category);
    console.log(info);

    // 드래그를 하지 않았을 때
    if (!destination) return;

    // 카테고리를 이동할때
    if (
      source.droppableId === "category" &&
      destination.droppableId === "category"
    ) {
      setToDos((prev): any => {
        const newToDo = { ...prev };
        const makeArr = Object.keys(newToDo).map((cate) => newToDo[cate]);
        console.log("makeArr", makeArr);
        const taskObj = makeArr[source.index];

        makeArr.splice(source.index, 1);
        makeArr.splice(destination.index, 0, taskObj);
        console.log("makeArr", makeArr);
        return makeArr;
      });

      return console.log("통과");
    }

드래그 전

드래그 후 (TEST를 TODO로 옮김)

두번째로

보드를 드래그하여 옮길때 원하는 위치에 옮길 수가 없습니다. 이 부분은 설명하기 좀 애매하여 예를 들자면 보드를 드래그하여 옮길때 하나씩 밀려서 reorganization이 되는게 아니라 덩어리로 이동하여 원하는 index사이에 넣기가 어렵습니다.

보드를 드래그할때 아래처럼 한개씩 밀리지 않고 3개가 함께 움직여서 index를 컨트롤 하기 어렵습니다.

깃허브 주소 첨부합니다.

https://github.com/kirk0201/react-kanban/