Canvas Docs

Appearance

프로젝트 개요 ​

Canvas는 기획·디자인·개발 단계에서 UI 흐름과 화면 구성을 시각적으로 정리하는 프로토타입 에디터입니다.
저장소 구조, 기술 스택, 주요 설계를 개괄적으로 정리한 문서입니다.

개요 ​

항목내용
개발 기간2026-05-18 ~ 2026-06-01 (활동 8일 · 커밋 22건 · 머지 PR 17건)
상세 이력업데이트 노트 — 일자별 PR·변경 파일·설계 배경
저장소github.com/ToKyun02/canvas
문서 사이트canvas-doc.web.app (VitePress, Firebase Hosting)
캔버스 데이터PostgreSQL Node 테이블 (워크스페이스별). UI 설정만 localStorage

기술 스택 ​

프론트엔드 (apps/web) ​

영역기술
UIReact 19, Vite, Tailwind CSS, shadcn/ui
라우팅TanStack Router (파일 기반, codegen)
캔버스Fabric.js 7
상태Zustand (command 스토어, 노드·뷰포트·영속성 슬라이스)
영속성서버 Node 테이블 + localStorage(UI 설정)

백엔드 (apps/api) ​

영역기술
APINestJS 11, Express
DBPostgreSQL 17, Prisma 7
인증Passport — Google OAuth 2.0, JWT(httpOnly 쿠키)
공유 타입@repo/api workspace 패키지

인프라·품질 ​

영역기술
컨테이너Docker Compose (web / api / db)
CIGitHub Actions (레이블, 문서 → Firebase)
코드 품질ESLint, Prettier, Husky, lint-staged

주요 기능·설계 ​

Store-first 캔버스 ​

Fabric.js 객체는 렌더링용 뷰이며, 노드 데이터의 단일 출처는 Zustand nodes입니다. useCanvasNodes, canvasSync, hydrateCanvas가 생성·선택·복원을 담당합니다.

→ 상태 관리 · 노드 시스템

커맨드·단축키 ​

에디터 조작(도구, 줌, 선택, 삭제 등)은 Command 인터페이스와 executeCommand로 통합됩니다. UI와 전역 단축키(useGlobalShortcuts)가 동일한 실행 경로를 사용합니다.

→ 단축키 & 커맨드

확장 가능한 노드 ​

NodeDefinition과 레지스트리 패턴으로 노드 타입을 선언합니다. 텍스트 노드는 배치·Fabric 동기화·속성 패널과 연동됩니다.

→ 노드 추가하기

뷰포트·레이블 ​

커서 기준 줌(zoomAtPoint), 브라우저 휠 제스처 분리, DOM 기반 노드 레이블(이름 표시·드래그 이동)은 별도 모듈로 분리되어 있습니다.

→ 캔버스 사용법

워크스페이스·서버 저장 ​

Google OAuth 로그인 후 워크스페이스를 생성·선택하고, 캔버스 노드는 PUT /workspaces/:id/nodes로 PostgreSQL에 debounce 저장됩니다. URL은 /canvas/:workspaceId 형식입니다.

→ 백엔드 아키텍처 · 상태 관리

인증 API ​

Google OAuth, Prisma User 모델, JWT 쿠키 세션, GET /users/me 등 사용자 API가 apps/api에 포함되어 있습니다.

→ 백엔드 아키텍처

개발 타임라인 ​

PR·커밋·변경 줄 수 등 상세 내역은 업데이트 노트를 참고하세요.

시스템 구성 ​

설계 원칙과 레이어 구조는 아키텍처 개요에 정리되어 있습니다.

로컬 실행 ​

bash
pnpm install
pnpm --filter web dev      # http://localhost:3001
pnpm --filter api dev      # http://localhost:3000  (환경 변수 필요)
pnpm docker:dev            # Docker Compose 전체 스택

환경 변수·DB 마이그레이션: 환경 변수, 로컬 개발.

관련 문서 ​

Canvas — 시각적 프로토타입 에디터

Copyright © 2026