개발 환경- Next.js 14 (page router)- TailwindCSS- Axios 문제 상황 BE에서 API를 통해 JWT을 보내주어 AccessToken을 통해 사용자 인증을 하는 방식을 사용하고 있으며, 코드잇 부트캠프 내에서 하는 프로젝트이기에 BE API를 변경할 수 없었고, RefreshToken 없이 AccessToken만을 사용해 인증을 하고, AccessToken의 주기가 짧아 자주 로그인을 해야했습니다. 또한, 현재 웹스토리지(LocalStorage)를 사용하여 SSR(서버사이드 렌더링) 시 로그인(사용자 인증)이 필요한 서비스(API)는 사용할 수 없었습니다.  문제점 요약짧은 토큰 수명때문에 API 통신에 있어 401(UnAuthorized)에러가 자주 발생SSR 방식을 사..

요구 사항Tablet에서 상단 네비게이션 영역의 좌우 여백은 50px을 유지합니다, 카드 리스트 영역의 좌우 최소 여백은 32px 입니다, 카드 컴포넌트의 최소 너비는 186px 입니다, 카드 리스트 영역이 줄어드는 것에 따라 카드 크기가 작아지다가 186px보다 작아질 때 하나의 행에 4개 → 3개씩 보이도록 합니다.문제상황렌더 시에 데이터 패칭 전 과정에서 아무런 요소가 없어 사용자가 요소와 페이지네이션의 존재를 알 수 없다.반응형 요소 변화 시 요소 개수 오류(8개 -> 6개)(6개 -> 8개)적용 사항Skeleton UI를 적용하여 렌더링 시 요소 위치를 사용자에게 미리 보여줌code// before //... return ( ); }; export defaul..