Case Study
Shopping Mall
커머스는 보여주는 것만으로 끝나지 않습니다.
탐색, 장바구니, 결제, 관리까지 — 하나라도 어긋나면 고객은 떠납니다. AI로 풀사이클을 빠짐없이 완성합니다.
당신의 서비스에서도 그렇게 합니다.
커머스 풀사이클
상품을 고르고, 담고, 결제하고, 관리합니다. 고객과 관리자 양쪽 모두 빠짐없이.
Technical Highlights
설계 결정 4가지
하이브리드 장바구니
Zustand + localStorage로 비로그인 장바구니를 유지하고, 로그인 시 Supabase cart_items 테이블과 자동 동기화. 세션이 끊겨도 장바구니는 살아 있습니다.
듀얼 결제 플로우
토스페이먼츠 위젯 SDK로 카드·간편결제를 처리하고, 계좌이체 선택 시 주문 생성 후 관리자가 수동 확인. 두 경로 모두 주문 상태 머신으로 추적합니다.
RLS 기반 권한 분리
Supabase Row-Level Security로 고객은 자기 주문만, 관리자는 전체를 봅니다. Server Actions에서 역할 검증을 한번 더 걸어 직접 POST 공격도 차단합니다.
시네마틱 브랜드 UI
Framer Motion 마스크 리빌, 스태거 애니메이션, 듀얼 이미지 호버. Pretendard + Montserrat 조합으로 하이엔드 패션 브랜드의 톤을 코드로 구현합니다.
Stack
기술 구성
Frontend
- Next.js 16 (App Router)
- TypeScript strict mode
- Tailwind CSS v4
- Framer Motion 12
- Zustand (장바구니)
- shadcn/ui
- Pretendard + Montserrat
Backend
- Supabase (PostgreSQL)
- Row-Level Security
- Server Actions
- Supabase Auth (OAuth)
- Google + Kakao 소셜 로그인
- Supabase Storage (이미지)
- Toss Payments SDK
Infra
- Vercel (자동 배포)
- Supabase Cloud
- Daum Postcode API
- Next.js Image 최적화
- Server Components
- Responsive (Mobile-first)
- Lighthouse 90+
Live Demo
직접 만져보세요
데모 관리자 계정으로 대시보드에 접속해 상품 등록, 주문 관리, 문의 답변을 직접 체험할 수 있습니다.
브랜드 경험. 결제 플로우. 관리자 대시보드. AI와 함께 설계했습니다.
꿈꾸는 프로젝트, 구현해 드리겠습니다.