Banana Store

Banana Store

🔗 프로젝트 회고문서

🔗 프로젝트 Issues

📌 프로젝트 소개

상품 결제를 중심으로 한 E-Commerce 프로젝트입니다.

⚙️ 사용기술

Typescript/관계형 DB의 지원이 있어 선택하게 되었습니다.

라이브러리에 종속되지 않고, Copy&Paste방식으로 커스텀이 용이하여 선택했습니다.
TS타입의 안정성과 유효성검증과정에 있어 Yup보다 더 적합하다고 판단했습니다.
jest보다 테스트설정 작업이 간단하여 선택했습니다.
E2E테스트를 위해 도입했습니다.

🔨 아키텍처

📄 Database ERD

📄 FE Folder구조

🎯 서비스 기능

서비스에서 제공하는 기능은 다음과 같습니다.

회원가입/로그인(Supabase Auth)
일반 사용자
1. 상품구매 (아임포트 연동)
2. 장바구니
3. 상품 필터기능 (검색어, 태그, 가격범위)
4. 구매내역 조회
판매자
1. 판매상품 등록
2. 주문내역 조회

🎯 주요 기능 소개

✅ 핵심기능 💥 트러블슈팅 ⚙️ 성능최적화

✅💥 1. 아임포트 결제 기능

아임포트 SDK를 활용해 가상결제 기능을 구현했습니다.
상품 결제 단계 진입 시, 재고를 우선감소하여 동시 구매로 인한 재고 부족 문제를 방지합니다.
결제 취소 시 재고를 원상복구하고, 결제 완료 시 주문 상태를 업데이트하는 프로세스를 통해 안정적인 재고 관리와 원활한 결제 흐름을 구현했습니다.

sequenceDiagram
    actor User
    participant 상품상세페이지
    participant Order/OrderDetail
    participant Product
    participant Iamport
    participant PayHistory

    User->>상품상세페이지: 구매버튼 클릭
        상품상세페이지-->>Order/OrderDetail: 생성
    Order/OrderDetail-->>Product: 재고수량 우선감소
    Iamport->>User: 결제창 불러오기
    alt 결제 취소
        Iamport-->>Product: 재고수량 원상복구
        Product-->>Order/OrderDetail: 주문 삭제
    else 결제 완료
        Iamport->>User: 결제완료 화면 Redirect
        User-->>Iamport: paymentId로 결제조회API 요청
        Iamport-->>PayHistory: 결제내역 추가
        PayHistory-->>Order/OrderDetail: 주문상태 업데이트(결제완료 확인)
    end