refactor : 서버에서 전달하는 데이터를 받아서 화면에 색상을 반영하는 코드 작성

[dongind]

🎟️ 태스크

MemoList 색상변경 코드 리팩토링

✅ 작업 내용

• 메모가 변경되면, 화면에 변경된 색상으로 반영되도록 수정
• 메모 전체 상태값에서 색상이 변경되게 되면, 해당 값을 메모 상태값에서 수정하는 코드 작성

🖊️ 구체적인 작업

메모가 변경되면, 화면에 변경된 색상으로 반영되도록 수정

• 기존 코드의 문제점 : 메모 전체 데이터에서 값을 받아 새롭게 메모의 색상 상태값을 만들어 관리
  • 따라서, 전체 메모가 변경되더라도 메모의 색상 상태값이 변경되지 않았기 때문에 색상이 변하지 않음
  • 메모의 색상 상태값을 별도로 관리해야 할 이유가 없음에도 해당 방식으로 설계한 실수로 인해 작동하지 않음
• 해당 방식을 개선하여, 현재는 메모의 색상이 모든 사용자에게 동시에 변경되도록 설계완료함

드래그 앤 드롭

• 각 칸반보드 컴포넌트마다 wrapper를 적용해서 그룹화 했을 때 같은 그룹에 속한 태스크만 옮길 수 있도록 했습니다.
• 선택한 태스크의 배경 색을 변경해 선택되었음을 확실히 인지할 수 있도록 했습니다.
• 태스크 수정 api와 연결해 태스크를 드롭하면 실제 태스크의 상태가 변경될 수 있도록 했습니다.
• api 연결에는 usePostTaskState라는 커스텀 훅을 만들어 사용했습니다.

📸 결과 화면(선택)

[surinkwon]

부모로부터 전달받은 props를 그대로 사용하는 방식이 아니라 useEffect를 통해 동기화 하는 방식으로 수정하신 이유가 있을까요?

[surinkwon]

이후에 이 부분은 삭제해주시면 좋을 것 같습니다~

[dongind]

문제점을 파악하기 위해 적어놓은 코드를 제거하는 것에 실수가 있었습니다. 바로 제거토록 하겠습니다.

부모로부터 전달받은 props를 그대로 쓰지 않았던 것은, 이전 설계 과정에서 충분한 시간을 들여 처리하지 않아 발생한 문제입니다.
특히, 문서 동시 편집을 위한 구조를 설계하기 용이하게 만들기 위해 별도의 상태를 만들었었는데 이게 잘못된것으로 생각이 듭니다. 따라서, 이후 있는 useRouterContext를 통한 개선 코드에서 이를 전부 수정할 예정입니다.