뉴샵 (NewShop)

뉴샵 (NewShop)

B2B/B2C 멀티벤더 마켓플레이스 플랫폼

프로젝트 개요

뉴샵(NewShop)은 다중 상가(마켓) 기반의 B2B/B2C 커머스 플랫폼입니다. 구매자, 판매자, 에이전트(중간 유통), 관리자 등 4가지 역할의 사용자가 참여하며, 에이전트 네트워크를 통한 주문 중계와 정산, 영수증 관리까지 아우르는 종합 마켓플레이스 시스템입니다.

한국, 미국, 중국, 대만 등 다국적 구매자를 위한 다국어(한/영/중) UI와 환율 자동 변환을 지원하며, Twilio SMS 알림, 실시간 주문 상태 추적, Excel 일괄 처리 등 기업 수준의 운영 기능을 갖추고 있습니다.

시스템 아키텍처

PRESENTATION LAYER
구매자 웹
상품 탐색 · 주문 · 알림		 판매자 웹
상품 관리 · 주문 관리 · 영수증		 에이전트 웹
주문 중계 · 매입 · 정산		 관리자 웹
회원 · 카테고리 · 공지
▼
APPLICATION LAYER — SvelteKit (SSR + API Routes)
Route Groups
(main) / (seller) / (agent) / (admin)		 API Endpoints
REST API × 18개		 Repositories
데이터 접근 계층 × 24개		 Hooks
Auth · Session · Logging
▼
INFRASTRUCTURE LAYER
Supabase
Auth · Realtime		 PostgreSQL
Prisma ORM · 31 Models		 Alibaba OSS
이미지 · 파일 저장소		 Twilio · Google
SMS · 번역 API
▼
DEPLOYMENT — Docker · AWS ECR · EC2 · PM2 · GitLab CI/CD

주문 처리 프로세스

1. 구매자 주문
상품 선택 → 장바구니 → 주문 요청		 → 2. 에이전트 확인
신규 주문 수신 → 주문 수락		 → 3. 판매자 승인
발주 확인 → 주문 승인/거절		 → 4. 배송 · 정산
배송 시작 → 영수증 발급 → 매입 정산

기술 스택

구분 기술
프레임워크SvelteKit 2.3 + Svelte 4.2 (SSR)
빌드 도구Vite 5.0
UI/스타일링Tailwind CSS 3.4 + DaisyUI 4.6 (커스텀 테마)
인증Supabase Auth (SSR 세션 관리)
데이터베이스PostgreSQL + Prisma ORM 5.8 (31개 모델)
파일 저장소Alibaba Cloud OSS
다국어Paraglide-JS (한/영/중) + Google Cloud Translate
알림Twilio SMS + 인앱 알림 시스템
데이터 처리ExcelJS / XLSX (Excel 가져오기/내보내기), Zod (검증), Luxon (날짜)
배포Docker + AWS ECR/EC2 + PM2 + GitLab CI/CD

구매자 화면

1. 메인 페이지 — 배너, 상가 목록, 뉴샵 Pick

구매자 메인 - 배너 및 상가 목록
메인 배너, 상가 목록, 뉴샵 Pick (이번주 인기 TOP) 섹션

2. 메인 페이지 — 추천 상품, 신규 상품

구매자 메인 - 추천 및 신규 상품
뉴샵 Pick 상품 카드와 신규 상품 섹션

3. 상품 상세 — 옵션 선택, 다국 환율, 장바구니

상품 상세
상품 상세: 중국/대만/미국 환율 자동 변환, 옵션 선택
장바구니
장바구니: 판매자별 상품 그룹핑, 총 주문 금액 계산

4. 주문 완료 · 주문 현황 · 주문 상세

주문 완료
주문 완료: 추천 상품 노출
주문 현황
주문 현황: 주문 상태, 상품 수량, 금액 요약
주문 상세
주문 상세: 주문 상품, 배송지, 결제 내역
구매자 알림
알림: 배송 시작, 공지사항 등 실시간 알림

판매자 화면

1. 상품 관리 · 주문 관리

판매자 상품 관리
상품 관리: 상품 목록, 판매/게시 상태, 일괄 상태 변경
판매자 주문 관리
주문 관리: 에이전트별 주문, 주문 승인/거절, 댓글

2. 상품 등록 — 기본 정보, 옵션, 이미지

상품 등록 - 기본 정보
카테고리, 상품명, 가격, 할인, 최소 주문 수량
상품 등록 - 옵션 설정
옵션 종류(컬러/사이즈), 옵션 항목별 가격 설정
상품 등록 - 이미지
대표 이미지, 추가 이미지(최대 9장), 상품 상세 설명
상품 등록 - 상태/미리보기
상품 정보 미리보기, 판매상태/게시상태 설정

3. 영수증 관리 · 알림

판매자 영수증 관리
영수증 관리: 발급/미발급 상태, 영수증 업로드
판매자 알림
알림: 신규 주문, 댓글, 공지사항 등 실시간 알림

에이전트 화면

1. 신규 주문 · 전체 주문 목록

에이전트 신규 주문
신규 주문: 구매자 정보, 상품, 옵션, 금액 확인 및 승인
에이전트 전체 주문 목록
전체 주문 목록: 상태별 필터, 상태 변경, Excel 다운로드

2. 구매자 목록 · 누적 매입

에이전트 구매자 목록
구매자 목록: 연결 구매자 관리, 직접 추가 기능
에이전트 누적 매입
누적 매입: 판매자별 총 매입 금액, 상세 내역

3. 전체 영수증 · 알림

에이전트 전체 영수증
전체 영수증(장끼) 목록: 발급 상태, 수기 추가
에이전트 알림
알림: 댓글, 주문 거절, 영수증 업로드, 공지사항

관리자 화면

1. 가입 승인 · 공지사항

관리자 가입 승인
가입 승인: 구매자/판매자별 가입 승인 관리
관리자 공지사항
공지사항: 작성/수정/삭제/게시, 목록-상세 분할 뷰

2. 카테고리 & 상가 · 에이전트 목록

관리자 카테고리 & 상가
카테고리 & 상가: 상품 카테고리, 상가(마켓) 관리
관리자 에이전트 목록
에이전트 목록: 에이전트 카드, 연결 구매자 수 확인

3. 회원 관리 · 알림

관리자 구매자 목록
구매자 목록
관리자 판매자 목록
판매자 목록
관리자 알림
관리자 알림

사용자 역할 구조

구매자 (BUYER)

· 상품 탐색 · 검색
· 장바구니 · 주문
· 주문 현황 추적
· 알림 수신
· 다국어 · 환율		 판매자 (SELLER)

· 상품 등록 · 관리
· 주문 승인 · 거절
· 영수증 발급
· 알림 수신
· 댓글 소통		 에이전트 (AGENT)

· 주문 중계 · 확인
· 구매자 연결 관리
· 누적 매입 정산
· 영수증 관리
· 사입삼촌 역할		 관리자 (ADMIN)

· 가입 승인 관리
· 카테고리 · 상가
· 공지사항 · 배너
· 환율 · 추천 상품
· 전체 회원 관리

프로젝트 규모

항목 내용
페이지 라우트151개 (구매자/판매자/에이전트/관리자/모바일)
API 엔드포인트18개 REST API
데이터베이스 모델31개 (Prisma Schema 734줄)
데이터 리포지토리24개
소스 파일528개 (.svelte, .js, .ts)
SVG 아이콘50개+ (커스텀 디자인 시스템)
사용자 역할6종 (구매자/판매자/에이전트/서브에이전트/관리자/게스트)
주문 상태15개+ (다단계 워크플로우)
지원 언어한국어, 영어, 중국어
지원 국가한국, 미국, 중국, 대만