https://github.com/boostcampwm2023/and07-mindsync

🧠 여러명이서 동시에 마인드맵을 그릴 수 있다고~? MindSync ...더보기
https://github.com/boostcampwm2023/and07-mindsync

android crdt mindmap nestjs socket-io

Last synced: 12 months ago
JSON representation

🧠 여러명이서 동시에 마인드맵을 그릴 수 있다고~? MindSync ...더보기

• Host: GitHub
• URL: https://github.com/boostcampwm2023/and07-mindsync
• Owner: boostcampwm2023
• Created: 2023-11-06T07:33:22.000Z (over 2 years ago)
• Default Branch: develop
• Last Pushed: 2025-03-29T11:40:13.000Z (about 1 year ago)
• Last Synced: 2025-03-29T12:27:51.390Z (about 1 year ago)
• Topics: android, crdt, mindmap, nestjs, socket-io
• Language: Kotlin
• Homepage:
• Size: 7.27 MB
• Stars: 25
• Watchers: 3
• Forks: 3
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          


# Mind Sync (Mind Synchronize)

마인드맵 실시간 공동 편집 어플리케이션



[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fboostcampwm2023%2Fand07-MindSync%2Fhit-counter&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com)



## ✨ 프로젝트 소개

- 마인드맵을 사용하여 아이디어를 시각적으로 표현해보세요

- 협업을 원하는 친구나 동료를 초대하는 것도 가능합니다

- 간편하게 마인드맵을 생성하고, 다른 사용자들과 실시간으로 공동 편집을 진행할 수 있어요







## 👨‍👩‍👧‍👦 팀원 소개

|[김찬희(J035)](https://github.com/Conut-1) | [양선아(K023)](https://github.com/yang1318) | [이상준(K027)](https://github.com/hegleB) | [이용환(J110)](https://github.com/tnpfldyd) | [이재한(K029)](https://github.com/jaehan4707) |

|:--------:|:---------:|:---------:|:---------:|:---------:|

| ![](https://github.com/Conut-1.png) | ![](https://github.com/yang1318.png) | ![](https://github.com/hegleB.png) | ![](https://github.com/tnpfldyd.png) | ![](https://github.com/jaehan4707.png) |

## ⚒️ 기능 소개

### 🚀 스페이스

- 스페이스는 여러 사용자가 함께 협업하는 공간입니다.

- 스페이스를 만들고, 초대코드를 공유해서 다른 사용자를 초대할 수 있습니다.

- 스페이스에 함께 있는 사용자들은 스페이스에 저장된 보드들을 공유하게 됩니다.

- 스페이스는 스페이스에 참여한 모든 사용자가 나가게 되면 삭제됩니다.

|스페이스 추가|초대 코드 발급|스페이스 참가|스페이스 나가기|

|:---:|:---:|:---:|:---:|

|  |  |  |  |

### 📃 보드

- 보드는 마인드맵을 저장하는 공간입니다.

- 스페이스 하나에 여러개의 보드가 저장되고, 각 보드에는 마인드맵이 하나씩 할당됩니다.

- 보드를 삭제하면 보드는 휴지통으로 이동됩니다.

- 보드를 영구 삭제할수는 없고, 삭제된 일자 기준으로 7일이 지나면 자동으로 삭제됩니다.  

    - 여러명이 협업할 수 있는 환경이기 때문에 영구 삭제는 되지 않도록 했습니다.

|보드 생성|보드 삭제|휴지통|

|:---:|:---:|:---:|

||||

### 🧠 마인드맵

- 보드를 클릭하면 마인드맵 화면으로 이동하게 됩니다.

- 핵심 기능인 마인드맵을 그리고, 편집할 수 있는 공간입니다.

- 노드를 추가, 삭제, 편집, 이동할 수 있습니다.

- socket.io와 CRDT 알고리즘을 이용해 실시간으로 통신이 되도록 했습니다.

|노드 추가|노드 삭제|노드 편집|

|:---:|:---:|:---:|

||||

|노드 이동|확대/축소/드래그|실시간동시편집|

|:---:|:---:|:---:|

||||

## 🎯 기술적 도전

저희는 다음과 같은 과제에 도전했습니다.

1. **마인드맵을 그릴 수 있다.**

2. **마인드맵을 동시에 실시간 편집 할 수 있다.**

그래서 해당 과제를 수행하기 위해 다음과 같은 과정을 거쳤습니다.

1. **마인드맵을 그리기 위해** 

       

    - **노드를 그려주는 커스텀 뷰와 라인을 그려주는 커스텀 뷰를 구현했습니다.**

      - [커스텀뷰 학습하기](https://yangyang-workspace.notion.site/CustomView-9d4a86f6cd2046f4806d42655d220340?pvs=4)

      - [마인드맵을 저장하는 자료구조 설계하기](https://yangyang-workspace.notion.site/d89604f305e7406fa8243ddb0926706a?pvs=4)

      - [라인을 곡선으로 그리기](https://yangyang-workspace.notion.site/5adf5fa59e464e7ba316ad5dc4b0db51?pvs=4)

      - [텍스트 크기에 따른 노드 크기 자동화](https://yangyang-workspace.notion.site/CustomView-DrawText-0c7165d51af84f50b82673fde84766a5?pvs=4)

    - **줌 기능을 추가하고, 늘어나는 마인드맵의 크기에 따라 줌을 조절했습니다.**

      - [마인드맵이 커졌을 때 잘리는 현상 해결 과정](https://yangyang-workspace.notion.site/947792eae0014041aa1d7d92869a1d71?pvs=4)

      - [줌 기능이 추가됨에 따라, 노드 이동기능과 겹치는 터치 이벤트 관리하기](https://yangyang-workspace.notion.site/56448f36097049e4acef2897fecac41a?pvs=4)

      - [이동 중 긴 자식 노드가 존재할 때 발생하는 문제 해결](https://www.notion.so/yangyang-workspace/cd711263900d4929bd3fd925f0f5941d?pvs=4)

    - **노드가 추가/편집 될 때마다 크기를 재고, 정렬하도록 했습니다.**

      - [정렬 알고리즘](https://yangyang-workspace.notion.site/067de1120ec841808d46279d752b9352?pvs=4)

3. **마인드맵을 동시에 실시간 편집 할 수 있도록 하기 위해**

    

    - [Tree 구조에 적용가능한 작업기반 CRDT를 구현했습니다.](https://yangyang-workspace.notion.site/CRDT-093a7ce7785543cc8c69ac84c138a955?pvs=4)

    - [socket.io 학습하기](https://yangyang-workspace.notion.site/Socket-IO-bd7ceaba859a4449bfe73bbeaa2f6798?pvs=4)

4. **빠른 응답을 위한 캐싱을 직접 구현해 적용했습니다.**

    

   - [캐시 적용기](https://yangyang-workspace.notion.site/Cache-c3a6b494d39c45ce93c2ee9dd95cf6e6?pvs=4)

5. **마인드맵을 서버에 저장하는 공간인 보드와 보드를 여러개 저장할 수 있는 공간인 스페이스를 설계해 사용자가 초대/가입 할 수 있도록 했습니다.**

    

6. **자주 소통하도록 노력하며 협업했습니다.**

    - 페어프로그래밍을 자주 했습니다.

    - 안드로이드&백엔드 분야간의 소통도 매일 활발하게 이루어졌습니다.

      - 초반에는 매일 1시간의 티타임을 가지면서 매일 1시간씩 꼭 대화하는 시간을 가졌습니다.

      - api 적용, 소켓 통신을 개발하기 시작하고 나서부터는 더 많은 소통이 필요했고, 그래서 같은 회의실을 사용해서 서로의 이슈를 바로바로 공유할 수 있도록 했습니다.

## 🚀 문제 해결 과정

- [안드로이드에 Access Token과 Refresh Token 적용하기](https://yangyang-workspace.notion.site/Access-Token-Refresh-Token-DataStore-Preference-Interceptor-Authenticator-9934da08678f4b13a5396f47038e1f7f?pvs=4)

- [서버에 Bulk Insert 및 Update 적용하기](https://yangyang-workspace.notion.site/Bulk-Insert-Update-ec109de908e54b4f833ffaf24e206d8c?pvs=4)

- [서버에 카카오 OAuth 적용하기](https://yangyang-workspace.notion.site/OAuth-ceee7681f4124d34aafd714728b8aaeb?pvs=4)

- [서버에 Refresh Token 적용하기](https://yangyang-workspace.notion.site/Refresh-Token-66f30a6645cb472582817f695d759e28?pvs=4)

- [안드로이드 CI 적용기](https://yangyang-workspace.notion.site/Android-CI-7eb07b0b0c5346959a1271c526993604?pvs=4)

- [안드로이드 CD 적용기](https://yangyang-workspace.notion.site/Android-CD-7bf21956eafc47b8bd5a06990f3852da?pvs=4)

- [서버 중복 코드를 추상 클래스로 분리하기](https://yangyang-workspace.notion.site/228c00d520ed42e7a2706297fc7c1c09?pvs=4)

- [Google Play Store 자동 배포 구축](https://www.notion.so/yangyang-workspace/Google-Play-Store-CD-9bd55780c0f64f7997534b98f1986b2a?pvs=4)

## 📚 기술스택

### AOS

- `Kotlin` `Canvas` `Socket.IO` `Coil` `MVVM` `Retrofit` `Datastore` `Hilt` `Flow` `Jetpack Navigation` `DataBinding`

### BE

- `Typescript` `NestJS` `Naver Cloud Platform` `MySQL` `MongoDB` `CRDT` `OAuth`

## 📑 문서

|설계서|피그마 디자인|프로덕트 백로그|스프린트 백로그|그라운드 룰|

|:---:|:---:|:---:|:---:|:---:|

|[📒설계서: 프로젝트를 시작하면서 목표와 어떤 기능을 구현할 지 설계한 내용](https://yangyang-workspace.notion.site/7efada904a3d44328474a6fb30689db7?pvs=4)|[📕피그마 디자인](https://www.figma.com/file/Wb1U49Xd2W9xKHaPEltIRB/MindSync?type=design&node-id=2%3A218&mode=design&t=3MJMbYI1z4k217UB-1)|[🧾프로젝트 백로그: 전체 기능에 대한 일정 설계](https://github.com/orgs/boostcampwm2023/projects/41)|[스프린트 백로그: 매주 작성하는 구체적인 일정 설계](https://github.com/orgs/boostcampwm2023/projects/40)|[⛳MindSync 팀의 그라운드 룰](https://github.com/boostcampwm2023/and07-MindSync/wiki/%ED%8C%80-%EA%B7%B8%EB%9D%BC%EC%9A%B4%EB%93%9C-%EB%A3%B0)|