Vitamin-7

Frontend
2025.10 ~ 2025.12Frontend Developer

관리자가 문서 및 URL 데이터를 업로드·분류하고, 수집·학습 상태를 모니터링하며 챗봇 응답을 검증할 수 있도록 구현한 B2B 챗봇 운영 관리자 페이지입니다.

Vitamin-7 이미지

사용 기술

Next.jsReactTypeScriptZustandTanStack QueryAxiosTailwind CSSRadix UISentryVercel

주요 기능

  • 문서 파일 업로드 및 URL 등록 기능을 제공했습니다.
  • 카테고리 기반 데이터 분류와 데이터 목록/상세 조회 기능을 구현했습니다.
  • 데이터 수집·처리 상태를 확인할 수 있는 관리자 UI를 구성했습니다.
  • 쿠키 기반 인증 환경에서 CSRF 대응과 에러 모니터링을 적용했습니다.

담당 역할

  • 관리자 페이지 화면 설계와 데이터 관리 핵심 기능을 구현했습니다.
  • DataTable 기반 목록, 상세 모달, 업로드/등록 플로우 UI를 구현했습니다.
  • 서버 상태는 TanStack Query, UI 및 권한 상태는 Zustand로 분리해 상태를 관리했습니다.
  • Axios 인스턴스를 구성하고 인증 쿠키 전송을 전제로 한 API 통신 레이어를 정리했습니다.
  • CSRF 토큰 전달 방식 불일치로 발생한 403 이슈를 원인 단위로 분리하고 해결 방향을 조율했습니다.
  • Sentry를 도입해 운영 환경에서의 런타임 에러 추적 기반을 마련했습니다.