← 포트폴리오 목록

시공 현장 견적 접수·도면 이력 관리 콘솔

고객이 올린 도면과 견적 요청을 현장 위치 지도와 3D 외관 미리보기로 한 화면에서 확인하는 관리자 콘솔을 구현할 예정입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종플랫폼
기술 스택
ReactTypeScriptTailwind CSSthree.jsNode.jsExpressPostgreSQLPrismaRedis
주요 기능
  • 현장 지도·3D 외관 현황
  • 견적 요청 접수 관리
  • 도면 이력·변환 작업 모니터
  • 산출 기준·단가·임베드 설정

프로젝트 개요

범위: 개발, 디자인, 기획

고객이 올린 도면과 견적 요청을 현장 위치 지도와 3D 외관 미리보기로 한 화면에서 확인하는 관리자 콘솔을 구현합니다. 견적 요청 접수 관리, 도면 변환 작업 이력, 산출 기준·단가 설정, 기존 홈페이지 임베드 설정까지 P1 흐름 이후의 확장 기능을 같은 Node.js 스택 위에 Redis 작업 큐를 더해 설계합니다.

작업 범위

  • 현장 지도·3D 외관 현황: 접수된 현장을 지도 위 핀과 구역별 요약 지표로 보고, 핀을 선택하면 우측 패널에서 도면 정보와 3D 외관 미리보기를 확인합니다
  • 견적 요청 접수 관리: 견적 요청을 접수 상태별로 목록화하고 업체명·현장명·연락처, 첨부 도면, 산출 결과를 한 번에 조회하며 상태와 담당자 메모를 기록합니다
  • 도면 이력·변환 작업 모니터: 업로드된 도면과 DXF 변환 작업의 진행 상태, 인식 결과 요약, 수동 보정 여부를 조회하고 실패한 작업을 다시 실행합니다
  • 산출 기준·단가·임베드 설정: 층고 기본값, 여유 길이 같은 산출 기준과 단가표를 관리하고, 기존 홈페이지에 삽입할 임베드 코드와 허용 도메인을 발급합니다

주요 업무

  • 현장 지도·3D 외관 현황 화면: 추상 SVG 지도에 현장 핀을 배치하고 선택 현장의 three.js 외관 씬을 우측 패널에 지연 로딩합니다
  • 견적 요청 접수 관리 화면: 요청 상태 머신 테이블과 상태 변경 이력, 엑셀 내려받기를 구현합니다
  • 도면 이력·변환 작업 모니터 화면: Redis 기반 작업 큐로 변환 작업을 관리하고 상태를 서버 전송 이벤트로 화면에 전달합니다
  • 산출 기준·단가·임베드 설정 화면: 설정 버전 관리 테이블과 임베드 코드 생성기, 허용 도메인 검증을 구현합니다
시공 현장 견적 접수·도면 이력 관리 콘솔
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

현장 위치와 도면 좌표계가 서로 달라 지도 핀과 3D 미리보기를 같은 선택 상태로 묶는 매핑 설계가 필요합니다

변환 작업이 길어질 때 실패와 지연을 구분해 보여주는 큐 상태 모델 설계가 필요합니다

산출 기준을 바꿔도 과거 견적 결과가 달라지지 않

기준 버전 고정 방식이 필요합니다

임베드 환경에서 외부 도메인 요청을 구분하는 허용 목록 검증과 쿠키 정책 설계가 필요합니다

구현 내용

핵심 기능 상세

핵심 기능 1

현장 지도·3D 외관 현황

접수된 현장을 지도 위 핀과 구역별 요약 지표로 보고, 핀을 선택하면 우측 패널에서 도면 정보와 3D 외관 미리보기를 확인합니다.

  • SVG 지도 위 현장 핀과 구역 필터를 상태로 관리하고 우측 목록과 선택 동기화
  • 선택 현장의 외곽선 데이터를 불러와 three.js 미리보기 씬을 지연 로딩
  • 구역별 접수 건수와 면적 합계를 PostgreSQL 집계 쿼리로 계산

지도·목록·3D 미리보기가 하나의 선택 상태를 공유하도록 설계하여 현장 전환 시 화면 구성이 어긋나지 않는 구조를 구현합니다.

현장 지도·3D 외관 현황
현장 지도·3D 외관 현황 실제 화면
핵심 기능 2

견적 요청 접수 관리

견적 요청을 접수 상태별로 목록화하고 업체명·현장명·연락처, 첨부 도면, 산출 결과를 한 번에 조회하며 상태와 담당자 메모를 기록합니다. 요청 상태 머신 테이블과 상태 변경 이력, 엑셀 내려받기를 구현합니다.

  • 요청 상태(접수·검토·회신)를 상태 머신 테이블로 관리하고 변경 이력 저장
  • 업체명·현장명·기간 조건을 조합하는 동적 필터 쿼리 빌더 구현
  • ExcelJS로 접수 목록을 조건 그대로 내보내는 다운로드 구현

목록 조건을 URL 상태와 동기화하여 필터된 화면을 링크로 공유할 수 있는 조회 구조를 설계합니다.

견적 요청 접수 관리
견적 요청 접수 관리 실제 화면
핵심 기능 3

도면 이력·변환 작업 모니터

업로드된 도면과 DXF 변환 작업의 진행 상태, 인식 결과 요약, 수동 보정 여부를 조회하고 실패한 작업을 다시 실행합니다.

  • Bull Queue와 Redis로 변환 작업 큐 구성, 실패 재시도 정책 적용
  • SSE로 작업 상태 변화를 목록 화면에 실시간 반영
  • 도면별 인식 결과와 보정 횟수를 요약 테이블로 집계

변환 실패 사유를 유형별로 분류해 보여주고 재실행 버튼으로 같은 작업을 다시 큐에 넣는 모니터링 구조를 설계합니다.

도면 이력·변환 작업 모니터
도면 이력·변환 작업 모니터 실제 화면
핵심 기능 4

산출 기준·단가·임베드 설정

층고 기본값, 여유 길이 같은 산출 기준과 단가표를 관리하고, 기존 홈페이지에 삽입할 임베드 코드와 허용 도메인을 발급합니다. 설정 버전 관리 테이블과 임베드 코드 생성기, 허용 도메인 검증을 구현합니다.

  • 산출 기준을 버전 테이블로 저장하고 변경 시 새 버전을 발행
  • 임베드용 iframe 코드 스니펫 생성과 허용 도메인 검증 미들웨어 적용
  • 관리자 권한을 관리자·열람자 두 단계로 나눠 라우트와 UI에 적용

기준 변경이 이미 산출된 결과를 바꾸지 않도록 산출 시점의 기준 버전을 결과에 함께 저장하는 구조를 설계합니다.

산출 기준·단가·임베드 설정
산출 기준·단가·임베드 설정 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

접수 상태 머신과 권한 모델 설계 · 2026.10

견적 요청 상태 전이, 변경 이력, 관리자·열람자 권한 테이블 설계

STEP 2

Redis 변환 작업 큐와 SSE 연동 · 2026.10

Bull Queue 재시도 정책, 작업 상태 이벤트 스트림, 도면 이력 집계 구현

STEP 3

현장 지도와 3D 미리보기 패널 · 2026.10

SVG 지도 핀·구역 필터, 선택 상태 공유, 지연 로딩 three.js 씬 구현

STEP 4

산출 기준 버전과 임베드 발급 · 2026.10

기준 버전 테이블, 단가표 편집, 임베드 코드 생성과 허용 도메인 검증 구현

개발 결과

선택 상태 공유형 지도·패널 구조 구현지도 핀, 우측 목록, 3D 미리보기가 하나의 선택 상태를 공유하는 상태 모델과 지연 로딩 구조 설계
변환 작업 큐와 실시간 상태 전달 구축Bull Queue 재시도 정책과 SSE 이벤트로 변환 작업 상태를 목록에 반영하는 파이프라인 구현
산출 기준 버전 관리 체계 설계기준 변경 시 새 버전을 발행하고 산출 결과에 기준 버전을 함께 저장하는 이력 모델 구현
URL 동기화 동적 필터 쿼리 빌더 구현업체명·현장명·기간 조건을 조합하는 쿼리 빌더를 만들고 주소창 상태와 동기화하는 구조 적용

기술적 주안점

  • 지도·목록·3D 미리보기가 하나의 선택 상태를 공유하도록 설계하여 현장 전환 시 화면 구성이 어긋나지 않는 구조를 구현합니다
  • 목록 조건을 URL 상태와 동기화하여 필터된 화면을 링크로 공유할 수 있는 조회 구조를 설계합니다
  • 변환 실패 사유를 유형별로 분류해 보여주고 재실행 버튼으로 같은 작업을 다시 큐에 넣는 모니터링 구조를 설계합니다

유사한 프로젝트를 기획하고 계신가요?

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의