✏ YOUNG 서기 ✏

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

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

📃 산출물

📋 발표자료

🎞️ 영상

👪 팀원


🥨 김치욱 Frontend	🍪 박규리 Frontend	🍞 복영석 Backend
화상 채팅 기능 구현 채팅방 기능 구현 STT 기능 구현 모션 인식 기능 구현	로그인 페이지 화면 및 기능 구현 메인 페이지 화면 및 기능 구현 회의 상세 페이지 화면 및 기능 구현 마이페이지 화면 및 기능 구현 피그마 디자인 작업	화상 채팅 기능 구현 채팅방 기능 구현 모션 인식 기능 구현 실시간 기능 구현

🥞 안유나 Backend	🍮 임규환 Backend	🍩 정은진 Backend
Infra	OpenAI API 연결 마이페이지 API 기능 구현 회의 요약 API 기능 구현 폴더 관련 API 기능 구현	소셜 로그인 기능 구현 JWT 를 이용한 Spring Security 회의록 작성 기능 구현