6주차 미션 2 완료

[2yunkind]

📚 주차 / 미션

• 6주차 2번째 미션

---

📌 작업 내용

• 어떤 작업을 했는지 한 줄 요약
  무한스크롤 부분 useInfiniteQuery로 무한스크롤 구현해보기 + 스켈레톤 UI

✨ 상세 작업 내용

• 목록 화면을 useInfiniteQuery로 전환
• Skeleton UI로 로딩을 표현

---

📸 스크린샷

---

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

• 진행을 하며 서버에 있는 데이터가 옮겨지지 않으면서 데이터 값이나 사진이 안 보이는 오류가 있는 것 같습니다.

---

✅ 체크리스트

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

[yewon20804]

6주차 미션 2도 수고하셨습니다 ! useInfiniteQuery 무한스크롤 + 스켈레톤 UI 구현을 구현해보는게 미션 내용이였는데요 ! 미션 1에 남겨드린 코멘트랑 종합해서 정리해드리겠습니다 ! 여기서 한번에 확인하시고 수정해보시면 좋을 것 같아요 👍

---

1. API 엔드포인트 오타

// 현재 (점(.) 사용 — 잘못된 URL)
const { data } = await axiosInstance.get('v1.lps', { params: paginationDto });

// 수정
const { data } = await axiosInstance.get('/v1/lps', { params: paginationDto });

.으로 구분된 'v1.lps'는 존재하지 않는 경로입니다! 이렇게 되면 LP 데이터 조회가 실패합니다.

---

2. useInfiniteQuery 응답 데이터 구조 접근 오류 - useGetInfiniteLpList.ts

// 현재
getNextPageParam: (lastPage) => {
    return lastPage.data.hasNext ? lastPage.data.nextCursor : undefined;
}

// 수정
getNextPageParam: (lastPage) => {
    return lastPage.hasNext ? lastPage.nextCursor : undefined;
}

ResponseLpListDto 타입을 보면 hasNext와 nextCursor는 data 안이 아니라 최상위 레벨에 있어서 바로 접근해주시면 됩니다 !

---

3. axios.ts 인터셉터에서 useLocalStorage Hook 잘못 사용

// 현재 
if (originalRequest.url?.includes("/v1/auth/refresh")) {
    const { removeItem: removeAccessToken } = useLocalStorage(LOCAL_STORAGE_KEY.accessToken); // ❌
    ...
}

// 수정 — localStorage를 직접 사용
if (originalRequest.url?.includes("/v1/auth/refresh")) {
    localStorage.removeItem(LOCAL_STORAGE_KEY.accessToken);
    localStorage.removeItem(LOCAL_STORAGE_KEY.refreshToken);
    window.location.href = "/login";
    return Promise.reject(error);
}

React Hook은 컴포넌트나 커스텀 훅 최상위에서만 호출 가능합니다! 인터셉터 내부에서 호출하면 규칙 위반으로 런타임 에러가 발생합니다.

---

4. HomePage.tsx — 에러 조건 반전

// 현재 — isError가 false일 때 에러 표시
if (!isError) {
    return <div>Error</div>
}

// 수정
if (isError) {
    return <div className={"mt-20"}>Error</div>
}

---

5. 오타 및 테일윈드 오타

types/lp.ts — 오타 authorld

// 현재
authorld: number;  // l이 섞인 오타

//  수정
authorId: number;

Navbar.tsx — 검색 링크 className 오타

// 현재 — = 대신 =이 들어감
className="text=gray-700 dark:text-gray-300 hover:text-blue-500"

// 수정
className="text-gray-700 dark:text-gray-300 hover:text-blue-500"

LpCardSkeleton.tsx — Tailwind 클래스 오타

// shadow-lo → 존재하지 않는 클래스
<div className="relative rounded-lg overflow-hidden shadow-lo animate-pulse">

// 수정
<div className="relative rounded-lg overflow-hidden shadow-lg animate-pulse">