feat: WYSIWYG 빌더 1차 기능 완성 및 테스트 추가
This commit is contained in:
@@ -1,5 +1,37 @@
|
||||
# 메인플랜: 랜딩 페이지 빌더
|
||||
|
||||
## [정렬] WYSIWYG 빌더 목표/요구사항/수용기준 (2025-11-17)
|
||||
- **목표**
|
||||
- /[locale]/wysiwyg 에서 비개발자도 랜딩을 시각적으로 제작(Add→편집→Export)할 수 있다.
|
||||
- Export 산출물은 ZIP(index.html/css/js/assets/*, site.webmanifest, robots.txt, 무결성 파일)을 포함한다.
|
||||
|
||||
- **확정 요구사항**
|
||||
- R1: 텍스트/이미지/버튼 추가 및 속성 편집(X/Y/W/H/Rotate + 타입별 속성)
|
||||
- R2: 조작 UX(드래그/리사이즈/회전, 8px/15° 스냅, 멀티선택·마퀴, 키보드 너지, 가이드 표시, a11y 라이브 리전)
|
||||
- R3: 레이어 관리(순서 이동, lock, visible 토글)
|
||||
- R4: Export ZIP 생성(무결성 파일 포함) 및 verify ok
|
||||
- R5: 경로 고정(/[locale]/wysiwyg)
|
||||
|
||||
- **수용 기준(DoD)**
|
||||
- A1: /wysiwyg에서 Add Text → 속성 수정 → Export 실행 시 ZIP 생성, HTML/CSS에 수정 반영
|
||||
- A2: 드래그/리사이즈/회전 스냅 동작 및 가이드 표시 스모크 그린
|
||||
- A3: 라이브 리전 문구가 선택/가이드/너지에 맞춰 갱신
|
||||
- A4: 생성된 ZIP에 대해 verifyIntegrity 결과 ok=true
|
||||
- A5: 레이어 순서 변경이 렌더에 반영
|
||||
|
||||
- **TDD 매핑**
|
||||
- R1 → PropsPanel.test(기존) + WysiwygBuilderPage 추가/수정 반영 스모크(신규)
|
||||
- R2 → Canvas.*.test(기존) + 빌더 멀티선택/마퀴 스모크(신규)
|
||||
- R3 → LayersPanel.test(기존) + 빌더 순서 반영(신규)
|
||||
- R4 → exportFrame/buildZip/무결성(기존) + 빌더 Export 스모크(신규)
|
||||
- R5 → 라우트 스모크(기존)
|
||||
|
||||
- **순차 작업 계획**
|
||||
1) 수용 테스트 추가(빌더 Add→Edit→Export, 레이어 순서 반영, 멀티선택/마퀴 스모크)
|
||||
2) /wysiwyg Export에 무결성 파일 포함 연동
|
||||
3) 최소 UI 토글(가이드/그리드) 노출 및 문서 업데이트
|
||||
4) 전체 그린 확인 후 브랜치 범위 점검 → 푸쉬
|
||||
|
||||
### 가이드라인 고도화 진행(2025-11-16)
|
||||
- 목표: 객체-객체 스냅 가이드(8px 임계)
|
||||
- 수직 중심 정렬 가이드/스냅
|
||||
@@ -64,6 +96,32 @@
|
||||
- 멀티선택 혼합/최근접 보강 케이스 수평축/복합 시나리오 추가 점검
|
||||
- 접근성 보강: 선택/스냅/가이드 상태에 대한 라이브 리전 안내 및 ARIA 속성 방안 설계
|
||||
|
||||
### WYSIWYG 빌더 Export/이미지/Props 동기화 진행(2025-11-17)
|
||||
- 목표: /wysiwyg에서 실제 랜딩에 가까운 HTML/CSS Export와 로컬 이미지 업로드, 속성 패널과 Canvas의 일관된 동기화 확보
|
||||
- TDD
|
||||
- `lib/wysiwyg/export.test.ts`
|
||||
- 버튼 오브젝트를 `<a id="..." href="...">label</a>`로 내보내는지 검증
|
||||
- 숨김 레이어(`visible: false`)가 HTML/CSS에 포함되지 않는지 검증
|
||||
- `exportFrame` 결과 HTML이 `<!doctype html>`, `<link rel="stylesheet" href="styles.css" />`, `<script src="app.js"></script>`를 포함하는 전체 문서 구조인지 검증
|
||||
- `components/wysiwyg/WysiwygBuilder.acceptance.test.tsx`
|
||||
- 로컬 이미지 업로드 시 Canvas에 `<img src="/assets/...">`가 렌더되는지 검증
|
||||
- PropsPanel에서 Width/Height/Rotate 변경이 Canvas 스타일(width/height/transform)에 반영되는지 검증
|
||||
- PropsPanel에서 Text/Label 변경이 Canvas 텍스트/버튼 콘텐츠에 반영되는지 검증
|
||||
- 구현
|
||||
- `lib/wysiwyg/export.ts`
|
||||
- frame 내용을 `<div class="frame-scale"><div class="frame">...</div></div>`로 감싼 뒤, `<!doctype html><html lang="en"><head>...styles.css...</head><body>...app.js...</body></html>` 전체 문서로 래핑
|
||||
- 숨김 레이어는 HTML/CSS 생성 시 스킵, 버튼은 `<a>`로 내보내되 위치/크기/회전은 CSS에서 절대 좌표로 표현
|
||||
- `components/wysiwyg/WysiwygBuilderPage.tsx`
|
||||
- 페이지 수명 주기 동안 유지되는 `AssetManager`를 `useRef`로 보관
|
||||
- 파일 업로드 input(`data-testid="wysiwyg-image-input"`) 추가 후, 업로드된 이미지를 `AssetManager.add`로 수집하고 `props.src="/assets/..."`인 image WObject를 Base 레이어에 추가
|
||||
- Export 시 `assetManager.toZipStructure()`를 `buildZip`의 `assets`로 전달하고, 기존 무결성 파일(`assets.json`, `assets.index.json`, `assets.integrity.index.json`)을 extras에 포함
|
||||
- `components/wysiwyg/PropsPanel.tsx`
|
||||
- 내부 `model`을 `object` prop과 `useEffect`로 동기화하여 선택 변경 시 최신 값 반영
|
||||
- Text용 Text 필드(`aria-label="Text"` → `props.text`), Button용 Label 필드(`aria-label="Label"` → `props.label`) 추가
|
||||
- 결과
|
||||
- /wysiwyg에서 Add Text/Image/Button, PropsPanel 편집, 로컬 이미지 업로드, Export ZIP(index.html/styles.css/app.js/assets/* + 무결성 파일)까지 한 플로우가 acceptance 테스트로 검증되는 상태
|
||||
- `npm test -s` 기준 145 파일 / 246 테스트 전체 그린
|
||||
|
||||
### 접근성 라이브 리전(2025-11-17)
|
||||
- 목표: 캔버스에서 선택 개수 변화와 가이드(스냅 라인) 좌표 변화를 스크린리더에 폴라이트로 안내
|
||||
- TDD
|
||||
|
||||
Reference in New Issue
Block a user