Feat: Week7/nonshaman-m1

[nonshaman]

📚 주차 / 미션

• 7주차 1번째 미션

📌 작업 내용

• useMutation을 활용하여 서버 상태 관리

✨ 상세 작업 내용

• 하트기능 구현
• 하트취소기능 구현

📸 스크린샷

✅ 체크리스트

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

[yewon20804]

7주차 미션 확인했습니다 ! 이번 미션은 useMutation을 활용해보는거였습니다 😀
코멘트 확인 부탁드립니다 ~

---

1. lp.ts — getLpDetail 반환 타입 오류

// ❌ 현재
export const getLpDetail = async ({ lpId }: RequestLpDto): Promise<RequestLpDto> => {

// ✅ 수정
export const getLpDetail = async ({ lpId }: RequestLpDto): Promise<ResponseLpDto> => {

요청 DTO를 반환 타입으로 사용하고 있습니다 ! 응답 타입인 ResponseLpDto로 바꿔주세요 !

---

2. usePostLike.ts — onSuccess의 미사용 매개변수 context

// ❌ 현재
onSuccess: (data: ResponseLikeLpDto, Variables: RequestLpDto, context) => {

// ✅ 수정
onSuccess: (data: ResponseLikeLpDto) => {

context가 선언만 되고 사용되지 않아 에러가 날 수 있습니다 !

---

3. LpDetailPage.tsx — as any 사용으로 타입 안전성 없음

// ❌ 현재
} = useGetLpDetail({lpId:Number(lpId)}) as any;

// ✅ 수정
} = useGetLpDetail({lpId:Number(lpId)});

as any를 쓰면 TypeScript를 사용하는 의미가 사라집니다 ! 가능한 경우에는 타입 추론을 그대로 사용하는 게 더 안전한 것 같습니다 :)

---

4. LpDetailPage.tsx — 로딩/에러 조건 오류

// ❌ 현재
if(isPending && isError) {
    return <></>
}

// ✅ 수정
if (isPending) return <></>;
if (isError) return <div>에러가 발생했습니다.</div>;

isPending && isError는 동시에 true가 될 수 없습니다 !각각 분리해서 처리해주세요 :)