2026-07-03 PinPoint 작업일지입니다. 오늘은 2건의 작업을 진행했습니다.

전역 (`ImagePreviewProvider` 사용 화면 — 랜딩 시공 사례, 시공 사례 관리, 견적 등)

현상/기능

  • 시공 사례 이미지 클릭 시 나오는 팝업창 내 핀치 줌 기능 추가

작업

  • 파일
  • `src/components/image-preview/` — 두 손가락 핀치 줌·이동, 핀치 종료 후 한 손가락 드래그 전환, UI 안내 문구 갱신
  • Pointer Events 기반 2점 거리로 scale 조절, 핀치 중심 기준 pan 보정
  • 기존 Ctrl+휠·±버튼·드래그 동작 유지

전역 (`ImagePreviewProvider` 사용 화면)

현상/기능

  • 모바일 브라우저 실기기에서 핀치 줌이 동작하지 않음

현상/기능

  • 로컬 dev(192.168.x.x:3000)에서는 핀치 줌 되나, build 후 실서버에서는 모바일 핀치 줌 미동작

작업

  • 파일
  • 기존 Pointer Events 기반 scale/pan 계산 로직은 변경 없음, 네이티브 줌 차단만 보강
  • 원인: `touch-action: none` CSS만으로는 일부 모바일 브라우저(특히 iOS Safari)에서 네이티브 페이지 확대(핀치)를 완전히 막지 못해, Pointer Events 기반 커스텀 핀치 로직과 네이티브 줌이 충돌
  • `src/components/image-preview/` — 뷰포트 엘리먼트에 `touchmove`/`touchstart`(non-passive) 및 Safari 전용 `gesturestart`/`gesturechange` 네이티브 리스너를 추가해 두 손가락 터치 시 브라우저 기본 확대 동작을 명시적으로 차단
  • 원인: iOS Safari production 환경에서 Pointer Events + setPointerCapture 조합이 불안정, Touch 이벤트만으로는 핀치 scale/pan 미적용
  • `src/components/image-preview/` — 모바일 Touch 이벤트로 핀치·드래그 직접 처리, 마우스만 Pointer Events 사용, gesturestart/change/end 차단 유지
  • 배포 시 확인: `.next/static` 포함 재배포, PM2 재시작, 모바일 브라우저 캐시 삭제(시크릿 모드 테스트)