✨ 프로젝트 소개

• EPC(Engineering, Procurement, and Construction)는 설계, 조달, 시공 전 과정을 1D·2D·3D 데이터로 통합 시각화하는 웹 솔루션 입니다.

  

  출처: 이에이트(주)

• 프로젝트 참여 인력

  • FE: 3명
  • BE: 3명
  • 디자이너: 1명
  • 협력 업체 (경량화 3D Web Viewer)

• 프로젝트 홍보 영상

✨ 내가 기여한 부분

🖼️ 2D 도면 뷰어 및 마크업 기능 설계 및 구현

• 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로부터 사용자 클릭 이벤트를 받아 시각화 상태를 갱신