README.md

👨‍💻 Code Sync - 더 나은 코드 리뷰 경험을 위한 실시간 협업 플랫폼

🌟 서비스 소개글

GitHub PR을 통해 코드 리뷰를 하면서 이런 불편함을 겪으신 적 있나요?

😫 "PR 댓글만으로는 의도 전달이 너무 어려워..."

😤 "화면 공유하면서 설명하고 싶은데 마우스로 가리키기만 할 수 있고..."

🤔 "실시간으로 코드를 수정하면서 리뷰하고 싶은데..."

이 모든 불편함을 해결하는 서비스, Code Sync를 소개합니다!

💡 프로젝트의 주요 목적

코드 리뷰를 실시간, 효율적으로! PR 댓글로는 부족했던 소통을, 음성과 화면 공유로 즉각적이고 명확하게! Code Sync가 여러분의 코드 리뷰 경험을 한 단계 높여드립니다.

⚙️ 프로젝트의 주요 기능

1. 실시간 코드 리뷰

   • GitHub PR 코드 실시간 확인 및 수정
   • Monaco Editor를 통한 즉각적인 코드 편집
   • 변경사항 실시간 동기화

2. 효과적인 커뮤니케이션

   • WebRTC 기반 음성/화면 공유
   • Excalidraw를 활용한 시각적 설명
   • 실시간 채팅 기능

3. 협업 도구

   • Yjs 기반 실시간 동시 편집
   • 화이트보드 기능
   • 세션 녹화/재생 기능

⚙ 기술 스택

⌹ 시스템 아키텍처

📺 시연 및 발표 영상

🎥 발표 영상 전체 보기

🔄 포스터

포스터 보기

🔗 참고 링크

Swagger API 문서

• API 문서 바로가기

👨‍👩‍👧‍👦 팀원 소개

Frontend	Frontend	Frontend	Backend	Backend
박건우	임채승	윤민성	지창근	조형욱
@pigpgw	@loopy-lim	@Y-minseong	@pig19980	@HyoungUkJo

파일구조

├── public
├── src
│   ├── assets
│   ├── components
│   │   ├── Form
│   │   │   ├── FormItem
│   │   │   │   ├── ButtonFormItem.tsx
│   │   │   │   └── InputFormItem.tsx
│   │   │   ├── SignInForm.tsx
│   │   │   ├── SignUpForm.tsx
│   │   │   └── type.d.ts
│   │   └── ...
│   ├── apis
│   │   └── dtos
│   ├── functions
│   ├── hooks
│   ├── pages
│   ├── routers
│   ├── store
│   └── ...
└── ...

사용하고 있는 라이브러리

• blocknote
• monaco
• tldraw
• axios
• socket.io
• tailwind
• y-js
• zustnad