Week6/celine m1

[yoons-art]

📚 주차 / 미션

• 6주차 1번째 미션

---

📌 작업 내용

• useQuery로 LP 목록/상세 화면 만들기

---

✨ 상세 작업 내용

• 커스텀 훅(Custom Hook)으로 데이터 패칭, 로딩, 에러 처리를 만든 과정을 useQuery로 변경을 해보는 과정

---

✅ 체크리스트

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

[yewon20804]

6주차 첫번째 미션 확인했습니다 ! useQuery를 사용해서 lp 목록 / 상세 페이지를 진행해주시는게 미션이였는데요🙂 PR 업로드 해주실 때 화면 녹화도 같이 포함해주면 코드 리뷰할 때 더 도움이 될 것 같습니다 ㅎㅎ 아래 코멘트도 확인해주세요 !

---

1. axios.ts — React Hook을 일반 함수 안에서 호출

axiosInstance.interceptors.request.use((config) => {
    const {getItem} = useLocalStorage(LOCAL_STORAGE_KEY.accessToken); // 💥
    ...
});

React Hook은 컴포넌트나 커스텀 Hook 내부에서만 호출할 수 있습니다 ! Axios 인터셉터는 일반 함수라서 여기서 useLocalStorage를 쓰면 에러가 발생합니다 !

---

2. AuthContext.tsx — alert("로그인 실패")가 try-catch 바깥에 위치

//  기존 - 중괄호 위치 오류 
try {
    ...
    alert("로그인 성공");
} catch(error) {
    console.error("로그인 오류:", error);
}          // ← catch 종료
alert("로그인 실패"); //  로그인 성공해도 실행됨

// ✅수정 예시
try {
    const {data} = await postSignin(signinData);
    if (data) {
        // ...토큰 저장...
        alert("로그인 성공");
    }
} catch(error) {
    console.error("로그인 오류:", error);
    alert("로그인 실패"); // catch 안으로 이동
}

로그인 성공/실패와 관계없이 항상 "로그인 실패" 알림이 뜨게 됩니다 !

---

위에는 로그인 피드백이였고 밑에는 6주차 미션 부분 !

3. HomePage.tsx — map에서 key prop 누락

// key 없음 → React 경고 발생
{data?.data?.data?.map((lp) => <h1>{lp.title}</h1>)}

// 수정
{data?.data?.data?.map((lp) => <h1 key={lp.id}>{lp.title}</h1>)}

4. useGetLpList.ts — queryKey에 cursor, limit 누락

// 현재 - cursor, limit 빠져 있음
queryKey: [QUERY_KEY.lps, search, order],
queryFn: () => getLpList({ cursor, search, order, limit }),

// 수정
queryKey: [QUERY_KEY.lps, cursor, search, order, limit],

cursor나 limit이 바뀌어도 queryKey가 동일하면 캐시된 이전 데이터를 그대로 반환합니다. 커서 기반 페이지네이션 구현 시 다음 페이지 데이터를 불러오지 못하기 때문에 데이터가 적절하게 반환되고 있는지 확인 필요할 것 같아요 !! ☺️