플러스팟 비즈: 제휴사 광고 관리 웹
플러스팟은 도심에 방치된 전동 킥보드를 사용자가 직접 스테이션에 주차하거나 지역 스팟을 방문해 포인트를 받는 참여형 모빌리티 서비스입니다. 사용자는 앱에서 주변 킥보드와 스테이션을 확인하고, 방치된 킥보드를 옮겨 주차하거나 지정된 스팟에 체크인하면 리워드를 받습니다. 방치 킥보드 문제를 줄이면서 사용자가 지역을 직접 찾아가게 하는 것이 목적입니다.
2023.10 – 2024.01
- TypeScript
- React
- Zustand
- TanStack Query
- React Hook Form
- Yup
- styled-components
- MUI
- 토스페이먼츠 결제위젯
- 나이스평가정보 CheckPlus
- GitHub Actions
- Amazon S3
- CloudFront
프로젝트 개요
플러스팟은 도심에 방치된 전동 킥보드를 사용자가 직접 스테이션에 주차하거나 지역 스팟을 방문해 포인트를 받는 참여형 모빌리티 서비스입니다. 사용자는 앱에서 주변 킥보드와 스테이션을 확인하고, 방치된 킥보드를 옮겨 주차하거나 지정된 스팟에 체크인하면 리워드를 받습니다. 방치 킥보드 문제를 줄이면서 사용자가 지역을 직접 찾아가게 하는 것이 목적입니다.
플러스팟 비즈는 기업과 제휴사가 플러스팟 앱을 마케팅 채널로 쓸 수 있게 만든 비즈니스용 웹 서비스입니다. 제휴사 회원은 캐시를 충전하고, 그 캐시로 쿠폰 광고, 배너 광고, 체크인 광고를 집행합니다. 광고는 플러스팟 앱에 노출되며, 사용자가 지역을 방문하거나 체크인하는 오프라인 활동까지 마케팅에 활용할 수 있습니다.
저는 웹 프론트엔드를 혼자 맡아 플러스팟 비즈의 가입·인증부터 광고 등록, 집행 상태와 내역 조회까지 모든 화면을 새로 만들었습니다. 내부 운영자용 관리자 BOS도 맡았는데, BOS는 사내 기존 프로젝트를 클론해 기능을 거의 그대로 썼습니다. 서비스 오픈까지 개발하고 유지보수는 다른 담당자에게 넘겼습니다.
| 항목 | 내용 |
|---|---|
| 팀 구성 | PM 1명, 디자이너 1명, 백엔드 개발자 2명, 웹 프론트엔드 개발자 1명(본인), 앱 프론트엔드 개발자 1명 |
주요 기술은 새로 만든 플러스팟 비즈 기준입니다.
주요 성과
- 약관 동의, 본인인증, 사업자 정보, 추가 정보, 완료까지 5단계 가입 화면을 만들고, 심사 상태에 따라 라우트를 나눴습니다. 본인인증은 나이스평가정보로 연동했고, 사업자 정보는 서버 조회 결과에 따라 상호명·개업일·중복 가입 오류를 나눠서 보여 줬습니다.
- 토스페이먼츠 결제위젯으로 결제수단과 약관을 보여 주고, 광고주가 고른 수단으로 광고비 충전 결제를 요청하게 했습니다.
- 배너·체크인 광고, 쿠폰·푸시 등록 화면과 충전·사용 내역 화면을 만들었습니다. 작성하다 화면을 떠나면 확인 모달과 브라우저 이탈 경고를 띄웠고, 광고 상태는 페이지에 들어올 때나 화면 안에서 새로고침할 때 갱신했습니다.
- 서버 로그아웃 요청이 성공하든 실패하든 계정, 토큰, 심사 상태를 지우고, 잔액·조회 캐시·약관 상태도 같이 초기화했습니다.
- GitHub Actions로 정적 파일을 S3에 올리고 CloudFront 캐시를 무효화해 배포했습니다. 개발 서버는 브랜치에 푸시하면, 운영 서버는 워크플로를 수동으로 실행하면 배포됩니다.