실시간 팀 회고 보드
2025.03 - 2025.05
실시간 협업 라이브러리인 Liveblocks를 알게 되어, 이를 활용하여 여러 사용자가 동시에 회고를 작성하고 정리할 수 있는 회고 보드를 구현해본 개인 프로젝트입니다.
React
Typescript
Tanstack Query
Redux
TailwindCSS
shadcn/ui
Firebase
Express
Vite
Vercel
🧩 상세 설명
Liveblocks를 사용한 실시간 회의 협업 기능 구현
Liveblocks API를 사용하여 회의 데이터(참여자, 토픽 카드, 투표, 채팅)를 실시간으로 데이터를 동기화
리렌더링 최소화를 위한 Liveblocks Storage 구조 설계
보드의 각 컬럼 별 카드 id만 리스트로 관리하고, 카드 데이터는 id를 key로 가지를 맵 형태로 저장
카드 컴포넌트는
prop으로 전달받은 id를 통해 데이터를 구독하게 하여, 카드의 순서나 컬럼이 변경될 때의 불필요한 리렌더링을 방지
카드 드래그 앤 드롭 기능 구현
@dnd-kit라이브러리를 사용하여 토픽 카드 순서 변경 및 카테고리 이동 기능 구현
Gemini API를 사용한 요약 기능 구현
API 키 유출 방지를 위해
Express기반 서버 구성AI 모델이 리턴하는 마크다운 형식의 결과를
react-markdown라이브러리를 사용하여 가독성을 개선하여 시각화