전기차 충전소 관리 시스템

문제

관리 시스템 특성상 한 화면에 오래 머물며 조회·등록·수정 작업을 이어가는 경우가 많아, Access Token 만료 시 작업 흐름이 끊기지 않도록 자연스러운 세션 연장과 보안 처리가 필요했습니다.

구현

보안을 위해 Access Token은 메모리에, Refresh Token은 HttpOnly Cookie에 분리 보관하고, 새로고침 시에는 Refresh Token으로 세션을 복원하도록 구성했습니다.

API 호출에서 401 응답이 발생하면 Refresh Token으로 Access Token을 자동 재발급받은 뒤, 실패했던 기존 API 요청을 자동으로 재실행하도록 연결했습니다.

재시도 횟수를 제한하고 Refresh 요청 전용 인터셉터를 분리해 토큰 갱신 중 무한 루프가 발생하지 않도록 방지했으며, Refresh Token까지 만료·무효화된 경우에는 즉시 로그아웃 처리했습니다.

문제

여러 관리 화면의 테이블이 하나의 전역 상태를 공유하면 화면 간 정렬 기준과 페이지 번호가 서로 덮어써지고, 새로고침 시 탐색 위치가 초기화되는 불편이 있었습니다.

구현

공통 스토어 생성 함수를 두고 Zustand의 createStore로 테이블마다 독립된 상태 인스턴스를 생성했습니다.

persist 미들웨어로 상태를 sessionStorage에 저장하되 테이블 식별자를 저장 키에 포함해, 각 테이블의 정렬·페이지 상태를 독립된 키로 복원하도록 구성했습니다.