PORTFOLIO · 2026
B2B SaaS 풀스택 개발 · 결제/크레딧 시스템 안정화

광고주 리워드 마케팅
캠페인 관리 B2B SaaS 플랫폼

— 광고주가 캠페인을 등록·집행하는 3-앱 리워드 마케팅 SaaS —

광고 · 마케팅 SaaS 3-앱 모노레포 포트원 · KG이니시스 결제 크레딧 트랜잭션
도메인광고·마케팅 SaaS · 리워드 마케팅
담당 역할Next.js 풀스택 개발
개발 기간30일 (4주 · 5단계)
규모3개 앱 · 50+ 모델 · 28종 라우터
70% 인수 → 핵심 로직 완성 런칭 안정화
캠페인 관리 B2B SaaS 플랫폼CONTENTS
C
Table of Contents

목차

  • 1프로젝트 개요03
  • 2주요 기능04
  • 3프로젝트 배경 — 문제 · 목표 · 해결05
  • 4핵심 기술 특징06
  • 5기술 스택07
  • 6시스템 아키텍처08
  • 7핵심 기능 상세09
  • 8진행 단계10
  • 9프로젝트 성과11
  • 10라이브 데모 · 유사 경험12
캠페인 관리 B2B SaaS 플랫폼 포트폴리오02
캠페인 관리 B2B SaaS 플랫폼01 · 프로젝트 개요
1
Overview

프로젝트 개요

약 70% 수준으로 구축된 기존 코드베이스를 인수해, 결제·크레딧·회원·캠페인 핵심 비즈니스 로직을 완성하여 런칭 가능한 수준으로 끌어올리는 개발 및 안정화 프로젝트. 이미 구축된 화면·구조·기술 스택을 존중하면서 결제와 크레딧을 안전하게 운영할 수 있는 시스템으로 마무리하는 것이 과업의 중심.
3앱
단일 모노레포
28종
tRPC 라우터(13+15)
50+
Prisma 모델
30+
마이그레이션

메인 타깃

광고주

캠페인을 직접 등록·집행하는 개인/사업자.

운영팀(어드민)

광고주 캠페인을 관리·운영하는 자사 운영팀.

리워드 앱 사용자

캠페인을 통해 보상을 받는 Luckffle 사용자.

작업 범위 — Next.js 풀스택 개발

  • 기존 코드베이스 분석 — pnpm 모노레포 구조, tRPC 라우터·Prisma 스키마 매핑, 화면-도메인 연결 정리
  • 결제/크레딧 시스템 — 포트원(KG이니시스) 결제 연동, 검증·웹훅 처리, 충전·차감·환불 트랜잭션
  • 회원/인증 보완 — 가입 플로우, 아이디/비밀번호 찾기, 솔라피 SMS·KG이니시스 본인인증, 세션 유지
  • 캠페인 관리 완성 — 단계별 위저드 검증, 상태값 처리, 진행 중 수정 잠금, 복제 기능
  • 프론트엔드 — 랜딩 반응형 신규 개발, 통계 대시보드 API 바인딩, 1:1 문의, 노션 임베드
  • 어드민·환경 정리 — 광고주 문의 관리 신규 개발, 개발/운영 환경 변수 분리, 리팩토링·배포 점검
지원 환경: PC Web 우선(B2B Admin · Dashboard) + 회원가입/로그인 모바일 반응형
캠페인 관리 B2B SaaS 플랫폼 포트폴리오03
캠페인 관리 B2B SaaS 플랫폼02 · 주요 기능
2
Features

주요 기능

결제 · 크레딧 시스템 (수익 핵심)

결제 연동 · 충전

포트원(KG이니시스) 결제 위젯 + 검증·웹훅, 성공 시 크레딧 자동 충전.

크레딧 차감 · 잔액 검증

캠페인 집행 시 잔액 검증 → 원자적 차감, 동시 요청 경합 방지.

환불 워크플로우

7일 정책·소진 크레딧 불가 정책 반영, 결제·크레딧 정합성 보장.

회원 · 캠페인 · 운영

회원가입 · 본인인증

개인/사업자 분리 가입, 솔라피 SMS·KG이니시스 본인인증, 아이디/비밀번호 찾기.

캠페인 단계별 위저드

유형→디자인→리워드→크레딧→세팅 멀티스텝 폼, Zod 검증·진행 중 수정 잠금·복제.

광고주 대시보드·마이페이지

캠페인 현황·크레딧·결제 내역 조회, Recharts 통계, 1:1 문의·노션 임베드.

운영자 어드민

광고주 문의 관리 신규 개발, 노출·크레딧 요약·푸시·기프티쇼 임포트 안정화.

캠페인 관리 B2B SaaS 플랫폼 포트폴리오04
캠페인 관리 B2B SaaS 플랫폼03 · 프로젝트 배경
3
Background

프로젝트 배경

문제점

  • 런칭 차단 — 70% 구축 상태에서 핵심 수익 모듈(결제·크레딧)이 미연결되어 런칭이 불가능
  • 구현 인력 공백 — 기존 외주 개발자 이탈, 내부 개발자는 PR/배포만 담당하는 풀타임 직장인
  • 카드사 심사 지연 위험 — KG이니시스 PG 심사는 통과했으나 카드사 심사용 결제 화면 캡처본 필요
  • 데이터 사고 위험 — 캠페인 단계별 검증·진행 중 수정 잠금 등 비즈니스 룰 미반영

목표 → 해결 방향

70% 인수
구조·컨벤션 파악
→
결제·크레딧 완성
트랜잭션 무결성
→
인증·캠페인 마감
운영 정책 반영
→
2월 런칭 안정화
대시보드 바인딩

주안점

기존 구조 존중 우선

불필요한 리팩토링 지양, 코드 스타일·네이밍·폴더 구조 100% 일관성 유지.

결제 우선순위

카드사 심사 일정에 직결되므로 PG 연동을 1순위로 착수.

자사 팀과 한 팀 작업

슬랙 실시간 소통·지라 이슈 트래킹·목요일 저녁 정기 화상회의.

확장 가능한 결제 추상화

포트원+토스페이먼츠 SDK 보유 → PG 어댑터 인터페이스로 결제수단 확장 대응.

캠페인 관리 B2B SaaS 플랫폼 포트폴리오05
캠페인 관리 B2B SaaS 플랫폼04 · 핵심 기술 특징
4
Technical Highlights

핵심 기술 특징

기존 70% 코드의 설계 의도를 존중하면서, 결제·크레딧을 안전하게 운영하기 위한 트랜잭션 무결성과 타입 안전성을 갖춘 풀스택 안정화.

70% 구축 코드 인수

AI 기반 코드 분석 워크플로우로 모노레포 의존성 그래프·tRPC 라우터·Prisma 모델을 빠르게 매핑. 기존 3계층(api→service→Prisma) 컨벤션을 그대로 이어 개발.

3-앱 단일 모노레포

광고주(3004)·Luckffle(3005)·어드민(3006)이 api/db/common/logger 패키지를 공유. 결제 변경 한 번이 광고주·어드민 양쪽에 즉시 반영.

Type-safe 풀스택

tRPC + Zod로 클라이언트~서버~DB 타입 일치. React Hook Form + Zod resolver로 단계별 폼 검증에 동일 스키마 재사용.

트랜잭션 무결성

크레딧 증감은 Supabase RPC(PL/pgSQL) + 행 락으로 원자적 처리. 결제 멱등성은 orderId 기반으로 중복 충전·이중 결제 차단.

인증 이중 구조

Clerk를 광고주·어드민 인증의 1차 게이트로 두고, Supabase RLS / 도메인 사용자 모델(User, LuckffleUser)과 매끄럽게 연결.

프로세스 컨벤션 준수 · 레거시 정리

멀티 에이전트 협업 규칙(테스트 격리·빌드 스코프·vitest run) 준수로 CI 영향 최소화. 혼재 통신·데드 코드·시간대 불일치는 설계 의도를 보존하며 정리.

캠페인 관리 B2B SaaS 플랫폼 포트폴리오06
캠페인 관리 B2B SaaS 플랫폼05 · 기술 스택
5
Tech Stack

기술 스택

Frontend · apps/광고주 · luckffle · 어드민
Next.js 14 (App Router)React 18TypeScript strictTailwind CSSRadix UIZustandTanStack QueryReact Hook Form + ZodRecharts
Backend · packages/api
tRPCrouter→service→Prisma 3계층Zod 입력 검증@boost/loggerSupabase Auth Helper / SSR
Database
PostgreSQL (Supabase)Prisma ORM50+ 도메인 모델PL/pgSQL Function (크레딧 원자 처리)
Authentication & Identity
ClerkSupabase Auth솔라피 SMS 인증KG이니시스 본인인증(웹)포트원 본인인증(앱)
Payment
포트원 @portone/browser-sdkKG이니시스 PG (심사 완료)토스페이먼츠 SDK (옵션)보증보험 가입(3,000만원 한도)
Build & Tooling
pnpm 10.8 워크스페이스ESLint / PrettierHusky · lint-stagedVitest
Infra · Deployment · External
VercelGitHub Actions (배포·프리뷰·DB 마이그레이션)DockerAirbridgeAdpopcorn기프티쇼 임포트 / 마진
캠페인 관리 B2B SaaS 플랫폼 포트폴리오07
캠페인 관리 B2B SaaS 플랫폼06 · 시스템 아키텍처
6
System Architecture

시스템 아키텍처

3개 앱이 단일 pnpm 모노레포에서 api · db · common · logger 공유 패키지를 통해 동작. 결제·크레딧 로직 변경이 광고주·어드민 양쪽에 모순 없이 동기화된다.
광고주 브라우저
Web
어드민 브라우저
Web
리워드 앱
Flutter
↓
apps/광고주 :3004
Next.js 14 + Clerk
apps/어드민 :3006
Next.js 14 + Clerk
apps/luckffle :3005
Next.js 14 (웹뷰/연동)
↓
packages/api
tRPC routers · services
packages/db
Prisma + PL/pgSQL RPC
packages/common · logger
공통 유틸 · 자체 로거
↓
External Integrations
Supabase PostgreSQL Supabase Auth 포트원 / KG이니시스 솔라피 SMS 기프티쇼 Adpopcorn Airbridge

설계 포인트

  • 3계층 데이터 흐름 — tRPC 라우터 → 서비스 → Prisma. Zod 입력 검증과 한국어 에러 메시지 일관 적용
  • 원자적 크레딧 처리 — packages/db의 PL/pgSQL RPC + 행 락으로 충전·차감을 트랜잭션 안에서 처리
  • 인증 게이트 — Clerk 세션 + Next.js Middleware로 라우트 보호, Supabase 도메인 사용자와 연결
캠페인 관리 B2B SaaS 플랫폼 포트폴리오08
캠페인 관리 B2B SaaS 플랫폼07 · 핵심 기능 상세
7
Key Features in Depth

핵심 기능 상세

1

포트원 결제 + 크레딧 충전 트랜잭션

브라우저는 @portone/browser-sdk로 결제창을 열고, Next.js API Route가 결제 결과 조회 API와 웹훅을 이중 검증. 통과 시 Supabase RPC가 Credit 잔액과 CreditTransaction 이력을 같은 트랜잭션 안에서 갱신, orderId 유니크 제약으로 중복 충전 차단.

2

크레딧 차감 · 잔액 경합 방지

캠페인 집행/티켓 차감 시 PL/pgSQL 함수에서 SELECT … FOR UPDATE로 크레딧 행을 락. 잔액 부족 시 사용자 정의 에러 코드 반환, 충분 시 차감+이력 적재를 원자적으로 수행해 동시 요청 경합 차단.

3

회원가입 · 본인인증 · 비밀번호 찾기

Clerk 세션을 1차 게이트로, 도메인 사용자(User + PersonalUser/BusinessUser)는 별도 모델로 관리. 솔라피 SMS·KG이니시스 본인인증을 가입·결제·재인증 단계에서 호출, 비밀번호 찾기는 이메일/SMS 인증 기반.

4

캠페인 단계별 위저드

select-type → design → reward → credit → setting 단계 라우팅. 각 단계 컨텍스트에 폼 상태 보관, Zod 스키마로 단계 진입 검증, 진행 상태 캠페인은 read-only로 잠금 처리.

5

광고주 마이페이지 · 대시보드

/my-page(요약)·/credit(크레딧 내역)·/payment(결제 내역)·/analytics(통계 차트). Recharts 기반 시각화, tRPC + TanStack Query로 데이터 페칭·캐싱 일원화.

6

어드민 광고주 문의 관리

기존 inquiry(유저 문의) 라우터·서비스·화면 구조를 1:1로 차용해 ad-inquiry(광고주 문의)를 신규 구축. tRPC 라우터·서비스·어드민 페이지까지 동일 컨벤션으로 정렬.

7

환불 처리

어드민 환불 요청 검토 → 포트원 환불 API 호출 → CreditTransaction 환불 레코드 적재 → 잔여 크레딧 회수. 7일 정책·소진 크레딧 환불 불가 정책을 백엔드 가드로 강제.

캠페인 관리 B2B SaaS 플랫폼 포트폴리오09
캠페인 관리 B2B SaaS 플랫폼08 · 진행 단계
8
Process

진행 단계

총 30일(4주)·5단계 마일스톤. 카드사 심사 일정에 직결되는 결제/크레딧 단계에 가장 많은 기간(10일)을 배정.
1주
2주
3주
4주
코드 분석·환경 (3일)
회원·인증 (5일)
인증
결제·크레딧 (10일)
결제/크레딧
캠페인 관리 (7일)
캠페인
프론트 마무리·테스트 (5일)
QA
1단계코드 분석 + 환경 구축 · 3일
모노레포 구조 스캔, tRPC 라우터·Prisma 스키마 매핑, Supabase/Vercel 접근 확인, 환경 변수 정리, 분석 보고서 산출
2단계회원/인증 보완 · 5일
회원가입 플로우 개선, 아이디/비밀번호 찾기, 솔라피 SMS 인증, KG이니시스 본인인증, 세션·미들웨어 정비
3단계결제/크레딧 · 10일
포트원 결제 위젯 연동, 결제 검증/웹훅, 충전 트랜잭션, 차감/잔액 검증, 환불 워크플로우, 결제 테스트 캡처본 확보
4단계캠페인 관리 · 7일
단계별 위저드 검증, 상태값 처리, 진행 중 수정 잠금, 복제 기능, 캠페인-크레딧 차감 연동
5단계프론트엔드 마무리·테스트 · 5일
랜딩 반응형 신규 개발, 통계 대시보드 API 바인딩, 1:1 문의, 노션 임베드, 광고주 문의 어드민, 통합 테스트·인수인계
※ 매주 목요일 저녁 정기 화상회의, 슬랙 실시간 소통, 지라 이슈 트래킹
캠페인 관리 B2B SaaS 플랫폼 포트폴리오10
캠페인 관리 B2B SaaS 플랫폼09 · 프로젝트 성과
9
Results

프로젝트 성과

정량 성과 (코드/규모 기준)

30일
개발 기간
4주 · 5단계 구성
3앱
단일 모노레포
+ 4개 공유 패키지
28종
tRPC 라우터
광고주 13 + 어드민 15
50+
Prisma 모델
회원·캠페인·크레딧·기프티쇼 등
30+
마이그레이션 히스토리
init ~ luckffle-plus
3,000만
결제 보증보험 한도
500만원 6배수 가입 완료

정성 성과

  • 런칭 차단 요인 해소 — 결제·크레딧 흐름 완성으로 카드사 심사용 캡처본 확보 + 2월 런칭 일정 준수 가능 구조 확립
  • 트랜잭션 무결성 확보 — PL/pgSQL 기반 원자적 크레딧 증감 + 결제 멱등성으로 정산 사고 가능성 차단
  • 기존 코드 존중 인수 — AI 기반 코드 분석으로 짧은 시간에 모노레포 전체 구조 파악, 기존 컨벤션을 그대로 이어 개발
  • 3-앱 일관성 유지 — 광고주·Luckffle·어드민 변경이 공유 패키지를 통해 모순 없이 동기화
  • 자사 팀 협업 효율화 — 자사 PM·인프라·플러터 개발자와 한 팀처럼 작업해 의사결정-구현-배포 사이클 단축
캠페인 관리 B2B SaaS 플랫폼 포트폴리오11
캠페인 관리 B2B SaaS 플랫폼10 · 라이브 데모 · 유사 경험
10
Live Demo & Experience

라이브 데모 · 유사 경험

운영 도메인은 자사 보안 정책에 따라 비공개입니다. (계약 후 데모 계정 별도 안내) · 개발 환경은 Vercel 프리뷰 빌드 워크플로우로 PR 단위 프리뷰 URL 제공.

데모 시연 흐름

  • 광고주 — 캠페인 생성 위저드 → 크레딧 충전 → 캠페인 집행까지 풀 플로우
  • 운영자 — 광고주 문의 처리, 크레딧 요약, 캠페인 노출/락 처리, 기프티쇼 상품 임포트
  • 결제 흐름 — 포트원 KG이니시스 카드 결제 → 충전 → 차감 → 환불 사이클

대표 화면 — 서비스 랜딩 페이지

서비스 랜딩 페이지 — No-Code 캠페인 제작, 성과 중심 자동 운영, 대표 채널 확산, 다양한 리워드 구성

유사 프로젝트 경험

AI 음성 메모 SaaS

포트원 결제 위젯, 포인트 패키지 판매, 서버사이드 포인트 관리, orderId 기반 멱등성으로 중복 결제 차단.

HRD 원격훈련 LMS

FastAPI + Rust 사이드카, JWT 검증, RAG 챗봇 — 70% 구축 백엔드 인수 후 프론트 풀 개발.

캠페인 관리 B2B SaaS 플랫폼 포트폴리오12