SYSTEM BLUEPRINT

WeChat 사고 분석
백엔드와 관리자 화면 설계

미니프로그램 사용자, 현지 프론트엔드 개발자, 관리자별 핵심 여정과 시스템 인터페이스를 정의한 설계도입니다.

P.01
미니프로그램 사용자 시나리오

사고 접수와 결과 확인 흐름

사용자는 WeChat에서 로그인 후 사고 정보를 입력하고 영상을 업로드하며, 분석 상태와 결과물을 확인합니다.

1. 로그인

WeChat 인증
고유 사용자 식별

2. 사고 정보 입력

날짜, 장소, 차량 유형
사고 내용 작성

3. 영상 업로드

Tencent COS 직접 업로드
업로드 상태 확인

4. 진행 상태 조회

대기, 분석중, 완료
상태 변경 확인

5. 결과 확인

결과 영상 재생
PDF 보고서 조회

P.02
미니프로그램 사용자 | 화면 01

WeChat 로그인 및 사건 접수 시작

miniapp://accident/start
WeChat Mini Program
사고 분석 신청
WeChat 로그인 완료
차량 유형 선택
사고 일시 입력
신청 시작

[화면 개요 및 목적]

사용자가 WeChat 인증으로 진입하고 사고 분석 신청을 시작하는 화면입니다.

[핵심 기능 로직]

WeChat code를 서버로 전달하고 서버는 고유 ID를 저장한 뒤 서비스 토큰을 발급합니다.

  • WeChat Login
  • JWT Session
P.03
미니프로그램 사용자 | 화면 02

사고 영상 업로드

miniapp://accident/upload
WeChat Mini Program
영상 업로드
원본 영상 선택됨
업로드 진행률 72%
서버 부하 없는 직접 업로드
업로드 완료

[화면 개요 및 목적]

사용자가 원본 사고 영상을 선택하고 업로드 진행률을 확인하는 화면입니다.

[핵심 기능 로직]

API 서버가 COS 업로드 서명을 발급하고, 클라이언트가 저장소로 직접 업로드 후 메타데이터를 등록합니다.

  • Tencent COS
  • Signed Upload
P.04
미니프로그램 사용자 | 화면 03

진행 상태와 결과 확인

WeChat Mini Program
내 사건 상세
상태: 분석 완료
결과 영상 확인 가능
PDF 보고서 생성됨
결과 보기

[화면 개요 및 목적]

내 사건 목록에서 분석 진행 상태와 결과 영상, PDF 보고서를 확인합니다.

[핵심 기능 로직]

사건 상태 API와 결과물 조회 API를 호출해 최신 결과를 제공합니다.

  • Status API
  • Result API
P.05
현지 프론트엔드 개발자 시나리오

API 연동과 디버깅 흐름

현지 개발팀은 Swagger 문서, 샘플 요청, 오류 코드 기준으로 미니프로그램 화면과 백엔드를 연동합니다.

1. 문서 확인

Swagger 명세
엔드포인트 파악

2. 인증 테스트

로그인 code 전달
토큰 발급 확인

3. 업로드 테스트

서명 요청
COS 직접 업로드

4. 사건 API 호출

등록, 목록, 상세
상태 조회

5. 오류 디버깅

오류 코드 확인
샘플 응답 비교

P.06
현지 프론트엔드 개발자 | 화면 01

Swagger API 문서

api.service.dev/docs
Swagger Docs
대기 12
분석중 7
완료 28
POST /auth/wechat로그인
POST /cases사고 접수
GET /cases/{id}상세 조회
POST /uploads/sign업로드 서명

[화면 개요 및 목적]

현지팀이 API 그룹, 요청 필드, 응답 구조를 한곳에서 확인합니다.

[핵심 기능 로직]

OpenAPI 스펙을 코드와 동기화해 문서와 실제 API 차이를 줄입니다.

  • Swagger
  • OpenAPI
P.07
현지 프론트엔드 개발자 | 화면 02

업로드 서명 테스트

api.service.dev/uploads/sign
Upload Sign Test
대기 12
분석중 7
완료 28
fileNameaccident.mp4
maxSize2GB
expiresIn10min
statusready

[화면 개요 및 목적]

영상 업로드 전 필요한 서명과 저장 경로를 테스트합니다.

[핵심 기능 로직]

서버는 파일명, 용량, 형식을 검증하고 제한 시간 있는 업로드 권한을 발급합니다.

  • COS SDK
  • Validation
P.08
현지 프론트엔드 개발자 | 화면 03

오류 응답 디버깅

api.service.dev/errors
Error Guide
대기 12
분석중 7
완료 28
AUTH_REQUIRED토큰 필요
INVALID_CASE필수값 누락
UPLOAD_EXPIRED서명 만료
FILE_TOO_LARGE용량 초과

[화면 개요 및 목적]

연동 중 자주 발생하는 인증, 필수값, 업로드 오류를 빠르게 확인합니다.

[핵심 기능 로직]

표준 오류 코드와 메시지, 해결 가이드를 문서화해 커뮤니케이션 비용을 낮춥니다.

  • Data Aggregation & Visualization
  • Error Code Map
P.09
관리자 시나리오

사건 처리와 결과 등록 흐름

관리자는 신규 사건을 확인하고 상태를 변경하며, 분석 완료 결과 영상과 PDF 보고서를 등록합니다.

1. 목록 필터링

상태별 조회
신규 사건 확인

2. 상세 확인

입력 정보 확인
원본 영상 재생

3. 상태 변경

대기, 분석중
완료, 보류

4. 결과물 업로드

결과 영상
PDF 보고서

5. 통계 확인

상태별 건수
운영 현황 파악

P.10
관리자 | 화면 01

사건 목록 대시보드

admin.service.dev/cases
Admin Case List
대기 12
분석중 7
완료 28
CASE-1024대기
CASE-1023분석중
CASE-1022완료
CASE-1021보류

[화면 개요 및 목적]

관리자가 전체 사건을 상태별로 필터링하고 우선 처리 대상을 찾는 화면입니다.

[핵심 기능 로직]

상태, 날짜, 차량 유형, 키워드 조건으로 서버 페이지네이션 조회를 수행합니다.

  • React Table
  • Server Pagination
P.11
관리자 | 화면 02

사건 상세 및 영상 확인

admin.service.dev/cases/1024
Case Detail
대기 12
분석중 7
완료 28
차량 유형승용차
사고 장소서울 성동구
원본 영상재생 가능
처리 상태분석중

[화면 개요 및 목적]

사용자 입력값과 원본 사고 영상을 함께 확인하고 상태를 변경합니다.

[핵심 기능 로직]

COS 보안 URL을 제한 시간으로 발급해 브라우저 내 영상 확인을 지원합니다.

  • Secure URL
  • Video Preview
P.12
관리자 | 화면 03

결과 영상 및 PDF 업로드

admin.service.dev/cases/1024/result
Result Upload
대기 12
분석중 7
완료 28
result_video.mp4업로드 완료
report.pdf업로드 완료
상태 변경완료
사용자 공개활성

[화면 개요 및 목적]

분석 완료된 결과 영상과 PDF 보고서를 등록하고 사용자에게 완료 상태를 제공합니다.

[핵심 기능 로직]

결과 파일 업로드 후 사건 상태를 완료로 변경하고 사용자 조회 API에 노출합니다.

  • Result Upload
  • Issue Tracking & Status Management
P.13