✍7.9 Same Board Movement

✅ 1. 수정이 일어난 보드만 복사
✅ 2. 그 복사본을 기존 것들의 옆에 붙여주기

 if (destination?.droppableId === source.droppableId) {
      //same board movement
      setToDos((allBoards) => {
        const boardCopy = [...allBoards[source.droppableId]];
        boardCopy.splice(source.index, 1);
        boardCopy.splice(destination?.index, 0, draggableId);
        return {
          ...allBoards,
          [source.droppableId]: boardCopy,
        };
      });
    }

✍7.10 Cross Board Movement

두개의 복사본을 만들어야하는데, source를 복사해와서 복사본에서 원하는 요소를 지워주고 destination을 복사해온 뒤 source에서 지워준 요소를 붙여넣어주면 된다.

if (destination?.droppableId !== source.droppableId) {
      //cross board movement
      setToDos((allBoards) => {
        const sourceBoard = [...allBoards[source.droppableId]];
        const destinationBoard = [...allBoards[destination.droppableId]];
        sourceBoard.splice(source.index, 1);
        destinationBoard.splice(destination?.index, 0, draggableId);
        return {
          ...allBoards,
          [source.droppableId]: sourceBoard,
          [destination.droppableId]: destinationBoard,
        };
      });
    }

지금까지 코딩해 온 것으로 잘 작동하지만, 모든 아이템을 한곳에다가 몰아넣고 다른 빈 board에 넣으려고 하면 맨 위까지 끌어올려서 힘들게 넣어야하는 불편함이 생긴다.
receiver의 배경색도 바꾸면서 이 기능도 조금 고쳐보자. (다음 챕터에서 계속)

✍7.11 Droppable Snapshot

✨1. 움직일 때마다 맨 위까지 가야지만 이동이 끝나게 되는 문제를 고쳐보자.

//<Wrapper>에 추가
display: flex;
flex-direction: column;

//<Area>에 추가
flex-grow: 1;

✨2. 어떻게 배경색을 바꾸고 움직이는 카드들의 스타일을 바꿀지 배워보자.

snapshot에서 우클릭한 뒤 "형식 정의로 이동"을 누르면 제공하고 있는 값을 확인할 수 있다.

draggingFromThisWith은 DraggableId(우리의 경우는 string)이거나 null일 건데, 우리 코드에서는 Boolean 값으로 받아보자. string이든 뭐든 존재하기만 하면 True 값을 반환할것이다.

background-color: ${(props) =>props.isDraggingOver? "pink" : props.draggingFromThisWith ? "red" : "blue"};

✍7.12 Final Styles

7.11에서 했던 것과 비슷하게 Card에도 isDragging등을 적용할 수 있다.

✍7.13 Refs

우리의 list에 to do를 추가할 수 있는 form을 만들어 보자.

reference를 사용하여 자바스크립트로부터 HTML 요소를 가져오고 수정할 수 있다.

✍7.14 Task Objects

이번챕터에서는 우리의 toDo가 더이상 string이 아닌 object로 prop들을 수정해보자.

App.tsx에서의 오류를 살펴보자. 지금까지 draggableId는 사용자가 움직인 card의 id(string 타입)이였다. 그런데 object로 바꿔서 card의 정보도 바뀌게 되기 때문에 id 정보를 이용해 toDo내용을 받으면 된다.

//atoms.ts
export interface ITodo {
  id: number;
  text: string;
}

interface IToDoState {
  [key: string]: ITodo[];
}

해당 객체의 정보를 저장해두고, 삭제한 다음에 또 다시 더해주기만 하면 된다. (다음 챕터에서 할 내용)

✍7.15 Creating Tasks

toDo로 이루어진 array안에 string(draggableId)을 넣으려고 했기 때문에 나는 오류를 해결해보자.

source.index가 우리 board의 어떤 위치에 taskObj가 있는지 알려주기 때문에 구현할 수 있는 것이다.

const taskObj = boardCopy[source.index];
boardCopy.splice(destination?.index, 0, taskObj);

이제 setToDos를 해줄건데, 모든 이전의 board들을 그대로 두고 현재 속한 board의 정보만 업데이트 해줘야 한다.

setToDos((allBoard) => {
      return { ...allBoard, [boardId]: [...allBoard[boardId], newToDo] };
    });