상품 탐색부터 주문 생성·취소, 관리자 상품·주문 관리까지 구현한 패션 쇼핑몰입니다. 주문 금액과 재고를 서버에서 확인하고, 관련 데이터가 함께 변경되도록 처리했습니다.

rt_styna-product.jpg

상품 상세와 옵션 선택 · 2026.10.02 공개 서비스 캡처

기간 2025.08–현재 · 개인 프로젝트

담당 기획·디자인·프론트엔드·Firebase 인증 및 서버 기능

기술 Next.js · React · TypeScript · TanStack Query · Firebase

쇼핑몰 데모 · GitHub

포트폴리오용 데모입니다. 실제 PG 결제는 연동하지 않았습니다.

상품 선택에서 주문서까지

상품 목록·상세, 장바구니, 주문서와 주문 완료 화면을 만들고 관리자 상품·주문 관리까지 연결했습니다. 쇼핑몰 운영 화면을 제작했던 경험을 바탕으로, 화면에서 고른 상품이 주문과 재고 처리까지 이어지는 과정을 직접 구현했습니다.

image.png

기존 개발 기록의 쇼핑 화면

주문 금액과 재고를 서버에서 확인

주문서를 보고 있는 동안 상품 가격이나 재고가 달라질 수 있습니다. 클라이언트가 보낸 값을 그대로 저장하지 않고 Firebase Functions에서 상품 가격·배송비·쿠폰·포인트 조건을 다시 확인했습니다.

주문 생성과 재고 차감은 트랜잭션으로 묶었습니다. 주문 취소도 재고·쿠폰·포인트 복구와 함께 처리해 일부 데이터만 변경된 상태가 남지 않도록 구성했습니다.

image.png

기존 개발 기록의 주문 관련 화면