하비티어
인플루언서 캠페인 커머스 플랫폼
역할 기반 사용자 흐름, 캠페인 상태 전이, Stripe 결제, Shopify 상품·주문 연동, Supabase Realtime 메시지, Vercel Cron 기반 배치 처리를 결합한 캠페인 커머스 운영 플랫폼입니다. Prisma 스키마와 Supabase 타입을 중심으로 사용자, 상품, 캠페인, 결제, 정산, 배송, 채팅, 콘텐츠 데이터를 구조화했습니다.
- 기간
- 2024.11 ~ 2025.03
- 분류
- 웹앱, 관리자


셀러와 인플루언서를 연결해 상품 기반 콘텐츠 제작, SNS 게시, 소셜 커머스 캠페인을 운영하는 웹 서비스와 관리자 콘솔을 구축했습니다. 사용자 웹은 Next.js 기반으로 캠페인 신청, 상품 등록, 메시지, 결제, 정산, 콘텐츠 제출까지 처리하고, 관리자 콘솔은 React Admin과 Supabase 데이터 계층으로 회원 심사, 상품/캠페인 관리, 결제·정산 관리, 운영 콘텐츠 관리를 지원합니다.
서비스 화면
역할 기반 캠페인 참여 흐름
인플루언서와 셀러 역할에 따라 접근 가능한 마이페이지와 캠페인 메뉴를 분리했습니다. 세션 갱신 시 회원 유형과 탈퇴 상태를 검사해 잘못된 화면 진입을 차단합니다.
상품 기반 캠페인 모집
셀러가 상품 이미지, 재고, 배송지, 캠페인 유형과 일정 정보를 등록하면 공개 상품 목록에 노출됩니다. 카테고리·가격·이름·캠페인 유형 필터로 탐색성을 높였습니다.
캠페인 신청과 계약 상태 관리
인플루언서는 상품별 캠페인을 중복 신청하지 못하도록 검사하고, 신청 시 채팅방과 캠페인 메시지를 함께 생성합니다. 상태별 카운트를 상품에 집계해 셀러가 진행 현황을 빠르게 확인합니다.
콘텐츠 제출과 수정 기한 관리
계약된 캠페인은 결과 보고서, 첨부 파일, 링크를 제출해 완료 처리됩니다. 결제 확정과 함께 보고서 수정 가능 기한을 저장해 사후 수정 범위를 데이터로 통제합니다.
실시간 메시지와 알림 처리
채팅 데이터 INSERT를 Supabase Realtime으로 구독해 대화 중인 방은 즉시 반영하고, 다른 방 메시지는 알림 콜백으로 처리합니다. 마지막 메시지와 미읽음 수를 별도 저장해 목록 조회를 빠르게 구성했습니다.
결제와 정산 가능 금액 관리
Stripe 결제 완료 웹훅과 Shopify 주문 집계를 결제 테이블에 반영합니다. 캠페인 수수료, 인플루언서 금액, 셀러 금액을 계산하고 정산 가능 상태 전환을 배치로 처리합니다.
관리자
회원 심사와 관리자 권한 관리
운영자는 사용자 목록에서 프로필 승인·반려를 처리하고 안내 메일을 발송할 수 있습니다. 관리자 생성 시 Supabase Auth 계정과 역할 테이블을 함께 갱신해 콘솔 접근 권한을 제어합니다.
상품과 카테고리 운영 관리
상품 상태, 카테고리, 셀러, 캠페인 유형으로 운영 데이터를 필터링하고 CSV로 추출할 수 있습니다. 상품 공개 상태 변경 시 관련 데이터와 Shopify 동기화를 API로 연결했습니다.
캠페인 진행과 결과 검수
관리자는 캠페인을 상태, 유형, 상품, 인플루언서, 셀러 기준으로 조회하고 제출 보고서와 첨부 파일을 확인합니다. 소셜 커머스 캠페인 완료 처리와 보고서 수정 기한 변경을 운영 화면에서 수행합니다.
결제·정산 운영 처리
결제와 정산 요청을 별도 리소스로 관리하며 사용자별 금액과 상태를 확인할 수 있습니다. 정산 승인 API는 사용자 누적 정산 금액과 결제별 정산 완료 시점을 함께 갱신합니다.
앱 화면



사용한 기술
- TypeScript
- Next.js
- React
- React Admin
- Vite
- Supabase
- PostgreSQL
- Prisma
- TanStack Query
- Zustand
- Tailwind CSS
- Radix UI
- MUI
- Stripe
- Shopify API
- Vercel Cron
- Zod
화면
- Next.js App Router 기반 사용자 웹과 서버 액션 처리
- Tailwind CSS와 Radix UI 기반 반응형 서비스 화면
- React Hook Form과 Zod 기반 입력 검증 폼 구성
- TanStack Query 기반 목록, 상세, 메시지 데이터 캐싱
- Zustand 기반 인증, 채팅, 앱 상태 분리 관리
- React Admin과 MUI 기반 운영 콘솔 리소스 관리
- Tiptap 기반 상품·가이드 HTML 콘텐츠 편집
서버 · 데이터
- Supabase Auth 기반 이메일·소셜 로그인과 세션 처리
- Supabase PostgREST 기반 사용자·상품·캠페인 데이터 처리
- Prisma 스키마 기반 PostgreSQL 도메인 모델 관리
- Next.js Route Handler 기반 결제, 정산, 배치 API 구성
- Stripe Checkout Webhook 기반 콘텐츠 캠페인 결제 확정
- Shopify API 기반 상품 동기화와 주문 매출 반영
- Supabase Realtime 기반 채팅 INSERT 구독 처리
- Nodemailer와 메시지 큐 테이블 기반 이메일 발송
인프라
- Vercel 배포와 vercel.json Cron 스케줄 운영
- Supabase Auth, Database, Storage, Realtime 구성
- Supabase CLI 로컬 개발 및 Edge Function 설정
- Prisma Migration 기반 데이터베이스 변경 이력 관리
- 환경별 .env 파일로 preview, production 설정 분리
- Stripe CLI Webhook 로컬 수신 스크립트 구성