[FE] 리액트 - 38강: 임시 저장 글 불러오기 및 수정, 발행 로직 완전 정리
useParams를 통해 ID를 가져와 Supabase API로 임시 저장된 토픽 데이터를 조회하고, 제목, 카테고리, 썸네일 등 기본 필드에 바인딩합니다. 🔍
- 저장 시
JSON.stringify로 처리된 본문(콘텐츠) 데이터는 불러올 때 JSON.parse를 사용하여 올바른 형식으로 변환 후 바인딩합니다. 🔄
AppEditor 컴포넌트에서 useEffect를 활용하여 프롭스로 전달받은 콘텐츠를 리치 텍스트 에디터(BlockNote Editor)에 반영하며, 무한 루프 방지를 위해 현재 에디터 내용과 새 콘텐츠가 다를 경우에만 업데이트를 수행합니다. ✍️
- 토픽 수정 시 기존 썸네일 이미지가 유실되지 않도록
typeof thumbnail === 'string' 조건을 추가하여 이미지가 존재할 경우 유지하는 로직을 구현합니다. 🖼️
- 기존 저장 로직을 재활용하여 토픽의
status 값을 TopicState.Publish로 변경하고, 발행 성공 시 사용자에게 메시지를 표시한 후 메인 페이지로 리다이렉션하는 발행 기능을 구현합니다. 🚀
- 임시 저장 토픽 목록 다이얼로그에서 긴 제목이 한 줄로 표시되고 초과 시
...으로 처리되도록 line-clamp-1을 적용하고, 항목 간 간격을 조정하여 가독성을 높이는 UI/UX 개선을 진행합니다. ✨
- 메인 페이지에서는
status가 'published'인 토픽만 조회하여 표시하는 로직을 구현할 예정임을 언급하며 다음 개발 방향을 제시합니다. 💡