Progmong
토큰 자동 갱신·라우트 가드·인증 UX 개선에 집중한 인증 중심 프론트엔드 아키텍처 구축
나의 역할
FE
구성원
Backend 2명 Frontend 3명
작업기간
2025.07.10 - 2025.07.23 (2주)
프로젝트 개요
Progmong FE에서 인증(Auth) 흐름과 라우팅 접근 제어를 중심으로 구조를 설계하고 고도화했습니다. axiosInstance 기반 통신 계층을 정리하고, 리프레시 토큰·JWT 자동 갱신·checkAuth·AuthContext를 연결해 자동 로그인과 세션 유지 경험을 안정적으로 구현했습니다. 동시에 PublicRoute/ProtectedRoute를 도입해 인증 상태에 따른 화면 접근을 명확히 분리했고, 로그인/회원가입/비밀번호 찾기 화면의 모달·반응형·시각 요소를 개선해 진입 UX를 강화했습니다.
주요 화면
담당 역할 / 업무
인증(Auth) 흐름 설계 및 고도화
로그인 API 연동, 이메일/코드 인증, 회원가입, 비밀번호 찾기까지 인증 전 과정을 구현했습니다. AuthContext와 checkAuth를 연결하고 리프레시 토큰 및 자동 로그인 흐름을 완성했습니다.
라우팅 접근 제어 아키텍처 구축
React Router 구조를 재정리하고 PublicRoute/ProtectedRoute를 도입해 인증 상태 기반 접근 제어를 라우팅 레벨에서 일관되게 관리하도록 설계했습니다.
API/통신 계층 표준화
axios 의존성을 도입하고 axiosInstance로 전환하여 토큰 자동 갱신, 에러 처리(400→401 정리) 등 인증 중심 통신 규칙을 공통 계층으로 끌어올렸습니다.
인증 UI/UX 및 반응형 개선
로그인/회원가입/비밀번호 찾기 화면에 모달과 반응형을 적용하고, 로고/배경/로그아웃 버튼 UI를 개선해 인증 진입 경험을 정돈했습니다.
주요 성과
- axiosInstance + JWT 자동 갱신으로 토큰 만료 상황에서도 사용자 흐름이 끊기지 않도록 설계
- AuthContext + checkAuth 연동으로 자동 로그인 및 세션 유지 경험을 명확히 구현
- PublicRoute/ProtectedRoute 도입으로 인증 분기를 페이지가 아닌 라우팅 계층에서 일관 관리
- 인증 화면(로그인/회원가입/비밀번호 찾기)에 모달·반응형을 적용해 진입 UX 품질 향상
트러블슈팅
토큰 만료 시 연속 요청 실패 문제
이슈: 액세스 토큰 만료 시 401 에러가 연쇄적으로 발생하며 사용자 흐름이 끊길 수 있었음.
해결: axiosInstance에 JWT 자동 갱신(리프레시) 로직을 연결하고, 인증 상태를 AuthContext와 결합해 자동 로그인 흐름으로 복구되도록 구성함.
💡 배운 점: 인증 품질은 ‘로그인 성공’보다 ‘만료 이후 복구 전략’이 UX를 좌우한다는 점을 체득함.
인증 상태에 따른 라우팅 혼선
이슈: 로그인/비로그인 상태에서 접근 가능한 화면이 섞이며 분기 로직이 여러 페이지에 흩어지는 문제가 있었음.
해결: PublicRoute/ProtectedRoute를 도입하고 라우터 구조를 재정리해 인증 분기를 라우트 레벨에서 일괄 처리하도록 개선함.
💡 배운 점: 접근 제어는 개별 페이지보다 라우팅 계층에서 중앙집중적으로 관리할수록 유지보수가 쉬워짐을 확인함.
인증 에러 코드 처리 불일치
이슈: 인증 실패 상황에서 400/401 처리 기준이 혼재되어 사용자 메시지와 분기 처리가 일관되지 않았음.
해결: 인증 관련 에러 코드를 401 중심으로 정리하고 axiosInstance 및 인증 화면 로직에서 동일한 기준으로 처리하도록 통일함.
💡 배운 점: 에러 처리 규칙을 ‘공통 계층(axiosInstance)’에서 강제하면 화면 단의 복잡도를 크게 줄일 수 있음을 배움.