공통 프로젝트(웹 기술) - 모꼬지(Mokkoji)

모꼬지 링크 : https://mokkoji.online/

💻SSAFY 10기 2학기 공통 프로젝트💻

우수 프로젝트 수상🎖

2024.01.03 - 2024.02.16(45일)

목차

• 공통 프로젝트(웹 기술) - 모꼬지(Mokkoji)
  • 모꼬지 링크 : https://mokkoji.online/
  • 목차
  • 🐳포팅 메뉴얼
  • 💡 프로젝트 콘셉트
    • 온라인으로 만나서 오래도록 간직할 수 있는 추억 쌓기
    • 핵심 기능
    • 추가 기능
  • ⚙️ 서비스 기능
    • 회원
    • 행사
    • 결과물
  • 🏠 서비스 레이아웃
    • 메인 페이지
    • 소셜 로그인
    • 마이페이지
    • 행사 생성
    • 소그룹 형성
    • 축하 편지 쓰기
    • 사진 찍기
    • 기억 페이지
    • 롤링페이퍼 생성
    • 포토 모자이크 생성
    • 추억 페이지
    • 롤링페이퍼 확인
    • 포토모자이크 확인
  • 🛠️ 기술 스택
    • Management Tool
    • IDE
    • Infra
    • Frontend
    • Backend
  • 🛠️서비스 아키텍처
  • 🗂설계 문서
    • Flow Chart
    • Mockup
  • 💾 ERD
  • 📁프로젝트 구조
    • Frontend
    • Backend
  • 📃발표자료
  • 👥팀 구성원

---

🐳포팅 메뉴얼

💡 프로젝트 콘셉트

👨🏻‍👩🏻‍👦🏻‍👦🏻 온라인 화상 모임 플랫폼 👨🏻‍👩🏻‍👦🏻‍👦🏻

온라인으로 만나서 오래도록 간직할 수 있는 추억 쌓기

• 단순한 화상 회의 서비스에 그치지 않고, 결과물을 만들어줌으로서 하나의 추억으로 간직할 수 있는 화상 모임 플랫폼

핵심 기능

• 회의 주최자에게 축하 메세지(영상, 음성) 전송
• 참여자들의 축하 메세지를 기반으로 한 “롤링페이퍼” 생성
• 회의의 결과물로 “포토 모자이크” 생성

추가 기능

• 원하는 사람끼리 채팅 가능한 소그룹 형성 기능 제공
• 사진 찍기 기능 제공

⚙️ 서비스 기능

회원

💡 회원 관리는 기본적으로 Spring Security, JWT와 OAUTH2를 활용

• 회원 가입
• 로그인 / 로그아웃
• 마이페이지
• 회원 정보 수정

행사

💡 화상 회의는 OpenVidu를 활용
💡 행사 별 소그룹 리스트는 Redis를 이용해 관리

• 호스트 메인 행사 생성 및 참여자들 입장
• 참여자들 소그룹 생성
• 회의 정보 조회
• 개인 & 소그룹 사진 촬영
• 롤링페이퍼 메시지 입력 후 저장

결과물

💡 사진, 음성, 영상 파일은 S3 에 업로드
💡 사진 리스트는 Redis Cache를 이용해 조회 속도 개선
💡 포토모자이크는 OpenCv 라이브러리를 활용

• 기억
  • 롤링페이퍼, 포토모자이크 편집 완료 여부 조회
  • 롤링페이퍼 배경지, 포스트잇 템플릿 설정
  • 포토모자이크/추억 썸네일용 대표이미지 설정
  • 참여자들에게 받은 사진과 로컬 사진을 추가해 포토모자이크 생성
• 추억
  • 각 추억의 종합 정보 조회
  • 롤링페이퍼 조회
  • 포토모자이크 조회

🏠 서비스 레이아웃

메인 페이지

소셜 로그인

마이페이지

행사 생성

소그룹 형성

축하 편지 쓰기

사진 찍기

기억 페이지

롤링페이퍼 생성

포토 모자이크 생성

추억 페이지

롤링페이퍼 확인

포토모자이크 확인

🛠️ 기술 스택

Management Tool

IDE

Infra

Frontend

Backend

🛠️서비스 아키텍처

🗂설계 문서

Flow Chart

Mockup

💾 ERD

📁프로젝트 구조

Frontend

frontend
  ├── node_modules
  ├── public
  └── src
      ├── api
      ├── assets
      ├── components
      │   ├── common
      │   ├── meeting
      │   ├── modal
      │   │   ├── home
      │   │   └── meeting
      │   ├── myedit
      │   ├── myevent
      │   └── mypage
      ├── icons
      ├── router
      ├── services
      ├── store
      ├── util
      └── views

Backend

mokkoji
├── common
│   ├── auth
│   │   ├── jwt
│   │   └── oauth2
│   ├── domain
│   └── exception
│       ├── dto
│       ├── errorcode
│       └── handler
├── config
├── event
│   ├── controller
│   ├── domain
│   ├── dto
│   │   ├── request
│   │   └── response
│   ├── repository
│   └── service
├── openvidu
│   ├── controller
│   └── dto
│       ├── request
│       └── response
├── result
│   ├── controller
│   ├── domain
│   ├── dto
│   │   ├── request
│   │   └── response
│   ├── repository
│   └── service
├── s3
└── user
    ├── controller
    ├── domain
    ├── dto
    │   ├── request
    │   └── response
    ├── repository
    └── service

📃발표자료

👥팀 구성원

김지은	박철준	이경배
Backend OpenVidu, 롤링페이퍼 api 담당	Infra UCC 담당	Backend 소셜 로그인, 포토모자이크 api 담당
이정민	조용운	한재훈
Frontend 롤링페이퍼, 포토모자이크 담당	Frontend 소셜 로그인, 사용자 기능 담당	Frontend OpenVidu 담당 발표 담당