🛠 WEBGYVER - 화상상담 수리 서비스

WEBGYVER 고객(모바일 화면) : Webgyver 고객 바로가기

WEBGYVER 파트너(컴퓨터 화면) : Webgyver 파트너 바로가기

WEBGYVER QR

소개 영상 보기 : https://youtu.be/quGYpNUBP34

🏃‍♂️ 프로젝트 진행 기간

2023.01.09(월) ~ 2023.02.16(금) (39일간 진행) SSAFY 8기 2학기 공통프로젝트 - WEBGYVER

🕵️‍♂️ WEBGYVER - 배경

살다 보면 마주할 수밖에 없는 생활고장, 혼자 수리하기 어려워서 방문 수리를 불렀는데 너무 간단한 일이었거나, 방문 한 번에 수리하지 못하고 사장님들이 돌아갔다 재방문한 경험 있으신가요?

기존 방문 수리의 불편한 점과 아쉬운 점을 해결해주기 위해 Webgyver가 탄생했습니다. Webgyver와 함께, 간단한 문제는 화상 상담으로 빠르게 해결하거나, 문제점을 전문가와 진단하고 방문 수리 요청을 해보세요.

💡 WEBGYVER - 개요

- 출장 부르기 전에 잠깐! 전문가와 먼저 상담하세요. -

Webgyver는 Website Macgyver의 약자입니다.
WEBGYVER는 생활 고장을 원하는 시간에 전문가와 함께 진단하고 간단한 해결책을 제시받을 수 있는 실시간 화상상담 기능을 제공하는 웹서비스입니다.

주변에는 전문가가 아니라면, 알 수 없는 사소한 고장이 많습니다. WEBGYVER는 방문 수리 서비스를 받기 전에, 고객은 화상 통화를 통해 전문가와 직접 상담하고 문제를 파악하고, 이를 통해 불필요한 방문 및 비용을 줄일 수 있으며, 전문가는 수리에 필요한 도구나 부품을 사전에 판단하고 효율적이고 빠른 서비스를 제공할 수 있습니다.

🔎 주요 기능

---

• 예약상담

  • 원하는 날짜와 원하는 시간에 상담받길 원할 때

  • 또는 업체들을 살펴보고 싶을 때 선택해주세요.

  • 그러면 해당 분야에 등록되어있는 업체들의 상세 정보와 상담 가능 시간을 확인할 수 있습니다.

  • 예약을 등록하면, 5분 내로 예약 확정, 취소 안내를 문자로 받게 됩니다.

  • 이후, 예약한 시간이 되면 화상 상담에 입장해주세요.

    
    

• 바로상담

  • 지금 당장 상담받길 원한다면 선택해주세요.

  • 저희 Webgyber는 실시간 매칭 시스템을 갖추고 있습니다.

  • 상담을 등록하면, 매칭 화면에서 대기 중인 전문가가 몇 명인지 알 수 있고.

  • 전문가가 해당 상담을 수락하면 바로 화상상담으로 연결됩니다.

    
    

• 화상상담

  • 고객과 전문가는 서로 화상 상담을 진행 할 수 있습니다.

  • 고객은 생활 고장을 촬영하고, 전문가는 바로 확인 할 수 있습니다.

  • 상담 진행 중에 방문 수리가 필요하다고 생각되면, 고객은 방문 수리를 요청할 수 있습니다.

  • 전문가와 일정을 조율하고 바로 방문 예약을 확정해보세요.

    
    

• 자동 결제

  • 회원가입 시, 등록된 카드로 간단하게 상담료를 결제할 수 있습니다.

  • Webgyver 정책상, 결제는 예약이 확정된 시기에 부과됩니다.

    
    

• 리뷰 작성

  • 상담 받은 전문가에 대한 리뷰와 별점를 남길 수 있습니다.

  • 작성된 리뷰와 별점은 전문가 판단에 사용됩니다.

  • 작성한 리뷰는 전문가 상세 정보에 노출되고.

  • 내 정보에서 삭제하거나 수정할 수 있습니다.

    
    

• 수리 사례 등록

  • 전문가는 수리 사례를 등록할 수 있습니다.

  • 수리 실력을 뽐내고 고객이 확인 할 수 있게 해주세요!

    
    

✔ 주요 기술

---

Backend

• IntelliJ IDE
• Springboot 2.7.7
• Spring Data JPA
• Spring Security
• Spring Web
• Spring Websocket 5.3.24

Frontend

• Visual Studio Code 1.75.0
• NodeJS 18.12.1
• React 18.2.0
• Recoil 0.7.6
• Recoil-persist 4.2.0
• Styled-component 5.3.6
• Dart-sass 1.25.0
• MUI 5.11.4
• Eslint 8.31.0
• WebRTC
• Socket

CI/CD

• AWS EC2
• Docker
• Jenkins
• NGINX
• SSL

✔ 프로젝트 파일 구조

---

Back

webgyver-backend
  ├── api
  │   ├── controller
  │   │   ├── common
  │   │   ├── customer
  │   │   └── seller
  │   ├── request
  │   │   ├── article
  │   │   ├── common
  │   │   │   ├── picture
  │   │   │   └── reservation
  │   │   ├── customer
  │   │   └── seller
  │   ├── response
  │   │   ├── article
  │   │   ├── common
  │   │   │   ├── category
  │   │   │   ├── picture
  │   │   │   └── reservation
  │   │   ├── customer
  │   │   └── seller
  │   └── service
  │       ├── common
  │       ├── customer
  │       └── seller
  ├── common
  │   ├── auth
  │   ├── exception
  │   │   └── handler
  │   ├── model
  │   │   └── response
  │   └── util
  ├── config
  ├── db
  │   ├── entity
  │   └── repository
  │       ├── Seller
  │       ├── common
  │       └── customer
  ├── util
  └── websocket
      └── dto

Front

webgyber-frontend
  ├── node_modules
  ├── public
  └── src
      ├── api
      │   ├── acountsApi.js
      │   ├── customerService.js
      │   ├── masterService.js
      │   └── send.js
      ├── assets
      │   ├── icon
      │   └── image
      ├── components
      │   ├── common
      │   │   ├── privateroute
      │   │   └── sitepopup
      │   ├── customer
      │   │   ├── login
      │   │   ├── masterInfo
      │   │   └── navbar
      │   └── master
      │       ├── navbar
      │       └── reservationTime
      ├── pages
      │   ├── common
      │   │   ├── signup
      │   │   └── loadingSpinner
      │   ├── customer
      │   │   ├── endservie
      │   │   ├── homepage
      │   │   ├── match
      │   │   ├── mypage
      │   │   ├── reservation
      │   │   ├── reviewfrom
      │   │   ├── select
      │   │   ├── signup
      │   │   ├── usagehistory
      │   │   ├── videoservice
      │   └── master
      │       ├── endservice
      │       ├── example
      │       ├── history
      │       ├── login
      │       ├── realtime
      │       ├── review
      │       ├── schedule
      │       ├── signup
      │       ├── videoservice
      │       └── mypage
      ├── theme
      ├── App.jsx
      ├── App.scss
      ├── atom.js
      ├── index.jsx
      └── index.scss

✔ 협업 툴

---

• Git
• Notion
• JIRA
• Figma
• MatterMost
• Webex

✔ 협업 환경

---

• Gitlab
  • 코드의 버전을 관리
  • master, frontend-develop, backend-develop를 개발 workflow에 따라 관리
  • 상세 기능 구현 시, develop-feature-기능(페이지)로 세부 브랜치 관리
  • 정해진 commit style에 맞춰 커밋 기록 관리
• JIRA
  • 매주 목표량을 설정하여 Sprint 진행
  • 업무의 할당량을 정하여 Story Point를 설정하고, In-Progress -> Done 순으로 작업
• 회의
  • 아침회의 진행, 전날 목표 달성량과 당일 할 업무 브리핑
  • 오류나 협업이 필요한 일이라면 빠른 mattermost를 통해 관련 내용을 전달하고 상의
• Notion
  • 회의가 있을 때마다 회의록을 기록하여 보관
  • 에러 사항에 대해 기록하고 해결법 공유
  • 컨벤션 정리
  • 유저플로우, 와이어프레임, 기능명세서, ERD, API 리스트 등 산출물 실시간 공유
• Figma
  • 피그마 피그잼을 이용한 유저 플로우 설계
  • 피그마 디자인을 이용한 와이어 프레임 설계
  • 발표 자료 제작과 중간 결과물 실시간 공유

✔ 팀원 역할 분배

---

Contact Us

성명	깃허브아이디	기술스택
김동준	Dev-Jun125	JAVA / SpringBoot
간호성	ghs93	JAVA / SpringBoot
박일규	repeater1384	JAVA / SpringBoot
임희상	hslim9400	SpringBoot / React
전동인	qorzi	React + Recoil
허윤회	YoonHwe	Vue / React

✔ 프로젝트 산출물

---

• 기능명세서

• 유저플로우

• 와이어프레임

• ERD

• API

  ✔ 프로젝트 결과물

• 포팅메뉴얼

• 중간발표자료

• 최종발표자료

📱 WEBGYVER 서비스 화면

---

고객 화면

회원가입

• 이용약관에 동의하지 않으면 진행할 수 없습니다.
• 아이디는 타 사용자의 아이디와 중복될 수 없습니다.
• 올바른 카드 정보여야 합니다.

로그인

• 고객용 아이디로 로그인 해야합니다.
• 아이디는 전문가 아이디와 중복될 수 있습니다.

메인화면

• 상담받을 항목을 정할 수 있습니다.
• 최하단부에 전문가용 페이지로 이동할 수 있는 버튼이 있습니다. (PC에서 이용해주세요.)

예약상담

• 아래 해당 예약에 대한 정보가 나와 있습니다.
• 위치정보를 입력해야 합니다.
• 버튼을 누르면 업체 리스트로 이동합니다.
• 업체 리스트에서는 원하는 날짜와 시간을 선택할 수 있습니다.
• 해당 업체에 대한 상세 정보, 리뷰, 별점, 수리 사례를 확인할 수 있습니다.
• 예약 상담 폼에서 예약 정보를 입력할 수 있습니다.
• 5분 이내에 예약 확정, 취소 문자를 받을 수 있습니다.

바로상담

• 아래 해당 예약에 대한 정보가 나와 있습니다.
• 위치정보를 입력해야 합니다.
• 버튼을 누르면 바로 상담 입력 폼으로 이동합니다.
• 정보를 입력하면 실시간 매칭 페이지로 이동합니다.
• 해당 페이지에서 대기 중인 전문가의 수를 확인할 수 있습니다.
• 전문가가 수락하면 화상통화 페이지로 이동합니다.
• 화상 상담이 끝나면 리뷰를 입력할 수 있습니다.

리뷰등록

• 상담이 종료된 고객은 리뷰를 작성할 수 있습니다.
• 별점을 매길 수 있습니다.

내 정보

• 내 개인 정보를 확인하고 수정할 수 있습니다.
• 작성한 리뷰를 확인하고 수정하거나 삭제할 수 있습니다.

이용 내역

• 예정된 에약 일정을 확인할 수 있습니다.
• 완료된 일정을 확인할 수 있습니다.
• 진행중인 화상상담에 입장할 수 있습니다.

전문가 화면

로그인 & 회원가입

• 전문가의 홈페이지입니다.
• 아이디는 고객과 중복될 수 있습니다.
• 올바른 사업자 등록 번호를 등록해야 합니다.
• 처음 가입 시, 상담가능시간을 설정해야 합니다.

일정

• 전문가의 홈페이지입니다.
• 진행중인 화상상담에 입장할 수 있습니다.
• 예약을 확정, 취소하실 수 있습니다.
• 오늘의 일정을 확인할 수 있습니다.

내역

• 일정을 일별로 확인할 수 있습니다.

리뷰 관리

• 리뷰 목록을 확인할 수 있습니다.
• 댓글을 등록, 수정, 삭제할 수 있습니다.
• 전문가 상세페이지에 나타납니다.

수리 사례

• 수리 사례를 등록, 삭제, 수정할 수 있습니다.
• 전문가 상세페이지에 나타납니다.

내 정보

• 개인정보수정으로 이동할 수 있습니다.
• 영업시간을 설정할 수 있습니다.
• 소개글을 설정할 수 있습니다.
• 전문가 상세페이지에 나타납니다.

실시간 매칭

• 실시간으로 등록된 바로상담이 표시됩니다.
• 상담내역을 확인하고 수락할 수 있습니다.
• 수락 시, 화상통화 화면으로 이동합니다.