Docs/feature/modify readme

README.md

@@ -47,20 +47,101 @@
 
 <br>
 
-### 우당탕탕 이슈 해결기 💦
+## 목차
+- [🚀 핵심기능](#-핵심기능)
+    - [AI와의 채팅을 통해 타로점을 볼 수 있어요.](#ai와의-채팅을-통해-타로점을-볼-수-있어요)
+    - [실제 타로 전문가에게 화상 타로 상담을 받을 수 있어요.](#실제-타로-전문가에게-화상-타로-상담을-받을-수-있어요)
+- [기술적 도전](#기술적-도전)
+    - [멀티 어플리케이션 구축](#멀티-어플리케이션-구축)
+    - [블루/그린 무중단 배포](#블루그린-무중단-배포)
+    - [클로바 API를 이용한 AI 채팅](#클로바-api를-이용한-ai-채팅)
+    - [WebRTC를 이용한 P2P 통신](#webrtc를-이용한-p2p-통신)
+    - [인터렉티브한 애니메이션](#인터렉티브한-애니메이션)
+- [우당탕탕 이슈 해결기 💦](#우당탕탕-이슈-해결기-)
+  - [BE](#be)
+    - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#be-야-너두-무중단-배포-할-수-있어-)
+    - [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](#be-swag하게-swagger-사용하는-법--feat-swagger-데코레이터를-위한-패키지-만들기)
+  - [FE](#fe)
+    - [[FE] 인터랙티브 웹: 카드 애니메이션](#fe-인터랙티브-웹-카드-애니메이션)
+    - [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](#fe--context-api-provider-지옥-그리고-귀여운-곰돌이-)
+    - [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](#fe--복잡함을-단순하게-더-나은-경험으로-)
+  - [FE / BE](#fe--be)
+    - [[FE/BE] UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎](#febe-ux를-위해-ai-채팅-반응-속도를-8487까지-개선한-방법-)
+    - [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](#febe-소켓-아이고--feat-socketio는-파싱을-해)
+- [시스템 아키텍처](#시스템-아키텍처)
+- [기술 스택](#기술-스택)
+- [🔮🥛 타로 밀크티 소개](#-타로-밀크티-소개)
+
+<br>
+
+## 🚀 핵심기능
+### AI와의 채팅을 통해 타로점을 볼 수 있어요.
+> 사용자가 AI에게 자신의 고민을 자유롭게 이야기하면, 고민 내용을 바탕으로 타로 상담을 진행합니다.  
+> 고민 상담 후 사용자가 타로 카드를 뽑으면, AI가 해당 결과를 설명합니다.  
+> 사용자는 타로점 결과를 링크나 카카오톡으로 공유할 수 있습니다.
+
+![2](https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/13e7072a-3850-4b21-839e-506529008cb1)
+
+
+### 실제 타로 전문가에게 화상 타로 상담을 받을 수 있어요.
+> 타로 전문가와 직접 대면으로 만나지 않고 온라인 상에서 편하게 상담을 받을 수 있습니다.   
+> 전문가는 상담을 위한 채팅방을 생성하여 사용자를 초대합니다.
+> 사용자는 해당 채팅방에 접속하여 타로 상담을 받을 수 있습니다.  
+
+![image](https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/add8464f-10e5-4df3-9624-7606da8aaba3)
+
+
+<br>
+
+## 기술적 도전
+### 멀티 어플리케이션 구축
+
+- 도커 컴포즈로 멀티 어플리케이션 환경을 구성하여 여러 개의 서비스를 한 번에 실행하고 관리합니다.
+- nginx를 활용하여 URL에 따라 서로 다른 서비스를 프록시합니다.
+
+### 블루/그린 무중단 배포
+
+- 블루/그린 무중단 배포를 통해 신규 버전의 배포 과정에서 발생하는 다운타임을 최소화합니다.
+- 도커의 캐싱 옵션을 활용하여 빌드 시간을 최적화합니다. 이전 빌드 캐시를 재사용하여 빌드 시간을 단축합니다.
+- graceful shutdown으로 파일 입출력과 데이터베이스 커넥션 작업을 안전하게 종료합니다.
+- health check로 새로운 어플리케이션이 정상적으로 실행되고 정상적인 응답을 제공할 수 있는지 확인한 후에 트래픽을 전환하여 서비스 중단을 방지합니다.
+- 배포를 수행하는 쉘 스크립트를 에러 핸들링하여 시스템 안정성을 확보합니다. 배포 과정에서 오류가 발생하면 즉시 중단되어 기존 시스템에 영향을 미치지 않습니다.
+
+### 클로바 API를 이용한 AI 채팅
+
+- 클로바 API로부터 응답을 받아올 때, 기존의 요청-응답 방식 대신 스트림 형태로 받아옵니다. 이를 통해 사용자가 처음 응답을 받기까지 걸리는 시간을 최소화 합니다.
+- 스트림을 토큰 단위로 클라이언트에게 전달하여 AI와 실시간으로 채팅하는 듯한 사용자 경험을 제공합니다.
+
+### WebRTC를 이용한 P2P 통신
+
+- WebRTC API를 활용하여 서버에 부담을 주지 않고 실시간 P2P 커뮤니케이션을 지원합니다.
+- 데이터 채널을 통해 이미지, 메세지 등 다양한 종류의 파일을 주고 받습니다.
+
+### 인터렉티브한 애니메이션
+
+- 카드가 펼쳐지고 회전하는 등의 생생한 애니메이션으로 실제로 타로를 보는 듯한 현장감을 제공합니다.
+
+<br/>
+
+## 우당탕탕 이슈 해결기 💦
 > 타로 밀크티의 기술적 도전과 이슈 해결 기록
 
-- [[BE] 야 너두 무중단 배포 할 수 있어 🫵](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%95%BC-%EB%84%88%EB%91%90-%EB%AC%B4%EC%A4%91%EB%8B%A8-%EB%B0%B0%ED%8F%AC-%ED%95%A0-%EC%88%98-%EC%9E%88%EC%96%B4-%F0%9F%AB%B5)
-- [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/SWAG%ED%95%98%EA%B2%8C-Swagger-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B2%95-%F0%9F%A4%9F-(Feat.-Swagger-%EB%8D%B0%EC%BD%94%EB%A0%88%EC%9D%B4%ED%84%B0%EB%A5%BC-%EC%9C%84%ED%95%9C-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0))
-- [[FE] 인터랙티브 웹: 카드 애니메이션](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%9D%B8%ED%84%B0%EB%9E%99%ED%8B%B0%EB%B8%8C-%EC%9B%B9:-%EC%B9%B4%EB%93%9C-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98)
-- [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%F0%9F%90%BB-Context-API%EC%99%80-Provider-%EC%A7%80%EC%98%A5%EA%B3%BC-%EA%B7%80%EC%97%AC%EC%9A%B4-%EA%B3%B0%EB%8F%8C%EC%9D%B4-%F0%9F%90%BB)
-- [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%F0%9F%9A%80-useWebRTC%ED%9B%85-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EC%97%AC%EC%A0%95:-%EB%B3%B5%EC%9E%A1%ED%95%A8%EC%9D%84-%EB%8B%A8%EC%88%9C%ED%95%98%EA%B2%8C,-%EB%8D%94-%EB%82%98%EC%9D%80-%EA%B2%BD%ED%97%98%EC%9C%BC%EB%A1%9C-%F0%9F%9A%80)
-- [[FE/BE] UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎](https://github.com/boostcampwm2023/web09-MagicConch/wiki/UX%EB%A5%BC-%EC%9C%84%ED%95%B4-AI-%EC%B1%84%ED%8C%85-%EB%B0%98%EC%9D%91-%EC%86%8D%EB%8F%84%EB%A5%BC-84.87%25%EA%B9%8C%EC%A7%80-%EA%B0%9C%EC%84%A0%ED%95%9C-%EB%B0%A9%EB%B2%95-%F0%9F%98%8E)
-- [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%86%8C%EC%BC%93-%EC%95%84%EC%9D%B4%EA%B3%A0-%F0%9F%98%87-(Feat.-socket.io%EB%8A%94-%ED%8C%8C%EC%8B%B1%EC%9D%84-%ED%95%B4))
+### BE
+#### [[BE] 야 너두 무중단 배포 할 수 있어 🫵](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%95%BC-%EB%84%88%EB%91%90-%EB%AC%B4%EC%A4%91%EB%8B%A8-%EB%B0%B0%ED%8F%AC-%ED%95%A0-%EC%88%98-%EC%9E%88%EC%96%B4-%F0%9F%AB%B5)
+#### [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/SWAG%ED%95%98%EA%B2%8C-Swagger-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B2%95-%F0%9F%A4%9F-(Feat.-Swagger-%EB%8D%B0%EC%BD%94%EB%A0%88%EC%9D%B4%ED%84%B0%EB%A5%BC-%EC%9C%84%ED%95%9C-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0))
+
+### FE
+#### [[FE] 인터랙티브 웹: 카드 애니메이션](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%9D%B8%ED%84%B0%EB%9E%99%ED%8B%B0%EB%B8%8C-%EC%9B%B9:-%EC%B9%B4%EB%93%9C-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98)
+#### [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%F0%9F%90%BB-Context-API%EC%99%80-Provider-%EC%A7%80%EC%98%A5%EA%B3%BC-%EA%B7%80%EC%97%AC%EC%9A%B4-%EA%B3%B0%EB%8F%8C%EC%9D%B4-%F0%9F%90%BB)
+#### [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%F0%9F%9A%80-useWebRTC%ED%9B%85-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EC%97%AC%EC%A0%95:-%EB%B3%B5%EC%9E%A1%ED%95%A8%EC%9D%84-%EB%8B%A8%EC%88%9C%ED%95%98%EA%B2%8C,-%EB%8D%94-%EB%82%98%EC%9D%80-%EA%B2%BD%ED%97%98%EC%9C%BC%EB%A1%9C-%F0%9F%9A%80)
+
+### FE / BE
+#### [[FE/BE] UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎](https://github.com/boostcampwm2023/web09-MagicConch/wiki/UX%EB%A5%BC-%EC%9C%84%ED%95%B4-AI-%EC%B1%84%ED%8C%85-%EB%B0%98%EC%9D%91-%EC%86%8D%EB%8F%84%EB%A5%BC-84.87%25%EA%B9%8C%EC%A7%80-%EA%B0%9C%EC%84%A0%ED%95%9C-%EB%B0%A9%EB%B2%95-%F0%9F%98%8E)
+#### [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%86%8C%EC%BC%93-%EC%95%84%EC%9D%B4%EA%B3%A0-%F0%9F%98%87-(Feat.-socket.io%EB%8A%94-%ED%8C%8C%EC%8B%B1%EC%9D%84-%ED%95%B4))
 <br>
 
 ## 시스템 아키텍처
-![magic_conch-system architecture drawio](https://github.com/boostcampwm2023/web09-MagicConch/assets/70785620/c1f6ca2e-08db-486a-af2c-d6b115ecba3c)
+![magic_conch-system architecture drawio](https://github.com/boostcampwm2023/web09-MagicConch/assets/70785620/702bf135-c0fd-441a-9f92-5e4aba002007)
 
 <br>
 
@@ -77,7 +158,6 @@
       <img src="https://img.shields.io/badge/dotenv-ecd53f?style=flat&logo=dotenv&logoColor=white" />
       <img src="https://img.shields.io/badge/Socket.io-black?style=flat&logo=socket.io&badgeColor=010101" />
       <img src="https://img.shields.io/badge/Jest-%23C21325?style=flat&logo=jest&logoColor=white" />
-      <img src="https://img.shields.io/badge/npm-%23CB3837.svg?style=flat&logo=npm&logoColor=white" />
     </td>
   </tr>
   <tr>
@@ -139,6 +219,19 @@
 </p>
 <br>
 
+## 기술 스택 세부사항
+| Category | Tech Stack | Description | 기술 블로그 링크 |
+|----------|------------|-------------|-----------------|
+| 인프라 | VPC, Server | 가상 네트워크 환경으로 보안상 안전한 환경에서 서버 운영하기 | [NCP 인프라 구축하기](https://season-broccoli-784.notion.site/NCP-e10722589ba444a7a179494e372fac5d?pvs=74) |
+| DB | MySQL, Redis, TypeORM | - 인덱스를 활용하여 조회 성능 높이기<br>- 트랜잭션으로 연관된 작업을 하나의 작업으로 묶어줘 일관성 보장하기<br>- 적절한 자료형을 사용하여 디스크 공간 최적화하기 | [데이터베이스 최적화하기](https://season-broccoli-784.notion.site/274585c019584ad293f9133c1f70b523) |
+| CI/CD | Docker, Nginx, Shell Script, GitHub Actions | - Docker Compose를 활용하여 일관된 방식으로 멀티 어플리케이션 실행하기<br>- Nginx를 이용하여 URL 정보에 따라 적절한 서비스 프록시하기<br>- GitHub Actions와 Shell Script로 자동화된 배포 프로세스 구축하기<br>- 블루/그린 무중단 배포 전략으로 서비스의 중단없이 업데이트하기 | [GitHub Actions로 CI/CD 자동화하기](https://season-broccoli-784.notion.site/GitHub-Actions-CI-CD-6c607b37cea24e5db0b20a39e30df154)<br>[블루/그린 무중단 배포 구현하기](https://season-broccoli-784.notion.site/882ef31d564449668a343acfc58d1c1f)<br>[graceful shutdown으로 사용자 경험 저하 방지하기](https://season-broccoli-784.notion.site/graceful-shutdown-917bb34932994cad884cfac86f0e67f4)<br>[health check로 서버 상태 확인하기](https://season-broccoli-784.notion.site/health-check-f6bbb34f71834781ba1312690731a4fd) |
+| 테스트 | Jest, supertest, Vitest | 단위 테스트와 e2e 테스트를 진행하여 코드가 예상대로 동작하는지 확인하기 | [Jest와 Supertest로 코드 동작 테스트하기](https://season-broccoli-784.notion.site/Jest-Supertest-d4291e1dbdd84f36956c5eb4c65fcf82) |
+| 로깅 | Winston | 로그를 체계적으로 기록하여 개발 및 유지보수성 향상하기 | [winston과 sentry로 서버가 터지는 이유 분석하기](https://www.notion.so/winston-sentry-slack-webhook-0a3f3d6ec066430ca49090e23eccdafb?pvs=4) |
+| 상태 관리 | Zustand | - 용량이 작은 상태 관리 라이브러리를 사용하여 청크 용량 최소화하기<br>- Context API보다 더 효과적으로 리렌더링을 줄이면서 상태 관리하기 | [ContextAPI에서 Zustand로 변경한 이유](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%F0%9F%90%BB-Context-API%EC%99%80-Provider-%EC%A7%80%EC%98%A5%EA%B3%BC-%EA%B7%80%EC%97%AC%EC%9A%B4-%EA%B3%B0%EB%8F%8C%EC%9D%B4-%F0%9F%90%BB) |
+| P2P 통신 | WebRTC, socket.io | - WebRTC를 이용하여 서버의 부하 없이 실시간 P2P 커뮤니케이션 구현하기<br>- 데이터 채널을 활용하여 이미지, 메시지 등 다양한 종류의 데이터 주고받기<br>- 공통 소켓 이벤트를 정의하여 오용을 방지하고 시스템 확장성 보장하기 | - |
+
+<br>
+
 ## 🔮🥛 타로 밀크티 소개
 > 타로 밀크티는 **FE 3명 & BE 1명** 으로 구성되어 있어요!!
 >