feat(wysiwyg): 캔버스 키보드 nudge/마우스 드래그 + 8px 스냅 (M1 1차)

- Frame/Layer/Object 스키마(zod) 및 테스트
- 키보드 화살표 nudge 시 8px 스냅 적용
- 마우스 드래그 이동 시 8px 스냅 적용
- Canvas 컴포넌트 초기 버전 및 테스트 추가

lib/wysiwyg/schema.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest'
+import { frameSchema, objectSchema, layerSchema, type Frame, type WObject } from '@/lib/wysiwyg/schema'
+
+function validText(id: string): WObject {
+  return {
+    id,
+    type: 'text',
+    x: 100,
+    y: 120,
+    width: 300,
+    height: 40,
+    rotate: 0,
+    zIndex: 1,
+    props: { text: 'Hello', fontSize: 18, color: '#111111' },
+  }
+}
+
+function validImage(id: string): WObject {
+  return {
+    id,
+    type: 'image',
+    x: 50,
+    y: 60,
+    width: 240,
+    height: 180,
+    rotate: 0,
+    zIndex: 0,
+    props: { src: 'https://example.com/a.jpg', alt: 'A' },
+  }
+}
+
+describe('wysiwyg.schema', () => {
+  it('validates a Frame with layers and objects', () => {
+    const frame: Frame = {
+      id: 'frame-1',
+      width: 1200,
+      height: 800,
+      background: '#ffffff',
+      layers: [
+        { id: 'layer-1', name: 'Base', visible: true, locked: false, objects: [validImage('img-1')] },
+        { id: 'layer-2', name: 'Text', visible: true, locked: false, objects: [validText('txt-1')] },
+      ],
+    }
+    const parsed = frameSchema.parse(frame)
+    expect(parsed.layers.length).toBe(2)
+    expect(parsed.layers[1].objects[0].type).toBe('text')
+  })
+
+  it('rejects invalid color and negative sizes', () => {
+    const bad: Frame = {
+      id: 'f', width: -10, height: 0, background: 'blue', layers: [],
+    } as unknown as Frame
+    expect(() => frameSchema.parse(bad)).toThrow()
+  })
+
+  it('objectSchema enforces type-specific props', () => {
+    const ok = objectSchema.parse(validText('t1'))
+    expect(ok.props.text).toBe('Hello')
+
+    const bad = { ...validText('t2'), props: { src: 'x' } }
+    expect(() => objectSchema.parse(bad as unknown as WObject)).toThrow()
+  })
+
+  it('layerSchema enforces ordering integers and object bounds', () => {
+    const good = layerSchema.parse({ id: 'l1', name: 'L', visible: true, locked: false, objects: [validImage('i1')] })
+    expect(good.objects[0].zIndex).toBe(0)
+
+    const badObj = { ...validImage('i2'), width: -1 }
+    expect(() => objectSchema.parse(badObj as unknown as WObject)).toThrow()
+  })
+})

lib/wysiwyg/schema.ts

@@ -0,0 +1,60 @@
+import { z } from 'zod'
+
+const colorHex = z.string().regex(/^#([0-9a-fA-F]{3}){1,2}$/)
+
+const baseObject = z.object({
+  id: z.string().min(1),
+  x: z.number(),
+  y: z.number(),
+  width: z.number().positive(),
+  height: z.number().positive(),
+  rotate: z.number(),
+  zIndex: z.number().int().nonnegative(),
+})
+
+const textObject = baseObject.extend({
+  type: z.literal('text'),
+  props: z.object({
+    text: z.string(),
+    fontSize: z.number().positive(),
+    color: colorHex,
+  }),
+})
+
+const imageObject = baseObject.extend({
+  type: z.literal('image'),
+  props: z.object({
+    src: z.string().min(1),
+    alt: z.string().optional().default(''),
+  }),
+})
+
+const buttonObject = baseObject.extend({
+  type: z.literal('button'),
+  props: z.object({
+    label: z.string().min(1),
+    href: z.string().optional().default(''),
+    color: colorHex.optional(),
+    background: colorHex.optional(),
+  }),
+})
+
+export const objectSchema = z.discriminatedUnion('type', [textObject, imageObject, buttonObject])
+export type WObject = z.infer<typeof objectSchema>
+
+export const layerSchema = z.object({
+  id: z.string().min(1),
+  name: z.string().min(1),
+  visible: z.boolean(),
+  locked: z.boolean(),
+  objects: z.array(objectSchema),
+})
+
+export const frameSchema = z.object({
+  id: z.string().min(1),
+  width: z.number().positive(),
+  height: z.number().positive(),
+  background: colorHex,
+  layers: z.array(layerSchema),
+})
+export type Frame = z.infer<typeof frameSchema>