Buysell

프로젝트 소개

중고 거래 플랫폼으로 개인 간의 중고 거래를 더욱 쉽게 접근할 수 있게 매칭해주는 게시판 형태의 서비스입니다.

중고 물품을 판매하는 글을 작성할 수 있고 구매자가 구매 요청을 하면 판매자와 구매자가 매칭 됩니다.

팀소개


팀장	부팀장	팀원	팀원
김성현	황승현	김민주	김현주
lazzykim	HwangSeungHyeon	codekmj1	hyunzoo123123
게시글, 리뷰, 결제	댓글, 검색, 배포, 위시리스트	인증, 인가, 소셜 로그인	프로필, 프론트

프로젝트 계기

최근에는 미니멀 라이프가 유행하면서 많은 사람들이 소유물을 정리하고 불필요한 물건을 줄이는 추세에 있습니다.

이러한 환경 변화 속에서 중고 거래 플랫폼은 판매자와 구매자가 함께 이익을 얻을 수 있는 효율적인 방법으로 부상하고 있습니다.

중고 거래는 더 이상 사용하지 않는 물건을 버리는 것이 아니라 재활용하고 다시 이용함으로써 자원을 절약하고 환경을 보호하는데 기여합니다.

이 서비스를 통해 개인 및 비즈니스적인 부분에서도 긍정적인 영향을 끼칠 것으로 생각되어 프로젝트를 선정하게 되었습니다.

주요기능

이메일과 비밀번호를 이용한 로그인
소셜 로그인: 카카오, 네이버, 구글
자기 프로필 수정
회원 탈퇴
판매 게시글 등록, 수정, 삭제
댓글 등록, 수정, 삭제
자신이 등록한 게시글 목록 확인
다른 사람의 판매 제품 구매
판매자 평점 확인
판매자 게시글 목록 확인

개발기간

2024.02.26(월) ~ 2024.04.04(목)

기술스택

✔️ Language

✔️ Version Control

✔️ IDE

✔️ Framework

Backend :

Frontend :

✔️ Deploy

Backend :

Frontend :

✔️ Local DBMS

✔️ Cloud DBMS

Backend :

Frontend :

서비스 구조

와이어프레임

API 명세서

멤버 API 명세서

프로필 API 명세서

계좌 API 명세서

게시글 API 명세서

댓글 API 명세서

리뷰 API 명세서

ERD

프로젝트 파일 구조

Backend

buysell
    ├─domain
    │  ├─comment
    │  │  ├─controller
    │  │  ├─dto
    │  │  │  ├─request
    │  │  │  └─response
    │  │  ├─model
    │  │  ├─repository
    │  │  └─service
    │  ├─common
    │  │  └─dto
    │  ├─exception
    │  │  └─dto
    │  ├─member
    │  │  ├─controller
    │  │  ├─dto
    │  │  │  ├─request
    │  │  │  └─response
    │  │  ├─model
    │  │  ├─repository
    │  │  └─service
    │  ├─order
    │  │  ├─controller
    │  │  ├─dto
    │  │  │  └─request
    │  │  ├─model
    │  │  ├─repository
    │  │  └─service
    │  ├─post
    │  │  ├─controller
    │  │  ├─dto
    │  │  │  ├─request
    │  │  │  └─response
    │  │  ├─model
    │  │  ├─repository
    │  │  └─service
    │  └─review
    │      ├─controller
    │      ├─dto
    │      │  ├─request
    │      │  └─response
    │      ├─model
    │      ├─repository
    │      └─service
    └─infra
        ├─auditing
        ├─querydsl
        ├─redis
        ├─security
        │  └─jwt
        ├─social
        │  └─jwt
        └─swagger

Frontend

├─assets
│  ├─css
│  ├─fonts
│  ├─img
│  │  ├─examples
│  │  ├─illustrations
│  │  ├─logos
│  │  │  ├─gray-logos
│  │  │  ├─medium-logos
│  │  │  ├─small-logos
│  │  │  └─white-logos
│  │  ├─shapes
│  │  └─small-logos
│  ├─js
│  │  ├─core
│  │  └─plugins
│  │      └─presentation-page
│  └─scss
│      └─material-kit
│          ├─bootstrap
│          │  ├─forms
│          │  ├─helpers
│          │  ├─mixins
│          │  ├─utilities
│          │  └─vendor
│          ├─cards
│          ├─custom
│          ├─forms
│          ├─mixins
│          ├─plugins
│          │  └─free
│          └─variables
├─components
├─examples
│  ├─cards
│  │  ├─blogCards
│  │  ├─counterCards
│  │  ├─infoCards
│  │  ├─reviewCards
│  │  ├─rotatingCards
│  │  └─teamCards
│  ├─footers
│  ├─navbars
│  └─tables
├─layouts
│  └─sections
│      ├─attention-catchers
│      │  ├─alerts
│      │  │  └─components
│      │  ├─modals
│      │  │  └─components
│      │  └─tooltips-popovers
│      │      └─components
│      ├─components
│      ├─elements
│      │  ├─avatars
│      │  │  └─components
│      │  ├─badges
│      │  │  └─components
│      │  ├─breadcrumbs
│      │  ├─button-groups
│      │  │  └─components
│      │  ├─buttons
│      │  │  └─components
│      │  ├─dropdowns
│      │  │  └─components
│      │  ├─progress-bars
│      │  │  └─components
│      │  ├─toggles
│      │  │  └─components
│      │  └─typography
│      │      └─components
│      ├─input-areas
│      │  ├─forms
│      │  │  └─components
│      │  └─inputs
│      │      └─components
│      ├─navigation
│      │  ├─nav-tabs
│      │  │  └─components
│      │  ├─navbars
│      │  │  └─components
│      │  └─pagination
│      │      └─components
│      └─page-sections
│          ├─features
│          │  └─components
│          └─page-headers
│              └─components
├─router
├─stores
├─utils
└─views
    ├─LandingPages
    │  ├─AboutUs
    │  │  └─Sections
    │  ├─Author
    │  │  └─Sections
    │  ├─components
    │  ├─ContactUs
    │  ├─posts
    │  └─SignIn
    ├─MySales
    ├─Pay
    │  └─Components
    ├─Presentation
    │  ├─Components
    │  └─Sections
    │      └─Data
    └─WishList

기술적 의사결정

RDS

[도입 이유]
- 비교적 빠르게 인스턴트를 생성하고 구성할 수 있음
- 필요에 따라 스토리지 용량을 확장할 수 있어 확장성이 높음
- IAM으로 접근권한을 세밀하게 관리할 수 있음
- 다양한 DB엔진 지원
[문제상황]
- AWS 서비스에 대한 사용법을 익히는데 시간이 필요함
- 다양한 옵션들의 과금정책이 복잡해 현재 상황에서 예상 비용을 계산하기 어려움
[해결방안]
- AWS 관련 자료는 다른 Cloud DB에 비해 방대한 양의 참고자료가 있기에 대부분의 문제는 검색으로 해결 가능
- AWS 비용 계산기를 사용해 사전에 예상비용을 계산하고 필요에 따라 리소스를 조정해야함
[의사 결정]
- AWS 강의와 자료검색들을 통해 학습시간을 최대한 단축
- 비용계산기로 대략적인 금액 계산 후 배포기간과 정해진 예산 이내로 리소스 조정
- 검색 시 제공되는 자료의 양이 많은 Amazon RDS 채택

ElastiCache

[도입 이유]
- 회원 가입 시 실제로 존재하는 이메일인지 확인 하기 위함
[문제상황]
- 이메일 인증 번호 저장 위치에 대한 결정 필요
[해결방안]
- Redis와 AWS RDS를 후보로 삼아 비교하고 평가하기로 함
[의사 결정]
- 인증 번호는 DB에 자주 접근하기 때문에, 사용자가 늘어날 경우 DB에 부담을 줄 수 있음
- 이메일 인증코드는 임시 데이터이기 때문에 임시데이터를 관리하는 측면에서 Redis를 사용하는것이 유리
- 빠른 속도와 자동 만료기능, 확장성에서 Redis가 우수하다고 판단해 채택

Security

[도입 이유]
- 온라인 플랫폼을 운영하는데 있어서 사용자 관리의 정교함이 중요하다 판단됨
- 필요한 데이터에 안전하고 빠르게 접근하도록 지원, 동시에 고객 데이터를 효율적으로 관리하는데 도움이 된다고 판단하여 도입함
[문제상황]
- 다양한 보안 위험에 노출되어 있기 때문에 공격으로부터 웹 애플리케이션을 보호해야 될 필요가 있음
- 사용자 인증 및 세밀한 권한 관리는 구현하기 복잡하여 이를 위한 효율적인 솔루션이 필요함
[해결방안]
- Spring Security를 도입하여 포괄적인 보안 솔루션을 제공 받아 보안 강화
- Spring Security의 다양한 보안 설정으로 애플리케이션의 특정 요구 사항에 맞게 보안 정책을 조정
[의사 결정]
- 보안 정책과 관련하여 팀 내에서 충분한 논의를 거치면서 Spring Security의 도입이 애플리케이션에 미치는 영향과 이점을 공유할 수 있어서 spring security 채택

CI/CD

[도입 이유]
- 코드 오류를 초기에 찾고 배포에 걸리는 시간을 줄이기 위함
[문제상황]
- CI를 적용하지 않고 수동으로 테스트를 했더니 시간이 많이 소요됨
- CD 미적용 시, 서버에 직접 JAR 파일 배포되는 시간이 지연 되어 검토도 지연 됨
[해결방안]
- Github Actions를 이용
- Jenkins를 이용
[의사 결정]
- CI/CD 서버가 내장되어 있어서 CI/CD 서버를 구축할 필요가 없음
- Github에 내장되어 있기 때문에 Github와 통합이 쉬움
- GitHub와의 자연스러운 연동으로 향상된 생산성을 제공하는 Github Actions를 사용

트러블 슈팅

🚨문제 배경

카카오 소셜로그인 기능 구현 중 발급 받은 엑세스 토큰이 유효하지 않는 문제가 발생.

이메일 값이 NULL로 들어가서 로그인 한 이메일 값과 일치하지 않기 때문.

⌛시도 했던 방법들

구글링을 통해 비슷한 이슈를 해결한 사람이 있는지 조사.
이메일 값을 가져오는 과정을 알아보기 위해 intellij 디버그 모드 사용.

🙌이전 코드와 비교

이전 코드는 구글 소셜로그인 이메일 값 가져오는 코드와 같음.

디버깅을 통해 카카오 소셜로그인은 이메일 값이 들어있는 attribute가 다른 것을 확인.

코드 수정 결과 정상적으로 이메일 값을 가져오는 것을 확인.

이전 코드

수정된 코드

🌟알게 된 점

소셜로그인 플랫폼 마다 이메일 값을 저장하고 있는 경로가 다르다는 것과, 이메일 값이 들어있는 경로를 코드로 작성해야 정상적으로 이메일 값을 가져올 수 있다는 것을 알게 됨.

구글 소셜로그인 이메일 값 경로

카카오 소셜로그인 이메일 값 경로

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
buysell-ui		buysell-ui
buysell		buysell
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

Buysell

목차

프로젝트 소개

팀소개

프로젝트 계기

주요기능

개발기간

기술스택

✔️ Language

✔️ Version Control

✔️ IDE

✔️ Framework

Backend :

Frontend :

✔️ Deploy

Backend :

Frontend :

✔️ Local DBMS

✔️ Cloud DBMS

Backend :

Frontend :

서비스 구조

와이어프레임

API 명세서

ERD

프로젝트 파일 구조

Backend

Frontend

기술적 의사결정

트러블 슈팅

🚨문제 배경

⌛시도 했던 방법들

🙌이전 코드와 비교

🌟알게 된 점

About

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages