✨ 프로젝트 소개

출처: 이에이트(주)

EPC(Engineering, Procurement, and Construction)는 설계, 조달, 시공 전 과정을 1D·2D·3D 데이터로 통합 시각화하는 웹 솔루션 입니다.
프로젝트 참여 인력: FE: 3명 | BE: 3명 | 디자이너: 1명 | 협력 업체 (경량화 3D Web Viewer)
프로젝트 홍보 영상

✨ 내가 기여한 부분

2D Viewer는 메인 시스템과 분리된 독립 웹 애플리케이션으로 개발되었으며, iframe + postMessage API를 통해 상호 통신
- 예: 메인 시스템에서 선택한 태그 ID를 Viewer에 전달 → Viewer에서 해당 영역으로 카메라 이동
SVG 기반 Viewer 구조
- SVG 내부의 도면 데이터에 직접 접근하여 상호작용을 처리
- viewBox 속성을 조작하여 WheelEvent(줌), 마우스 우클릭 드래그(팬) 구현
- 좌표 변환을 위해 getBBox 등을 사용해 마우스 위치를 정확한 도면 좌표로 변환
마크업은 두 가지 렌더링 방식으로 지원:
- Inner Markup: <path>, <text> 등 SVG 내부에 직접 삽입
  - 장점: 도면 확대/축소 시 자연스럽게 비율과 위치가 유지
- Outer Markup: SVG 위에 별도의 <svg class="overlay">를 덮는 방식
  - 장점: UI 레이어를 분리해 마크업 제거/수정이 쉬움
마크업 도구로는 텍스트, 직선, 곡선 등을 지원하며, 도면 위에서 클릭 및 드래그를 통해 마크업 생성
생성 및 삭제 기능은 백엔드와 연동되어 있어 마크업 저장/불러오기/이력 관리 가능

React Grid Layout 기반의 대시보드 구성
각 탭은 고유한 Grid Layout 상태를 가지며, 사용자 행동에 따라 다음 정보를 실시간으로 관리:
- 위젯 위치 (x, y)
- 위젯 크기 (w, h)
사용자가 위젯을 이동/리사이즈하면 실시간으로 각 탭의 Grid Layout 상태를 업데이트
- 드래그/리사이즈 시 즉시 상태가 반영되며, Recoil + recoil-persist 조합으로 브라우저 재접속 후에도 동일한 레이아웃 복원
- 레이아웃 설정은 LocalStorage에 저장되며, 탭 전환 및 앱 재시작 시에도 유지
외부 협력사와의 3D Viewer는 iframe + postMessage 방식으로 통신을 주고받으며 연동
3D Viewer 연동 (협력 업체 iframe 통신)
- 외부 협력 업체에서 제공한 경량화 3D Web Viewer를 iframe으로 삽입하고, postMessage API를 통해 통신
  - 예: 대시보드에서 선택한 데이터를 3D Viewer로 전송하여 해당 모델 포커싱
- iframe 내부 Viewer로부터 사용자 클릭 이벤트를 받아 시각화 상태를 갱신