공정 안전 관리 시스템

문제

전체 도면에서 구역을 클릭하면 해당 상세 도면으로 이동하고, 작업 위치를 두 도면의 알맞은 위치에서 실제 축척에 비례하는 크기로 표시·수정해야 했습니다.

도면마다 이미지 크기가 달라 위치와 크기를 픽셀 값 그대로 저장하면 전체·상세 도면에서 같은 작업 위치를 연동할 수 없었습니다.

구현

전체 도면의 구역 이동은 react-image-mapper에 구역 좌표를 지정해 연결했습니다. 작업 위치는 중앙에 도형을 띄운 뒤 react-moveable로 드래그와 크기 조절을 할 수 있게 했습니다.

도면마다 크기가 달라 화면의 픽셀 좌표를 그대로 재사용할 수 없었습니다. 이미지 모서리의 위도·경도를 기준으로 작업 위치와 크기를 변환해 저장하고, 전체·상세 도면에서 각각의 이미지 크기에 맞게 복원했습니다.

react-moveable은 엘리먼트 이동에 CSS transform을 사용했습니다. 따라서 저장값을 불러오는 것만으로 끝나지 않고, 복원한 위치와 크기를 다시 transform 값으로 변환하는 계산이 필요했습니다. 이 계산을 조정하는 시행착오를 거쳐 저장·불러오기·재수정 흐름을 연결했습니다.

문제

도면 출력을 위한 글·도형·스티커 마크업이 필요했습니다. 그중 직접 그린 자유 곡선을 다른 도형처럼 조작하고 저장·수정하는 부분이 까다로웠습니다.

구현

팝업에서 화살표나 사각형 도구를 누르면 캔버스에 도형을 추가하고, 자유선 도구를 누르면 직접 그리는 모드로 전환하도록 했습니다.

그리기를 마치거나 모드를 종료하면 스케치 라이브러리의 결과를 SVG 객체로 변환했습니다. 그린 path 좌표로 곡선의 범위를 구하고, 그 범위에 맞는 viewBox로 묶었습니다.

변환한 자유선에도 다른 도형과 같은 이동·크기 조절·회전을 적용하고, 같은 방식으로 저장하고 복원할 수 있게 했습니다.

문제

10만 건 이상의 문서를 다루는 목록에서 검색·필터 조건을 적용한 뒤 새로고침하거나 상세 화면에 다녀오면 조건이 초기화되어 반복 조회가 불편했습니다.

구현

10만 건 이상의 문서를 한 번에 가져오지 않고, 페이지·정렬·필터 조건에 맞는 목록을 서버에서 조회하도록 구성했습니다. 검색 조건은 URL에 저장해 새로고침하거나 상세 화면에 다녀온 뒤에도 유지했습니다.

문제

기존 모바일 앱 WebView에서 외부 링크 이동과 브라우저 뒤로가기 동작이 정상적으로 이어지지 않았습니다.

구현

PWA 도입을 제안하고 서비스워커를 적용한 프로토타입으로 외부 링크와 히스토리 이동 동작을 확인했습니다.

FCM 푸시 알림을 연동하고 PWA를 운영 환경에 반영했습니다.