비대면 화상상담 플랫폼 - 소담

💁 간단 소개

""

코로나 시대에 온라인 상담 소담과 함께 하세요

상담사에게 필요한 상담기능이 담긴 소담

직접 상담사와 토론을 통해 구현했습니다.

화상상담, 상담내용 자동 문서화, 일정 등록 모든 것을 이용해 보세요.

👨‍👩‍👧‍👧 팀원


BE 엄형규	BE 김빛누리	BE 김아현	BE 김미현	FE 정재훈	FE 황호선

🏡프로젝트 소개

프로젝트명: 그룹 비디오 상담 서비스(소담)
서비스 특징: 웹을 통한 상담과 일정 조정 도우미 서비스
주요 기능
- 회원 관리
- 화상 미팅룸
- 상담사 일정관리
- STT를 통한 상담내용 택스트 파일로 생성
주요 기술
- WebRTC
- WebSocket
- JWT Authentication
- REST API
- JPA
- STT
- SSE
참조 리소스
- Vuetify 3: 디자인 전반 적용
- Vue Argon Design System: 디자인 전반 적용
- Color Hunt : 이미지 전반의 색깔 적용
- FullCalendar: 캘린더 컴포넌트 사용
- google stt: 구글에서 제공하는 stt 지원 라이브러리. 이미지 인식 및 오버레이 영상에 활용
배포 환경
- URL: // 웹 서비스, 랜딩 페이지, 프로젝트 소개 등의 배포 URL 기입
- nginx proxy manager: // nginx를 관리하고 역방향 프록시 구성 및 ssl인증을 간략화
- docker network : // network를 통한 내부망 구성
- swagger :// url을 통한 해당 값을 분석하고 프론트와 백엔드 간 협업

팀 소개

황호선: 팀장, 프론트엔드 개발
정재훈: 프론트엔드 개발
엄형규: Web RTC, CI/CD
김아현: 백엔드 개발
김미현: 백엔드 개발
김빛누리 : 백엔드 개발

git convention

Master(main) : 제품 출시할 수 있는 브랜치
Develop : 다음 버전 개발 브랜치
{Feature} : 기능을 개발하는 브랜치
Release : 배포 브랜치

Frontend

Backend

DevOps

🚡 verson

JVM(openjdk11)

Node(16.19.0)

Python(3.9)

Spring Boot

DB : MySQL

📡 아키텍쳐

🏳 port

22 : ssh

80 : nginx(HTTP)

443 : nginx(HTTPS)

3306 → mysql

5000 → backend(+ tomcat)

6379 → radis

8180 → frontend

8280 → stt

9000 → portainer

🚦 팀 규칙

코딩 관련

PR 적용은 날린 사람이 바로 할 수 없도록 설정하자 (최소 리뷰 1개 이상 달리면 머지!)
내가 짠 코드를 다른 사람이 쉽게 이해할 수 있어야 한다
- 팀이 짠 코드는 모든 팀원이 다 이해하고 설명할 수 있어야 한다
- 내가 짠 코드에 대해 팀원들이 질문하더라도 불평하지 않고 대답해주기
다른 사람이 짠 코드를 수정해야 할 일이 있을 경우 미리 알리기
두 선택지 중 하나를 선택해야 하는 경우에는 선택한 이유를 PR이든 Commit 이든 확인할 수 있는 곳에 반드시 명시하기

그라운드 룰

모든 의견에 긍정적인 반응 먼저하기 (호응해주기)
개인 일정이 있을 땐, 팀 전체에게 최소 3시간 전에 공유하기
알림을 받은 후에는 읽음 표시 하기
책임을 상대에게 넘기지 말자

🎥 영상

👀 프로젝트 주요 기능

회원가입

상담사와 내담자는 가입 시 받는 입력 정보가 다릅니다.

고객

상담사

모든 값을 입력해야 다음으로 넘어갈 수 있습니다.

상담사의 학위, 자격증, 경력 정보를 입력받고, 인증 사진을 통해 관리자가 검증합니다.

상담사와 내담자로 페이지가 구분되기 때문에 각각 나누어 설명하겠습니다.

고객

메인페이지

내담자로 로그인 했을 때 나타나는 메인 페이지입니다. 우측 상단의 버튼을 클릭하면 여러 페이지 목록이 나타납니다.

아래로 스크롤을 내리면 검색바와 상담사 리스트를 볼 수 있습니다. 사진 위로 마우스를 올리면 상담사에 대한 간단한 정보를 볼 수 있습니다.

상담사 상세 페이지

상담사 상세페이지에서는 상담사의 자세한 정보를 확인할 수 있습니다. 경력, 자격증 및 실제 상담을 받았던 내담자의 후기를 통해 예비 내담자분의 선택을 도울 수 있습니다.

상담 신청서

후기 작성

고민게시판

헬프 데스크

개인 정보 수정

상담사 페이지

메인 페이지

일정 관리, 고객 관리 탭이 상담사 페이지에 추가되어 있습니다.

일정관리

화상 상담

고객관리

알림 페이지

🔗 링크

🕙최종 프로젝트 회고

문제점

확실한 의사결정과 정리 내용 공유가 부족했다.
진행상황을 확실하게 공유할 수 있는 문서나 현행 상태가 정리된 자료가 필요하지 않았나.
배포상황을 고려하지 못한 라이브러리나 기술스택의 선택으로 인해 확실한 기술이나 환경적인 부분의 명확한 문제파악 시기가 늦어진 것 같다.
새로운 기술 학습에 의한 일정 늦춰짐
일정관리가 잘 안되었다.(지라를 통해 관리하기)
의사소통이 잘 안된 부분이 있었다.(업무 공유를 지라를 통해서 확인해야하는데 지라 관리가 잘 안된 부분이 있었다.)
코드 공유와 문서를 통해 진행상황을 확인할 수 없었다. (실제 개발과 문서의 차이가 너무 많아 실질적으로 개발시에 문서 참조하지 않음.)
일정 필수 파라미터 명확하게 하기
api 파라미터 필수값 옵션값 등 api를 명확하게 이해할 수 있는
중요한 기능을 우선순위를 정해서 구현 하지 못함. → 일정이 정리되지 않아서 필수기능 구현 기능이 프로젝트 막바지까지 미뤄진다
어려운 것들을 많이 선택한 느낌. (현재 팀원들의 기술스택과 프로젝트 진행 기간을 고려하지 못한 기술 선택)
핵심 기능 위주로 우선 개발해야 할 것.
폴더 구조 명확하고 세세하게.
이름 컨벤션

개선할 점

기술의 우선순위 확실하게 정해서 개발할 것.
커밋 단위 세세하게 하기(그리고 자주하기! ⇒ 엄청난 충돌의 원인이 될수있다.)
본인 담당 역할 (ex. jira) 에 대해서는 강제적으로 팀원들에게 푸시하기
한번 논의된 주제나 문제에 대해서는 명확하게 결론짓고 공유하기.
최소한의 의사소통을 위한 api문서 명확하게 작성하기(필수 파라미터, 옵션 파라미터 명확하게 표기하기, 어떤 데이터 내려주는 api인지 문서만 보고 파악할 수 있도록)
기술은 확실히 알고 사용하기(⇒ 오류 발생 시 원인을 파악할 수 없음 ㅠㅠ)
entity, response, request객체 명확하게

배운점

프로젝트나 배운점에 대한 내용을 꾸준하게 기록하고 정리하시는 부분

bnuri00 / sodam Goto Github PK

sodam's Introduction