위시리스트 프로젝트, 드래그앤드롭 문제 해결 및 기능 개선!

오늘은 위시리스트 프로젝트에서 발생했던 드래그앤드롭 관련 문제들을 해결하고, 사용자 경험을 개선하기 위한 기능들을 구현했습니다.

🛠️ 오늘 구현 및 해결한 주요 내용

  1. MainContent.js 구문 오류 수정:
    • 'return' outside of function 오류를 해결하기 위해 MainContent.js 파일 내 return 문의 위치를 수정하여 컴포넌트가 올바르게 JSX를 반환하도록 했습니다.
  2. Firebase Firestore 배치 쓰기 오류 해결:
    • _firebase__WEBPACK_IMPORTED_MODULE_1__.db.batch is not a function 오류를 해결하기 위해 MainContent.js에서 firebase/firestore의 writeBatch 함수를 올바르게 import하고, db.batch() 대신 writeBatch(db)를 사용하도록 수정했습니다.
  3. 아이템 드래그앤드롭 문제 해결 및 대체 기능 구현:
    • @hello-pangea/dnd 라이브러리를 사용한 아이템 드래그앤드롭 시 아이템이 마우스와 다르게 움직이는 문제를 해결하기 위해 CategoryCard.js의 handleAddItem 함수에서 item.id 생성 시 Date.now()와 함께 무작위 문자열을 추가하여 draggableId의 고유성을 강화했습니다.
    • 드래그앤드롭 기능에 지속적인 문제가 발생하여, 아이템의 순서를 변경하는 “위로 이동” 및 “아래로 이동” 버튼을 추가하는 방식으로 기능을 대체했습니다.
      • ItemRow.js에서 Draggable 래퍼를 제거하고 “위로 이동”, “아래로 이동” 버튼을 추가했습니다.
      • MainContent.js에 handleMoveItemUp 및 handleMoveItemDown 함수를 추가하여 로컬 상태와 Firestore의 items 배열을 업데이트하도록 구현했습니다.
      • CategoryCard.js에서 Droppable 래퍼를 제거하고, MainContent.js에서 전달받은 onMoveItemUp 및 onMoveItemDown props를 ItemRow.js로 전달했습니다.
      • MainContent.js에서 DragDropContext, Droppable, Draggable import 및 사용을 제거했습니다.
  4. “Hobbies”를 “Interests”로 변경:
    • UI에 표시되는 텍스트뿐만 아니라, 코드 내에서 “hobbies”라는 문자열을 사용하여 컬렉션 이름이나 상태 변수 등을 참조하는 모든 부분을 “interests”로 변경했습니다.
    • MainContent.js 파일에서 hobbies 상태 변수 및 관련 setHobbies 호출을 interests 및 setInterests로 변경했습니다.
    • Firestore 컬렉션 이름 “hobbies”를 “interests”로 변경했습니다.
    • UI에 표시되는 “My Hobbies” 텍스트를 “My Interests”로 변경했습니다.
    • listType="hobbies"로 전달되는 모든 부분을 listType="interests"로 변경했습니다.
    • handleMoveItemUp 및 handleMoveItemDown 함수 호출 시 hobbies를 interests로 변경했습니다.

🚀 다음 목표

오늘 구현된 기능들을 바탕으로, 애플리케이션의 안정성을 더욱 높이고 사용자 피드백을 반영하여 추가적인 개선을 진행할 예정입니다.

오늘도 많은 문제들을 해결하며 프로젝트가 한 단계 더 발전했습니다.