경매 기반의 중고 안심 거래 플랫폼 🖍️

• 1. 프로젝트 개요
• 2. 담당 역할
• 3. 프로젝트 화면 구성
• 4. 내가 사용한 기술 스택
• 5. 기술적 이슈와 해결 과정
• 6. 팀원

다음과 같은 목차로 구성되어 있습니다.

💡 SSAFY 금융망 활용한 거래 시나리오

• 1원 인증, 계좌생성, 입금, 출금, 이체 등 거래 시나리오

💡 에스크로 결제

• 에스크로 서비스 제공자가 대금을 보관
• 구매자가 상품 확인 후 판매자에게 지급하는 안전한 결제 방식

💡 비크리 경매

• 가장 높은 입찰자가 낙찰받되, 두 번째로 높은 가격을 지불하는 경매 방식

💡 실시간 택배 현황 조회

• Delivery-Tracker API를 활용한 실시간 택배 현황 조회

💡 거래 완료 알람 문자 서비스

• coolSMS API를 사용한 거래 완료 알람 문자 서비스

💡 판매자와 거래자간 1:1 채팅 서비스

• stomp + kafka를 사용한 채팅 서비스

💡 챗봇 서비스

• Flask와 ChatGPT를 사용한 챗봇 서비스

💡 에스크로 결제 로직 개발

• SpringBoot와 JPA를 활용

💡 SSAFY 금융망 API 호출 로직 개발

• webClient를 사용하여 비동기적으로 SSAFY 금융망 API 호출을 관리하는 로직 분리

💡 거래 페이지 개발

💡 실시간 택배 현황 조회

• Delivery-Tracker 사용

경매 페이지
Spring Batch를 사용하여 설정된 시간에 자동 종료

경매 상세 페이지
비크리 경매 방식을 적용

내 거래 페이지
에스크로 결제 방식 적용

택배 현황 조회
Delivery-Tracker API 사용

내 계좌 잔액 조회
SSAFY 금융 API 사용

챗봇
사이트 이용에 관해 질문할 수 있다.

고객센터
회원은 문의글 작성 및 확인, 관리자는 문의글을 엑셀로 다운로드 있다.

💡 재사용성과 확장성을 고려한 코드 설계

• 팀원들이 각각 자신이 정의한 SSAFY 금융망 API 코드를 작성하면서 유지보수에 어려움 발생 → SSAFY 금융망 호출 코드와 응답 데이터를 통합적으로 정의하여 재사용성 향상, 개발 속도 향상 코드 바로보기

💡 에스크로 결제 개발

• 구매자는 에스크로 서비스 관리자(시스템 관리자 계좌)에 낙찰금을 입금한다. 코드 바로보기
• 판매자는 입금 금액을 확인한다.
• 판매자는 물품을 택배로 발송하고 운송 번호를 입력한다. 코드 바로보기
• 구매자는 물품을 받고 인수확인을 한다. 코드 바로보기
• 에스크로 서비스 관리자는 낙찰금을 판매자 계좌에 이체한다.
• 거래는 종료된다.
• 이 과정에서 판매자와 구매자간 1:1 채팅이 지원되고, 문제가 발생할 경우 고객센터로 문의한다.

💡 이미지 로딩으로 레이아웃이 이동하는 현상

• 이미지 로딩 동안 Skeleton UI를 보여줌으로서 CLS 해결 코드 바로보기

💡 API 호출 응답 대기 시간 UX로 해결

• 운송장 번호 입력 API 호출 후 응답 시간을 React-Query의 Optimistic Update로 해결 코드 바로보기

💡 컴포넌트 간 API 데이터 불일치

• 택배 현황 변경 시 모달 창과 거래 상세 페이지 간 데이터 불일치 오류 발생 → React-Query를 활용해 데이터 불일치 문제 해결
• 유저 정보 Props drilling 문제 → Recoil로 문제 해결

FullStack	FullStack	FullStack	FullStack	FullStack	FullStack
홍범선	황태건	유우준	장윤주	조성욱	이민정