가지가라지(Eggplant Garage)

   

📚 STACKS

    

    

   

    

프로젝트 소개

Web RTC를 활용한 비대면 Garage Sale

📆진행 일정

23.01.03(화) ~ 23.02.17(금) (총 7주)

UCC

• 가지가라지의 소개와 물품 등록에 관련한 영상입니다.
  • UCC 보러가기

팀 소개

서준배	김도희	유제균	장별하	장재욱	허진선
팀장 프론트 WebRTC 프론트 리더 프론트 아키텍처	메인&검색 페이지 카테고리 UI 디자인	백엔드 리더 인프라 CI/CD Docker 구성 회원관리 판매 프로세스	카카오페이 결제 실시간 채팅 구매 프로세스	프론트 UI/UX 디자인 와이어 프레임 디자인 시스템	1대1 채팅 마이페이지 UI 디자인
🏠 블로그 💻 github		💻 github

기술 스택

시작하기

1. 원격 repository를 clone 합니다.

2. frontend폴더에 .env파일 생성

cd frontend
cp .env.example .env

• 생성된 .env파일에 키와 주소 입력

REACT_APP_API_URL= https://localhost:8000

REACT_APP_KAKAO_MAP_API_KEY= 카카오 restapi 키

REACT_APP_OV_API_URL= openvidu 주소
REACT_APP_OV_SECRET= openvidu 키

3. 프로젝트의 root에서 docker-compose실행

docker-compose up -d

4. 서비스 실행 확인

• http://localhost:8000로 접속

5. 서비스 종료

docker-compose down

6. 자세한것은 exec폴더 확인

기획

대량 중고 거래 서비스

Garage Sale?

• Garage(차고) 앞에서 자신이 필요 없는 물품을 나열하고 이웃들과 자유롭게 구매, 판매하는 미국의 문화
• 대량으로 물품을 등록하고 구매를 하는 서비스를 이 Garage Sale에서 착안하여 화상 서비스와 융합한 거래 서비스를 구상하였습니다.

제공 서비스

1. 실시간 라이브 중고거래 서비스
2. 실시간 채팅
3. 1대1 채팅
4. 묶음 구매 및 가격 제안 기능
5. 라이브 지역, 카테고리 검색 기능
6. 구매내역, 판매내역 관리
7. 리뷰 관리
8. 카카오페이 결제

프론트엔드

• 피그마를 이용한 와이어 프레임을 제작
• 디자인 시스템 적용
• atom 디자인을 통해 재사용을 높이기

백엔드

• Socket.io를 통한 채팅 시스템
• 카카오페이 API를 활용한 결제 시스템
• API 명세서를 통한 API 구축
• Jenkins와 Docker를 이용한 CI/CD 구축
• ssl로 보안 적용

JIRA

• jira를 이용해 주 단위 스프린트로 기획 및 개발 진행
• 에픽, 스토리, 테스크로 이슈를 지정
  • 스토리는 개발, 테스크는 회의로 지정하였습니다.

burn down chart

• 주 단위로 이슈를 해결하고 계획하며 진행하였음

문서

• 노션을 통해 문서화를 진행
  • 노션 보러가기

회의록

• 주 단위로 회의록을 작성, 스프린트 회의, 회고, 팀미팅을 기록

개발 컨벤션

• IDE

  • IntelliJ
    • 2022.3.1 (Ultimate Edition)
  • Vscode
    • 1.75

• Framework

  • Node
    • 16.19.0
  • Java
    • OpenJDK 1.8.0_332
  • Springboot
    • 2.4.5
  • React
    • v17

• DBMS

  • MySQL
    • 5.7.35
  • MySQL Workbench
    • 8.0

• Deploy - Docker - Docker version 20.10.23, build 7155243 - Docker Compose - Docker Compose version v2.15.1 - OpenVidu - 2.25.0

• 네이밍 룰이나, 개발하는데 있어 변수명, 폴더 구조들을 미리 정해서 최대한 통일성 있도록 노력함

기능명세

에픽	FE담당자	BE담당자
라이브쇼 판매	서준배	유제균
라이브쇼 구매(실시간채팅)	장재욱	장별하
마이페이지	장재욱	허진선
라이브좋아요, 1:1채팅	서준배	유제균
메인	장재욱	김도희
회원관리	서준배	유제균

• 각 기능마다 담당을 지정
• 세부적으로 기능을 명시하며 우선순위를 지정하여 확인하도록 하였음

api명세

• api에 대해 각 담당자가 api의 주소와 요청과 응답의 흐름을 정리하였음

ERD

• erd cloud로 이동
  • ERD CLOUD를 이용해 작성

피그마(와이어 프레임)

• 피그마 보러가기
  • 피그마를 이용해 와이어 프레임 제작

SonarCube

• FrontEnd

• BackEnd

시연

물품 등록

제목과 카테고리를 선택	카메라로 사진을 촬영	촬영된 이미지에서 상품 영역, 가격 작성	등록한 물품 확인 후 라이브 시작

라이브쇼

제목과, 시청자 수가 표시 카메라 전환 카메라 온 오프 마이크 음소거 기능 방송 종료하기 버튼 실시간 채팅	우상단 버튼으로 판매 중인 목록 확인	구매자가 제안한 묶음 가격 조회

구매자가 물건의 가격을 제안

판매 목록에서 선택 가격을 선정	자신이 제안한 묶음 확인	판매자가 승인하고 결제하는 목록

판매가 완료된 상품은 표시

리뷰

구매한 내역 확인	판매한 내역 확인	1대1 채팅 확인

내가 작성한 리뷰	내가 받은 리뷰

1대1 채팅

1대1 채팅방 채팅방의 목록을 조회	1대1 채팅화면

즐겨찾기조회

라이브의 즐겨찾기(하트 버튼)를 한 목록을 조회한다

라이브 검색

검색 결과	지역 설정	카테고리 설정	정렬 설정 (시청자순, 가까운순)