6주차 미션 1 완료

[2yunkind]

📚 주차 / 미션

• 6주차 1번째 미션

---

📌 작업 내용

• 어떤 작업을 했는지 한 줄 요약

---LP 페이지(목록/상세)를 그대로 활용하되, 커스텀 훅(Custom Hook)으로 데이터 패칭, 로딩, 에러 처리를 만든 과정을 useQuery로 변경

✨ 상세 작업 내용

• Navbar을 통해 디자인 변경
• 로그인, 로그아웃 등 눌렀을 때 페이지가 변경되며 토큰 또한 연결되는 구조

---

📸 스크린샷

---

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

---

✅ 체크리스트

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

[yewon20804]

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

---

1. lp.ts — API 경로 오타

axiosInstance.get()에 전달하는 URL이 슬래시(/) 대신 점(.)으로 작성되어 있습니다. 이 상태로는 API 요청이 전혀 동작하지 않습니다 !

// 현재 (week6/mission1/src/apis/lp.ts)
const { data } = await axiosInstance.get('v1.lps', { ... });

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

---

2. HomePage.tsx — isError 조건 반전

에러 조건이 반대로 작성되어 있습니다. 현재 코드에서는 에러가 없을 때 "Error" 화면이 렌더링되고, 실제 에러가 발생하면 LP 목록이 렌더링되는 반전이 일어납니다 !

// 현재 (week6/mission1/src/pages/HomePage.tsx)
if(!isError){
    return <div className={"mt-20"}>Error</div>  // 에러가 없을 때 Error 화면이 뜸!
}

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

---

3. HomePage.tsx — list 렌더링 시 key prop 누락

map()으로 LP 목록을 렌더링할 때 key prop이 없습니다. React 경고가 발생하고 리렌더링 최적화가 되지 않습니다 !

// 현재 (week6/mission1/src/pages/HomePage.tsx)
{data?.map((lp) => <h1>{lp.title}</h1>)}

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

---

4. lp.ts — authorId 오타

types/lp.ts의 LP 타입 정의에서 authorId가 authorld로 잘못 작성되어 있습니다. 소문자 l(엘)이 대문자 I(아이)처럼 보이는 오타입니다 !

// 현재 (week6/mission1/src/types/lp.ts)
authorld: number;

// 수정
authorId: number;