frontend integration

프론트엔드 통합 흐름

React 클라이언트는 NestJS API의 응답 계약을 상태, 라우팅, 화면 오류 처리로 번역하는 계층이다.

auth

토큰 상태

로그인 성공, 만료, 로그아웃을 전역 상태와 API 클라이언트 헤더에 같은 기준으로 반영한다.

single source
route

라우트 보호

보호 페이지는 토큰 유무와 사용자 조회 결과를 함께 보고 접근 허용 여부를 결정한다.

guarded view
workspace

프로젝트 트리

프로젝트, 폴더, 파일 API는 선택 상태와 로딩 상태를 분리해 화면 흔들림을 줄인다.

tree state
editor

편집 저장

저장 중, 저장됨, 충돌, 실패 상태를 표시해 사용자가 데이터 손실 여부를 알 수 있게 한다.

save feedback