STYNA 쇼핑 프로젝트

문제

주문서를 보는 동안 가격이나 재고가 달라질 수 있고, 주문만 저장되거나 재고·쿠폰·포인트 중 일부만 변경되면 사용자 화면과 운영 데이터가 어긋날 수 있었습니다.

제약

• 실제 PG 결제는 연동하지 않은 포트폴리오용 데모 주문
• 클라이언트의 예상 금액은 안내용으로 사용하고 최종 주문 조건은 서버에서 판단

담당 범위

• 개인 프로젝트 100%: 기획·디자인·프론트엔드·Firebase 데이터 및 서버 로직
• 상품 탐색, 장바구니, 쿠폰·포인트, 데모 주문·취소 구현
• 리뷰·QnA, 관리자 운영, AI 상담 위젯 구현

핵심 결정

• 최종 금액을 클라이언트의 신뢰값으로 받지 않고, 상품·옵션·수량·쿠폰 ID 등 필요한 입력만 서버에 전달
• Functions에서 현재 가격·배송비·재고·쿠폰 소유 및 사용 조건·포인트 잔액을 재검증
• 일부 데이터만 변경되지 않도록 주문 생성과 취소에 필요한 변경을 Firestore 트랜잭션으로 처리

구현

• 주문 생성·재고 차감·쿠폰 사용·포인트 차감·선택한 장바구니 정리를 하나의 트랜잭션으로 연결
• 고객 취소는 주문 소유자와 허용 상태를 확인한 뒤 재고·쿠폰·포인트 복구와 함께 처리
• 관리자 상태 변경도 서버 권한과 전환 조건을 확인하고 변경 이력을 저장
• 주문 완료·주문 내역은 서버에 저장된 데이터를 표시하고 관련 TanStack Query 데이터를 갱신

구현 화면

검증 방법

• 2026.09 개발 기록에 주문 금액·배송비·쿠폰 계산과 쿠폰 만료·상태 판정의 도메인 테스트 항목을 정리했습니다.
• 주문서 예상 금액 계산, 주문 서비스와 주문서 화면의 테스트 파일을 기술 기록에서 확인할 수 있습니다.
• 검증 자료는 개발 기록의 범위입니다. 실제 PG 결제 운영이나 매출 성과를 검증한 프로젝트는 아닙니다.

결과

• 상품 선택에서 주문 생성·취소·관리자 처리까지 이어지는 데모 구현
• 금액·혜택·권한의 최종 판단과 관련 데이터 변경을 서버 처리로 연결

한계와 다음 개선

• 실결제를 운영하려면 PG 연동과 결제 승인·취소 처리에 대한 별도 검증이 필요

기술 기록과 근거

• 주문 생성·취소와 서버 검증 설계 (새 창)
• 테스트 항목과 품질 검증 기록 (새 창)

사용 기술

• Next.js 15
• React 19
• TypeScript
• CSS Modules
• TanStack Query
• Firebase Auth
• Firestore
• Firebase Storage
• Firebase Functions
• Firebase Hosting