feat: 내 책장의 책 목록 DB에서 가져오기 및 선택한 책 삭제

[Ah-ae]

주요 변경 사항

• 사용자별 책장의 책 전체 목록 DB에서 조회하여 /mine 페이지에서 책 표지 섬네일 렌더링 (prisma studio를 사용해 DB에 먼저 데이터 직접 넣어둔 후 해당 데이터에 접근)
• 상단 Header 컴포넌트 마크업 작성
• Header 컴포넌트의 우측 편집 또는 완료 버튼으로 view, edit 모드 전환
• edit 모드일 때 사용자가 책 표지 섬네일을 클릭할 때 조건부 렌더링 구현 (dimmed overlay 및 빨간색 체크 아이콘)

추후 작업 예정

• deleteBooks 서버 액션 함수 작성
• Header 컴포넌트와 책 목록 사이에 Search 컴포넌트를 만들어 query에 따라 책 전체 목록 중 필터링한 목록 보여주기
• view 모드일 때 표지 섬네일 클릭시 책 상세 페이지로 이동 (현재 404)
• edit 모드일 때 드래그앤드롭으로 책 목록 순서 재정렬 구현
• edit 모드일 때 재정렬 버튼 클릭시 '등록순', '등록순(역순)', '제목순', '저자순' 등 재정렬 기능 구현

이슈

• 전역 상태를 사용하지 않고 사용자가 선택한 아이템(selectedItems) 데이터를 여러 컴포넌트에서 공유할 수 있도록 하는 게 어려웠음
  • 처음에는 session storage에 selectedItems: number[] 값을 저장하려고 했는데 해당 값을 onClick 이벤트 핸들러에서만 실시간으로 접근 가능해서 휴지통 아이콘 색상 조건부 렌더링이나 삭제 버튼의 disabled 처리를 구현할 수 없었음 - 94a5e5d : ⚠️ session storage 값은 왜 실시간으로 읽지 못하는데 url params는 읽을 수 있는지 digging 필요
• https://github.com/Ah-ae/what-are-you-reading/issues/11

스크린샷

Prisma Studio Book 테이블

라이트 모드

다크 모드

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
what-are-you-reading	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 7, 2024 10:21am

[Ah-ae]

추가 예정 작업들을 위한 칸반 보드 작성: https://github.com/users/Ah-ae/projects/3