데모현장·도면·3D
현장 작업 배정·안전 확인 웹
가상 현장에서 작업 배정, 작업자 휴대폰 안전 확인, 작업 시작 승인, 일지 점검을 이어 눌러 봅니다.
site-safety-demo-158930-production.up.railway.app
열어 보시면 이런 걸 확인하실 수 있습니다
- QC 추적표의 빨간 칸을 눌러 엑셀 열을 연결하면 다시 점검한 결과가 42개 모두 연결로 바뀝니다
- [작업 등록]의 [모의 발송]은 알림톡을 실제로 보내지 않고 발송 기록에만 남깁니다
- 작업자 화면에서 보호구를 확인하고 [확인합니다]를 0.8초 누르고 있으면 확인이 기록됩니다
- [작업 승인]은 모두 확인하기 전까지 잠겨 있고, 아직 확인하지 않은 사람 이름이 보입니다
만들면서 풀어야 했던 것
- 회사와 현장, 역할에 따라 보이는 범위가 달라야 했습니다. 회사·현장 범위를 바꾸면 모든 조회가 그 범위로 다시 계산되고 역할 보기를 바꾸면 메뉴와 버튼이 역할별 권한 표대로 달라지도록, 7개 화면을 하나의 데이터 엔진에서 그리게 했습니다. 역할 보기는 실제 로그인이 아닌 시연용 전환이며, 서버 대신 브라우저 안 엔진이 돌아 새로고침하면 처음 데이터로 돌아갑니다.
- 일지 항목이 엑셀에서 빠져도 눈으로는 찾기 어렵습니다. 일지 필수 항목 42개를 저장 필드·입력 화면·엑셀 열·시험 항목으로 한 줄씩 잇고, 엑셀 셀에 넣은 값이 그대로 다시 읽히는지 자동으로 점검해 처음 상태에서 가스 농도 측정값 엑셀 열 누락 1개를 알려 주게 했습니다. 일지 항목은 단순화한 가상 예시이며, 엑셀과 묶음 파일(ZIP)은 외부 라이브러리 없이 브라우저 안에서 만듭니다.
- 작업 시작은 작업자 모두가 확인해야 열리고, 현장에서 대신 확인한 경우는 사유를 적어 대리 확인으로 따로 표시합니다. 배정·발송·확인·승인·반려는 지우거나 고칠 수 없는 기록으로 쌓이고 되돌리기도 취소 기록을 덧붙이는 방식이며, 엔진 규칙은 Node 자동 검사로, 여섯 가지 사용 흐름은 클릭으로 끝까지 따라가는 검사로 고정했습니다.
비슷한 걸 만들어 보고 싶으시다면
구간 견적으로 규모를 먼저 가늠해 보시거나, 조건을 적어 보내 주시면 범위를 정리해 회신드립니다.