포트폴리오
STYNA 쇼핑 프로젝트
상품 탐색부터 관리자 운영까지 구현한 패션 이커머스 프로젝트입니다.
- 기간
- 2025.08–현재
- 프로젝트 유형
- 쇼핑몰
- 역할
- 기획·디자인·프론트엔드·Firebase 구현
- 문제
- 주문 생성·취소 시 가격·재고·쿠폰·포인트를 서버에서 재검증
- 해결
- 검색·필터·정렬과 커서 기반 상품 탐색
- 결과
- 화면을 먼저 만드는 방식에서 벗어나 주문·취소·운영 순서와 검증 지점을 먼저 설계
문제
반복되는 정적 화면 대신 상품·주문·쿠폰·포인트·리뷰·문의 데이터를 기준으로 사용자 화면과 관리자 운영이 연결되는 쇼핑몰 구조를 구현했습니다.
제약
- 실제 PG 결제는 연동하지 않은 포트폴리오용 데모 주문
핵심 결정
- 정적 반복 페이지를 데이터·컴포넌트 기반으로 전환
- Functions와 Transaction에서 금액·재고·혜택을 재검증
- Custom Claims·Security Rules로 관리자 권한 보호
- 서버 데이터는 TanStack Query, 전역 인증은 React Context로 역할 분리
구현
- 검색·필터·정렬과 커서 기반 상품 탐색
- 장바구니·옵션·쿠폰·포인트를 연결한 데모 주문과 취소
- 리뷰·QnA·최근 본 상품·찜한 상품
- 상품·주문·회원·쿠폰·이벤트·문의 관리자 운영
- 자주 묻는 질문을 안내하는 AI·규칙 기반 상담 위젯
한계와 다음 개선
- 실제 PG 결제는 연동하지 않은 포트폴리오용 데모 주문
사용 기술
- Next.js 15
- React 19
- TypeScript
- CSS Modules
- TanStack Query
- Firebase Auth
- Firestore
- Firebase Storage
- Firebase Functions
- Firebase Hosting
구현 화면
