인프라 점검 데이터 업로드 플랫폼

로그인한 사용자가 자신이 업로드한 점검 건을 접수완료·분석중·분석완료·보완요청 상태별로 한눈에 확인할 수 있는 현황 대시보드입니다. 다건의 점검을 동시에 관리하는 안전진단 현장의 업무 흐름을 반영합니다.

• React Query로 점검 목록 상태를 폴링·캐싱하여 관리자 상태 변경이 반영되는 흐름 구현
• 상태값(접수완료/분석중/분석완료/보완요청)을 컬러 배지로 구분하는 상태 관리 워크플로우 컴포넌트 설계
• 좌측 리스트-우측 상세 패널 레이아웃으로 페이지 전환 없이 항목을 탐색하는 마스터-디테일 UI 구현

React Query 기반 폴링으로 관리자 처리 결과가 별도 새로고침 없이 사용자 화면 상태 배지에 반영되는 구조를 설계합니다.

구조물명·유형·점검일 등 기본 정보 입력부터 LiDAR 점군(.pcd), 위치 궤적(.txt), RGB·Depth 이미지, 캘리브레이션(json) 업로드, 최종 확인까지 7단계로 나눈 업로드 위저드를 구현합니다.

• react-dropzone + presigned URL로 S3 호환 오브젝트 스토리지에 분할 업로드하고 중단 지점부터 이어올리기 구현
• 7단계 폼 상태를 단일 스토어로 관리하여 뒤로가기·새로고침에도 입력값이 유지되는 위저드 상태 관리 설계
• 파일 확장자(.pcd/.txt/.png/.jpg/.json)와 RGB-Depth 이미지 장수 일치를 단계별로 검증하는 유효성 로직 구현

S3 멀티파트 업로드와 재개형(resume) 업로드 로직을 조합해 대용량 파일 전송 중단에도 처음부터 다시 올리지 않도록 설계합니다.

관리자가 업로드한 3D 외관조사망도 결과 HTML(약 3MB, 외부 분석 프로그램의 산출물)을 사용자가 웹 화면에서 안전하게 확인하고 다운로드할 수 있도록 sandboxed iframe으로 격리 표시합니다.

• iframe sandbox 속성(allow-scripts allow-same-origin 최소 권한)으로 외부 결과 HTML을 격리 렌더링
• S3 presigned GET URL로 결과 파일을 blob으로 스트리밍하여 직접 다운로드 가능하도록 구현
• JWT 기반 권한 검사로 본인이 업로드한 점검 결과만 접근 가능하도록 라우트·API 이중 검증

sandboxed iframe과 blob URL 조합으로 외부에서 생성된 결과 HTML을 안전하게 격리 표시하면서도 다운로드 경험을 자연스럽게 연결하는 구조를 설계합니다.

이용 권한이 부여된 계정만 점검 업로드·결과 확인 기능이 활성화되고, 권한이 없는 계정은 자동으로 구매 문의 안내 화면으로 분기됩니다.

• 권한 플래그(hasAccess) 기반 라우트 가드로 미부여 계정을 구매 문의 화면으로 자동 리다이렉트
• 구매 문의 폼 제출을 내부 API로 접수해 관리자 문의 목록에 자동 반영
• 이메일 회원가입·로그인(JWT) 플로우와 연동해 가입 직후에도 동일한 권한 분기 로직 적용

권한 미부여 계정의 진입을 기능 단위가 아닌 라우트 단위에서 선제적으로 분기하여 UI 노출과 API 접근을 함께 통제합니다.