Vibot
Frontend2025.10 ~ 2025.12Frontend Lead
관리자가 문서·URL 데이터를 업로드·분류하고, 수집·학습 상태를 모니터링하며 챗봇 응답을 검증하는 B2B 챗봇 운영 관리자 페이지입니다. 카카오엔터프라이즈 SW 아카데미의 기업실무형 프로젝트로 진행했습니다.
기업 연계 프로젝트로 진행되어, 대외비 정책에 따라 저장소와 상세 코드는 공개하지 않습니다.
사용 기술
Next.jsReactTypeScriptZustandTanStack QueryAxiosTailwind CSSRadix UISentryVercel
TanStack Query · Zustand서버 데이터 캐싱·동기화는 TanStack Query에, UI·권한 상태는 Zustand에 맡겨 상태 관리 책임을 분리하기 위해 조합했습니다.
Sentry관리자가 상시 사용하는 운영 도구 특성상, 배포 이후 발생하는 런타임 에러를 추적할 수단이 필요해 도입했습니다.
주요 기능
- ▸문서 파일 업로드와 URL 등록으로 챗봇이 학습할 데이터를 관리자가 직접 적재할 수 있습니다.
- ▸카테고리 기반 데이터 분류와 DataTable 목록·상세 조회로 적재된 문서를 관리합니다.
- ▸데이터 수집·처리 상태를 확인해 학습이 어디까지 진행됐는지 추적할 수 있는 모니터링 UI를 구성했습니다.
- ▸쿠키 기반 인증 환경에서 CSRF에 대응하고, Sentry로 운영 중 발생하는 런타임 에러를 추적합니다.
담당 역할
- •프론트엔드 개발 팀장으로 관리자 페이지 화면 설계와 데이터 관리 핵심 기능 구현을 담당했습니다.
- •DataTable 기반 목록, 상세 모달, 파일 업로드·URL 등록 플로우 UI를 구현했습니다.
- •서버 상태는 TanStack Query, UI·권한 상태는 Zustand로 분리해 상태 관리 책임을 나눴습니다.
- •Axios 인스턴스를 구성하고 인증 쿠키 전송을 전제로 한 API 통신 레이어를 정리했습니다.
- •Sentry를 도입해 운영 환경의 런타임 에러를 추적할 수 있는 기반을 마련했습니다.
트러블슈팅
CSRF 토큰 처리 방식의 차이로 발생한 403 오류 해결
- 문제 인식
- 로그인 후 서버에서 CSRF 토큰을 발급받고, 쿠키의 XSRF-TOKEN 값을 요청 헤더에 담아 전송하도록 구현했습니다. 하지만 일부 POST, PUT, DELETE 요청에서 CSRF 검증에 실패하며 403 Forbidden이 반복해서 발생했습니다.
- 해결 방안
- 먼저 요청 과정을 확인해 일부 API 호출에서 CSRF 헤더가 빠지고 있는 것을 발견했습니다. 이를 해결하기 위해 Axios 인터셉터에서 요청마다 쿠키의 토큰 값을 읽어 헤더에 넣도록 수정했습니다. 이후에도 403이 발생하는 요청이 있어 Spring Security의 CSRF 처리 과정까지 확인했습니다. 그 결과 서버 내부에서 사용하는 원본 토큰과 클라이언트에 전달하는 XOR 처리 토큰의 흐름이 맞지 않아 검증 과정에서 실패하고 있음을 확인했습니다. XOR 처리를 비활성화하면 Swagger UI의 CSRF 기능이 정상적으로 동작하지 않았기 때문에 보안 설정을 우회하지 않고 기존 구조를 유지했습니다. 프론트엔드는 발급받은 쿠키 값을 요청 헤더에 전달하는 역할만 담당하고, 토큰 생성과 변환, 검증은 Spring Security의 기본 처리 방식에 맡기도록 수정했습니다.
- 개선 성과
- 프론트엔드와 백엔드의 CSRF 토큰 처리 방식을 일치시켜 반복적으로 발생하던 403 오류를 해결했습니다. 또한 Swagger UI를 위해 별도의 예외를 두거나 CSRF 기능을 비활성화하지 않고도 동일한 보안 설정을 유지할 수 있도록 했습니다. 인증 오류로 API 연동과 기능 테스트가 계속 지연되던 문제도 해결해 이후 개발 일정을 원활하게 진행할 수 있었습니다.