feat(wysiwyg): 레이어/속성 패널 및 Export(절대배치) 1차 TDD/구현
Auto PR / open-pr (push) Successful in 21s
Auto Label PR / add-automerge-label (pull_request) Successful in 6s
CI / test (pull_request) Successful in 1m16s

- LayersPanel: 순서 변경/잠금/숨김 토글
- PropsPanel: 위치/크기/회전 및 이미지 src/alt 편집
- exportFrame: frame-scale 토큰 및 오브젝트 절대배치 HTML/CSS 출력
- 테스트 추가 및 전체 그린 유지
This commit is contained in:
2025-11-16 21:35:28 +09:00
parent 1737ae172e
commit 98d33fc0d0
9 changed files with 458 additions and 7 deletions
+57
View File
@@ -0,0 +1,57 @@
import { describe, it, expect } from 'vitest'
import { render, fireEvent } from '@testing-library/react'
import { Canvas } from '@/components/wysiwyg/Canvas'
import type { Frame } from '@/lib/wysiwyg/schema'
function makeFrame(): Frame {
return {
id: 'f1',
width: 400,
height: 300,
background: '#ffffff',
layers: [
{
id: 'l1',
name: 'L1',
visible: true,
locked: false,
objects: [
{ id: 'o1', type: 'image', x: 100, y: 100, width: 50, height: 40, rotate: 0, zIndex: 0, props: { src: 'x', alt: '' } },
],
},
],
}
}
describe('WYSIWYG Canvas rotate with snap', () => {
it('rotates with 15deg snap by default', () => {
const frame = makeFrame()
const { getByTestId } = render(<Canvas frame={frame} />)
const handle = getByTestId('rotate-handle-o1')
const canvas = getByTestId('wysiwyg-canvas')
// start rotate at 0deg
fireEvent.mouseDown(handle, { clientX: 100, clientY: 100 })
// move +16px on x → +16deg → snap15 => 15deg
fireEvent.mouseMove(canvas, { clientX: 116, clientY: 100 })
fireEvent.mouseUp(canvas)
const obj = getByTestId('obj-o1')
expect(obj).toHaveStyle({ transform: 'rotate(15deg)' })
})
it('rotates with 1deg step while holding Shift', () => {
const frame = makeFrame()
const { getByTestId } = render(<Canvas frame={frame} />)
const handle = getByTestId('rotate-handle-o1')
const canvas = getByTestId('wysiwyg-canvas')
fireEvent.mouseDown(handle, { clientX: 100, clientY: 100 })
// move +7px with Shift → +7deg, no snap
fireEvent.mouseMove(canvas, { clientX: 107, clientY: 100, shiftKey: true })
fireEvent.mouseUp(canvas)
const obj = getByTestId('obj-o1')
expect(obj).toHaveStyle({ transform: 'rotate(7deg)' })
})
})