RetroBoard

실시간 팀 회고 보드

2025.03 - 2025.05

여러 사용자가 동시에 회고를 작성하고 정리할 수 있는 회고 보드를 구현해본 개인 프로젝트입니다. 실시간으로 변화하는 데이터 환경과 AI 기반 기능을 직접 구현하며, 그 과정에서 발생하는 프론트엔드 문제를 해결하는 경험을 목표로 진행하였습니다.

Parabol의 Retrospective Tool 디자인과 기능을 참고하여 개발하였습니다.

💻 기술 스택

React
Typescript
Tanstack Query
Redux
TailwindCSS
shadcn/ui
Liveblocks
Firebase
Express
Vite
Vercel

🧩 구현 기능

1. 대시보드

  • 별도의 로그인 없이 사용할 수 있도록 Local Storage 기반으로 사용자를 식별하고, 최초 접속 시 랜덤 닉네임을 생성하여 저장하고 이후 수정할 수 있도록 구현

  • 회의룸을 생성 및 삭제, 특정 회의룸을 ID 기반으로 검색하고 입장할 수 있도록 함

2. 회의 (토픽 카드 작성 → 투표 → 토론)

  • 웹 소켓 기반 라이브러리 Liveblocks을 사용하여 클라이언트 간 실시간 데이터 동기화를 구현

  • 방 생성자(방장)는 회의 단계를 자유롭게 바꾸거나 종료할 수 있도록 하는 하단 플로팅 바 표시

  • 일반 방 참여자는 현재 회의 단계의 페이지 외에는 접근을 제한하고 되돌아가도록 하는 가드 기능 구현

  • 토픽 카드 작성(Reflect) - 카테고리(start/stop/continue) 별 토픽 카드 추가/삭제, 드래그-드롭을 통한 순서 변경 및 카테고리 이동 기능 구현

  • 투표 (Vote) - 토픽 별 투표 기능 구현

  • 토론(Discuss) - 토픽 별 토론 페이지를 구성하고, 토픽에 대한 이모지 반응, 채팅 및 관련 업무(Task) 등록 기능 구현

3. 회의 요약 (Summary)

  • 사용자 별 업무와 모든 토픽의 내용을 정리한 요약 페이지 구현

  • window.print()를 활용하여 요약 페이지를 PDF로 저장 가능하도록 하고, print 미디어 쿼리를 사용해 버튼 같은 불필요한 부분 숨김 처리

  • AI 요약 기능 개발: 모든 회의 데이터를 포함하여 중요 결정 사항, 다수가 공감한 내용, 대화 중 갈등 등 회의의 맥락이 드러나는 결과를 내도록 구현

📌 이슈

단계 변경(Discuss → Reflect/Vote) 시 런타임 에러가 발생하는 문제

AI 기반 회고 요약 기능 구현

🌱 배운점

사용자의 사용 흐름을 방해하지 않는 것이 중요한 환경에서는, 화면이 중단되지 않도록 에러의 영향을 최소한의 범위로 제한하는 것의 중요성을 느꼈습니다.