Week6/celine m2

[yoons-art]

📚 주차 / 미션

• 6주차 2번째 미션

---

📌 작업 내용

• 무한스크롤 부분 useInfiniteQuery로 무한스크롤 구현해보기 + 스켈레톤 UI

---

✨ 상세 작업 내용

• 무한스크롤이 적용 가능 한 부분은 useInfiniteQuery를 활용하여 무한스크롤을 적용하고, 로딩 처리 부분 또한 SkeletonUI를 적용

---

✅ 체크리스트

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

[yewon20804]

6주차 두번째 미션 확인했습니다 ! useInfiniteQuery를 사용한 무한스크롤과 스켈레톤 UI 모두 잘 구현해주셨습니다 🙂 아래 코멘트 확인해주세요 ㅎㅎ

---

1. useGetInfiniteLpList.ts — queryKey에 객체 자체를 넣고 있어요

QUERY_KEY는 { lps: "lps" } 형태의 객체인데, .lps 없이 객체 자체를 배열에 넣고 있습니다.
useGetLpList.ts에서는 QUERY_KEY.lps를 올바르게 사용하고 있어서 두 훅의 캐시 키가 달라지고, 쿼리 무효화(invalidation)가 제대로 동작하지 않을 수 있습니다 !

// 현재 (week4/src/hooks/queries/useGetInfiniteLpList.ts)
queryKey: [QUERY_KEY, search, order],

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

---

2. MyPage.tsx — 잘못된 Tailwind 클래스

rounded-sm-p-5와 hover-scale-90은 존재하지 않는 클래스입니다. 스타일이 적용되지 않고 있어요 !

// 현재
<button className="cursor-pointer bg-blue-300 rounded-sm-p-5 hover-scale-90">

// 수정
<button className="cursor-pointer bg-blue-300 rounded-sm p-5 hover:scale-90">