TeamNote ui

[yyubin]

개요: 팀 협업 노트 기능

목표: 팀원 단위로 모여 협업 노트를 작성할 수 있다

사용 사례:

1. 버전 관리 : 수정된 노트의 이전 버전을 확인하거나 복구 할 수 있다
2. 권한 관리 : 노트에 적븐할 수 있는 팀원들을 팀장이 초대할 수 있다
3. 내보내기 : 완성된 노트를 PDF 또는 다른 문서 형식으로 다운로드하거나 공유할 수 있다
4. 노트 작성 및 수정 : 팀원들이 실시간으로 노트를 작성하거나 기존 내용을 수정할 수 있다

추가 설명:

• 실시간 협업 : 팀원들은 동일한 노트에서 동시에 작업, 각자의 변경 사항은 실시간으로 반영됨

  • WebRTC 사용
  • 시그널링 서버에서 Websocket으로 turn 서버의 동적 인증 정보를 받아온다
  • turn 서버로 요청 전송

  1. 기술 스택 이해

  TOAST UI Editor

  • Markdown 기반 에디터.
  • HTML DOM 이벤트와 커스텀 이벤트를 통해 상태를 추적하고 변경 내용을 감지할 수 있음.
  • 데이터 변경 시 이벤트를 통해 데이터를 추출하고 다른 사용자와 동기화 가능.

  WebRTC

  • 브라우저 간 P2P 연결을 지원.
  • 데이터 채널(DataChannel)을 사용해 텍스트 데이터를 교환 가능.
  • TURN 서버를 사용해 NAT나 방화벽 문제를 해결 가능(이미 구성한 TURN 서버 활용).

  ---

  2. 기능 설계

  1. WebRTC 연결
     • 사용자가 접속하면 WebRTC 연결을 생성.
     • 데이터 채널(DataChannel)을 사용해 변경 사항을 전송.
  2. TOAST UI Editor 데이터 추적
     • 에디터의 change 이벤트를 사용해 텍스트 변경 내용을 추적.
     • 변경 내용을 WebRTC 채널로 다른 사용자에게 전송.
  3. 데이터 동기화
     • WebRTC 채널에서 수신된 데이터를 에디터에 반영.