Skip to content

Commit

Permalink
Merge pull request #336 from boostcampwm-2024/docs/#332/readme
Browse files Browse the repository at this point in the history 
[Docs] README 업데이트
  • Loading branch information
@simeunseo
simeunseo authored Dec 2, 2024
2 parents 414f9ef + 9b04d36 commit b222095
Showing 1 changed file with 155 additions and 42 deletions.
197 changes: 155 additions & 42 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,188 @@
<div align='center'>
<h1>TICLE</h1>
실시간 지식 공유 플랫폼
<h3>실시간 지식 공유 플랫폼</h3>
<br/>
<br/>
<img width="600" alt="메인 배너" src="https://github.com/user-attachments/assets/eb4c89c8-6870-4114-bddc-796b51bd7163">
<br/>

### [:ledger: 팀 노션](https://www.notion.so/simeunseo/9-Ticle-12e599a6f0d2804682ccd2251248a435?pvs=4) | [:mag: 위키](https://github.com/boostcampwm-2024/web21-boostproject/wiki) | [🎨 피그마](https://www.figma.com/design/nw74detTvjXGrDP2cfdmwp/TICLE-%EB%94%94%EC%9E%90%EC%9D%B8?node-id=32-4477&t=3FCCnBpgQXMZs63X-1) | [🗓️ 스프린트 백로그](https://github.com/orgs/boostcampwm-2024/projects/82/views/7) | [🧪 스토리북](https://673a0cccd15a760db778c591-ttyfhdnavn.chromatic.com/)
<div style='display:flex; flex-direction:column; width:100%; padding-top:30px;'>
<a href='https://ticle.live/'>
<img src='https://github.com/user-attachments/assets/a3c42d03-5fc7-4ca3-b91f-38f577a9f28a' height='60' alt='TICLE 바로가기'/>
</a>
<div style='display:flex; width:100%; justify-content:center;'>
<a href='https://www.notion.so/simeunseo/9-Ticle-12e599a6f0d2804682ccd2251248a435?pvs=4'>
<img src='https://github.com/user-attachments/assets/ea949b3f-dedd-4440-8c8a-3e41cac51926' height='50' alt='팀 노션'/>
</a>
<a href='https://github.com/boostcampwm-2024/web21-TICLE/wiki'>
<img src='https://github.com/user-attachments/assets/78aee282-c6f6-460c-a79a-6d781cee23f5' height='50' alt='위키'/>
</a>
<a href='https://github.com/orgs/boostcampwm-2024/projects/82/views/7'>
<img src='https://github.com/user-attachments/assets/4a618f25-dadd-4eda-90ec-986cd82627c9' height='50' alt='백로그'/>
</a>
</div>

<div style='display:flex; width:100%; justify-content:center;'>
<a href='https://www.figma.com/design/nw74detTvjXGrDP2cfdmwp/TICLE-%EB%94%94%EC%9E%90%EC%9D%B8?node-id=10-4&t=TD0V9ro7hamDQ94I-1'>
<img src='https://github.com/user-attachments/assets/f64c1fe5-d239-44ca-a174-dbed6fc34f78' height='50' alt='피그마'/>
</a>
<a href='https://673a0cccd15a760db778c591-ttyfhdnavn.chromatic.com/'>
<img src='https://github.com/user-attachments/assets/fba7df6a-481c-4a99-904d-22b21a728ecc' height='50' alt='스토리북'/>
</a>
</div>
</div>

</div>

# 🖧 시스템 아키텍처
<h1>📋 목차</h1>

#### [1. 기획 의도](#기획_의도)

#### [2. 핵심 목표](#핵심_목표)

#### [3. 시스템 아키텍처](#시스템_아키텍처)

#### [4. 핵심 기능](#시스템_아키텍처)

#### [5. 우리만의 기술적 경험](#우리만의_기술적_경험)

- [공통](#공통)
- [프론트엔드](#프론트엔드)
- [백엔드](#백엔드)

#### [6. 기술 스택](#기술_스택)

#### [7. 팀원 소개](#팀원_소개)

<h1 id='기획_의도'>💭 기획 의도</h1>

> "부스트캠프의 **기술 공유** 시간이 참 좋은데, 시간이 한정적이다..."
> "**시간에 구애받지 않고 누구나** 지식을 나눌 수 있는 플랫폼이 있다면 어떨까?"
> "준일님의 글쓰기 클래스처럼, 캠퍼들도 **각자의 전문성과 경험을 더욱 자유롭게 공유**할 수 있다면 좋지 않을까?"
#### ➡️ 누구나, 언제든, 자유롭게 개설하고 참여하는 실시간 지식공유 플랫폼 **TICLE**❗️

<h1 id='핵심_목표'>🎯 핵심 목표</h1>

1️⃣ 실시간으로 발표자와 참여자가 즉각적인 피드백과 질문이 가능한 **양방향 소통 환경**

2️⃣ 모든 참여자가 **카메라, 마이크, 화면 공유**를 제어하고 활용할 수 있는 환경

3️⃣ **다수의 참여자가 동시에 접속**하여 최대한 많은 사람에게 지식 공유를 할 수 있는 안정적인 환경

<h1 id='시스템_아키텍처'>🖧 시스템 아키텍처</h1>

![Cloudcraft Image (4)](https://github.com/user-attachments/assets/1e5874ee-2485-4e89-90a0-cebb47621c77)

# 🏃 작업 진행 상황
<h1 id='핵심_기능'>✴️ 핵심 기능</h1>

## **✔️ 누구나, 언제든, 자유롭게 실시간 지식 공유가 가능해요**

<img src='https://github.com/user-attachments/assets/883670ed-60dd-412b-89eb-969b0e72bd8e' width=600 alt='티클 시작1'/>

- 원하는 만큼 **많은 인원을 수용**할 수 있어요.
- **마이크, 카메라, 화면 공유**를 끄고 킬 수 있어요.

<img src='https://github.com/user-attachments/assets/1c95122a-d9db-4295-897c-661ebdbf66f3' width=600 alt='티클 시작2'/>

- 참가자가 많아지면 **페이지네이션**이 가능해요.
- 크게 보고 싶은 **화면을 클릭해서 고정**할 수 있어요.
- 발표자는 원할 때 **티클을 종료**할 수 있어요.

- [🆕 5주차 발표자료](https://www.figma.com/slides/kNBDNutRalcIkuGWo3LHd9/5%EC%A3%BC%EC%B0%A8-%EB%8D%B0%EB%AA%A8-%EB%B0%9C%ED%91%9C%EC%9E%90%EB%A3%8C?node-id=1-23&t=LH1JpAKm2xhJUq9q-1)
- [4주차 발표자료](https://simeunseo.notion.site/4-1ccf63bab4b14fd8b249f5d7c7cd7e53?pvs=4)
- [3주차 발표자료](https://simeunseo.notion.site/3-0df689ca7cd3407b89a93284854a54b8?pvs=4)
- [2주차 발표자료](https://simeunseo.notion.site/2-137599a6f0d2809fa498fa1cc31d97f9?pvs=4)
- [1주차 발표자료](https://simeunseo.notion.site/1-130599a6f0d2804597e0c55e8ee33920?pvs=4)
## **✔️ 개설된 티클을 확인하고 신청할 수 있어요**

# 💡 핵심 기능
<img src='https://github.com/user-attachments/assets/4bff5732-7686-4e35-b171-49c65caa6aeb' width=600 alt='티클 목록'/>

### **✔️ 실시간 화상 지식 공유**
- 개설된 **티클 목록을 확인**할 수 있어요.
- **최신순, 오래된순, 신청자순으로 정렬**하여 볼 수 있어요.
- 진행 예정인 티클과 종료된 **티클을 필터링**하여 볼 수 있어요.
- 무한 스크롤로 티클 목록을 빠르게 로딩해요.

카메라와 음성을 통해 발표자와 참여자가 실시간으로 지식을 공유할 수 있습니다.
화면 공유 기능으로 더욱 효과적인 지식 전달이 가능합니다.
## **✔️ 나만의 티클을 개설할 수 있어요**

![티클 시작](https://github.com/user-attachments/assets/f0c3f9b3-cbda-49b2-a6a3-4c77fd569129)
<img src='https://github.com/user-attachments/assets/6aa3f861-b769-4f14-b698-d20d78ae3de5' width=600 alt='티클 개설'/>

### **티클 목록**
- 티클을 소개하기 위한 필수적인 **정보를 입력하여 게시**할 수 있어요.
- 각 입력에 대해 **정확한 유효성 검증**이 적용돼요.

티클 목록을 확인하고 정렬, 필터링할 수 있습니다.
## **✔️ 신청한 티클과 개설한 티클을 확인하고 관리할 수 있어요**

![티클목록4](https://github.com/user-attachments/assets/ac4cbba2-5552-43d3-8361-4159f9c3a48b)
<img src='https://github.com/user-attachments/assets/723d1063-83bb-4be7-a786-32295765e328' width=600 alt='티클 대시보드'/>

### **✔️ 티클 개설**
- 진행 예정인 티클과 종료된 **티클을 필터링**하여 볼 수 있어요.
- 개설한 티클에 대해 **신청자 목록을 확인**할 수 있어요.
- **티클 시작하기** 또는 **티클 참여하기**를 통해 실시간 지식 공유에 접속할 수 있어요.

발표자는 원하는 티클을 개설할 수 있습니다.
## **✔️ AI 요약 기능으로 종료된 티클 내용을 요약해서 보관해요**

![티클개설4](https://github.com/user-attachments/assets/56b33a06-a85d-49a2-b830-c46d44879ce2)
<img src='https://github.com/user-attachments/assets/825a5ea0-e873-40e1-a866-5706bde4bf5a' width=600 alt='AI 요약'/>

### **✔️ 티클 관리 대시보드**
<h1 id='우리만의_기술적_경험'>🏃 우리만의 기술적 경험</h1>

참여자는 신청한 티클을 대시보드에서 확인하고 참가할 수 있습니다.
발표자는 대시보드에서 신청자를 확인하고 발표를 시작할 수 있습니다.
## 공통

![대시보드4](https://github.com/user-attachments/assets/d6f57d72-135e-4e36-bba9-784a1fd368a2)
<h4>WebRTC와 Mediasoup</h4>

### **✔️ AI 요약 기능**
> TICLE 프로젝트의 핵심 기술인 'WebRTC'와 'Mediasoup'에 대해 5명 팀원 모두가 학습 정리를 진행하였습니다.
CLOVA API를 이용해 티클 내용을 요약하여 제공합니다.
- [WebRTC 정리 - 이지은, 황성하](https://simeunseo.notion.site/WebRTC-8c90ccf49d7c4ec5894222aeeb6de5a4?pvs=4)

![image](https://github.com/user-attachments/assets/825a5ea0-e873-40e1-a866-5706bde4bf5a)
- [Mediasoup: client side를 중심으로 - 심은서](https://simeunseo.notion.site/Mediasoup-client-side-137599a6f0d28063b309d97469a6b6bf?pvs=4)

# ✍️ 학습 정리
- [Mediasoup 동작방식 정리 - 노종빈](https://simeunseo.notion.site/Mediasoup-71266cbbac63466fb8acb3f41bb65338?pvs=4)

| 분야 | 기술 |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 공통 | [Turborepo 정리 - 지석호](https://simeunseo.notion.site/Turborepo-0c5bcd0bed0445c4a8c6730b991eefd0?pvs=4) <br/>[패키지 매니저 - 지석호](https://simeunseo.notion.site/12e599a6f0d2816c9ccfe5b9f8743641?pvs=4) <br/> [WebRTC 정리 - 이지은, 황성하](https://simeunseo.notion.site/WebRTC-8c90ccf49d7c4ec5894222aeeb6de5a4?pvs=4) |
| 프론트엔드 | [공통 컴포넌트를 나누는 기준 - 심은서](https://simeunseo.notion.site/139599a6f0d2806b85cdcaefe62ec4ee?pvs=4)<br/> [Tanstack Router로 공통 레이아웃을 가진 중첩 페이지 라우터 구현하기 - 심은서](https://simeunseo.notion.site/Tanstack-Router-136599a6f0d280f9af53ed949671e6bf?pvs=4) |
| 백엔드 | [VPC 설정 - 황성하](https://simeunseo.notion.site/VPC-12bab0d1e2cb4105bc72e528fae7f22f?pvs=4)<br/> [커스텀 에러처리 - 노종빈](https://simeunseo.notion.site/Custom-adabd0f9845c41d6997a522eec7537da?pvs=4) <br/> [Nest.js 환경변수 세팅 - 노종빈](https://simeunseo.notion.site/nest-js-19f20434324f4021bf34b89e9ef2be71?pvs=4) |
- [Mediasoup 통신 과정 - 지석호](https://simeunseo.notion.site/Mediasoup-83f31d20cb9940ca96d205818ca2eb8d?pvs=4)

#### ↗️ 더 많은 학습 정리 보기
## 프론트엔드

[💭 학습 기록장](https://simeunseo.notion.site/12e599a6f0d2807489d3fc76cbdcaa98?v=12e599a6f0d28130bc68000c718aa85b&pvs=4)
[👾 개발 기록장](https://simeunseo.notion.site/12e599a6f0d280c0a7d9c948983ff80a?v=12e599a6f0d281afa7a4000c474633fc&pvs=4)
<h4><a href='https://simeunseo.notion.site/14a599a6f0d2800cb40add7d399525aa?pvs=4'>🔗 스트리밍을 최적화 해보자</a></h4>

# 🛠️ 기술 스택
> 최대한 많은 유저가 들어와 화상 서비스를 이용하는 것을 목적으로 하는 만큼 소켓 이벤트, 기존 할당된 자원에 대한 관리를 진행하며 최대한 적은 자원으로 나은 환경을 제공하기 위해 최적화를 진행하였습니다.
<h4><a href='https://simeunseo.notion.site/139599a6f0d2806b85cdcaefe62ec4ee?pvs=4'>🔗 공통 컴포넌트를 나누는 기준</a></h4>

> 비슷하게 '생긴' 세가지 공통 컴포넌트를 구현하면서 컴포넌트 분리와 통합의 기준에 대해 고찰했습니다.
> 결국 '좋은 컴포넌트'란 결국 '사용하기 편한' 컴포넌트여야 한다는 결론을 내렸습니다.
<h4><a href='https://simeunseo.notion.site/Tanstack-Router-136599a6f0d280f9af53ed949671e6bf?pvs=4'>🔗 Tanstack Router로 공통 레이아웃을 가진 중첩 페이지 라우터 구현하기</a></h4>

> Tanstack Router를 활용해 탭 기반 대시보드를 구현하기 위해 여러 라우팅 방식을 검토하여 pathless route를 활용한 중첩 라우팅 구조를 채택했습니다.
<h4><a href='https://simeunseo.notion.site/14c599a6f0d280619c0af1d41aad64d0?pvs=4'>🔗 로그인 후 페이지 리다이렉션 구현하기</a></h4>

> 로그인이 필요한 페이지 접근 시 사용자 경험을 개선하기 위해, 로그인 완료 후 원래 접속하려던 페이지로 자연스럽게 돌아가도록 구현했습니다. 이 과정에서 발생한 인증 상태 확인과 페이지 리다이렉션의 타이밍 문제를 Tanstack Router의 beforeLoad 옵션으로 해결하여, 더 나은 인증 플로우를 구축할 수 있었습니다.
## 백엔드

<h4><a href='https://simeunseo.notion.site/NestJS-97e7afb9830043e987f23b67ec4a8b90?pvs=4'>🔗 Nestjs의 요청 생명 주기 </a></h4>

> nestjs에서 response 형식을 어떻게 통일할 수 있을까? 인증은 어떤곳에서 처리해야 할까?
> Middleware vs Guard vs Interceptor vs Pipe를 비교해 보았습니다.
<h4><a href='https://simeunseo.notion.site/9f85adcce9b24ee18420c06d90fd14ee?pvs=4'>🔗 쿠키와 로그아웃</a></h4>

> 로그인 성공 후 JWT를 쿠키에 넣은 뒤 redirection을 하여 클라이언트에서 쿠키를 조작할 수 없었습니다.
> 클라이언트 단일로 로그아웃이 불가능하여 쿠키 옵션에 대해 공부하며 로그아웃 기능을 구현했습니다.
<h4><a href='https://simeunseo.notion.site/nest-Throttler-143c27a1f6bf4feb9b0983e770c82b95?pvs=4'>🔗 게스트 로그인 구현과 @nest/Throttler</a></h4>

> 캠퍼들이 저희의 서비스를 편하게 테스트할 수 있도록 게스트 로그인 기능을 구현하였습니다.
> 게스트 로그인을 구현하며 고민이였던 과도한 게스트 로그인 요청을 nest의 Throttler를 활용하여 해결하였습니다.
<h4><a href='https://simeunseo.notion.site/clova-speech-clova-studio-ec1a9813b5a74439b32186b4fc5f8450?pvs=4'>🔗 Clova studio, Clova speech</a></h4>

> 네이버 클라우드 플랫폼의 Object Storage 업로드 부터 api 연결까지 정리해 보았습니다.
---

#### 더 많은 학습 정리 보기

[💭 학습 기록장↗️](https://simeunseo.notion.site/12e599a6f0d2807489d3fc76cbdcaa98?v=12e599a6f0d28130bc68000c718aa85b&pvs=4)
[👾 개발 기록장↗️](https://simeunseo.notion.site/12e599a6f0d280c0a7d9c948983ff80a?v=12e599a6f0d281afa7a4000c474633fc&pvs=4)

<h1 id='기술_스택'>🧑‍💻 기술 스택</h1>

| 분야 | 기술 |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand All @@ -78,34 +191,34 @@
| 백엔드 | ![NestJS](https://img.shields.io/badge/nestjs-E0234E?style=for-the-badge&logo=nestjs&logoColor=white) ![MySQL](https://img.shields.io/badge/mysql-4479A1?style=for-the-badge&logo=mysql&logoColor=white) ![Redis](https://img.shields.io/badge/redis-FF4438?style=for-the-badge&logo=redis&logoColor=white) |
| 데브옵스 | ![GitHub Actions](https://img.shields.io/badge/githubactions-FF4438?style=for-the-badge&logo=githubactions&logoColor=white) ![Turborepo](https://img.shields.io/badge/turborepo-EF4444?style=for-the-badge&logo=turborepo&logoColor=white) ![Docker](https://img.shields.io/badge/docker-2496ED?style=for-the-badge&logo=docker&logoColor=white) |

# 👋 팀원 소개
<h1 id='팀원_소개'>🏠 팀원 소개</h1>

<table width="100%">
<tr>
<td width="20%" align="center"><b>지석호</b></td>
<td width="20%" align="center"><b>노종빈</b></td>
<td width="20%" align="center"><b>심은서</b></td>
<td width="20%" align="center"><b>노종빈</b></td>
<td width="20%" align="center"><b>이지은</b></td>
<td width="20%" align="center"><b>황성하</b></td>
</tr>
<tr>
<td align="center"><img src="https://avatars.githubusercontent.com/u/60173534?v=4" width="100" height="100" /></td>
<td align="center"><img src="https://avatars.githubusercontent.com/u/95959567?v=4" width="100" height="100" /></td>
<td align="center"><img src="https://avatars.githubusercontent.com/u/55528304?v=4" width="100" height="100" /></td>
<td align="center"><img src="https://avatars.githubusercontent.com/u/95959567?v=4" width="100" height="100" /></td>
<td align="center"><img src="https://avatars.githubusercontent.com/u/112913242?v=4" width="100" height="100" /></td>
<td align="center"><img src="https://avatars.githubusercontent.com/u/58902013?v=4" width="100" height="100" /></td>
</tr>
<tr>
<td align="center"><a href="https://github.com/seoko97">@seoko97</a></td>
<td align="center"><a href="https://github.com/begong313">@begong313</a></td>
<td align="center"><a href="https://github.com/simeunseo">@simeunseo</a></td>
<td align="center"><a href="https://github.com/begong313">@begong313</a></td>
<td align="center"><a href="https://github.com/Jieun1ee">@Jieun1ee</a></td>
<td align="center"><a href="https://github.com/Fixtar">@Fixtar</a></td>
</tr>
<tr>
<td align="center">Web FE·BE</td>
<td align="center">Web FE</td>
<td align="center">Web FE</td>
<td align="center">Web BE</td>
<td align="center">Web BE</td>
<td align="center">Web BE</td>
</tr>
Expand Down

0 comments on commit b222095

Please sign in to comment.