docs: Update README.md

README.md

@@ -14,74 +14,225 @@
 
 <div align="center">
 
-## 📑 문서 작성이 더 편하고 즐거워진다
-
   <a href="https://nocta.site" title="🌌 밤하늘의 별빛처럼, 자유로운 인터랙션 실시간 에디터"><strong>배포 사이트</strong></a>
 
-**🤔 하나의 문서를 작성하면서 다른 문서도 함께 보고 싶었던 적 있으신가요?**
+ <a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fboostcampwm-2024%2Fweb33-Nocta&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false"/></a>
+
+</div>
+
+# 📑 문서 작성이 더 편하고 즐거워진다
 
-문서 작성할 때 여러 창을 띄워두고 번거롭게 작업하셨던 불편함이 있었죠.
+### **🤔 하나의 문서를 작성하면서 다른 문서도 함께 보고 싶었던 적 있으신가요?**
 
-기존 에디터들은 하나의 창에 갇혀있어서, 참고할 내용이 있을 때마다 창을 이동해야 했어요.
+> 문서 작성할 때 여러 창을 띄워두고 번거롭게 작업하셨던 불편함이 있었죠. 기존 에디터들은 하나의 창에 갇혀있어서, 참고할 내용이 있을 때마다 창을 이동해야 했어요.
+> 
 
 Nocta는 에디터에 새로운 바람을 불어넣었어요.
 
-**탭 브라우징으로 여러 문서를 자유롭게 넘나들 수 있고, 인터랙티브한 요소들로 문서 작성이 더 흥미롭게 변화됩니다.**
+1. **탭 브라우징으로 여러 문서를 자유롭게 넘나들 수 있어요.**
+2. **인터랙티브한 요소들로 문서 작성이 더 흥미롭게 변해요.**
 
 Nocta에서 단순한 기록을 넘어, 새로운 글쓰기 경험을 시작하세요.
 
-[노션](https://abrupt-feta-9a9.notion.site/web33-12a9ff1b21c38003b600f57baa654626?pvs=4) 
+[노션](https://www.notion.so/Glassmo-Web33-12a9ff1b21c38003b600f57baa654626?pvs=21) | [개발위키](https://www.notion.so/12a9ff1b21c380f2a490deae65256639?pvs=21) | [시연영상](https://www.youtube.com/watch?v=0AZAixGrMbo) | 최종발표
+
 
-[기획](https://abrupt-feta-9a9.notion.site/12a9ff1b21c380b4b3bafc3af92b2a25?pvs=4) | [디자인](https://abrupt-feta-9a9.notion.site/12f9ff1b21c380459f74f7a2e4fb7a93?pvs=4)
+<details>
+<summary><h2>서비스 전체보기</h2>
+</summary>
+
+   <details>
+    <summary><h3>마크다운 문법</h3>
+    </summary>
+     
+   ### 마크다운 기초 문법
+     
+  ![마크다운 기초문법](https://github.com/user-attachments/assets/0bc5eb38-27da-41dd-8c62-fa577d3ca996)
+  <br>
+
+   ### 블럭 드래그앤 드롭과 슬래시
+       
+![무제](https://github.com/user-attachments/assets/f63f5f54-3c8c-461b-aca7-27f057056476)
+<br>
 
-[개발위키](https://abrupt-feta-9a9.notion.site/12a9ff1b21c380f2a490deae65256639?pvs=4) | [DB스키마](https://abrupt-feta-9a9.notion.site/DB-708e1cf3c1454b3c950bff67d0924dde?pvs=4) | [백로그](https://abrupt-feta-9a9.notion.site/12e9ff1b21c380ecb202f869f6ad040e?pvs=4)
+  ### 블럭 전환
+![블록 전환1](https://github.com/user-attachments/assets/8560783f-5691-4b54-94b9-08093df2a92f)
+<br>
 
- [그라운드룰](https://abrupt-feta-9a9.notion.site/12a9ff1b21c3807ca2b8e308178e5c2f?pvs=4) | [스크럼회의록](https://abrupt-feta-9a9.notion.site/12a9ff1b21c38087848fcd2d37445005?pvs=4) | [스프린트회의록](https://abrupt-feta-9a9.notion.site/12a9ff1b21c380ac876cdd60332f5826?pvs=4) | [회고록](https://abrupt-feta-9a9.notion.site/12a9ff1b21c380959d92e485fcc94f8a?pvs=4)
+ ### 리치 텍스트
 
- <a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fboostcampwm-2024%2Fweb33-Nocta&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false"/></a>
+![리치](https://github.com/user-attachments/assets/e35782ae-34bd-46aa-858e-965814f1a5d3)
+<br>
 
-</div>
+   ### 순서 리스트
+
+![순서리스트](https://github.com/user-attachments/assets/af9cf597-be89-4c20-af1c-92e38969f0b1)
+<br>
+
+   </details>
+   <details>
+    <summary><h3>실시간 동시편집</h3>
+    </summary>
+
+   ### 한페이지 다중블록
+     
+ ![한페이지 다중입력](https://github.com/user-attachments/assets/245940d7-1fd7-4d02-a890-6e8ed4f530dc)
 
+  <br>
+
+   ### 다중 페이지 동시입력
+       
+![다중 페이지 동시입력](https://github.com/user-attachments/assets/da665567-b2b8-4124-bf31-e61c4024d00b)
+
+<br>
 
+  </details>
+     <details>
+  <summary><h3>워크스페이스</h3>
+  </summary>
+       
+   ### 워크스페이스 접속
+       
+![워크스페이스 접속](https://github.com/user-attachments/assets/2f296cf9-3f06-4636-9f2e-f9d49dce0b7c)
 
 
-## 🚩 목차
+<br>
+
+### 워크스페이스 초대
+       
+![워크스페이스초대](https://github.com/user-attachments/assets/92da352e-00b0-40fc-924f-11d20a1b0e6c)
 
-- [Nocta만의 차별점](#-nocta만의-차별점)
-- [기술스택](#-기술-스택)
-- [시스템 아키텍처 다이어그램](#시스템-아키텍처-다이어그램)
-- [프로젝트 시작 가이드](#-프로젝트-시작-가이드)
-- [프로젝트 기간](#-프로젝트-기간)
-- [팀원 소개](#-팀원-소개)
 
-## ✨ Nocta만의 차별점
+<br>
+
+### 워크스페이스 초대수신
+       
+![워크스페이스초대받음](https://github.com/user-attachments/assets/2ea36fab-44c7-4af1-b8e9-823db8ef7899)
 
-### 1. 탭 브라우징: 최소화 최대화 리사이즈
 
-각각의 문서를 탭브라우징 방식으로 관리할 수 있습니다. 크기를 조절하거나 드래그 앤 드랍을 통해 원하는 위치에 위치시킬 수 있습니다.
+<br>
 
-![tab](https://github.com/user-attachments/assets/e504e103-6b3b-4ea7-8f3e-38c9152e04b5)
+  </details>
+     <details>
+  <summary><h3>탭 브라우징</h3>
+  </summary>
+       
+### 다중 탭브라우징
 
+ ![다중 탭 브라우징](https://github.com/user-attachments/assets/2c36836b-13ea-4cbf-ac5e-2db1fc1fd67b)
 
-### 2. 인터랙티브 텍스트
+<br>
 
-텍스트 블럭에 인터랙티브한 속성을 부여할 수 있습니다. 하이라이트, 그라데이션 등의 속성이 존재합니다.
+### 페이지 최대화
+       
+![페이지 최대화](https://github.com/user-attachments/assets/a047c849-6301-44b4-944e-abd909d2629c)
 
-![Animation2](https://github.com/user-attachments/assets/16cd6a7f-05f5-4807-aafe-456e0dab1310)
+<br>
 
-## 🌙 Noca의 특징
+### 페이지 최소화
+       
+![페이지 최소화](https://github.com/user-attachments/assets/302cc100-d7a6-42ba-bf11-1c0556c420d8)
 
-### 실시간 마크다운 편집
+<br>
 
-**외부 라이브러리 없이 직접 구현한 마크다운 알고리즘** 을 통해 마크다운 문법을 입력하면 실시간으로 마크다운 문법으로 변환합니다. 리치 텍스트 기반의 편집기로 다양한 마크다운 문법과 스타일, 텍스트 색상을 적용할 수 있습니다.
+  </details>
+     <details>
+  <summary><h3>인터랙티브 컴포넌트</h3>
+  </summary>
+       
+### 하이라이트 애니메이션
+      
+![3333](https://github.com/user-attachments/assets/b535e475-9a39-47ae-833b-9ec0ec4d4865)
 
-![rich](https://github.com/user-attachments/assets/62550129-3408-4dfb-848d-565f9e2918cf)
+<br>
 
-### 실시간 동시편집
+### 슬라이드 인 텍스트
+       
+![슬라이드앤텍스트](https://github.com/user-attachments/assets/d9864c16-db38-4a74-8164-b101a9f1caad)
 
-**외부 라이브러리 없이 직접 구현한 CRDT 알고리즘을 통해** 하나의 문서를 여러 사용자가 동시에 편집이 가능합니다. 실시간 변경사항을 모든 사용자에게 반영합니다.
+<br>
+
+### 페이드인 텍스트
+
+   ![페이드인텍스트](https://github.com/user-attachments/assets/d1b32c1e-424b-4f3c-8233-e1e775d983ab)
+
+
+<br>
+
+### 펄스&바운드 텍스트
+       
+![펄스바운스텍스트](https://github.com/user-attachments/assets/51b0639c-6bbe-4ad8-bf8b-62303e6f123c)
+
+<br>
+
+### 애니메이션 레인보우
+
+ ![레인보우](https://github.com/user-attachments/assets/9ba52aed-8868-474a-926a-1ba23ab08a51)
+
+
+<br>
+
+
+  </details>
+
+
+</details>
+
+# 🏃‍♂️‍➡️ 직접 만들었습니다 CRDT 라이브러리!
+
+### `@noctaCRDT` 라는 이름으로 client와 server에서 사용해요
+
+> 기술적 도전을 위해 RGA(Replicated Growable Array)알고리즘을 적용했어요
+LinkedList 기반으로 논리적 시계를 활용하여 각 문자들의 인덱스와 순서를 관리해요
+> 
+- [CRDT(Conflict-free Replicated Data Type)](https://www.notion.so/CRDT-Conflict-free-Replicated-Data-Type-64d21c54fb054a92aaca558dce3148ce?pvs=21)
+- [CRDT를 구현해보자 (1): CRDT를 알아볼까..?](https://www.notion.so/CRDT-1-CRDT-1f0bd7853592435f8e0bb0098a6440d1?pvs=21)
+- [CRDT를 구현해보자 (5): DB 데이터 구조 정하기](https://www.notion.so/CRDT-5-DB-d2bd99a60e914816a7a1568ecf038445?pvs=21)
+- [CRDT를 구현해보자 (6): CRDT라이브러리 개선 + dev에 붙이기](https://www.notion.so/CRDT-6-CRDT-dev-e16766117ac64a588019b4e12314416d?pvs=21)
+- [CRDT 동시성 처리](https://www.notion.so/CRDT-a8872af52203493e9f1fcf7b43149f0d?pvs=21)
+
+### 캐럿 이동 문제
+
+> CRDT 연산이 일어나고 상태가 업데이트되며, 캐럿의 위치가 초기화되거나 다른 페이지로 이동했어요
+수동으로 캐럿위치를 설정하고, 페이지별로 CRDT를 생성해 관리했어요
+- [캐럿 관리 트러블슈팅](https://www.notion.so/ab1b87f31ec5459eb72f4241293fe8fa?pvs=21)
+
+# 📝 실시간 협업 마크다운 에디터
+
+### 실시간으로 여러 사용자가 동시에 문서를 편집할 수 있는 마크다운 에디터를 구현했어요.
+
+> CRDT를 활용해 실시간 동시 편집 시의 충돌 문제를 해결했어요
+마크다운 프리뷰와 에디터를 동기화하여 작성하면서 바로 결과물을 확인할 수 있어요
+> 
+- [마크다운은 어떻게 구현해야 할까(1): 문법 변환](https://www.notion.so/1-5b7f6fcf9c0643dc80ba72c11cc37bf7?pvs=21)
+- [마크다운은 어떻게 구현해야 할까(3): 연결리스트](https://www.notion.so/3-cea9f37a05cb4900a51cf8d3f0fc8f6d?pvs=21)
+
+### 복잡한 중첩 구조 개선
+
+> 기존의 중첩 구조는 복잡한 DOM 순회 로직이 필요하고 에러 발생 가능성이 높았어요
+모든 요소의 depth를 1로 통일하고 prev/next 관계만 유지하도록 개선했어요
+> 
+- [마크다운은 어떻게 구현해야 할까(4): CRDT 적용을 위한 구조 변경](https://www.notion.so/4-CRDT-6449b3e7d33442279812a589cf672b73?pvs=21)
+- [마크다운은 어떻게 구현해야 할까(6): 리치 텍스트](https://www.notion.so/6-45718cbb81d2432abf68c76c15dfa586?pvs=21)
+
+### 한글 입력 컴포징 이슈 해결
+
+> macOS와 Windows에서 한글 입력 시 컴포징 이벤트 처리 방식이 달라 문제가 발생했어요
+OS를 확인하여 각 OS에 맞게 처리했어요
+> 
+- [마크다운 디버깅 - 윈도우에서 연산이 제대로 안되는 버그](https://www.notion.so/1519ff1b21c380e1bd03e999ceb65282?pvs=21)
+- [마크다운 한글입력의 경우 블록이 2번 생기는 오류](https://www.notion.so/2-13d9ff1b21c3805badd8f78032035ef8?pvs=21)
+
+# 🖥️ 탭 브라우징
+
+### 페이지를 원하는 위치로 이동하고 사이즈를 조절할 수 있어요
+
+> 페이지들이 화면을 벗어나지 않도록 위치를 조절할 수 있고, 8방향으로 크기를 조절할 수 있어요.
+GPU를 활용한 렌더링 최적화를 진행했어요
+> 
+- [페이지 리사이징](https://www.notion.so/1479ff1b21c380038bd1fd6ba430fef2?pvs=21)
+- [탭 브라우징 구현하기](https://www.notion.so/13c9ff1b21c38089ac18cfe2c39e6c15?pvs=21)
 
-![ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/445f80f3-d291-4e83-8a58-da4dc669e42a)
 
 
 ## 🔧 기술 스택
@@ -131,8 +282,6 @@ Nocta에서 단순한 기록을 넘어, 새로운 글쓰기 경험을 시작하
 
 ## 🚀 프로젝트 시작 가이드
 
-> 환경변수는 /client, /server 폴더에 있는 .env.sample 파일을 참고해주시기 바랍니다. * 추가예정
-
 ```bash
 # 저장소 복제
 git clone https://github.com/boostcampwm-2024/web33-boostproject.git