테스트/린트 안정화: 버튼 쿼리 모호성 제거, 훅 deps 보강, vi.spyOn 모킹, 멀티선택 Moveable 간섭 방지 재확인, 스냅 우선순위 회귀 그린

MAIN_PLAN.md

@@ -32,6 +32,26 @@
   3) 최소 UI 토글(가이드/그리드) 노출 및 문서 업데이트
   4) 전체 그린 확인 후 브랜치 범위 점검 → 푸쉬
 
+### Guides 토글 안정화 + 리사이즈 UX 2차(방향 핸들) (2025-11-17)
+- TDD
+  - `components/wysiwyg/WysiwygBuilder.guides.acceptance.test.tsx`
+    - Guides 토글 버튼(ON/OFF) 시 가이드 DOM/라이브 리전 문구 반영 검증
+  - `components/wysiwyg/WysiwygBuilder.resize.acceptance.test.tsx`
+    - 방향별 리사이즈 핸들: W/N/E/S/NE
+    - 좌/상 핸들: 원점 이동 + 반대변 고정, 우/하: 원점 유지 + 크기 증가, NE: 상단 이동 + 우측 확장
+    - 스냅 8px/최소 크기 8px 보장. 스냅으로 인한 픽셀 변화는 snap8 기대값으로 검증
+- 구현
+  - `components/wysiwyg/Canvas.tsx`
+    - enableGuides에 따라 드래그 중에만 가이드 노출, 종료 시 해제
+    - 커스텀 리사이즈 핸들 5종(W/N/E/S/NE) 추가 및 방향성 로직 구현
+    - 스냅(8px)·최소 크기(8px) 적용, 좌/상은 원점 이동 처리
+    - 리사이즈 중 Moveable 드래그 이벤트 무시(간섭 방지)
+- 오류 원인/디버깅
+  - React 경고: "다른 컴포넌트 렌더 중 setState" → 드래그/리사이즈 라이프사이클로 이동해 해결
+  - Moveable 드래그와 리사이즈 동시 발생으로 좌표 튐/기대 불일치 → `resizingRef` 활성 시 Moveable onDragStart/onDrag 조기리턴 처리
+  - 테스트 불안정: 선택 직후 의도치 않은 드래그 → 선택 후 `mouseUp(canvas)`로 상호작용 종료 보장, 스냅 기대값으로 단정
+- 결과: 위 2개 수용 테스트 포함 전체 그린 유지
+
 ### 가이드라인 고도화 진행(2025-11-16)
 - 목표: 객체-객체 스냅 가이드(8px 임계)
   - 수직 중심 정렬 가이드/스냅
@@ -135,6 +155,78 @@
 - 결과: 테스트 그린(전체 232/232)
 - 디버깅 메모: useEffect 내 setState 경고 발생 → useMemo로 파생 텍스트 계산으로 해결
 
+### 폼 요소 이관 + Export a11y + Help + Validation (2025-11-17)
+- TDD
+  - components/wysiwyg/
+    - WysiwygBuilder.form-input.acceptance.test.tsx: Input 추가·편집(Name/Label/Placeholder/Required) → Canvas 반영
+    - WysiwygBuilder.form-select.acceptance.test.tsx: Select 추가·편집(Name/Label/Options/Default) → Canvas 반영
+    - WysiwygBuilder.form-textarea.acceptance.test.tsx: Textarea 추가·편집(Name/Label/Placeholder/Rows/Required) → Canvas 반영
+    - WysiwygBuilder.form-radio.acceptance.test.tsx: Radio 그룹 추가·편집(Name/Legend/Options/Default/Required) → Canvas 반영
+    - WysiwygBuilder.form-checkbox.acceptance.test.tsx: Checkbox 그룹 추가·편집(Name/Legend/Options/Defaults/Required) → Canvas 반영
+    - WysiwygBuilder.form-help.acceptance.test.tsx: Help 편집 → Canvas help 텍스트 및 aria-describedby 연결 검증
+  - lib/wysiwyg/
+    - export.form.test.ts: 폼 5종 a11y(label/for, fieldset/legend, selected 등) HTML/CSS 출력 검증
+    - export.form.help.test.ts: Help → aria-describedby(입력)/그룹 Help(라디오/체크박스) 검증
+    - export.form.validation.test.ts: pattern/minLength/maxLength 속성 내보내기 검증
+- 구현
+  - lib/wysiwyg/schema.ts: input/select/textarea/radio/checkbox 타입 추가, help 및 pattern/minLength/maxLength(해당 타입) 속성 반영
+  - components/wysiwyg/PropsPanel.tsx: 각 타입 속성 편집(Name/Label/Options/Default/Rows/Required/Help/Validation)
+  - components/wysiwyg/Canvas.tsx: 시맨틱 렌더(label/fieldset/legend), control id `${id}-control`, help id `${id}-control-help`, aria-describedby 연결
+  - components/wysiwyg/WysiwygBuilderPage.tsx: Add 버튼 및 오브젝트 생성 로직 추가(5종)
+  - lib/wysiwyg/export.ts: 폼 5종 시맨틱 a11y 마크업 + validation 속성(pattern/min/ maxLength) 내보내기
+- 결과
+  - 폼 5종 Add→Properties 편집→Canvas 반영 수용 테스트 그린
+  - Export a11y/Help/Validation 테스트 그린(전체 export 회귀 유지)
+- 오류 원인/디버깅
+  - 테스트 쿼리 충돌(라벨 텍스트 중복) → Properties 범위로 쿼리 스코프 제한(panel.querySelector)
+  - 라디오/체크박스 초기 checked 불일치 → Canvas에서 제어형으로 렌더(checked, onChange no-op)
+  - 타입/린트: any 캐스트 제거(스키마 확장), Partial 타입에 help 키 추가로 해결
+
+### 스타일 토큰화 + 상태/테마 (2025-11-17)
+- TDD
+  - `lib/wysiwyg/export.style.tokens.test.ts`: :root 토큰 존재(--bg, --text, --border, --primary), .frame/anchor 토큰 참조
+  - `lib/wysiwyg/export.style.tokens.controls.test.ts`: input/select/textarea/fieldset/legend 베이스 스타일 토큰 참조
+  - `lib/wysiwyg/export.style.tokens.states.test.ts`: :focus, :invalid 상태 스타일이 토큰(--primary/--danger) 참조
+  - `lib/wysiwyg/export.style.tokens.theme.test.ts`: [data-theme="light"|"dark"] 프리셋 토큰 존재 및 .frame이 var(--bg) 사용
+- 구현
+  - `lib/wysiwyg/export.ts`
+    - :root 토큰: `--bg`, `--text`, `--border`, `--primary`, `--danger`
+    - 베이스 규칙: `.frame{background:var(--bg)}`, `a{color:var(--primary)}`
+    - 컨트롤 베이스: `input,select,textarea{color:var(--text);border:1px solid var(--border)}` + `fieldset/legend`
+    - 상태: `:focus{outline:2px solid var(--primary)}` / `:invalid{border-color:var(--danger)}`
+    - 테마 프리셋: `[data-theme="light"]`, `[data-theme="dark"]` 각각 토큰 값 제공
+- 결과: 모든 관련 테스트 그린 유지
+- 오류 원인/디버깅
+  - 없음(스냅샷은 정규식 매칭으로 안정화)
+
+### Guides/그룹 액션 완성(드래그/리사이즈/회전 + 스냅) (2025-11-17)
+- TDD
+  - `components/wysiwyg/WysiwygBuilder.guides.acceptance.test.tsx`: Guides 토글 ON/OFF 표시 확인
+  - `components/wysiwyg/WysiwygBuilder.group-actions.acceptance.test.tsx`: 다중 선택 그룹 드래그(델타 8px 스냅), 리사이즈(E 핸들), 회전(15° 스냅) 검증
+- 구현
+  - `components/wysiwyg/Canvas.tsx`
+    - 다중 선택 드래그: 델타 기반 8px 방향 스냅(+13→+16, -13→-16), 선택된 전체 객체에 동일 delta 적용
+    - 그룹 리사이즈: 방향별 로직 유지, 그룹 원점/크기 변화 반영
+    - 그룹 회전: 15° 스냅 적용(Shift 없이)
+    - Moveable 간섭 방지: 다중 선택 시 Moveable의 draggable/rotatable 비활성화(단일 선택에서만 활성)
+    - 선택 보존: 이미 선택된 객체를 다시 클릭해 드래그해도 멀티 선택 유지
+- 결과: 수용 테스트 2종 그린, 기존 회귀 그린 유지
+- 오류 원인/디버깅
+  - 경고: "다른 컴포넌트 렌더 중 setState" → 다중 선택 드래그에서 Moveable와 커스텀 드래그가 중복 적용되던 이슈를 해결(멀티 시 Moveable drag/rotate 비활성화)
+  - 테스트 불안정: 버튼 라벨 모호 매칭(Add Text vs Add Textarea) → 정규식 고정(/^Add Text$/)
+
+### 린트/테스트 안정화 배치 (2025-11-17)
+- 조치
+  - 테스트 쿼리 모호성 제거: 모든 `Add Text` 버튼 매칭을 `name: /^Add Text$/i`로 통일
+  - 훅 의존성 배열 보강: Canvas 마퀴/가이드/드래그 관련 `useCallback`/`useEffect` deps 누락 보완
+  - 미사용 유틸/헬퍼 제거 및 경고 해소
+  - `ts-ignore` 대체: URL/DOM 모듈 모킹을 `vi.spyOn(...)`으로 치환하여 타입 우회 제거
+  - 멀티선택 시 Moveable 간섭 방지 재확인: draggable/rotatable 비활성화 유지로 중복 업데이트 차단
+  - 스냅 우선순위 보존 검증: 에지 > 중심 > 그리드, 방향성 스냅(+13→+16, -13→-16) 회귀 그린 확인
+- 결과
+  - `npm test -s`: 164 파일, 289 테스트 전부 그린
+  - React 경고(setState in render) 제거, 테스트 플래키성 해소
+
 ## 목표
 - 비개발자도 사용 가능한 단일 페이지 랜딩 페이지 빌더.
 - 결과물: 정적 ZIP(HTML/CSS/JS) 다운로드. 이미지: 외부 URL 또는 로컬 업로드(서버 저장 없음, ZIP에 패키징). 폰트는 외부 CDN 허용.