Skip to content

player397/bitamin

BranchesTags

Repository files navigation

README

BItAMin

💁 웹 서비스 소개

💡 **Better Tomorrow, Better Mind. 비타민**

**비타민(BItAMin)**은 우울감을 겪는 사람들을 위한 마음치료 서비스입니다.

우울감은 우울증과 달리 병원이나 전문 기관의 치료가 필요 없는 자연스러운 감정들이지만, 방치하면 우울증으로 발전할 수도 있는 전조 단계가 될 수도 있으며, 무엇보다 우울증에 비해 적극적인 대처가 어렵다는 특징 또한 있습니다.

비타민은 이러한 ‘우울감’ 이라는 문제를 해결하는 것에 필요성을 느끼며, 더 따뜻한 세상을 만들기 위한 마음 치료 서비스를 만들게 되었습니다.

비타민은 집단 상담, AI 운동, 데일리 미션, 정신건강 관리 등 우울감을 느끼는 사람들을 위한 다양한 기능을 제공하며, 유저가 우리의 서비스 안에서 우울감을 해소할 수 있도록 도와줍니다.

🛠 기술 스택

Front-end

HTML5 CSS3 TypeScript
HTML5 CSS3 TypeScript
React.js zustand vite socket.io
React zustand Vite socket.io

Back-end

Java Spring-Boot Hibernate MySQL Spring Data JPA
Java Spring-Boot Hibernate MySQL Spring Data JPA
socket.io JWT OpenAI Postman
socket.io JWT OpenAI Postman

DevOps

NGiNX aws Jenkins docker
NGiNX aws Jenkins docker

협업 툴

Jira Notion
Jira Notion

💡 주요 기능

기능 내용
집단 상담 독서, 영화, 미술, 음악 중 주제를 선택하여 방에 입장하면 우울감을 느끼는 사람들이 모여서 AI의 안내에 따라 함께 자신의 마음을 나눌 수 있는 화상 회의 기능을 제공함.
AI 운동 유저들이 스트레칭이나 요가 같이 가벼운 운동을 하면서 지친 몸과 마음을 풀어줄 수 있도록 AI가 보조해주는 화상 운동 기능을 제공함.
데일리 미션 유저들에게 작은 성취감을 주기 위해, 약 90가지의 미션을 통해 유저가 매일 매일 미션을 완성할 수 있는 기능을 제공함.
정신건강 관리 유저는 매 주마다 우울증 검사를 진행하며 자신의 상태를 확인할 수 있음. 검사를 마치면, 해당 페이지에서 자신의 검사 결과와, 우울감이 심해졌을 때 바로 찾아볼 수 있는 주변 병원 리스트들을 볼 수 있음.

📂 프로젝트 구성도

아키텍처(Architecture)

스크린샷 2024-08-19 오후 7.14.29.png

개체-관계 모델(ERD)

bitamin.png

API 명세서

스크린샷 2024-08-19 오후 7.38.08.png

스크린샷 2024-08-19 오후 7.38.58.png

스크린샷 2024-08-19 오후 7.39.58.png

스크린샷 2024-08-19 오후 7.40.28.png

스크린샷 2024-08-19 오후 8.55.33.png

스크린샷 2024-08-19 오후 7.41.17.png

스크린샷 2024-08-19 오후 7.41.39.png

프로젝트 디렉토리 구조

Front-End

BITAMIN
  │
  │
  │
  │
  └─src
      ├─api
      ├─assets
      │  ├─image
      │  ├─missionImage
      │  ├─plant
      │  └─weatherImage
      ├─fonts
      ├─router
      ├─store
      ├─stories
      │  ├─atoms
      │  ├─examples
      │  │  └─assets
      │  ├─organisms
      │  │  ├─common
      │  │  └─consultation
      │  │      ├─components
      │  │      │  ├─chat
      │  │      │  ├─dialog-extension
      │  │      │  ├─participantList
      │  │      │  ├─stream
      │  │      │  ├─toolbar
      │  │      │  └─video
      │  │      ├─layout
      │  │      └─models
      │  └─pages
      │      ├─account
      │      ├─admin
      │      ├─counsultation
      │      ├─healthup
      │      ├─main
      │      ├─message
      │      └─mission
      ├─styles
      │  ├─account
      │  ├─admin
      │  ├─counsultation
      │  ├─healthup
      │  ├─main
      │  ├─message
      │  ├─mission
      │  └─organisms
      ├─ts
      └─utils

Back-End

BITAMIN
  │
  │
  │
  │
  └─src
      ├─main
      │  ├─java
      │  │  └─com
      │  │      └─saessakmaeul
      │  │          └─bitamin
      │  │              ├─complaint
      │  │              │  ├─controller
      │  │              │  ├─dto
      │  │              │  │  ├─request
      │  │              │  │  └─response
      │  │              │  ├─entity
      │  │              │  ├─repository
      │  │              │  └─service
      │  │              ├─config
      │  │              ├─consultation
      │  │              │  ├─controller
      │  │              │  ├─dto
      │  │              │  │  ├─request
      │  │              │  │  └─response
      │  │              │  ├─Entity
      │  │              │  ├─repository
      │  │              │  └─service
      │  │              ├─exception
      │  │              ├─exercise
      │  │              │  ├─controller
      │  │              │  ├─dto
      │  │              │  │  └─response
      │  │              │  ├─entity
      │  │              │  ├─repository
      │  │              │  └─service
      │  │              ├─filter
      │  │              ├─interceptor
      │  │              ├─member
      │  │              │  ├─controller
      │  │              │  ├─dto
      │  │              │  │  ├─request
      │  │              │  │  └─response
      │  │              │  ├─entity
      │  │              │  ├─repository
      │  │              │  └─service
      │  │              ├─message
      │  │              │  ├─controller
      │  │              │  ├─dto
      │  │              │  │  ├─request
      │  │              │  │  └─response
      │  │              │  ├─entity
      │  │              │  ├─repository
      │  │              │  └─service
      │  │              ├─mission
      │  │              │  ├─controller
      │  │              │  ├─dto
      │  │              │  │  ├─request
      │  │              │  │  └─response
      │  │              │  ├─entity
      │  │              │  ├─repository
      │  │              │  └─service
      │  │              └─util
      │  │                  ├─file
      │  │                  │  └─service
      │  │                  └─jwt
      │  └─resources
      └─test
          ├─java
          │  └─com
          │      └─saessakmaeul
          │          └─bitamin
          │              ├─complaint
          │              ├─consultation
          │              └─message
          └─resources

🎥 데모 영상

미션 등록

미션등록.gif

녹음 등록

녹음 등록.gif

녹음 조회

미션_녹음 조회.gif

화상 회의

화상회의.gif

마이페이지

제목 없는 동영상 - Clipchamp로 제작.gif

랜딩페이지

제목 없는 동영상 - Clipchamp로 제작 (1).gif

📅 개발 기간

24.07.08. ~ 24.08.16

💻 실행 방법

1. 프론트엔드 빌드 방법

  1. 버전

    1. React 18.3.1
    2. Node.js 20.15.0

  2. 프로젝트 클론

  3. 라이브러리 설치

    npm install --force

  4. 빌드

    npm run build

2. 백엔드 빌드 방법

  1. 버전

    1. JAVA Open-JDK 17
    2. SpringBoot 3.3.2
    3. Gradle 8.8

  2. 프로젝트 클론

  3. 빌드

    ./gradlew build

👪 개발 팀 소개

김수영 프로필 이소연 프로필 이수현 프로필 이재준 프로필 조성정 프로필 최승탁 프로필
김수영
(Back-End & 팀장) 		이소연
(Front-End) 		이수현
(Back-End & Front-End) 		이재준
(Back-End) 		조성정
(Back-End) 		최승탁
(Front-End)
이름 역할
개발 내용
김수영 Back-End
팀장		 - Docker와 jenkins를 활용하여 CI/CD 파이프 라인 구축
- DB 설계
- Spring Data JPA 세팅
   - 데일리 미션 도메인 개발
최승탁 Front-End - DB 설계
- Spring Boot로 RESTful API 작성
    - 로그인 도메인 개발
    - 회원가입 도메인 개발
    - 아이디 찾기 도메인 개발
    - 비밀번호 재설정 도메인 개발
    - 회원 정보 조회 및 수정 도메인 개발
- SMTP Server, Redis를 이용한 이메일 인증 기능 구현
- 스프링 시큐리티, JWT를 이용한 인증 구현
- EC2 인프라 환경 세팅
- 프론트엔드, 백엔드 EC2 배포
- Github Action, Jenkins, Docker를 활용한 CI/CD
- Letsencrypt, Certbot을 이용한 서비스 SSL 보안 적용
- Nginx 웹서버 적용(Load Balancing, Reverse Proxy, Service Redirect 설정)
이소연 Front-End  - 로그인 ?
  - refreshToken accessToken
 - 회원가입 페이지 CSS 작업
 - 로그인 페이지 CSS 작업
- 마음상태 설문 점수에 따른 그래프, 결과 불러오기
    - 카카오맵 API를 통한 사용자 주변 병원 추천하기
    - S3에 맞는 회원 사진 정보 저장하기
 - 마이페이지 CSS 작업
    - TensorFlow, Teachable Machine을 활용한 머신 러닝
    - 건강up 페이지 CSS 작업
    - 랜딩페이지 CSS 작업
 - 로그인 전 페이지 CSS 작업
                  
이재준 Back-End - Docker와 jenkins를 활용하여 CI/CD 파이프 라인 구축
- 신고 도메인 개발
- 쪽지 도메인 개발
- 소셜 로그인 개발
조성정 Back-End - DB 설계
- Spring Boot로 RESTful API 작성
    - OpenVidu Session 생성 서비스 도메인 개발
    - OpenVidu Token 생성 서비스 도메인 개발
    - 집단상담 생성/조회/삭제 서비스 도메인 개발
    - 집단상담 랜덤 참여 서비스 도메인 개발
    - 집단상담 참여 토큰 재생성 서비스 도메인 개발
    - 집단상담 AI 진행 서비스 도메인 개
    - 집단상담 AI 요약 서비스 도메인 개발
    - 실시간 채팅 저장 서비스 도메인 개발
    - 실시간 채팅 조회 서비스 도메인 개발
    - 집단 상담 최근 참여자 명단 조회 서비스 도메인 개발
    - 오래된 상담 삭제 스케줄링 서비스 도메인 개발
-STOMP를 이용한 실시간 채팅 서버 구현
    - 웹소켓 연결을 통한 집단상담 AI 진행 멘트 Broadcast
    - 웹소켓 헤더 인증을 위한 Interceptor 처리 구현
-FE : SocketJS를 이용한 실시간 AI 상담 진행 구현
    - 웹소켓 연결을 통한 집단상담 AI 진행 멘트 Broadcast
- 스프링 시큐리티, JWT를 이용한 인증 filter 구현
-Junit을 이용한 Testcode 작성
    - Mockito를 활용한 given-when-then 패턴 적용
    - 집단상담 서비스 도메인에 대한 Testcode 작성
이수현 Back-End / Front-End ## Back-End
  • DB 설계
        - 회원가입 도메인 개발
        - 로그인 도메인 개발 (Spring Security, JWT 활용)
    - 비밀번호 재설정 도메인 개발
        - 회원 정보 조회 및 수정 도메인 개발
    - 로그아웃 시 refresh token 만료 처리
        - 자가진단 기록 관리
        - 닉네임 및 이메일 중복 확인
    - 시도, 구군, 동 리스트를 통한 동코드 조회
    - 자가진단 리스트 조회 및 일주일간 기록 여부 확인
    - 스프링 시큐리티, JWT를 이용한 인증 필터 구현

Front-End

  • 메인 페이지 CSS 작업
    - 오늘의 문구 불러오기 구현 (Zustand를 활용한 상태 관리)
    - 오늘의 문구 녹음하기
    - 오늘의 문구 녹음 저장하기
    - 미션 페이지 CSS 작업
    - 오늘의 미션 불러오기 구현 (Zustand를 활용한 상태 관리)
    - 오늘의 미션 교체하기 구현 (Zustand를 활용한 상태 관리)
    - 미션 설명 불러오기 구현
    - 한 달간의 미션 및 녹음 기록 가져오기 구현
    - 선택한 날짜에 완료한 미션 및 녹음 기록 가져오기 구현
    - 사용자 경험치 가져오기 구현
    - 경험치에 따른 레벨 부여 및 레벨에 맞는 GIF 출력
    - 날씨 API를 활용해 사용자의 현재 위치에 따른 날씨별 미션 페이지 배경 변경 (맑음, 비, 먹구름, 구름 많음, 눈 등)
    - 경험치에 따른 레벨 부여 및 레벨에 맞는 GIF 출력
    - 경험치에 따른 레벨 부여 및 레벨에 맞는 GIF 출력

UCC 편집 |

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages