포트폴리오 목록으로

TIMEWARE CASE NOTE

COLODY Next.js 인증 경계 전환

레거시 Django session에서 Spring JWT 전환을 대비한 Next.js 프론트엔드 인증 Provider 패턴

TIMEWARE INDEX

Track

운영 노트

통합 관점의 공개 사례 노트입니다.

Scale

중견

문제 규모와 운영 맥락을 함께 봅니다.

Stack

5 tools

Next.js / TypeScript / JWT

CASE SUMMARY

문제, 접근, 결과를 한 번에 읽기

내부 구현 세부보다 공개 가능한 판단 흐름과 운영 결과를 중심으로 정리했습니다.

통합중견Next.jsTypeScriptJWTZustandPlaywright

PROBLEM

문제 상황

레거시 모놀리스를 전환할 때 프론트엔드가 기존 session 방식에 묶이면 백엔드 교체 시 UI와 기능 코드까지 함께 흔들립니다.

APPROACH

접근 방법

Next.js 15 App Router 기반으로 UI, auth store, provider interface, token storage를 분리했습니다. 로컬 개발은 mock provider로 유지하고, JWT provider는 환경변수 전환만으로 붙일 수 있게 설계했습니다.

OUTCOME

성과

백엔드가 준비되지 않은 동안에도 화면과 로그인 흐름을 검증할 수 있었고, Django session 제거와 Spring Boot JWT 전환을 같은 UI 코드로 이어갈 수 있는 구조가 만들어졌습니다.

  • AuthProvider 패턴으로 UI와 인증 구현 분리
  • Mock/JWT provider를 환경변수로 전환
  • 시각 동등성 검증으로 레거시 UX 회귀 방지
  • Next.js App Router와 feature 기반 모듈 구조 적용

NEXT QUESTION

비슷한 문제를 안고 계신가요?

사례와 비슷한 주제가 있다면 현재 상황과 궁금한 점을 짧게 남겨주세요.