7주차 미션 1,2

[2yunkind]

📚 주차 / 미션

• 7주차 1,2번째 미션

---

📌 작업 내용

• 어떤 작업을 했는지 한 줄 요약

---useMutation을 활용하여 서버 상태를 관리하고 이외로 낙관적 업데이트(OptimisticUpdate) 를 활용해서 더 빠르게 업데이트를 하기

✨ 상세 작업 내용

• 홈페이지에서 데이터 값을 눌렀을 때 detail페이지로 넘어가며 해당 화면에서 좋아요가 나오며 이를 눌렀을 때 바로 업데이트가 되도록 하는 구조

---

📸 스크린샷

---

❓ 리뷰어가 알아야 할 사항 / 질문

-1. 홈페이지 부분에서 데이터 값이 뜨지 않습니다.

• 2. detailpage로 넘어갔을 때 하트가 보이지 않습니다
• 3. 홈페이지에 보이는 박스가 생겼는데 그걸 누르면 Nan으로 값이 저장되지 않는걸 확인했습니다.
     ->이 오류들이 뜹니다...

---

✅ 체크리스트

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

[yewon20804]

혹시 지금 7주차 미션 1, 2 완료 커밋에서 보이는 파일이 UMC-8th-DB만 확인되고 있습니다 !
어떤 폴더에서 작업하신 건지 한 번 확인 부탁드립니다 🥹

[yewon20804]

7주차 미션 수고하셨습니다 ! 코드리뷰 내용 확인해보시고 수정해보시면 좋을 것 같아요☺️

1. usePostLike.ts — onMutate에서 원본 데이터를 직접 수정

// ❌ 현재 
const newLpPost = { ...previousLpPost }; // 얕은 복사라 likes 배열은 같은 참조!
previousLpPost?.data.likes.splice(likedIndex, 1); // 원본 수정 

// ✅ 수정 — 새로 복사해서 만들기
const previousLpPost: ResponseLpDto | undefined =
    queryClient.getQueryData<ResponseLpDto>([QUERY_KEY.lps, lp.lpId]);

const newLike = { userId, lpId: lp.lpId };
const newLpPost = {
    ...previousLpPost,
    data: {
        ...previousLpPost?.data,
        likes: [...(previousLpPost?.data.likes ?? []), newLike],
    },
};

queryClient.setQueryData([QUERY_KEY.lps, lp.lpId], newLpPost);
return { previousLpPost };

newLpPost를 만들어뒀지만, 실제로 원본 previousLpPost를 직접 splice로 수정하고 있습니다 !
얕은 복사만 하면 likes 배열은 같은 참조를 바라봐서 원본 데이터가 같이 수정될 수 있어서 에러 발생시 롤백이 어려울 수 있습니다!

---

2. usePostLike.ts , useDeleteLike.ts — 좋아요/취소 로직

// ❌ 현재 — 둘다에
if (likedIndex !== -1) {
    previousLpPost?.data.likes.splice(likedIndex, 1);  // 삭제 로직
} else {
    const newLike: { userId: number; lpId: number } = {
        userId,
        lpId: lp.lpId,
    };
    previousLpPost?.data.likes.push(newLike as any);  // 추가 로직
}

// ✅ 수정 — usePostLike 추가만
const newLike: { userId: number; lpId: number } = {
    userId,
    lpId: lp.lpId,
};
previousLpPost?.data.likes.push(newLike as any);

// ✅ 수정 — useDeleteLike 삭제만
if (likedIndex !== -1) {
    previousLpPost?.data.likes.splice(likedIndex, 1);
}

usePostLike 와 useDeleteLike 의 역할이 분리되어 있으니, 각 Hook 안에서는 필요한 로직만 남겨두면 더 명확할 것 같아요! 현재처럼 추가/삭제 로직을 각각 분리하면 코드 의도를 파악하기 쉬워집니다 😊

---

3. usePostLike.ts / useDeleteLike.ts — onMutate 리턴값과 onError의 context 타입 다름

return { previousLpPost }; // newLpPost 제거

현재 onMutate에서 { previousLpPost, newLpPost }를 리턴하는데, onError의 context 타입은 { previousLpPost } 만 받고 있습니다 ! TypeScript에서 context 추론이 어긋날 수 있어서 다음과 같이 수정해주세요 !

---

4. 하트 아이콘 랜더링 문제

현재 코드 상으론 문제가 없어보이는데..! 만약에 화면에 안나타나면 아이콘에 크기를 지정해봐주세요 !

<Heart
    size={24} // 여기!
    color={isLiked ? "red" : "black"}
    fill={isLiked ? "red" : "none"}
/>