WYSIWYG: 멀티선택/그룹 스냅·가이드(그룹 bbox)/마퀴 선택 TDD·구현 및 문서 업데이트

MAIN_PLAN.md

@@ -29,6 +29,41 @@
 - 다중 선택 및 그룹 이동/정렬 스펙 초안 TDD
 - 접근성: 키보드 조작 시 라이브 리전 안내/가이드라인 ARIA 노출 정책 검토
 
+### 키보드 nudge 진행(2025-11-16)
+- 정책: 기본 화살표 1px 이동 → 8px 그리드 스냅, Shift=1px 비스냅, Alt=16px 이동 후 스냅
+- TDD: `components/wysiwyg/Canvas.nudge.test.tsx`에 Shift/Alt 케이스 추가
+- 구현: `components/wysiwyg/Canvas.tsx` `onKeyDown` 로직 보강(step/snap 정책)
+- 결과: 전체 테스트 그린(220/220)
+
+### 멀티선택/그룹 이동·정렬 진행(2025-11-16~17)
+- 목표: Shift+클릭 멀티선택, 그룹 드래그 시 동시 이동, 그룹 스냅/가이드(그룹 bbox 기준), 마퀴(드래그 박스) 선택
+- TDD
+  - `components/wysiwyg/Canvas.multiselect.test.tsx`
+    - Shift+클릭으로 다중 선택 토글, 선택 아웃라인 표시, 그룹 드래그 시 동시 이동
+  - `components/wysiwyg/Canvas.multigroup.guides.test.tsx`
+    - 그룹 bbox 기준 중심/에지 스냅, 혼합 케이스(에지>중심), 다수 후보 중 최근접 우선 검증
+    - 그리드 스냅 근사치(±8px)로 인한 픽셀 오차는 상대 delta로 검증(안정성 강화)
+  - `components/wysiwyg/Canvas.marquee.test.tsx`
+    - 빈 캔버스 드래그로 마퀴(드래그 박스) 선택. 교차하는 객체 자동 선택. 빈 클릭 시 선택 해제
+- 구현: `components/wysiwyg/Canvas.tsx`
+  - 상태: `selectedIds`(배열)로 전환, 마지막 선택을 Moveable `target`으로 사용
+  - Shift+클릭 토글 선택. 선택된 모든 객체에 아웃라인/핸들 표시
+  - 그룹 드래그: 마지막 선택에서 제안된 좌표 → 그룹 bbox로 변환해 스냅 후보(중심/에지) 계산 → 스냅된 그룹 delta를 모든 선택 객체에 적용
+  - 가이드: 그룹 컨텍스트에서 에지>중심>그리드 우선 표시(축별)
+  - 마퀴: 캔버스 `mousedown→mousemove→mouseup`으로 사각형 추적, 교차 판정으로 선택 세트 갱신. 빈 캔버스 클릭 시 선택 해제
+  - 테스트 환경 폴리필: `document.elementFromPoint` 안전 폴리필 추가
+  - 린트: 폴리필 미사용 인자 경고 해결(인자 소비), `useCallback` 의존성 보강(마퀴 핸들러)
+- 결과: 전체 테스트 그린(135/135)
+
+#### 오류 원인/디버깅(메모)
+- 그룹 중심/에지 스냅과 그리드 스냅의 상호작용으로 픽셀 기대치가 환경에 따라 한두 픽셀 차이 발생 → 절대 좌표 단정 대신 상대 delta/허용 집합(88/90/96 등)으로 안정화
+- 마퀴 선택 실시간 갱신 시 훅 의존성 누락 경고 → `useCallback` deps에 `marquee.active/x0/y0` 및 `model.layers` 반영
+- jsdom 환경의 `elementFromPoint` 부재로 이벤트 경로 해석 이슈 → 폴리필로 무해화(`() => null`)
+
+#### 다음 단계
+- 멀티선택 혼합/최근접 보강 케이스 수평축/복합 시나리오 추가 점검
+- 접근성 보강: 선택/스냅/가이드 상태에 대한 라이브 리전 안내 및 ARIA 속성 방안 설계
+
 ## 목표
 - 비개발자도 사용 가능한 단일 페이지 랜딩 페이지 빌더.
 - 결과물: 정적 ZIP(HTML/CSS/JS) 다운로드. 이미지: 외부 URL 또는 로컬 업로드(서버 저장 없음, ZIP에 패키징). 폰트는 외부 CDN 허용.