3D 감수 아카이브 플랫폼

OBJ·STL 포맷 3D 파일을 브라우저에서 WebGL로 렌더링하고, 마우스 조작으로 360도 회전·확대·패닝을 지원하며 사용자 식별 워터마크 오버레이를 적용하는 메인 뷰어 화면입니다.

• Three.js OBJLoader·STLLoader로 3D 모델 파일 파싱 후 WebGLRenderer 씬 구성, PerspectiveCamera + DirectionalLight 배치로 실물감 있는 렌더링 구현
• OrbitControls로 마우스 좌클릭 회전·휠 확대축소·우클릭 패닝 조작 지원, 모바일 터치 이벤트 대응 설계
• Canvas 2D 오버레이에 사용자 ID·조직명·접속 일시를 30° 기울기 반복 패턴으로 렌더링, Three.js 씬과 Z-레이어 분리하여 워터마크 회피 불가 구조 구현

Three.js WebGLRenderer와 HTML Canvas 오버레이를 동일 컨테이너에 포지셔닝하여 3D 씬 위에 사용자 식별 워터마크를 실시간으로 합성하는 구조를 구현합니다. CSS pointer-events: none으로 뷰어 인터랙션 방해 없이 워터마크를 적용합니다.

3D·360도 뷰어 위 특정 위치 클릭 시 텍스트 메모를 입력하고, 주석별 댓글 스레드와 감수 완료 표시를 관리하는 피드백 협업 화면입니다.

• Three.js Raycaster로 마우스 클릭 시 3D 모델 교차점 좌표(x·y·z) 계산 및 화면 좌표 변환, 주석 핀 Sprite 씬 배치 구현
• PostgreSQL annotations 테이블에 3D 좌표(float4 x·y·z)·텍스트·작성자·타임스탬프·감수상태(ENUM) 저장, Prisma 트랜잭션으로 주석-댓글 원자적 처리
• 주석 핀 클릭 시 우측 사이드 패널에 댓글 스레드 표시, 감수 완료 체크·대댓글·멘션(@사용자) 기능 설계

Three.js Raycaster 교차점 좌표를 정규화하여 DB에 저장하고, 뷰어 재로드 시 동일 3D 좌표에 핀을 복원하는 주석 위치 영속 구조를 설계합니다. 카메라 뷰 변경과 무관하게 핀이 모델 표면에 고정되도록 Three.js 렌더 루프에서 핀 위치를 매 프레임 재계산합니다.

다각도 사진을 일괄 업로드하고 마우스 좌우 드래그로 사진 시퀀스를 전환하는 스프라이트 슬라이더 방식의 360도 뷰어와 워터마크 오버레이 화면입니다.

• 다각도 사진 배열을 인덱스로 관리, 마우스 dragX 이동량을 frameStep으로 나눠 인덱스 계산, requestAnimationFrame으로 60fps 부드러운 전환 구현
• AWS S3 pre-signed URL(TTL 60분)로 원본 이미지 스트리밍 접근, 브라우저 캐시 헤더 설정으로 재드래그 시 로딩 없이 즉시 전환
• Canvas 워터마크 오버레이를 이미지 레이어 위에 절대 포지셔닝, 드래그 중에도 사용자 ID 워터마크 유지 구조 구현

마우스 down-move-up 이벤트의 누적 deltaX 값으로 현재 프레임 인덱스를 실시간 계산하고, S3 pre-signed URL로 이미지를 순차 프리패치하여 드래그 중 로딩 끊김 없이 부드러운 360도 전환을 구현합니다.

외부 협력사의 회원가입 신청을 검토하고 관리자 승인·반려 처리, 내부직원·관리자·협력사 3계층 역할별 메뉴 접근 권한을 제어하는 권한 관리 화면입니다.

• PostgreSQL users.role ENUM(admin·internal·partner) + status ENUM(pending·approved·rejected) 스키마 설계, Prisma로 역할별 관계 쿼리 구현
• Express 미들웨어 requireRole(['admin', 'internal'])로 역할 기반 라우트 가드 구현, JWT accessToken에 role 클레임 포함하여 프론트 메뉴 조건부 렌더링
• 관리자 승인 화면에서 pending 협력사 목록 조회, 단건/일괄 승인·반려·정지 처리 API 설계, 상태 변경 시 이메일 알림 발송 구조 구현

JWT 페이로드에 role 클레임을 포함하여 프론트엔드에서 메뉴·버튼 조건부 렌더링을 수행하고, Express 미들웨어로 API 엔드포인트별 역할 접근을 이중 검증하는 3계층 권한 구조를 설계합니다.