feat: 6주차 두번째 미션

[kimdoyeon1234]

📌 작업 내용

• 어떤 작업을 했는지 한 줄 요약
  React Query를 활용한 커서 기반 무한 스크롤 구현 및 Glassmorphism 디자인 시스템 구축

✨ 상세 작업 내용

• 커서 기반 무한 스크롤 (Infinite Scroll) 구현: useInfiniteQuery와 react-intersection-observer를 결합하여 메인 LP 목록과 상세 페이지 댓글 섹션에 무한 스크롤 기능을 적용했습니다. 서버 명세에 맞춰 cursor 및 nextCursor를 유연하게 연결
• 상태 관리 최적화: 정렬 필터(최신순/오래된순)를 queryKey에 포함하여 상태 변경 시 데이터가 자동으로 리패칭되도록 설계하고, staleTime 설정을 통해 불필요한 API 호출을 최소화
• Skeleton UI 및 UX 강화: 데이터 로딩 중 사용자 경험을 개선하기 위해 유리 질감이 적용된 댓글 스켈레톤 및 카드 스켈레톤 UI를 제작하여 자연스러운 화면 전환을 구현
• Axios 인터셉터 기반 인증 자동화: 401 에러(토큰 만료) 발생 시 refreshToken을 통해 accessToken을 자동 갱신하고, 중단되었던 API 요청을 재시도하는 로직을 구축
• Glassmorphism & 애니메이션 디테일: backdrop-filter와 미세한 외곽선 효과를 이용해 투명한 유리 질감을 표현

📸 스크린샷

리스트 스켈레톤 ui	상세 화면 및 댓글

✅ 체크리스트

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