Week6/sori m1

[soyun0318]

📚 주차 / 미션

• 6주차 1번째 미션

---

📌 작업 내용

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

---

✨ 상세 작업 내용

---

📸 스크린샷

---

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

---

✅ 체크리스트

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

[yewon20804]

6주차 첫번째 미션 수고하셨습니다! useQuery를 활용해서 LP 목록/상세 화면을 구현해주셨는데요, 스켈레톤 UI와 에러 재시도 컴포넌트까지 꼼꼼하게 챙겨주신 게 인상적이에요 !
PR 올리실 때 화면 녹화도 함께 첨부해주시면 리뷰할 때 더 도움이 될 것 같습니다 ㅎㅎ

아래 코멘트 확인해주세요 🙂

1. LpDetailPage.tsx — Rules of Hooks 위반

// 현재 (week4/UMC-FE/src/pages/LpDetailPage.tsx)
if (!accessToken) {
    navigate("/login", ...);
    return null;
}

// ❌ 조건문 이후 Hook 호출 → Rules of Hooks 위반
const {data, isLoading, isError} = useQuery({...});

// 수정
// useQuery를 조건문보다 먼저 선언하고, enabled 옵션으로 실행 여부를 제어하세요
const {data, isLoading, isError} = useQuery({
    queryKey: ['lp', lpId],
    queryFn: () => getLpDetail(Number(lpId)),
    enabled: !!lpId && !!accessToken, // accessToken이 없으면 쿼리 실행 안 함
});

if (!accessToken) {
    navigate("/login", { state: { from: location } });
    return null;
}

조건문(if (!accessToken)) 이후에 useQuery를 호출하고 있는데, React는 Hook을 조건문 안이나 조건문 이후에 사용할 수 없어요. 매 렌더링마다 Hook 호출 순서가 달라지면 예측 불가능한 버그가 생길 수 있습니다.

2. myPage.tsx — Tailwind 클래스 오타

// 현재 (week4/UMC-FE/src/pages/myPage.tsx)
<button className="cursor-pointer bg-blue-300 rounded-2m p-5 hover:scale-90">                                         

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

rounded-2m은 존재하지 않는 Tailwind 클래스입니다 !

---

이외에도 사용하지 않는 import문이나 console.log문은 지워주시면 더 좋을 것 같습니다 👍