Canvas Docs

Appearance

시작하기 ​

Canvas 프로젝트를 처음 접하는 개발자를 위한 빠른 시작 가이드입니다.

프로젝트 한 줄 요약 ​

프로젝트 의사결정을 돕는 시각적 프로토타입 에디터

웹 기반 캔버스에서 텍스트 등 UI 요소(노드)를 배치하고, 팀과 아이디어를 빠르게 공유합니다.

기술 스택 ​

영역기술
프론트엔드React 19, Vite 6, TanStack Router, Tailwind CSS 4
캔버스Fabric.js 7
상태 관리Zustand (UI persist + devtools, 노드는 서버)
UIshadcn/ui, Radix UI, Lucide Icons
백엔드NestJS 11, Prisma 7, Passport (Google OAuth/JWT)
DBPostgreSQL 17
모노레포Turborepo + pnpm workspace
문서VitePress

5분 빠른 시작 ​

bash
# 1. 의존성 설치
pnpm install

# 2. 환경 변수 (루트에 .env.dev 생성)
cat > .env.dev << 'EOF'
DB_PASSWORD=example_password
VITE_API_URL=http://localhost:3000
NODE_ENV=development
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
JWT_SECRET=your-jwt-secret-at-least-32-chars
EOF

# 3. Docker로 실행
pnpm docker:dev

# 4. DB 스키마 적용 (최초 1회)
pnpm docker:db:setup

# 5. 브라우저 접속
# - 에디터: http://localhost:3001
# - 문서:   pnpm --filter docs dev → http://localhost:8000

Google OAuth 설정 완료 후 로그인하면, /canvas에서 워크스페이스를 생성·선택하고 /canvas/:id 에디터에서 편집할 수 있습니다. API 서버·OAuth 클라이언트·DB 마이그레이션이 모두 필요합니다.

캔버스 사용 흐름 (요약) ​

  1. http://localhost:3001 → 로그인
  2. 워크스페이스 열기 → 목록에서 선택 또는 새로 생성
  3. /canvas/{id} 에디터에서 노드 편집 (자동 서버 저장)
  4. DB 확인: pnpm docker:prisma:studio → http://localhost:5555

주요 URL ​

앱URL설명
webhttp://localhost:3001캔버스 에디터, 로그인, 워크스페이스
apihttp://localhost:3000REST API (OAuth, users, workspaces)
docshttp://localhost:8000프로젝트 문서 (이 사이트)

다음 읽을 문서 ​

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

Copyright © 2026