시설 보수 견적·작업 관리 고객·협력업체 웹
고객과 협력업체가 모바일 웹(PWA)에서 시설 보수 일을 접수하고 견적을 비교해 고르며 작업과 완료 확인까지 이어 가는 프로젝트입니다.
프로젝트 개요
고객과 협력업체가 모바일 웹(PWA)에서 시설 보수 일을 접수하고 견적을 비교해 고르며 작업과 완료 확인까지 이어 가는 프로젝트입니다. 첫 화면에서 회원가입 없이 문자 인증으로 접수하고, 견적 3개를 한 화면에서 비교해 선택하며, 추가 작업 승인과 A/S 접수를 한 건의 이력 위에서 처리합니다. 협력업체 전환 화면에서는 가입 신청, 작업비·자재비·세금 자동 합계 견적서, 작업 전후 사진, 완료 보고를 구현합니다.
작업 범위
- 접수 카드 — 문자 인증 접수와 사진 첨부: 사진 띠에 걸친 접수 카드에서 작업 종류 칩을 고르고 증상과 사진 3장을 올린 뒤 휴대폰 문자 인증 4자리를 입력하면 접수번호가 만들어져 아래 진행 목록에 새 줄로 들어가는 첫 화면을 구현합니다
- 견적 비교·선택: 협력업체 3곳의 견적 카드를 총액·작업 가능일·포함 항목 3줄로 나란히 비교하고, 최저가와 가장 빠름 표시를 확인한 뒤 하나를 골라 진행하거나 선택을 취소하는 화면을 구현합니다
- 진행 현황과 추가 작업 승인: 내 진행 건 4줄에서 건을 고르면 접수·견적·작업·완료 보고·수령 확인 5단계 막대가 바뀌고, 작업 중인 건에 붙은 추가 작업 요청을 승인하거나 거절하면 단계와 금액이 바뀌는 화면을 구현합니다
- 협력업체 견적서 입력: 협력업체 전환 화면에서 요청 목록을 고르고 작업비·자재비 항목을 입력하면 세금까지 자동 합계가 계산되며, 확정·조건부·진단형 유형과 유효기간을 지정해 견적서를 제출하는 화면을 구현합니다
주요 업무
- 접수 카드 — 문자 인증 접수와 사진 첨부 화면: 회원가입 없이 휴대폰 번호와 인증번호로 접수하며, 업로드 용량·형식 제한 문구가 입력 칸 옆에 보입니다. 작업 종류 아이콘 줄을 누르면 접수 카드의 칩이 바뀝니다
- 견적 비교·선택 화면: 카드를 선택하면 하단에 선택 요약 바가 올라오고, 유효기간이 지난 견적은 비활성으로 보이며 응답이 없는 견적은 승인으로 처리하지 않고 미응답으로 표시합니다
- 진행 현황과 추가 작업 승인 화면: 고객 승인은 별도로 기록되고 관리자 승인이 끝난 뒤에만 승인 버튼이 열립니다. 완료된 건에는 A/S 접수 버튼이 있어 원작업이 연결된 접수 폼으로 이동합니다
- 협력업체 견적서 입력 화면: 항목 줄을 추가하거나 지우면 합계가 바로 바뀌고, 진단형은 방문 진단 후 확정한다는 안내가 함께 표시됩니다. 제출한 견적은 고객의 견적 비교 카드에 같은 금액으로 나타납니다





프로젝트 핵심 과제
현장에서 사진 업로드가 실패하거나 사진을 찍기 어려운 경우
대체 기록 방법을 화면에 함께 제안합니다
견적 응답이 없을 때 승인으로 처리하지 않는 규칙을 고객·협력업체 화면에서 같은 문구로 보여 줄 필요가 있습니다
고객별 데이터 분리와 첨부파일 접근 권한을 모바일 화면에서도 같은 기준으로 적용해야 합니다
별도 견적 대상인 자동 견적 점검·정산 기능은 1차 흐름과 분리해 제안할 계획입니다
핵심 기능 상세
접수 카드 — 문자 인증 접수와 사진 첨부
사진 띠에 걸친 접수 카드에서 작업 종류 칩을 고르고 증상과 사진 3장을 올린 뒤 휴대폰 문자 인증 4자리를 입력하면 접수번호가 만들어져 아래 진행 목록에 새 줄로 들어가는 첫 화면을 구현합니다.
- 접수 단계(종류·증상·사진·본인확인)를 하나의 폼 상태로 관리하는 Custom Hook 설계
- 사진 용량·형식 검사와 미리보기 썸네일 처리 구성
- 문자 인증번호 발급·재전송 대기 시간 상태 처리 구성
접수 버튼을 누르면 접수번호와 진행 목록의 새 줄이 같은 데이터 상수에서 함께 생겨 화면 사이 번호가 어긋나지 않게 합니다.


견적 비교·선택
협력업체 3곳의 견적 카드를 총액·작업 가능일·포함 항목 3줄로 나란히 비교하고, 최저가와 가장 빠름 표시를 확인한 뒤 하나를 골라 진행하거나 선택을 취소하는 화면을 구현합니다.
- 항목 단가 합계를 코드로 계산해 카드 총액에 표시하는 계산 모듈 설계
- 최저가·가장 빠름 표시를 목록에서 계산하는 비교 로직 구성
- 유효기간·미응답 상태를 시계 기준으로 갱신하는 상태 구성
카드 총액은 작업비·자재비·세금 항목의 합계로 계산해 협력업체 입력 화면의 합계와 같은 값을 보여 줍니다.


진행 현황과 추가 작업 승인
내 진행 건 4줄에서 건을 고르면 접수·견적·작업·완료 보고·수령 확인 5단계 막대가 바뀌고, 작업 중인 건에 붙은 추가 작업 요청을 승인하거나 거절하면 단계와 금액이 바뀌는 화면을 구현합니다.
- 진행 단계 5개를 단일 상태 머신으로 정의하는 상태 모델 설계
- 추가 작업 승인·거절 시 금액 합계와 단계를 함께 갱신하는 처리 구성
- 완료 건과 A/S 요청을 원작업 번호로 연결하는 관계 구성
추가 작업 85,000원을 승인하면 기본 견적 297,000원과 합쳐 382,000원이 진행 카드와 이력에 같은 값으로 표시됩니다.


협력업체 견적서 입력
협력업체 전환 화면에서 요청 목록을 고르고 작업비·자재비 항목을 입력하면 세금까지 자동 합계가 계산되며, 확정·조건부·진단형 유형과 유효기간을 지정해 견적서를 제출하는 화면을 구현합니다.
- 항목 배열 합계와 세금을 계산하는 순수 함수와 입력 폼 연결 구성
- 견적 유형 3종에 따라 입력 칸과 안내를 바꾸는 폼 분기 설계
- 유효기간 날짜 선택과 만료 표시 규칙 구성
작업비 280,000원과 자재비 95,000원을 입력하면 세금 37,500원을 더한 412,500원이 합계로 계산됩니다.


프로젝트 진행 단계
상세 기획과 흐름 정의 · 2026.11
접수부터 A/S까지 단계 정의, 추가 작업·완료 확인 정책, 화면 구성도와 ERD 설계
모바일 고객·협력업체 웹 구현 · 2026.11
문자 인증 접수, 견적 비교·선택, 견적서 입력, 작업 사진 기록과 PWA 구성
관리자 웹과 공통 API 구현 · 2026.11
권한 체계, 승인·수금 확인 API, 엑셀 내보내기, 문자 알림 연동 구성
인프라 구성과 통합 검수 · 2026.11
서버 배포·암호화·백업 구성, 권한·예외·모바일 통합 테스트와 운영 문서 정리
개발 결과
기술적 주안점
- 접수 버튼을 누르면 접수번호와 진행 목록의 새 줄이 같은 데이터 상수에서 함께 생겨 화면 사이 번호가 어긋나지 않게 합니다
- 카드 총액은 작업비·자재비·세금 항목의 합계로 계산해 협력업체 입력 화면의 합계와 같은 값을 보여 줍니다
- 추가 작업 85,000원을 승인하면 기본 견적 297,000원과 합쳐 382,000원이 진행 카드와 이력에 같은 값으로 표시됩니다