← 포트폴리오 목록
스마트 시설 점검 시스템
현장 점검자가 모바일 웹에서 설비 항목을 선택하고 측정값을 입력하면 기준치 대비 적합/부적합을 자동 판정하고, 수집된 데이터와 현장 사진을 MS Word 양식에 자동 매핑하여 공공기관 제출용 성능점검보고서를 생성하는 시스템을 React + Node.js 기반으로 설계할 예정입니다.
설비 기준치 기반 적합/부적합 자동 판정 엔진 구현측정값 입력 즉시 설비별 min/max 기준치와 비교하여 적합/부적합을 자동 판정하고, 부적합 시 조치사항 입력 필드가 동적으로 활성화되는 체크리스트 구조를 설계합니다.
docxtemplater Word 보고서 자동 생성 파이프라인 구현공공기관 제출용 MS Word 양식의 플레이스홀더에 측정값·판정 결과·현장 사진을 자동 매핑하여 서식 깨짐 없는 보고서를 생성하는 엔진을 설계합니다.
오프라인 임시 저장 및 자동 동기화 구조 설계통신 음영지역에서 localStorage로 점검 데이터를 임시 저장하고, 네트워크 복구 시 Supabase에 자동 동기화하는 Offline-First 아키텍처를 구현합니다.
Overview
프로젝트 개요
현장 점검자가 모바일 웹에서 설비 항목을 선택하고 측정값을 입력하면 기준치 대비 적합/부적합을 자동 판정하고, 수집된 데이터와 현장 사진을 MS Word 양식에 자동 매핑하여 공공기관 제출용 성능점검보고서를 생성하는 시스템을 React + Node.js 기반으로 설계할 예정입니다. 오프라인 임시 저장 및 네트워크 복구 시 자동 동기화 구조도 구현합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
통신 음영지역에서 입력된 점검 데이터의 오프라인 임시 저장과 네트워크 복구 시 서버 자동 동기화 시 중복 데이터 방지를 위한 멱등성 키 설계
복잡한 표와 사진이 포함된 공공기관 제출용 Word 양식에서 docxtemplater 플레이스홀더 매핑 시 서식 깨짐 없이 생성되는 템플릿 구조 설계
현장 사진 촬영 시 공사명·공종·위치·점검 내용·일자를 하단 캡션(워터마크)으로 자동 삽입하는 클라이언트 사이드 Canvas API 활용 로직 설계
핵심 기능 1
현장 점검 현황 대시보드
이번 달 점검 건수·완료율·부적합 발생·대기 보고서 KPI 카드와 진행 중인 점검 목록(현장명·설비 유형·담당자·진행률 바), 최근 완료 점검 테이블을 한 화면에서 확인하는 메인 대시보드를 구현합니다
핵심 기능 2
스마트 체크리스트 입력
설비 유형(전기/소방/기계/건축)을 선택하면 해당 점검 항목만 동적으로 활성화되고, 측정값 입력 즉시 기준치와 비교하여 적합/부적합을 자동 판정하며 부적합 시 조치사항 입력 필드가 나타나는 체크리스트 화면을 구현할
핵심 기능 3
Word 보고서 자동 생성
점검 완료된 데이터와 현장 사진을 MS Word 양식의 지정 위치에 자동 매핑하여 공공기관 제출용 보고서를 생성하고 다운로드하는 화면을 구현합니다
핵심 기능 4
관리자 설정
기준치 항목(설비별 min/max) 추가·편집·삭제, 사용자(현장 점검자·팀장) 등록 및 권한 관리, 설비 마스터 편집을 통합하는 관리자 설정 화면을 구현합니다
구현 과정
프로젝트 진행 단계
STEP 1
설비 항목·기준치 DB 스키마 설계 및 체크리스트 로직 구현
설비 유형·점검 항목·기준치(min/max)·측정값·판정 결과 테이블 ERD 설계, Supabase 스키마 정의, 체크리스트 동적 활성화 및 자동 판정 로직 구현
STEP 2
현장 점검 UI 및 오프라인 동기화 구현
React 기반 체크리스트 입력 화면, 최종 확인 모달, localStorage 오프라인 임시 저장, 네트워크 복구 시 Supabase 자동 동기화 로직 구현
STEP 3
Word 보고서 자동 생성 엔진 구현
docxtemplater Word 템플릿 매핑 엔진 구현, 현장 사진 워터마크(캡션) 삽입 로직, 보고서 생성 진행 상태 UI, 완료 후 Blob 다운로드 처리
STEP 4
관리자 대시보드 및 통합 테스트
기준치·사용자·설비 마스터 CRUD 관리자 화면 구현, 전체 점검 현황 대시보드, E2E 흐름(점검 입력→판정→보고서 생성) 통합 테스트
프로젝트 성과
설비 기준치 기반 적합/부적합 자동 판정 엔진 구현측정값 입력 즉시 설비별 min/max 기준치와 비교하여 적합/부적합을 자동 판정하고, 부적합 시 조치사항 입력 필드가 동적으로 활성화되는 체크리스트 구조를 설계합니다.
docxtemplater Word 보고서 자동 생성 파이프라인 구현공공기관 제출용 MS Word 양식의 플레이스홀더에 측정값·판정 결과·현장 사진을 자동 매핑하여 서식 깨짐 없는 보고서를 생성하는 엔진을 설계합니다.
오프라인 임시 저장 및 자동 동기화 구조 설계통신 음영지역에서 localStorage로 점검 데이터를 임시 저장하고, 네트워크 복구 시 Supabase에 자동 동기화하는 Offline-First 아키텍처를 구현합니다.
최종 확인 모달: 미입력 항목 자동 리스트업 구현점검 제출 전 미입력 항목과 조치사항 미기입 항목을 설비 유형별로 그룹화하여 리스트업하는 최종 확인 화면을 구현하여 현장 점검자의 제출 오류를 방지하는 구조를 설계합니다.
Review
기술적 주안점
- 실시간 점검 현황 KPI 대시보드와 진행률 시각화로 관리자가 현장 점검 흐름을 즉시 파악하는 구조를 설계합니다
- 설비 항목 동적 활성화 + 기준치 자동 판정 + 최종 확인 모달로 현장 점검자의 입력 오류를 최소화하는 스마트 체크리스트 구조를 설계합니다
- docxtemplater 기반 Word 자동 생성 엔진으로 공공기관 제출용 서식을 프로그래밍 방식으로 완성하고, 생성 진행 단계를 실시간 Progress 바로 표시하는 구조를 설계합니다
