📃 YOUNG 서기 📃

목차

• 📆 기간
• 💡 서비스 소개
• 💻 주요 기능 및 서비스 화면
• 🛠 주요 기술
• 🏗️ 아키텍처
• 📂 프로젝트 구조
• 📃 산출물
• 📋 발표자료
• 🎞️ 영상
• 👪 팀원

📆 기간

2024.04.08 ~ 2024.05.20 (6주)

💡 서비스 소개

회의록 작성에 집중하느라 회의에 소홀해지거나
회의에 참여하지 못해 회의 내용을 놓친 경험이 있으신가요?

YOUNG 서기는 회의 내용을 자동으로 정리 및 요약하고 회의록 파일을 생성해주는 서비스입니다.
서비스 이용을 통해 회의 참여도를 높이고, 문서화의 편리함을 느껴보세요!

"회의 참여도를 높이고 편리함을 제공하는 회의록 관리 서비스, YOUNG 서기"

💻 주요 기능 및 서비스 화면

1. 로그인 페이지 회원가입 및 로그인	2. 메인화면 회의 생성
카카오 로그인을 통해 회원가입 및 로그인을 진행합니다.	회의명을 입력해 회의를 시작합니다. 회의를 시작한 사람이 방장이 됩니다.
3. 회의진행 회의초대 및 채팅	3. 회의진행 모션 인식
회의 링크 복사 및 공유를 통해 초대를 할 수 있습니다. 회의를 진행하며 녹음, 실시간 채팅, 화면 공유를 할 수 있습니다.	모션 인식을 통해 손동작(🖐, 👍, 👎)을 인식할 수 있습니다.
3. 회의진행 녹음 및 실시간 요약	3. 회의진행 방장 위임 및 회의종료
녹음이 시작되면 STT를 통해 회의 참가자들이 나눈 내용을 글로 기록할 수 있습니다. 회의 내용이 저장된 DB를 조회하여 OpenAI로 요약 요청을 보냅니다. 요약 완료된 내용은 S3에서 불러온 회의록 양식에 맞춰 새로 작성된 후 S3와 DB에 저장됩니다.	방장은 회의 종료 전 방장을 위임할 수 있습니다.
4. 회의종료 폴더 추가 및 저장	5. 마이페이지 프로필 수정
회의가 종료된 후, 폴더 추가 및 선택을 통해 회의를 저장할 수 있습니다.	프로필 사진과 닉네임을 수정할 수 있습니다.
5. 마이페이지 폴더별 회의목록 조회	5. 마이페이지 시간별 회의목록 조회 및 삭제
폴더 목록과 폴더에 저장된 회의 목록을 조회할 수 있습니다.	폴더 목록과 폴더에 저장된 회의 목록을 조회할 수 있습니다.
6. 회의상세 회의 정보 및 댓글 작성	6. 회의상세 회의록 파일 다운로드
회의 요약, 참여자, 같은 폴더 내 이전/다음 회의 조회, 댓글 작성 및 삭제를 할 수 있습니다.	회의록 파일을 다운로드 받을 수 있습니다.

🛠 주요 기술

Frontend

• Visual Studio Code(IDE) 1.85.1
• HTML5, CSS3, Javascript(ES6)
• React 18.2.0
• Vite 5.2.0
• Nodejs 20.10.0
• Typescript 5.2.2
• Tanstack Query 5.29.2
• Zustand 4.5.2
• Tailwind CSS 3.4.3
• axios 1.6.8
• @tensorflow-models/handpose 0.1.0
• fingerpose 0.1.0
• openvidu-browser 2.29.1
• react-speech-recognition 3.10.0
• sockjs-client 1.6.1
• stompjs 2.3.3

Backend

• IntelliJ 2023.3.2
• Java OpenJDK 17
• JWT : 0.12.5
• Spring Boot 3.2.4
  • JAVA Spring Data JPA
  • Spring Security
• Gradle
• ORM : JPA
• spring-boot-WebSocket
• STOMP

CI/CD

• AWS EC2
  • NginX 1.18.0
  • Ubuntu 20.04.6 LTS
  • Docker 26.0.2
  • Jenkins 2.443
• Docker Hub

🏗️ 아키텍처

📂 프로젝트 구조

Frontend

src
├─ assets
│  └─ images
├─ components
│  ├─ common
│  ├─ login
│  ├─ main
│  ├─ meeting
│  ├─ meetingOn
│  ├─ myPage
│  └─ shared
├─ constants
├─ hooks
├─ pages
│  ├─ login
│  ├─ main
│  ├─ meeting
│  ├─ meetingOn
│  └─ myPage
├─ services
├─ store
├─ types
├─ utils
├─ App.css
├─ App.tsx
├─ index.css
└─ main.tsx

Backend

src
├─ main
│  ├─ java
│  │  └─ com
│  │     └─ d208
│  │        └─ AIclerk
│  │           ├─ chatting
│  │           │  ├─ controller
│  │           │  ├─ dto
│  │           │  │  ├─ requestDto
│  │           │  │  └─ responseDto
│  │           │  ├─ exception
│  │           │  ├─ repository
│  │           │  ├─ service
│  │           │  └─ util
│  │           ├─ common
│  │           ├─ config
│  │           ├─ entity
│  │           ├─ exception
│  │           ├─ meeting
│  │           │  ├─ controller
│  │           │  ├─ dto
│  │           │  │  ├─ requestDto
│  │           │  │  └─ responseDto
│  │           │  ├─ exception
│  │           │  ├─ repository
│  │           │  └─ service
│  │           ├─ member
│  │           │  ├─ controller
│  │           │  ├─ dto
│  │           │  │  ├─ requestDto
│  │           │  │  └─ responseDto
│  │           │  ├─ exception
│  │           │  ├─ repository
│  │           │  └─ service
│  │           ├─ security
│  │           │  ├─ exception
│  │           │  ├─ jwt
│  │           │  └─ oauth
│  │           └─ util
│  └─ resources
│     ├─ templates
│     └─ application.yml
└─ test

📃 산출물

1. 기능 명세서
2. API 명세서
3. 와이어프레임
4. ER 다이어그램
5. 포팅 메뉴얼

📋 발표자료

1. 중간 발표자료
2. 최종 발표자료

🎞️ 영상

• UCC
• 시연영상

👪 팀원

🥨 김치욱 Frontend	🍪 박규리 Frontend	🍞 복영석 Backend
화상 채팅 기능 구현 채팅방 기능 구현 STT 기능 구현 모션 인식 기능 구현	로그인 페이지 화면 및 기능 구현 메인 페이지 화면 및 기능 구현 회의 상세 페이지 화면 및 기능 구현 마이페이지 화면 및 기능 구현 피그마 디자인 작업	화상 채팅 기능 구현 채팅방 기능 구현 모션 인식 기능 구현 실시간 기능 구현
🥞 안유나 Backend	🍮 임규환 Backend	🍩 정은진 Backend
Infra	OpenAI API 연결 마이페이지 API 기능 구현 회의 요약 API 기능 구현 폴더 관련 API 기능 구현	소셜 로그인 기능 구현 JWT 를 이용한 Spring Security 회의록 작성 기능 구현