-
Notifications
You must be signed in to change notification settings - Fork 2
10 31 회의
Sunny edited this page Nov 15, 2024
·
1 revision
- 공통 초기 세팅
- 프론트엔드 초기 세팅
- 백엔드 초기 세팅
Tasks:
- 로그인 버튼 UI 구현
- 로그인/비로그인 상태에 따라 버튼 텍스트 동적으로 변경
- 로그인 버튼 클릭 시 로그인 모달 구현
- 모달 내 소셜 로그인 버튼 배치 및 클릭 이벤트 처리
- Github 및 Naver Oauth API 연동 및 인증 로직 구현
- 로그인 성공 시 체크인 기능 활성화 및 화면 갱신
Tasks:
- 로그아웃 버튼 클릭 시 토큰 초기화
- 토큰 블랙리스트 등록
- 초기화 후 홈 화면으로 이동
Tasks:
- 로고 UI 설계 및 스타일링
- 로그인 여부에 상관없이 모든 페이지에서 사용 가능하도록 구현
- 로고 클릭 시 홈 화면으로 이동 처리
Tasks:
- 개인 정보 관리 페이지로 이동하는 버튼 UI 및 스타일링
- 클릭 시 사용자 정보 페이지로 전환 및 URL 라우팅
- 로그인 상태에 따라 접근 제어
Tasks:
- 방송 창 PIP 모드 구현
- 방송 송출 서버와 연결
Tasks:
- 방송 미리보기 카드 컴포넌트 구현
- 방송 미리보기 카드에 대한 레이아웃 구현
- 스크롤? 페이징?
- 홈 화면에 대한 api 구현
- 미리보기 데이터 캐싱 하는 로직 구현
- 방송 시작 or 미디어 서버에서 주기적(10분? 30분? 등등)으로 화면을 캡쳐하는 로직 필요
- 캡쳐 된 로직을 캐싱 해놓는 형식 ( redis 사용)
Tasks:
- 필터링 버튼 UI 구현
- 필터링 기능 로직 구현
- 필터링 상태 유지 기능 추가
Tasks:
- 검색 입력 UI 구현
- 검색 로직 구현
- 검색 결과 처리 및 정렬
- 캠퍼아이디 / 제목 → 캠퍼ID + 제목
- J012의 방송제목 : J023과 함께하는 페어프로그래밍
- J023검색 → J023의 방송, J012의 방송
- 개선점 : 성능적인 이점이 줄어듬 → 해결 할 수 있지않을까 :)
- 검색하면 기존 홈 화면에 grid처럼 나오는것 처럼 필터링느낌?
- J023 검색 → 한명의방송만 뚝나와
- 공백이 너무 허전하다
- 한명이 검색됐을 경우 → 대빵크게 나온다던지
- 엔터를 눌렀을때 한번에 나오는지
- 캠퍼아이디 / 제목 → 캠퍼ID + 제목
Tasks:
- 방송 클릭 이벤트 리스너 구현
Tasks:
- 개인 정보 페이지 UI 구현
- 캠퍼 ID, 이름, 이메일, 분야, 깃허브, 링크드인, 출석부
- 수정 버튼
- 개인 정보 조회 API 구현
Tasks:
- 개인 정보 수정 UI 구현
- 개인 정보 수정 API 구현
Tasks:
- 출결 확인 UI 구현
- 일자, 방송 시작, 종료 시간, 총 방송 시간, 출석/불참 표시
- 출결 조회 API 구현
Tasks:
- 방송 화면 UI 구현
- webRTC로 실시간 미디어 제공
- 미디어 서버(?)에서 스트림 데이터를 제공
Tasks:
- 채팅 UI 구현
- 채팅 서버 구현
Tasks:
- 방송 화질 조정 버튼 구현
- webRTC를 통해 스트림 형식으로 받는 데이터를 가공 및 저장
- 미디어 서버에서 화질별 영상 제공
Tasks:
- 방송 중인 캠퍼의 상세 정보 UI 구현
- 방송 정보 제공
Tasks:
- 방송 설정 모달 내 녹화 on, off 버튼 구현
- 녹화 시작 로직 구현
- 녹화 종료 로직 구현
- 녹화 스트림을 받고 저장하는 로직 구현
Tasks:
- 제목 입력 컴포넌트 구현
- 제목 수정/확인 버튼 구현
- 방송 제목 변경 api 구현
Tasks:
- 화면공유 시작 및 종료 UI(버튼) 구현
- Desktop 화면 공유 기능 활성화 로직 구현
- Desktop 화면 스트림 전송 로직 구현
- 화면 공유 중단 로직 구현
- 화면 공유 + 화상 공유 → 화상이 구석에 조그만 창으로 보임
- 화면 공우 → 하나의 스트림
- 화상 공유 → 스트림
- 보여주는건 상관없음
- 녹화? 스트림 받아서 화면 처리하는건 프론트에서 하면 되는데
- 화면 공유 + 화상 공유 → 화상이 구석에 조그만 창으로 보임
Tasks:
- 화상공유 시작 및 종료 UI(버튼) 구현
- 화상 캠 활성화 로직 구현
- 화상 캠 스트림 전송 로직 구현
- 화상 공유 중단 로직 구현
Tasks:
- 음성 공유 시작 및 종료 UI(버튼) 구현
- 음성 공유 활성화 로직 구현
- 음성 데이터 스트림 전송 로직 구현
- 음성 공유 중단 로직 구현
- 캠과 화면공유 모두 꺼진 경우: 새까만 화면에 연결만 유지되어 방송은 계속된다.
- 연결은 되어 있는데 보내는 데이터가 없는 경우: default image로 휴식중 표시
- High
- 서비스의 필수 기능
- 구현 안되있으면 안되는 주요기능
- Medium
- High가 있어야 구현 될수 있는것
- 구현이 늦어져 구현 못하더라도 영향 없는 것
- Low
- Medium이 있어야 구현될 수 있는것
- 필수 기능에 영향을 미치지 않는 정말 부가적인 기능
기획서 목차 ver.1 from gpt
1. **프로젝트 개요** - 서비스 목적 및 타겟 사용자 - 서비스의 역할 및 주요 기능 2. **요구사항 정의** - 기능 요구사항 (네트워킹, 출결 체크, 방송 설정, 필터링, 검색, 미리보기 등) - 비기능 요구사항 (성능, UI/UX, 보안) 3. **메인페이지 기능 상세** - 주요 기능 설명 (PIP 모드, 서버 연결, 방송 설정, 필터링, 검색, 방송 상세 연결, 미리보기) 4. **~~UI/UX 디자인~~** - ~~메인페이지 레이아웃 및 주요 인터페이스 개요~~ - ~~사용자 흐름 및 기본 와이어프레임~~ 5. **~~기술 스택 및 아키텍처~~** - ~~기술 스택 개요~~ - ~~서버-클라이언트 구조~~ 6. **~~작업 분류 및 일정~~** - ~~유저 스토리 기반 태스크 목록~~ - ~~우선순위와 일정 계획~~ 7. **~~테스트 및 유지보수~~** - ~~테스트 계획 (기능별 테스트 항목)~~ - ~~유지보수 방안 및 향후 개선 계획~~기획서 목차 ver.2 from gpt
**프로젝트 기획 페이지**
**프로젝트 개요**
**프로젝트명**: 네부캠 전용 온라인 캠퍼스
**목표**: 캠퍼들이 출석 관리와 소통을 할 수 있는 실시간 스트리밍 기반의 온라인 커뮤니티 플랫폼을 제공하여 원활한 네트워킹을 돕고, 과제 및 학습을 지원합니다.
**한 줄 소개**: 출석부 관리부터 소통까지! 네부캠 캠퍼들을 위한 온라인 학습 및 네트워킹 플랫폼.
**문제 정의**
• 캠퍼들은 다양한 자료와 링크를 관리해야 하는 불편함이 있으며, 출석 확인과 소통을 원활히 하는 데 어려움을 겪고 있습니다.
• 화상 회의와 자료 공유 기능을 갖춘 플랫폼이 필요하며, 원활한 소통이 가능하도록 채팅 및 실시간 방송 기능이 요구됩니다.
**핵심 기능**
1. **실시간 방송 및 출석 관리**
• 캠퍼들이 ‘체크인’ 버튼을 누르면 방송 시작, ‘체크아웃’ 버튼을 누르면 방송 종료가 됩니다.
• 방송 시작과 종료 시간을 기반으로 출석 시간을 기록하며, 이를 캘린더 형식으로 제공하여 캠퍼들이 출석 상태를 쉽게 확인할 수 있습니다.
2. **네트워킹 및 소통 기능**
• 캠퍼들이 서로의 방송을 볼 수 있으며, 각 방송에서 채팅을 통해 실시간으로 소통할 수 있습니다.
• 방송 시청 중 필요한 경우 캠퍼의 프로필과 소셜 링크를 볼 수 있어 추가적인 네트워킹이 가능합니다.
3. **클립 생성 및 제공**
• 방송 중 주요 이벤트(예: 음성이 높거나 댓글이 폭주하는 구간)를 자동으로 클립으로 생성해 방송 아래에 표시합니다.
• 사용자는 클립을 모달 창 또는 새 탭에서 쉽게 시청할 수 있습니다.
4. **관리자 페이지**
• 캠퍼들의 출석 및 방송 기록을 관리할 수 있으며, 각 캠퍼의 출석 상태와 방송 시간을 쉽게 파악할 수 있는 달력형 출석부를 제공합니다.
• 캠퍼 정보를 한눈에 확인하고, 필터를 통해 특정 정보를 검색할 수 있습니다.
**타겟 사용자**
**부스트캠프 캠퍼**: 온라인 학습 환경에서 편리하게 출석을 관리하고, 캠퍼들 간 원활한 소통을 원하는 사용자를 타겟으로 합니다.
**페이지 구성**
1. **홈페이지**
• 방송 미리보기 창이 나열되며 방송 상태, 캠퍼 ID, 시청자 수, 분야 등 정보 제공.
• 캠퍼는 특정 캠퍼의 방송을 검색하거나 분야별 필터링이 가능합니다.
2. **개인 방송 페이지**
• 캠퍼는 자신의 방송을 실시간으로 송출하고, 화면 및 화상 공유 기능을 사용하여 활동을 보여줄 수 있습니다.
• 채팅창을 통해 방송 중 소통하며 방송 제목, 분야, 캠퍼 정보 등이 표시됩니다.
3. **개인 정보 페이지 (마이페이지)**
• 캠퍼의 기본 정보, 출석 상황, 소셜 링크가 제공되며, 필요 시 정보를 업데이트할 수 있습니다.
4. **관리자 페이지**
• 관리자 전용 페이지로, 출석 및 방송 시간을 한눈에 확인할 수 있는 캘린더가 제공됩니다.
• 캠퍼 출석 현황과 방송 정보에 대한 관리 기능이 포함됩니다.
**기술 스택**
• **프론트엔드**: React, WebRTC (실시간 스트리밍 및 채팅 구현)
• **백엔드**: Node.js, Redis (실시간 데이터 캐싱 및 트래픽 관리), RTMP/HLS 서버 (실시간 방송 및 클립 생성)
• **데이터베이스**: MySQL (출석 관리 및 방송 기록 저장)
**서비스 목표**
1. 네부캠 캠퍼들이 출석과 과제 제출을 쉽게 관리하고 소통할 수 있는 커뮤니티 공간 제공
2. 각 방송의 주요 이벤트를 클립으로 제공하여 캠퍼들의 학습을 지원
3. 사용자 친화적 UI/UX를 통해 캠퍼들이 적극적으로 참여할 수 있는 공간 조성
**성공 지표**
1. **사용자 수**: 동시 접속 인원 250명 이상 안정적 지원
2. **참여율**: 캠퍼들의 출석 및 소통 참여율을 분석
3. **만족도**: 캠퍼 설문조사를 통해 사용성 평가
이 [기획](https://www.notion.so/71e7ad434f88451c98c5908a58d08252?pvs=21) 페이지는 서비스의 목표와 기능, 구성 요소를 간결하게 정리해 사용자와 개발자가 쉽게 이해할 수 있도록 합니다.
- yml 형식으로 템플릿 생성
- bug, feature, fix, refactor 4개의 경우로 구분
[web20-camon/.github/ISSUE_TEMPLATE at develop · boostcampwm-2024/web20-camon](https://github.com/boostcampwm-2024/web20-camon/tree/develop/.github/ISSUE_TEMPLATE)
## #️⃣ 연관된 이슈
> #이슈번호
## ✨ 구현 기능 명세
## 🎁 PR Point
## 😭 어려웠던 점https://gist.github.com/liebespaar93/26174daa14fc50d723e34ff32c3fbb69
https://giljabi.tistory.com/22
-
pr 템플릿 참고 자료
## ✅ PR check list - [x] PR 제목: "[#이슈번호] 작업 내용" - [x] commit message가 적절한지 확인해주세요. - [x] 적절한 branch로 요청했는지 확인해주세요. - [x] Assignees, Label을 붙여주세요. - [x] 주의 사항과 관련해 꼭 확인해야 할 사람이 있다면 Reviewer로 등록해주세요. ## 📝 PR 요약 ## 📌 변경 사항 및 주의 사항 <!-- 변경사항 및 주의 사항이 있다면 적어주세요. 주의 사항과 관련해 꼭 확인해야 할 사람이 있다면 리뷰어로 등록해주세요. (다른 사람이 작성한 코드 수정 등) 코드 리뷰 시 더 꼼꼼하게 확인 받고 싶은 부분이 있다면 적어주세요. -->
## ✨ 구현 기능 명세 비밀번호 재설정 뷰 퍼블리싱을 하였습니다! ## 🎁 PR Point - 다른 기능들은 따로 넣진 않았고 퍼블리싱 작업 먼저 했어요! - 페이징이 잘 되었는지? (해당 폴더 위치가 맞는 위치인지..) - 비효율적인 구조는 아닐지? ## 🕰 소요시간 - 5 hour + 2 hour ## 😭 어려웠던 점 - 오랜만에 해서 이것저것 적응하는데 조금 시간이 걸린 것 같습니다.. - 기능을 붙이는 것을 염두에 두고 작업을 해야하는데.. 그게 어려운 것 같아요ㅠ - 인증번호 입력 받는 부분.. 떨어져있는 입력칸을 한번에 입력할 수 있게 하고 싶은데 어떻게 해야할지 모르겠어요... - 라우팅 제대로 한거 맞는지? (파일 이름 저렇게 해도 되나요..? 하핳..)
## #️⃣연관된 이슈 > #이슈번호 ## 📝작업 내용 > 이번 이슈에서 작업한 내용
-
issue 템플릿 참고 자료
## 어떤 기능인가요? > 추가하려는 기능에 대한 간단한 설명 ## 작업 상세 내용 - [ ] TODO - [ ] TODO - [ ] TODO
## 🌴 작업 브랜치 `feature/change_pw` ## 💼 TASK 개요 비밀번호 재설정 뷰를 퍼블리싱해보아요~ ## ✅ TODO 및 진행현황 - [ ] 비밀번호 재설정 뷰
- Mediasoup 포트 매핑 문제
- swagger 같은 응답 코드에 다양한 응답 보여주기
- Sudo가 계속 비밀번호를 요청함
- Docker 이미지가 너무 크다
- Git action에서 도커 이미지 빌드 시간을 단축시켜보자
- Docker compose를 이용해서 메모리 사용률을 줄여보자
- 방송 녹화 시 CPU 과부하 문제를 해결해보자
- Release 브랜치? 너 필요해?
- 로딩이 너무 짧아…!
- NestJS ORM으로 무엇을 사용해야 할까?
- WebRTC를 이용한 1:N 스트리밍 서비스에서 시그널링 서버가 필요할까?
- 실시간 채팅 구현: 인메모리 방식을 선택한 이유
- MySQL 아키텍처 개선: DB 의존성 분리와 서버 역할 명확화
- 브라우저 창이 최소화되면 비디오 송출이 안된다…!
- Mediasoup 기본 개념
- DLTS와 Signaling
- Tell, Don't Ask (TDA) 원칙이란
- VPC(Virtual Private Cloud) 학습 정리
- 순환참조: A 서비스 ‐ B 서비스 vs. A 서비스 ‐ B 레포지토리
- Dto 메서드 전략
- WebRTC란?
- 자바스크립트 패키지 매니저(npm, yarn, pnpm)
- shadcn/ui을 이용해 UI 개발 생산성 높이기
- React 이벤트 핸들러 네이밍(on vs handle)
- React-router-dom의 createBrowserRouter을 사용해보기
- fetch vs axios