캔버스 사용법

Canvas 에디터의 기본 조작 방법입니다.

접속

1. http://localhost:3001 접속
2. 로그인 (Google OAuth) — 캔버스는 인증이 필요합니다
3. 워크스페이스 열기 → /canvas에서 워크스페이스 선택 또는 새로 생성
4. /canvas/{id} 캔버스 에디터 화면 진입

권한이 없는 워크스페이스 URL(/canvas/999 등)은 목록 페이지로 돌아가며 접근 거부 메시지가 표시됩니다.

도구

도구	단축키	설명
이동	V	노드 선택·드래그·리사이즈
텍스트	T	빈 영역 클릭으로 텍스트 박스 배치

텍스트 노드를 배치하면 자동으로 편집 모드에 진입하며, 배치가 끝나면 이동 도구로 전환됩니다.

텍스트 노드는 가로 폭만 리사이즈할 수 있습니다. 스케일 핸들 대신 폭 변경으로 동작합니다.

선택 & 편집

동작	단축키
전체 선택	Mod+A
선택 해제	Escape (이동 도구로 전환)
삭제	Delete / Backspace

선택된 노드는 우측 Properties Sidebar에서 확인할 수 있습니다. 현재 사이드바는 placeholder 메뉴만 있으며, 노드별 속성 편집 UI는 아직 연결되지 않았습니다.

노드 라벨

Mod+.로 캔버스 위 노드 표시 이름(라벨)을 켜거나 끌 수 있습니다. 라벨이 보일 때:

• 클릭 — 해당 노드 선택
• 드래그 — 노드 이동
• 더블클릭 — 라벨 이름 변경

기본 텍스트 노드의 라벨은 text이며, node.label 필드에 저장됩니다.

뷰 조작

동작	단축키
확대	Mod+=
축소	Mod+-
화면에 맞추기	Mod+0

마우스 휠로도 뷰를 조작할 수 있습니다 (useCanvasViewportWheel).

입력	동작
휠	세로 팬
Shift + 휠	가로 팬
Mod + 휠	커서 위치 기준 줌

에디터 UI

기능	단축키	설명
속성 패널 토글	Mod+/	우측 Properties Sidebar
노드 라벨 토글	Mod+.	노드 표시 이름 오버레이
테마 전환	UI 버튼	좌측 상단 다크/라이트 모드

좌상단 HUD에 현재 줌 배율과 팬 좌표가 표시됩니다. 우측 상단에 저장 중... 표시가 잠깐 나타날 수 있습니다.

상태 저장

노드 문서 (서버)

nodes, nodeOrder는 PostgreSQL Node 테이블에 저장됩니다.

• 노드 추가·수정·삭제 후 약 500ms debounce로 PUT /workspaces/:id/nodes 호출
• 페이지 진입 시 GET /workspaces/:id/nodes로 복원
• 로그인(JWT 쿠키) 필요

Prisma Studio로 DB 확인: pnpm docker:prisma:studio → http://localhost:5555

UI 설정 (localStorage)

canvas-app-v1 키에 UI 설정만 persist됩니다:

• isPropertiesSidebarOpen
• isVisibleNodeLabels

zoom, position, tool, selectedIds 등은 persist 대상이 아닙니다.

실행 취소 / 다시 실행

동작	단축키	커맨드 라벨
실행 취소	Mod+Z	실행 취소
다시 실행	Mod+Shift+Z	복원

단축키와 커맨드는 등록되어 있으나, 현재 히스토리 스택은 도구(tool) 변경만 추적하도록 설계되어 있고 pushHistory가 아직 연결되지 않아 실질적으로 동작하지 않습니다. 노드 편집 undo/redo는 향후 구현 예정입니다.

화면 구성

┌─────────────────────────────────────────┐
│ [워크스페이스] [줌 HUD] [좌표 HUD]  [저장중]│
│                                         │
│              캔버스 영역                 │
│    (Fabric.js + 노드 라벨 오버레이)      │
│                                         │
│                              [속성 패널] │
└─────────────────────────────────────────┘

다음 단계

노드 추가하기 →