워크스페이스

React Flow 기반의 노드 기반 화이트보드 시스템

개요

노드는 워크스페이스에서 정보를 표현하고 연결하는 기본 단위입니다. 각 노드는 타입에 따라 다른 형태와 기능을 가집니다.

  • • 드래그 앤 드롭으로 자유롭게 배치
  • • 노드 간 연결선으로 관계 표현
  • • 노드 타입별 특화된 UI 및 기능
  • • 실시간 편집 및 저장

노드 타입

워크스페이스에서 사용할 수 있는 노드 타입들입니다.

PLANNING (기획)

📋
프로젝트 기획
프로젝트의 전체적인 기획과 아이디어를 기록합니다.
노드 타입: PLANNING
제목: 프로젝트 기획
이모지: 📋
테두리 색상: 보라색 (#9333EA)

용도: 프로젝트 기획 및 아이디어를 기록하는 노드

  • • 제목과 내용 편집
  • • 이모지 추가 가능
  • • 다른 노드와 연결 가능
  • • 보라색 테두리로 강조 표시

NOTE (메모)

📝
일반 메모
리치 텍스트 에디터를 지원하며 HTML 콘텐츠를 렌더링할 수 있습니다.\n\n여러 줄의 텍스트를 작성할 수 있으며, 이모지도 추가할 수 있습니다.
노드 타입: NOTE
제목: 일반 메모
이모지: 📝
테두리 색상: 검정색 (#000000)

용도: 일반적인 메모 및 텍스트 노드

  • • 리치 텍스트 에디터 지원
  • • HTML 콘텐츠 렌더링
  • • 이모지 추가 가능
  • • 무제한 텍스트 입력

SCHEDULE (캘린더)

📅
프로젝트 마감일
시작일: 2025-01-15\n종료일: 2025-01-30\n타입: 마감기한
노드 타입: SCHEDULE
제목: 프로젝트 마감일
이모지: 📅
시작일: 2025-01-15
종료일: 2025-01-30
테두리 색상: 파란색 (#3B82F6)

용도: 일정 및 이벤트 정보를 표시하는 노드

  • • 시작일/종료일 설정
  • • 이벤트 타입 표시 (일정/행사/마감기한)
  • • 설명 추가 가능
  • • 캘린더 뷰와 연동

RESOURCE (드라이브)

📁
프로젝트 자료
• design-guide.pdf\n• wireframe.fig\n• assets.zip
노드 타입: RESOURCE
제목: 프로젝트 자료
이모지: 📁
파일: design-guide.pdf, wireframe.fig, assets.zip
테두리 색상: 초록색 (#10B981)

용도: 파일 및 자료를 공유하는 노드

  • • 다중 파일 업로드
  • • 파일 목록 표시
  • • 파일 다운로드 기능
  • • 최대 3개 파일 미리보기

POST (게시물)

📄
프로젝트 업데이트
작성자: @username\n게시일: 2025-01-15\n\n프로젝트 진행 상황을 공유합니다...
노드 타입: POST
제목: 프로젝트 업데이트
이모지: 📄
게시물 ID: [postId]
테두리 색상: 주황색 (#F59E0B)

용도: 스튜디오 게시물을 워크스페이스에 임베드하는 노드

  • • 게시물 ID로 연결
  • • 작성자 정보 표시
  • • 게시물 내용 미리보기
  • • 이미지 썸네일 표시
  • • 원본 게시물 링크

PHOTO (사진)

🖼️
디자인 컨셉
이미지 미리보기
노드 타입: PHOTO
제목: 디자인 컨셉
이모지: 🖼️
이미지 URL: [imageUrl]
테두리 색상: 핑크색 (#EC4899)

용도: 이미지를 직접 표시하는 노드

  • • 이미지 업로드
  • • 이미지 크기에 맞춰 자동 크기 조절
  • • 비율 유지
  • • 리사이즈 핸들 제공

노드 작업

추가

사이드바의 노드 추가 버튼을 클릭하여 새 노드를 생성합니다.

편집

노드를 클릭하거나 편집 버튼을 눌러 내용을 수정합니다.

연결

노드의 연결점을 드래그하여 다른 노드와 연결합니다.

삭제

노드를 삭제합니다. 연결된 연결선도 함께 제거됩니다.

파일 시스템

워크스페이스 파일을 통해 노드를 그룹화할 수 있습니다.

  • • 파일별로 노드 분리
  • • 파일 생성/수정/삭제
  • • 파일 헤더 (제목, 설명)
  • • 파일 간 노드 이동

💡 실제 노드 컴포넌트의 동작을 확인하고 싶으시다면 노드 예제 페이지를 방문하세요.