feat: 6주차 첫번째 미션

[kimdoyeon1234]

📌 작업 내용

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

• Glassmorphism 스타일: 전반적인 UI에 투명도와 블러 효과를 준 유리 질감 디자인을 적용했습니다
• 카드 인터랙션: 카드 Hover 시 확대 효과와 메타 정보(제목, 날짜, 좋아요) 노출을 통해 인터랙티브한 카드 UI를 완성했습니다
• 동적 라우팅: 각 카드를 클릭하면 해당 LP의 id를 기반으로 상세 페이지(/lps/:lpid)로 이동하도록 경로 파라미터를 연결했습니다

✨ 상세 작업 내용

• 정렬 필터링 자동화: 정렬 상태(sort)를 queryKey에 포함하여 사용자가 최신순/오래된순 버튼을 클릭할 때마다 별도의 수동 패칭 없이 목록이 자동 업데이트되도록 구현했습니다.

📸 스크린샷

✅ 체크리스트

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

[yewon20804]

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

---

1. LpListPage.tsx — data?.data.map() 이중 접근

queryFn에서 이미 res.data.data를 반환하고 있는데, 렌더링 시 data?.data.map()으로 한 번 더 .data를 접근하고 있습니다. 정상적으로 LP 카드가 출력되고 있는지 확인이 필요할 것 같습니다 !

// 현재 (week6/client/src/pages/LpListPage.tsx)
queryFn: async () => {
  const res = await api.get('/lps', { ... });
  return res.data.data; 
},
// 렌더링 시
data?.data.map((lp: any) => <LpCard ... />)

// 수정
data?.map((lp: any) => <LpCard key={lp.id} lp={lp} />)

---

2. MyPage.tsx — 로그아웃 시 refreshToken 미삭제

Layout.tsx의 로그아웃은 localStorage.clear()를 사용하는데, MyPage.tsx의 로그아웃 핸들러는 accessToken만 제거하고 있습니다 ! refreshToken이 남아있으면 토큰 갱신을 계속 시도할 수 있습니다.

//  현재 (week6/client/src/pages/MyPage.tsx)
const handleLogout = () => {
  localStorage.removeItem('accessToken');  // refreshToken 잔존!
  ...
};

//  수정
const handleLogout = () => {
  localStorage.clear();  // 또는 removeItem('accessToken') + removeItem('refreshToken') + removeItem('nickname')
  ...
};