[euoonw]

🔍 PR 요약

공유 링크로 연 보드 웹 페이지를 앱 보드처럼 끌어서 이동하고 확대·축소할 수 있게 바꾸고, 브라우저에서 어색하던 상단 여백을 맞췄습니다.

🧠 의도 및 배경

#261에서 만든 공유 보드 페이지는 보드 전체를 한 화면에 맞춰 보여주는 고정 화면이었는데, 보드 주인이 앱에서 보는 것과 같은 방식으로 볼 수 있게 했습니다.
또 시안의 상단 여백(64px)은 앱 상태바를 포함한 값이라, 상태바와 주소창이 화면 밖에 있는 모바일 브라우저에서는 헤더가 많이 내려와 보였습니다.

🛠️ 주요 변경 사항

• 보드 이동·확대
  • 한 손가락으로 끌어 이동, 두 손가락 핀치로 확대·축소(0.25~3배), PC는 휠 이동과 Ctrl+휠·트랙패드 핀치 확대
  • 빈 곳 더블탭 → 누른 지점 기준 1배 줌 (앱과 같은 판정 기준)
  • 로고·제목 탭 → 처음 열었을 때 위치로 부드럽게 이동
  • 이름표 크기 유지와 줌아웃 시 사라짐, 점 배경 이동·흐려짐도 앱 보드와 같게 맞췄습니다.
  • 스티커 탭 → 리캡 이동은 그대로이고, 끌다가 뗀 건 탭으로 치지 않습니다.
• 상단 여백
  • 안전 영역 + 16px로 바꾸되, 브라우저에서는 최소 32px를 두었습니다. 앱 화면은 기존과 같습니다.
  • 보드 헤더와 보드 공유에서 들어간 리캡의 제목·뒤로가기에 적용했습니다.

봐주셨으면 하는 부분

• 앱의 BoardCanvas는 편집 기능과 로그인 데이터에 묶여 있어 그대로 쓰지 않고, 보기 전용 제스처 훅(useViewOnlyBoardGesture)을 새로 만들었습니다. 카메라 계산은 앱과 같은 함수(panCamera, computeBoardPinchZoom, zoomCamera, zoomCameraTo)를 씁니다.
• 처음 위치로 돌아가는 곳은 앱의 "스티커 쪽으로 이동"이 아니라 페이지를 처음 열었을 때 카메라입니다.
• ShareBoardScene은 앱의 공유 이미지 카드에서도 씁니다. 이번 변경은 interactive(공유 웹 페이지)일 때만 적용돼서 카드 모양은 그대로입니다.
• SharedRecapView에 선택 prop paddingTop을 추가했습니다. 넘기지 않으면 기존처럼 40px라서 리캡 공유 페이지(/share/recap)는 바뀌지 않습니다.

이번 PR에 없는 것

• 사파리에서 리캡 상단 그라데이션이 주소창 쪽 검정과 끊겨 보이는 문제: theme-color와 배경색으로 시도했지만 iOS 사파리가 반영하지 않아 뺐습니다. 팀에서 방향을 정한 뒤 따로 진행합니다.