Skip to content

angielxx/baggu-baggu

BranchesTags

Repository files navigation

🌷 바꾸바꾸 - 물물교환 중개 플랫폼

💜 프로젝트 진행 기간

2023.01.03(화) ~ 2023.02.17(금) SSAFY 8기 2학기 공통프로젝트 - 바꾸바꾸


🎵 바꾸바꾸 - 배경

기존의 당x마켓, 중고x나 등의 중고물품 거래 플랫폼을 사용하면서 불편함을 느끼신적이 있나요? 예를들면 악성 사용자의 무분별한 네고요청, 찔러보기라던가, 오래된 물건을 올릴때 이 물건의 적정 가격을 설정하는데에서 오는 어려움 말이에요!

바꾸바꾸는 기존 중고거래 플랫폼의 불편함을 개선하고, 게임성을 동시에 제공하도록 기획한 물물교환 플랫폼입니다! 우리 '바꾸' 실래요?


💜 바꾸바꾸 - 개요

- 나에게 가치없는 물건을 가치있는 물건으로 -

바꾸바꾸는 '물건을 바꾼다' 에서 바꾸를 활용해 만든 단어입니다. 바꾸바꾸는 본인에게 필요없어진 물건을 등록하고, 다른 사용자의 바꾸 요청이 오기를 기다리거나, 다른사람이 등록한 물건에 바꾸 요청을 보내 매칭이 성사되면 바꾸를 진행하는 물물교환 중개 기능을 제공하는 웹서비스입니다.

기존의 중고거래 플랫폼의 불편함을 개선한 것 뿐만 아니라, 최근에 완료된 바꾸정보를 피드로 확인할 수 있고, 놀라운 바꾸, 재미있는 바꾸를 보게된다면 좋아요 기능으로 감상을 표현할 수 있습니다. 또한 게시글에 쌓인 바꾸신청 목록중에 어떤 상품과 교환할까 고민하는 재미또한 제공하죠! 정해진 돈으로 거래하는 기존의 중고거래 플랫폼의 경험과는 다른 새로운 경험을 느낄 수 있습니다!


💜 주요 기능

  • 바꾸 리스트 확인

    • 주변에 등록된 물건 정보를 최근 등록된 순서로 확인할 수 있습니다. 최근 완료된 바꾸정보도 확인할 수 있어요!
    • 최근 완료된 바꾸중에 신기한 바꾸, 재미있는 바꾸가 있다면 좋아요를 눌러주세요!

  • 등록 물건 상세

    • 주변에 등록된 물건 목록중 마음에 드는 물건이 있다면 상세 정보 페이지로 들어가 보세요! 등록한 유저의 간단한 정보, 물건의 사진, 물건 상태에 대한 정보를 확인할 수 있어요 거기에 이 물건에 바꾸 요청을 보낸 다른 사람들은 어떤 물건으로 신청했는지도 확인할 수 있답니다!


  • 유저 정보 상세

    • 특정 유저의 정보를 확인할 수 있어요! 이 유저가 어떤 물건들을 등록했는지, 과거에는 어떤 바꾸를 해왔는지, 거래 상대가 이 유저에게 남긴 리뷰도 확인할 수 있답니다


  • 바꾸 요청

    • 주변에 등록된 물건들을 구경하다가 나에게 꼭 필요한 물건을 발견했나요? 게시글에 들어가서 바꾸 신청 버튼을 눌러 상대방에게 바꾸 신청을 보내보세요! 본인이 등록한 게시글중 최대 세 개 까지 골라서 요청을 보낼 수 있어요! 상대방이 요청을 수락하게 하기위해서는 본인이 등록한 물건중 상대방에게 필요할 듯한 물건을 골라 요청을 보내는게 좋겠죠?

    • 한 게시글에 대한 바꾸 요청은 1인당 최대 세 가지의 물건으로 요청을 보낼 수 있고, 동시에 요청보낼 수 있는 최대 인원수는 10명이에요! 다른 사람들의 신청으로 가득 차기 전에 서둘러 요청을 보내는 것이 좋겠죠?


  • 바꾸 수락

    • 본인이 등록한 물건에 바꾸 요청이 들어왔는데 그중에 마음에 드는 물건을 발견하셨나요? 바꿀 물건 선택 버튼을 눌러 어떤 물건과 거래할지 선택하고 선택 완료 버튼을 눌러보세요! 선택 완료 누르면 상대방과의 채팅이 활성화 된답니다!


    알람 기능

    • 바꾸 요청을 보냈는데 상대방이 거래 수락을 누른다면 채팅이 활성화 되었다는 알람이 도착해요! 화면 우측 상단에 있는 종 모양의 아이콘에 푸른 불빛이 점멸하고 있다면 매칭이 성사되었다는 뜻이니 두근거리는 마음을 가다듬고 상대방과 채팅을 나눠 약속시간, 장소에 대해 이야기 해 봅시다!


    채팅 기능

    • 바꾸바꾸는 실시간 채팅 기능을 지원해요! 상대방과 원활한 대화를 나누기 위해서는 실시간 채팅 기능이 필수죠!

    • 상대방이 채팅을 보냈는데 읽지 않았다면 하단 바의 채팅 아이콘에 푸른 불빛이 들어와 있을거에요!


    위치정보 등록

    • 바꾸바꾸는 외부API를 이용하여 사용자의 위치를 저장하고, 사용자의 위치 기반으로 주변에 등록된 물건들을 보여줍니다.


    후기 작성 기능

    • 바꾸가 완료되면 채팅창에서 바꾸상태를 변경할 수 있어요, 거래가 완료되면 버튼을 눌러 거래 완료로 변경하고 상대방에 대한 리뷰를 작성할 수 있어요! 좋은 바꾸였다면 상대방에 대한 리뷰를 남기고 나중에 다른 사용자가 상대방의 정보를 볼 때 참고할 수 있게 도와주세요!

시스템 구성도

architecture

✔ 주요 기술

Backend - Spring

  • JDK 11
  • Springboot 2.7.7
  • Gradle
  • Spring Security
  • Spring Data JPA
  • Springfox Swagger UI: 2.9.2
  • Lombok
  • Logger
  • Json Web Token
  • AWS
  • Spring data mongodb reactive

Frontend

  • React 17
  • React Query
  • TailwindCSS
  • Styled-Component
  • Zustand

개발환경

  • OS: window 10
  • IDE
    • intelliJ
    • VScode
    • Figma
  • Database
    • DBMS: Mariadb 10
    • NoSQL: Mongodb 5.0.14
    • Cache: Redis 7.0.7
    • SearchEngine: ElasricSearch
  • Server: AWS EC2
    • OS: Ubuntu 20.04 LTS (GNU/Linux 5.4.0-1018aws x86_64)
  • File Server: AWS S3
  • CI/CD: Jenkins, Docker, Nginx
  • Server
    • AWS EC2
    • AWS S3
    • AWS CloudFront
    • Ubuntu 20.04 LTS
    • Docker
    • Jenkins
    • CertBot
  • IDE
    • HeidiSQL
    • intelliJ IDEA
    • VSCode
    • VIM

✔ 프로젝트 파일 구조

Back

├── backend
│   ├── gradle
│   │   └── wrapper
│   └── src
│       ├── main
│       │   ├── java
│       │   │   └── com
│       │   │       └── project
│       │   │           └── baggu
│       │   │               ├── config
│       │   │               │   ├── filter
│       │   │               │   ├── oauth
│       │   │               │   │   └── handler
│       │   │               │   └── token
│       │   │               ├── controller
│       │   │               ├── domain
│       │   │               │   └── enumType
│       │   │               ├── dto
│       │   │               ├── exception
│       │   │               ├── raceCondition
│       │   │               ├── repository
│       │   │               ├── sample
│       │   │               │   ├── item
│       │   │               │   ├── tradeRequest
│       │   │               │   └── user
│       │   │               ├── service
│       │   │               └── utils
│       │   └── resources
│       │       └── elastic
│       └── test
│           └── java
│               └── com
│                   └── project
│                       └── baggu
│                           ├── IntegrationTest
│                           ├── Security
│                           ├── UnitTest
│                           ├── raceCondition
│                           └── sample
├── chat
│   ├── gradle
│   │   └── wrapper
│   └── src
│       ├── main
│       │   ├── java
│       │   │   └── com
│       │   │       └── cos
│       │   │           └── chatapp
│       │   │               ├── controller
│       │   │               ├── domain
│       │   │               ├── dto
│       │   │               └── repository
│       │   └── resources
│       └── test
│           └── java
│               └── com
│                   └── cos
│                       └── chatapp
├── database
│   └── config
├── elasticsearch
├── frontend
│   ├── public
│   └── src
│       ├── api
│       │   └── apis
│       ├── assets
│       │   ├── fonts
│       │   ├── icons
│       │   └── images
│       │       ├── brand
│       │       └── kakao_sync_login
│       │           ├── complete
│       │           │   ├── en
│       │           │   └── ko
│       │           └── simple
│       │               ├── en
│       │               └── ko
│       ├── components
│       │   └── common
│       ├── hooks
│       ├── pages
│       │   ├── Chat
│       │   ├── ChooseRequest
│       │   ├── DeleteRequest
│       │   ├── Example
│       │   ├── Home
│       │   ├── Item
│       │   ├── MakeRequest
│       │   ├── MyBaggu
│       │   ├── MyProfile
│       │   ├── Notification
│       │   ├── Review
│       │   ├── Search
│       │   ├── Start
│       │   └── User
│       ├── store
│       ├── styles
│       └── utils
├── notify
│   ├── gradle
│   │   └── wrapper
│   └── src
│       ├── main
│       │   ├── java
│       │   │   └── com
│       │   │       └── project
│       │   │           └── notify
│       │   │               ├── controller
│       │   │               ├── domain
│       │   │               └── repository
│       │   └── resources
│       └── test
│           └── java
│               └── com
│                   └── project
│                       └── notify
├── output
└── redis
    └── config

✔ 협업 툴

  • Git
  • Notion
  • JIRA
  • MatterMost
  • Discord
  • kakao Talk

✔ 협업 환경

  • Gitlab
    • 코드의 버전을 관리
    • MR시, 팀원이 코드리뷰를 진행하고 피드백 게시
  • JIRA
    • 매주 목표량을 설정하여 Sprint 진행
    • 업무의 할당량을 정하여 Story Point를 설정하고, In-Progress -> Done 순으로 작업
  • Notion
    • 회의가 있을때마다 회의록을 기록하여 보관
    • 기술확보 시, 다른 팀원들도 추후 따라할 수 있도록 보기 쉽게 작업 순서대로 정리
    • 컨벤션 정리
    • 간트차트 활용하여 개발 계획 관리
    • 스토리보드, 스퀀스다이어그램, 기능명세서 등 모두가 공유해야 하는 문서 관리

✔ 팀원 역할 분배

  • 이안채: 팀장, API설계, CI/CD보조, 인증서버 구축 및 검색 시스템 고도화
  • 최웅렬: CI/CD 구축, 깃 관리, 채팅서버 구현, 인프라 총괄, 테크리더
  • 김소정: 인증서버 구축, API설계, S3 클라우드 프론트 구축, PPT제작
  • 배정현: 도메인 설계, 채팅기능 구축, 알림기능 구축, API설계, 테스트코드 작성
  • 이은지: UI/UX 디자인, 프론트 개발, 파일 트리 설계, Figma 담당, UCC 편집
  • 이승희: 부팀장, 기획, PM, UI/UX 디자인, 프론트 개발, 발표

✔ 프로젝트 산출물

✔ 바꾸바꾸 서비스 화면

게시물 등록

로그인

교환 수락

교환 신청

예약 중

실시간 알람 및 실시간 채팅방 개설

채팅

About

중고거래 물물교환 플랫폼

Topics

react styled-components tailwindcss react-query zustand

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages