실시간 팀 회고 보드
2025.03 - 2025.05
실시간 협업 라이브러리인 Liveblocks를 알게 되어, 이를 활용하여 여러 사용자가 동시에 회고를 작성하고 정리할 수 있는 회고 보드를 구현해본 개인 프로젝트입니다. Parabol의 Retrospective Tool 디자인과 기능을 참고하여 개발하였습니다.
💻 기술 스택
🧩 상세 설명
토픽 작성(Reflect) → 투표(Vote) → 회의(Discuss) 단계의 회고 기능 구현
Liveblocks를 사용한 실시간 회의 협업 기능 구현
Liveblocks API를 사용하여 회의 데이터(참여자, 토픽 카드, 투표, 채팅)를 실시간으로 데이터 동기화 및 충돌 방지
토픽 카드 순서 변경 및 카테고리 이동 기능 구현
@dnd-kit라이브러리를 사용하여 드래그 앤 드롭 기능 구현드롭 시 Liveblocks Storage에 변경 사항 업데이트
회고 요약 기능 구현
Gemini API를 사용하여, 회고 데이터를 기반으로 요청 프롬프트 작성 및 요약 결과를 생성하는 API 작성
API 키 보안 문제로 Gemini에서 서버에서 API 요청 권고 →
Express기반 서버 배포 (서버 레포지토리)AI 모델이 리턴하는 마크다운 형식의 결과를
react-markdown라이브러리를 사용하여 가독성을 개선하여 시각화
Liveblocks Storage 데이터가 빠르게 변경됨에 따라 간헐적으로 런타임 에러가 발생하여 에러 페이지가 나타나는 문제
Error Boundary로 감싸 fallback UI를 표시하여 나머지 UI는 정상 동작하도록 처리
회고 단계에 따른 페이지 접근 제한
접근 불가한 단계의 페이지 진입 시 현 단계의 페이지로 navigate
회고 단계가 바뀐 경우 알림창을 띄우고 해당 단계의 페이지로 이동할 수 있는 버튼 표시