Update README.md

README.md

@@ -1,12 +1,18 @@
 ![Group 38 (1)](https://github.com/user-attachments/assets/a882c5c5-b205-43cc-9a16-2f5e87dbd6aa)
 
-## 📋 프로젝트 이름 : `Nocta`
+
+![image](https://github.com/user-attachments/assets/ce48d2e5-ca40-43e6-8d64-0f874312f065)
+<p align="center">
+  <a href="https://223.130.159.220" title="🌌 밤하늘의 별빛처럼, 자유로운 인터랙션 실시간 에디터"><strong>배포 사이트</strong></a>
+</p>
+
+## `Nocta`
 
 > 🌌 밤하늘의 별빛처럼, 자유로운 인터랙션 실시간 에디터
 
 - 실시간 기록 협업 소프트웨어입니다.
 
-## 👩‍💻 팀 이름 : `Glassmo` (글래스모)
+## `Team Glassmo` 
 
 - 글래스모피즘의 약자
 
@@ -22,6 +28,31 @@
 |                                 FE+BE                                 |                                  FE                                   |                                   BE                                   |                                    FE                                     |
 |              [@hyonun321](https://github.com/hyonun321)               |              [@Ludovico7](https://github.com/Ludovico7)               |              [@minjungw00](https://github.com/minjungw00)              |            [@pipisebastian](https://github.com/pipisebastian)             |
 
+
+## 프로젝트 기능 소개
+### 1. 페이지 생성, 드래그 앤 드랍
+
+사이드바의 페이지 추가 버튼을 통해 페이지를 생성하고 관리할 수 있습니다.
+
+![111111](https://github.com/user-attachments/assets/7bbbd091-a906-49b1-8043-13240bdf2f5b)
+
+### 2. 탭 브라우징: 최소화 최대화 리사이즈
+
+각각의 문서를 탭브라우징 방식으로 관리할 수 있습니다. 크기를 조절하거나 드래그 앤 드랍을 통해 원하는 위치에 위치시킬 수 있습니다.
+
+![22222](https://github.com/user-attachments/assets/7355a84a-7ff5-44c5-a3d0-24840a468818)
+
+### 3. 실시간 마크다운 편집
+
+마크다운 문법을 입력하면 실시간으로 마크다운 문법으로 변환합니다.
+
+![33333](https://github.com/user-attachments/assets/ffcf7fa5-9436-4e6b-b38f-6fbf9e813cb5)
+
+### 4.실시간 동시편집(구현중)
+
+하나의 문서를 여러 사용자가 동시에 편집이 가능합니다. CRDT 알고리즘을 통해 실시간 변경사항을 모든 사용자에게 반영합니다.
+
+
 ## 🔧 기술 스택
 
 **Common**
@@ -34,59 +65,37 @@
 
 **Backend**
 
-<div align="left"> <img src="https://img.shields.io/badge/NestJS-E0234E?style=flat-square&logo=NestJS&logoColor=white"/> <img src="https://img.shields.io/badge/MySQL-4479A1?style=flat-square&logo=MySQL&logoColor=white"/> <img src="https://img.shields.io/badge/MongoDB-47A248?style=flat-square&logo=MongoDB&logoColor=white"/> <img src="https://img.shields.io/badge/Redis-DC382D?style=flat-square&logo=Redis&logoColor=white"/> </div>
+<div align="left"> <img src="https://img.shields.io/badge/NestJS-E0234E?style=flat-square&logo=NestJS&logoColor=white"/> <img src="https://img.shields.io/badge/MongoDB-47A248?style=flat-square&logo=MongoDB&logoColor=white"/> </div>
 
 **Infra**
 
 <div align="left"> <img src="https://img.shields.io/badge/Docker-2496ED?style=flat-square&logo=Docker&logoColor=white"/> <img src="https://img.shields.io/badge/Nginx-009639?style=flat-square&logo=Nginx&logoColor=white"/> <img src="https://img.shields.io/badge/GitHub_Actions-2088FF?style=flat-square&logo=GitHubActions&logoColor=white"/> <img src="https://img.shields.io/badge/NCloud-03C75A?style=flat-square&logo=Naver&logoColor=white"/> </div>
 
-## 🚀 프로젝트 시작 가이드
+## 시스템 아키텍처 다이어그램
 
-**Frontend**
+![image](https://github.com/user-attachments/assets/ab96462b-5f38-4dd9-9c72-984829fa873d)
 
-<details>
-<summary>Frontend (추후 변경)</summary>
+## 🚀 프로젝트 시작 가이드
 
 ```bash
 # 저장소 복제
 git clone https://github.com/boostcampwm-2024/web33-boostproject.git
 
-# 프로젝트 폴더로 이동
-cd frontend
-
 # 의존성 설치
-npm install
-
-# 개발 서버 실행
-npm run dev
+pnpm install
 
 # 프로덕션 빌드
-npm run build
-```
-
-</details>
-
-**Backend**
+pnpm run build
 
-<details>
-<summary>Backend (추후 변경)</summary>
+# 프로젝트 개발 모드 실행
+# Frontend: http://localhost:5173/
+# Backend: http://localhost:3000/
+pnpm run dev
 
-```bash
-# 프로젝트 폴더로 이동
-cd backend
-
-# 의존성 설치
-npm install
-
-# 개발 서버 실행
-npm run start:dev
-
-# 프로덕션 빌드
-npm run build
+# 프로젝트 Docker 빌드 후 실행 (http://localhost/)
+docker-compose up -d --build
 ```
 
-</details>
-
 ## 🔗 프로젝트 링크
 
 | 노션                                                                                       | 디자인    |