Feat: Week6/nonshaman-m1

[nonshaman]

📚 주차 / 미션

• 6주차 1번째 미션

📌 작업 내용

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

✨ 상세 작업 내용

• Custom Hook으로 데이터 패칭, 로딩, 에러 처리를 만든 과정을 useQuery로 변경

✅ 체크리스트

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

[yewon20804]

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

---

1. React Hook을 인터셉터(일반 함수) 내에서 호출

// src/apis/axios.ts
// 현재 
axiosInstance.interceptors.request.use((config) => {
    const { getItem } = useLocalStorage(LOCAL_STORAGE_KEY.accessToken);
    const accessToekn = getItem();

// 수정 - localStorage를 직접 사용
axiosInstance.interceptors.request.use((config) => {
    const accessToken = localStorage.getItem(LOCAL_STORAGE_KEY.accessToken);

React Hooks는 React 컴포넌트 또는 커스텀 훅 안에서만 호출되어야 합니다. 인터셉터는 일반 JS 함수이므로 useLocalStorage 호출 시 런타임 에러가 발생합니다 !

---

2. vite.config.ts에서 React 플러그인 누락

import react from '@vitejs/plugin-react' // 추가
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

package.json에는 @vitejs/plugin-react가 있지만 vite.config.ts에서 등록하지 않아 JSX 변환이 되지 않아 앱 자체가 동작하지 않습니다..!

---

3. 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가 동일하면 캐시된 이전 데이터를 그대로 반환합니다. 커서 기반 페이지네이션 구현 시 다음 페이지 데이터를 불러오지 못하기 때문에 데이터가 적절하게 반환되고 있는지 확인 필요할 것 같아요 !! ☺️