From 419fabea611bff656dd64e4c93b96fcde7e3bc14 Mon Sep 17 00:00:00 2001 From: seoko97 Date: Mon, 2 Dec 2024 09:37:07 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20README.md=20=EC=97=85=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 256 +++++++++++++++++++++++++++++------------------------- 1 file changed, 137 insertions(+), 119 deletions(-) diff --git a/README.md b/README.md index 3a9914eb..c6c59d16 100644 --- a/README.md +++ b/README.md @@ -1,184 +1,202 @@

TICLE

-

실시간 지식 공유 플랫폼

+실시간 지식 공유 플랫폼

-메인 배너 +메인 배너
-
- -TICLE 바로가기 - -
- -팀 노션 - - -위키 - - -백로그 - -
+### [:ledger: 팀 노션]( -
- -피그마 - - -스토리북 - -
-
+https://www.notion.so/simeunseo/9-Ticle-12e599a6f0d2804682ccd2251248a435?pvs=4 +) | [:mag: 위키](https://github.com/boostcampwm-2024/web21-boostproject/wiki) | [:art: 피그마](https://www.figma.com/design/nw74detTvjXGrDP2cfdmwp/TICLE-%EB%94%94%EC%9E%90%EC%9D%B8?node-id=32-4477&t=3FCCnBpgQXMZs63X-1) | [:spiral_calendar_pad: 스프린트 백로그](https://github.com/orgs/boostcampwm-2024/projects/82/views/7) | [:test_tube: 스토리북](https://673a0cccd15a760db778c591-ttyfhdnavn.chromatic.com/)
-

📋 목차

- -#### [1. 기획 의도](#기획_의도) - -#### [2. 핵심 목표](#핵심_목표) - -#### [3. 시스템 아키텍처](#시스템_아키텍처) - -#### [4. 핵심 기능](#시스템_아키텍처) - -#### [5. 우리만의 기술적 경험](#우리만의_기술적_경험) +# 🖧 시스템 아키텍처 -- [공통](#공통) -- [프론트엔드](#프론트엔드) -- [백엔드](#백엔드) - -#### [6. 기술 스택](#기술_스택) - -#### [7. 팀원 소개](#팀원_소개) +![Cloudcraft Image (4)](https://github.com/user-attachments/assets/1e5874ee-2485-4e89-90a0-cebb47621c77) -

💭 기획 의도

+# :runner: 작업 진행 상황 -> "부스트캠프의 **기술 공유** 시간이 참 좋은데, 시간이 한정적이다..." +- [:new: 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) -> "**시간에 구애받지 않고 누구나** 지식을 나눌 수 있는 플랫폼이 있다면 어떨까?" +# :bulb: 핵심 기능 -> "준일님의 글쓰기 클래스처럼, 캠퍼들도 **각자의 전문성과 경험을 더욱 자유롭게 공유**할 수 있다면 좋지 않을까?" +### **:heavy_check_mark: 실시간 화상 지식 공유** -#### ➡️ 누구나, 언제든, 자유롭게 개설하고 참여하는 실시간 지식공유 플랫폼 **TICLE**❗️ + 카메라와 음성을 통해 발표자와 참여자가 실시간으로 지식을 공유할 수 있습니다. + 화면 공유 기능으로 더욱 효과적인 지식 전달이 가능합니다. -

🎯 핵심 목표

+![티클 시작](https://github.com/user-attachments/assets/f0c3f9b3-cbda-49b2-a6a3-4c77fd569129) -1️⃣ 실시간으로 발표자와 참여자가 즉각적인 피드백과 질문이 가능한 **양방향 소통 환경** +### **티클 목록** -2️⃣ 모든 참여자가 **카메라, 마이크, 화면 공유**를 제어하고 활용할 수 있는 환경 + 티클 목록을 확인하고 정렬, 필터링할 수 있습니다. -3️⃣ **다수의 참여자가 동시에 접속**하여 최대한 많은 사람에게 지식 공유를 할 수 있는 안정적인 환경 +![티클목록4](https://github.com/user-attachments/assets/ac4cbba2-5552-43d3-8361-4159f9c3a48b) -

🖧 시스템 아키텍처

+### **:heavy_check_mark: 티클 개설** -![Cloudcraft Image (4)](https://github.com/user-attachments/assets/1e5874ee-2485-4e89-90a0-cebb47621c77) + 발표자는 원하는 티클을 개설할 수 있습니다. -

✴️ 핵심 기능

+![티클개설4](https://github.com/user-attachments/assets/56b33a06-a85d-49a2-b830-c46d44879ce2) -## **✔️ 누구나, 언제든, 자유롭게 실시간 지식 공유가 가능해요** +### **:heavy_check_mark: 티클 관리 대시보드** -티클 시작1 + 참여자는 신청한 티클을 대시보드에서 확인하고 참가할 수 있습니다. + 발표자는 대시보드에서 신청자를 확인하고 발표를 시작할 수 있습니다. -- 원하는 만큼 **많은 인원을 수용**할 수 있어요. -- **마이크, 카메라, 화면 공유**를 끄고 킬 수 있어요. +![대시보드4](https://github.com/user-attachments/assets/d6f57d72-135e-4e36-bba9-784a1fd368a2) -티클 시작2 +### **:heavy_check_mark: AI 요약 기능** -- 참가자가 많아지면 **페이지네이션**이 가능해요. -- 크게 보고 싶은 **화면을 클릭해서 고정**할 수 있어요. -- 발표자는 원할 때 **티클을 종료**할 수 있어요. + CLOVA API를 이용해 티클 내용을 요약하여 제공합니다. -## **✔️ 개설된 티클을 확인하고 신청할 수 있어요** +![image](https://github.com/user-attachments/assets/825a5ea0-e873-40e1-a866-5706bde4bf5a) -티클 목록 +# :writing_hand: 학습 정리 -- 개설된 **티클 목록을 확인**할 수 있어요. -- **최신순, 오래된순, 신청자순으로 정렬**하여 볼 수 있어요. -- 진행 예정인 티클과 종료된 **티클을 필터링**하여 볼 수 있어요. -- 무한 스크롤로 티클 목록을 빠르게 로딩해요. +| 분야 | 기술 | +| ---- | -------------------------- | +| 공통 | [Turborepo 정리 - 지석호]( | -## **✔️ 나만의 티클을 개설할 수 있어요** +https://simeunseo.notion.site/Turborepo-0c5bcd0bed0445c4a8c6730b991eefd0?pvs=4 +)
[패키지 매니저 - 지석호](https://simeunseo.notion.site/12e599a6f0d2816c9ccfe5b9f8743641?pvs=4)
[WebRTC 정리 - 이지은, 황성하](https://simeunseo.notion.site/WebRTC-8c90ccf49d7c4ec5894222aeeb6de5a4?pvs=4) | +| 프론트엔드 | [공통 컴포넌트를 나누는 기준 - 심은서](https://simeunseo.notion.site/139599a6f0d2806b85cdcaefe62ec4ee?pvs=4)
[Tanstack Router로 공통 레이아웃을 가진 중첩 페이지 라우터 구현하기 - 심은서](https://simeunseo.notion.site/Tanstack-Router-136599a6f0d280f9af53ed949671e6bf?pvs=4)
[스트리밍을 최적화 해보자 - 지석호](https://simeunseo.notion.site/14a599a6f0d2800cb40add7d399525aa?pvs=4) | +| 백엔드 | [VPC 설정 - 황성하](https://simeunseo.notion.site/VPC-12bab0d1e2cb4105bc72e528fae7f22f?pvs=4)
[커스텀 에러처리 - 노종빈](https://simeunseo.notion.site/Custom-adabd0f9845c41d6997a522eec7537da?pvs=4)
[Nest.js 환경변수 세팅 - 노종빈](https://simeunseo.notion.site/nest-js-19f20434324f4021bf34b89e9ef2be71?pvs=4) | -티클 개설 +#### :arrow_upper_right: 더 많은 학습 정리 보기 -- 티클을 소개하기 위한 필수적인 **정보를 입력하여 게시**할 수 있어요. -- 각 입력에 대해 **정확한 유효성 검증**이 적용돼요. +[:thought_balloon: 학습 기록장](https://simeunseo.notion.site/12e599a6f0d2807489d3fc76cbdcaa98?v=12e599a6f0d28130bc68000c718aa85b&pvs=4) +[:space_invader: 개발 기록장](https://simeunseo.notion.site/12e599a6f0d280c0a7d9c948983ff80a?v=12e599a6f0d281afa7a4000c474633fc&pvs=4) -## **✔️ 신청한 티클과 개설한 티클을 확인하고 관리할 수 있어요** +# :hammer_and_wrench: 기술 스택 -티클 대시보드 +| 분야 | 기술 | +| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 공통 | ![PNPM](https://img.shields.io/badge/pnpm-%234a4a4a.svg?style=for-the-badge&logo=pnpm&logoColor=f69220) ![TypeScript](https://img.shields.io/badge/typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white) | +| 프론트엔드 | ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) ![React Query](https://img.shields.io/badge/-React%20Query-FF4154?style=for-the-badge&logo=react%20query&logoColor=white) | +| 백엔드 | ![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) | -- 진행 예정인 티클과 종료된 **티클을 필터링**하여 볼 수 있어요. -- 개설한 티클에 대해 **신청자 목록을 확인**할 수 있어요. -- **티클 시작하기** 또는 **티클 참여하기**를 통해 실시간 지식 공유에 접속할 수 있어요. +# :wave: 팀원 소개 -## **✔️ AI 요약 기능으로 종료된 티클 내용을 요약해서 보관해요** + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지석호노종빈심은서이지은황성하
@seoko97@begong313@simeunseo@Jieun1ee@Fixtar
Web FE·BEWeb FEWeb FEWeb BEWeb BE
+

TICLE

+실시간 지식 공유 플랫폼 +
+
+메인 배너 +
-AI 요약 +### [:ledger: 팀 노션]( -

🏃 우리만의 기술적 경험

+https://www.notion.so/simeunseo/9-Ticle-12e599a6f0d2804682ccd2251248a435?pvs=4 +) | [:mag: 위키](https://github.com/boostcampwm-2024/web21-boostproject/wiki) | [:art: 피그마](https://www.figma.com/design/nw74detTvjXGrDP2cfdmwp/TICLE-%EB%94%94%EC%9E%90%EC%9D%B8?node-id=32-4477&t=3FCCnBpgQXMZs63X-1) | [:spiral_calendar_pad: 스프린트 백로그](https://github.com/orgs/boostcampwm-2024/projects/82/views/7) | [:test_tube: 스토리북](https://673a0cccd15a760db778c591-ttyfhdnavn.chromatic.com/) -## 공통 +
-

WebRTC와 Mediasoup

+# 🖧 시스템 아키텍처 -> TICLE 프로젝트의 핵심 기술인 'WebRTC'와 'Mediasoup'에 대해 5명 팀원 모두가 학습 정리를 진행하였습니다. +![Cloudcraft Image (4)](https://github.com/user-attachments/assets/1e5874ee-2485-4e89-90a0-cebb47621c77) -- [WebRTC 정리 - 이지은, 황성하](https://simeunseo.notion.site/WebRTC-8c90ccf49d7c4ec5894222aeeb6de5a4?pvs=4) +# :runner: 작업 진행 상황 -- [Mediasoup: client side를 중심으로 - 심은서](https://simeunseo.notion.site/Mediasoup-client-side-137599a6f0d28063b309d97469a6b6bf?pvs=4) +- [:new: 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) -- [Mediasoup 동작방식 정리 - 노종빈](https://simeunseo.notion.site/Mediasoup-71266cbbac63466fb8acb3f41bb65338?pvs=4) +# :bulb: 핵심 기능 -- [Mediasoup 통신 과정 - 지석호](https://simeunseo.notion.site/Mediasoup-83f31d20cb9940ca96d205818ca2eb8d?pvs=4) +### **:heavy_check_mark: 실시간 화상 지식 공유** -## 프론트엔드 + 카메라와 음성을 통해 발표자와 참여자가 실시간으로 지식을 공유할 수 있습니다. + 화면 공유 기능으로 더욱 효과적인 지식 전달이 가능합니다. -

🔗 공통 컴포넌트를 나누는 기준

+![티클 시작](https://github.com/user-attachments/assets/f0c3f9b3-cbda-49b2-a6a3-4c77fd569129) -> 비슷하게 '생긴' 세가지 공통 컴포넌트를 구현하면서 컴포넌트 분리와 통합의 기준에 대해 고찰했습니다. -> 결국 '좋은 컴포넌트'란 결국 '사용하기 편한' 컴포넌트여야 한다는 결론을 내렸습니다. +### **티클 목록** -

🔗 Tanstack Router로 공통 레이아웃을 가진 중첩 페이지 라우터 구현하기

+ 티클 목록을 확인하고 정렬, 필터링할 수 있습니다. -> Tanstack Router를 활용해 탭 기반 대시보드를 구현하기 위해 여러 라우팅 방식을 검토하여 pathless route를 활용한 중첩 라우팅 구조를 채택했습니다. +![티클목록4](https://github.com/user-attachments/assets/ac4cbba2-5552-43d3-8361-4159f9c3a48b) -

🔗 로그인 후 페이지 리다이렉션 구현하기

+### **:heavy_check_mark: 티클 개설** -> 로그인이 필요한 페이지 접근 시 사용자 경험을 개선하기 위해, 로그인 완료 후 원래 접속하려던 페이지로 자연스럽게 돌아가도록 구현했습니다. 이 과정에서 발생한 인증 상태 확인과 페이지 리다이렉션의 타이밍 문제를 Tanstack Router의 beforeLoad 옵션으로 해결하여, 더 나은 인증 플로우를 구축할 수 있었습니다. + 발표자는 원하는 티클을 개설할 수 있습니다. -## 백엔드 +![티클개설4](https://github.com/user-attachments/assets/56b33a06-a85d-49a2-b830-c46d44879ce2) -

🔗 Nestjs의 요청 생명 주기

+### **:heavy_check_mark: 티클 관리 대시보드** -> nestjs에서 response 형식을 어떻게 통일할 수 있을까? 인증은 어떤곳에서 처리해야 할까? -> Middleware vs Guard vs Interceptor vs Pipe를 비교해 보았습니다. + 참여자는 신청한 티클을 대시보드에서 확인하고 참가할 수 있습니다. + 발표자는 대시보드에서 신청자를 확인하고 발표를 시작할 수 있습니다. -

🔗 쿠키와 로그아웃

+![대시보드4](https://github.com/user-attachments/assets/d6f57d72-135e-4e36-bba9-784a1fd368a2) -> 로그인 성공 후 JWT를 쿠키에 넣은 뒤 redirection을 하여 클라이언트에서 쿠키를 조작할 수 없었습니다. -> 클라이언트 단일로 로그아웃이 불가능하여 쿠키 옵션에 대해 공부하며 로그아웃 기능을 구현했습니다. +### **:heavy_check_mark: AI 요약 기능** -

🔗 게스트 로그인 구현과 @nest/Throttler

+ CLOVA API를 이용해 티클 내용을 요약하여 제공합니다. -> 캠퍼들이 저희의 서비스를 편하게 테스트할 수 있도록 게스트 로그인 기능을 구현하였습니다. -> 게스트 로그인을 구현하며 고민이였던 과도한 게스트 로그인 요청을 nest의 Throttler를 활용하여 해결하였습니다. +![image](https://github.com/user-attachments/assets/825a5ea0-e873-40e1-a866-5706bde4bf5a) -

🔗 Clova studio, Clova speech

+# :writing_hand: 학습 정리 -> 네이버 클라우드 플랫폼의 Object Storage 업로드 부터 api 연결까지 정리해 보았습니다. +| 분야 | 기술 | +| ---- | -------------------------- | +| 공통 | [Turborepo 정리 - 지석호]( | ---- +https://simeunseo.notion.site/Turborepo-0c5bcd0bed0445c4a8c6730b991eefd0?pvs=4 +)
[패키지 매니저 - 지석호](https://simeunseo.notion.site/12e599a6f0d2816c9ccfe5b9f8743641?pvs=4)
[WebRTC 정리 - 이지은, 황성하](https://simeunseo.notion.site/WebRTC-8c90ccf49d7c4ec5894222aeeb6de5a4?pvs=4) | +| 프론트엔드 | [공통 컴포넌트를 나누는 기준 - 심은서](https://simeunseo.notion.site/139599a6f0d2806b85cdcaefe62ec4ee?pvs=4)
[Tanstack Router로 공통 레이아웃을 가진 중첩 페이지 라우터 구현하기 - 심은서](https://simeunseo.notion.site/Tanstack-Router-136599a6f0d280f9af53ed949671e6bf?pvs=4)
[스트리밍을 최적화 해보자 - 지석호](https://simeunseo.notion.site/14a599a6f0d2800cb40add7d399525aa?pvs=4) | +| 백엔드 | [VPC 설정 - 황성하](https://simeunseo.notion.site/VPC-12bab0d1e2cb4105bc72e528fae7f22f?pvs=4)
[커스텀 에러처리 - 노종빈](https://simeunseo.notion.site/Custom-adabd0f9845c41d6997a522eec7537da?pvs=4)
[Nest.js 환경변수 세팅 - 노종빈](https://simeunseo.notion.site/nest-js-19f20434324f4021bf34b89e9ef2be71?pvs=4) | -#### 더 많은 학습 정리 보기 +#### :arrow_upper_right: 더 많은 학습 정리 보기 -[💭 학습 기록장↗️](https://simeunseo.notion.site/12e599a6f0d2807489d3fc76cbdcaa98?v=12e599a6f0d28130bc68000c718aa85b&pvs=4) -[👾 개발 기록장↗️](https://simeunseo.notion.site/12e599a6f0d280c0a7d9c948983ff80a?v=12e599a6f0d281afa7a4000c474633fc&pvs=4) +[:thought_balloon: 학습 기록장](https://simeunseo.notion.site/12e599a6f0d2807489d3fc76cbdcaa98?v=12e599a6f0d28130bc68000c718aa85b&pvs=4) +[:space_invader: 개발 기록장](https://simeunseo.notion.site/12e599a6f0d280c0a7d9c948983ff80a?v=12e599a6f0d281afa7a4000c474633fc&pvs=4) -

🧑‍💻 기술 스택

+# :hammer_and_wrench: 기술 스택 | 분야 | 기술 | | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -187,34 +205,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) | -

🏠 팀원 소개

+# :wave: 팀원 소개 - + - + - + - +
지석호심은서 노종빈심은서 이지은 황성하
@seoko97@simeunseo @begong313@simeunseo @Jieun1ee @Fixtar
Web FE·BE Web FEWeb BEWeb FE Web BE Web BE