Week7/celine m1

[yoons-art]

📚 주차 / 미션

• 7주차 1번째 미션

---

📌 작업 내용

-useMutation을 활용하여 서버 상태 손쉽게 관리하기

---

✨ 상세 작업 내용

• 데이터를 추가, 수정, 삭제(CUD)하는 모든 작업에서 useMutation을 표준으로 사용하고, 성공 후 invalidateQueries를 통해 화면을 자동으로 동기화

---

✅ 체크리스트

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

[yewon20804]

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

---

1. lp.ts — 백틱 vs 따옴표 오타

// ❌ 현재 
export const postLike = async({ lpId }: RequestLpDto): Promise<ResponseLikeLpDto> => {
    const { data } = await axiosInstance.post('/v1/lps/${lpId}/likes');
    return data;
}
export const deleteLike = async({ lpId }: RequestLpDto): Promise<ResponseLikeLpDto> => {
    const { data } = await axiosInstance.delete('/v1/lps/$(lpId)/likes');
    return data;
}

// ✅ 수정 
export const postLike = async({ lpId }: RequestLpDto): Promise<ResponseLikeLpDto> => {
    const { data } = await axiosInstance.post(`/v1/lps/${lpId}/likes`);
    return data;
}
export const deleteLike = async({ lpId }: RequestLpDto): Promise<ResponseLikeLpDto> => {
    const { data } = await axiosInstance.delete(`/v1/lps/${lpId}/likes`);
    return data;
}

postLike와 deleteLike 함수에서 URL에 변수를 넣어야 하는데 백틱(`) 대신 따옴표(')를 사용해서 URL에 lpId가 실제 숫자로 들어가지 않고 문자 그대로 ${lpId}, $(lpId)로 전송됩니다 !

---

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

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

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

isPending && isError는 동시에 true가 될 수 없습니다 ! 로딩 중일 때와 에러가 발생했을 때를 각각 따로 처리해야합니다 :)

---

3. components/LpCard/LpCard.tsx — navigate 경로 오류

// ❌ 현재
<div onClick={() => navigate(`./lps/${lp.id}`)}>

// ✅ 수정 
<div onClick={() => navigate(`/lps/${lp.id}`)}>

./lps/${lp.id}로 이동하면 현재 경로 기준 상대 경로가 되어서 의도한 페이지로 이동이 안 될 수 있습니다 !. 절대 경로로 수정하면 좋습니다 !