콘솔·어드민
제조 품질검사 태블릿·PC 대시보드
현장 태블릿에 입력한 불량 수량이 PC 대시보드 불량률과 경보로 바로 이어지는 흐름을 볼 수 있습니다.
quality-dashboard-demo-production.up.railway.app
열어 보시면 이런 걸 확인하실 수 있습니다
- 외관검사에서 불합격 저장 → 수리실에서 같은 바코드 스캔 시 불량 이력 출력
- PC 대시보드의 사업장·공정 필터를 바꾸면 차트와 불량률 집계가 다시 그려집니다
- 오프라인으로 바꾸고 입력하면 동기화 큐 배지가 쌓이고 복구 시 일괄 전송됩니다
- [사용법]을 누르면 1분 확인 순서가, 주석 모드에선 설계 근거가 뜹니다
만들면서 풀어야 했던 것
- [사용법] 모달이 닫히지 않는 문제를 배포된 화면에서 발견했습니다. CSS 우선순위가 hidden 속성을 덮어쓴 것이 원인이어서 이를 바로잡고, 열기·닫기·ESC·백드롭 클릭을 저희가 브라우저에서 직접 눌러 확인했습니다.
- 이 문제는 화면 렌더 자동 검사 21건이 모두 통과한 상태에서도 걸러지지 않았습니다. 검사 도구가 CSS를 보지 못한다는 점이 원인이어서, 저희는 새로 만든 화면 요소는 브라우저에서 실제로 눌러 확인하는 절차로 바꿨습니다.
- 로컬 파일로 열면 브라우저가 CSV 저장을 막을 수 있어, 실패하면 대안을 안내하는 문구가 뜨도록 했습니다. 저희는 실제 로컬 실행 환경에서 다운로드 폴더 상태를 기록하고 다시 눌러 파일이 늘어나는지 대조해 저장이 되는 것을 확인했습니다.
비슷한 걸 만들어 보고 싶으시다면
구간 견적으로 규모를 먼저 가늠해 보시거나, 조건을 적어 보내 주시면 범위를 정리해 회신드립니다.