Week7/celine m2

[yoons-art]

📚 주차 / 미션

• 7주차 2번째 미션

---

📌 작업 내용

• 낙관적 업데이트(OptimisticUpdate) 를 활용해서 빛보다 빠르게 업데이트

---

✨ 상세 작업 내용

• 게시글 상세 조회에서 좋아요를 누를 때 낙관적 업데이트(OptimisticUpdate) 를 이용하여 바로 좋아요가 반영되도록 구현

---

✅ 체크리스트

• 기능 정상 작동 확인
• 불필요한 주석 삭제
• 해당 주차 키워드 내용 이해

[yewon20804]

7주차 미션2 확인했습니다 ! 낙관적 업데이트 개념을 이해하고 좋아요 기능을 구현해보는거였는데요! 😀
코멘트 확인 부탁드립니다 ~

---

1. usePostLike.ts & useDeleteLike.ts — onError에서 롤백 데이터

// ❌ 현재 
onError: (err, newLp, context) => {
    queryClient.setQueryData(
        [QUERY_KEY.lps, newLp.lpId],
        context?.previousLpPost?.data?.id,  // ← 잘못된 부분
    )
},

// ✅ 수정 — previousLpPost 전체를 넣어야 이전 상태로 안전하게 롤백됩니다
onError: (err, newLp, context) => {
    queryClient.setQueryData(
        [QUERY_KEY.lps, newLp.lpId],
        context?.previousLpPost,  // ← 수정
    )
},

롤백 시에는 수정된 일부 값만 아니라 이전 데이터 전체를 복원해줘야, 에러 발생 시 원래 상태로 안전하게 되돌릴 수 있을 것 같습니다!

---

2. useDeleteLike.ts — 삭제 로직이 없음!

// ❌ 현재 — 추가/제거 로직이 postLike와 동일
if (likeIndex >= 0) {
    previousLpPost?.data?.likes.splice(likeIndex, 1);
} else {
    const newLike = { userId, lpId: lp.lpId } as Likes;
    previousLpPost?.data?.likes.push(newLike);  // ← 여기
}

// ✅ 수정 
if (likeIndex >= 0) {
    previousLpPost?.data?.likes.splice(likeIndex, 1);
}

useDeleteLike는 좋아요를 제거하는 로직인데, 현재 onMutate가 usePostLike와 동일하게 작성되어 있어서 둘 다 좋아요를 추가하는 방향으로 동작하고 있는 것 같습니다! useDeleteLike는 삭제되도록 수정 사항 확인해주세요 😀

---

미션 1에 달아드린 lp.ts — URL에 백틱() 대신 따옴표 , LpDetailPage.tsx — 로딩/에러 조건 오류도 같이 해결 하면 좋을 것 같습니다 :)