- PG연동
- PostgreSQL
- next.js
- supabase
- React
프로젝트 상세
1) 포트폴리오 소개
행복안심동행 — 돌봄 서비스 매칭 플랫폼
기존 PHP 기반 돌봄 서비스 플랫폼을 Next.js 14 풀스택으로 재개발한 프로젝트입니다. 고객과 전문 돌봄 매니
저를 연결하여 병원동행, 가사돌봄, 생활동행, 노인돌봄, 아이돌봄 서비스를 제공합니다. 비회원(게스트)
결제를 지원하며, 고객 · 매니저 · 관리자 3개 역할에 대한 독립 인증 체계와 서비스 요청부터 결제, 매칭, 정산
까지 전 과정을 관리합니다.
2) 작업 범위
Next.js 14 App Router 기반의 풀스택 애플리케이션으로, 프론트엔드는 Tailwind CSS와 shadcn/ui로 구성
하고 React Hook Form + Zod로 폼 유효성을 검증합니다. 백엔드는 Next.js API Routes 51개를 구현
하였으며, Supabase PostgreSQL을 사용하고 14건의 DB 마이그레이션을 관리합니다.
인증은 고객(Supabase Auth), 매니저(커스텀 JWT), 관리자(bcrypt) 3중 체계로 설계하였고, 결제는 토스
페이먼츠 SDK v2를 연동하여 카드, 계좌이체, 무통장입금 3가지 수단을 지원합니다.
알림 시스템은 CoolSMS(LMS/SMS 자동 감지), Web Push(VAPID), FCM 푸시 알림을 적용하였고, 외부
연동으로 브이월드 주소 검색 API를 프록시 처리합니다.
전체 페이지는 공개 페이지 8개, 서비스 요청 7단계 위자드, 관리자 화면 15개, 매니저 화면 6개 등 총 48개로
구성되며, PWA 앱 설치 버튼과 서비스 워커를 포함합니다.
3) 주요 업무
- 서비스 요청 폼 설계·구현: 7단계 위자드 흐름 (회원/비회원 분기 → 정보입력 → 서비스 선택 → 일시 선택 →
매니저 지정 → 상세사항 → 결제
- 3중 결제 시스템 구축: 토스페이먼츠 카드결제·계좌이체(실시간 승인) + 무통장입금(관리자 수동 확인) 흐름
구 현, 금액 서버 재검증 및 중복 방지 로직
- 3개 독립 인증 시스템 설계: 고객(Supabase Auth), 매니저(JWT), 관리자(bcrypt) 각각의 미들웨어 보호·
세션 관리·라우트 가드 구현
- 매니저 매칭 프로세스: 자동 매칭(선착순 지원), GPS근거리 매칭, 매칭 완료 시 SMS·푸시 자동 발송
- 관리자 백오피스: 서비스 요청 관리, 매니저 승인·정산, 무통장입금 확인, 지점 관리, 매출 통계, 서비스 가격
설정, 환불 처리 등 15개 관리 화면
- 매니저 포털: 대시보드, 서비스 지원·관리, 일정 확인, 채용 신청
- 알림 시스템: CoolSMS 연동(LMS/SMS 자동 감지), VAPID 기반 Web Push + FCM 푸시 알림, Cron 기반
서비스 상태 자동 전환(MATCHED → COMPLETED)
- DB 스키마 설계·마이그레이션: 9개 핵심 테이블 설계, RLS 정책 적용, 14건의 점진적 마이그레이션 관리
4) 주안점
- 비회원 결제 지원: customer_id nullable 설계로 회원/비회원 모두 동일한 결제 흐름을 사용하되, 게스트
는 이름·전화번호·주소로 식별하여 서비스 이용 장벽을 최소화
- 결제 무결성 보장: 클라이언트가 전송한 금액을 서버에서 서비스 가격 테이블 기반으로 재계산하여 비교
(mismatch 방지), orderId 중복 체크로 이중 결제 차단
- 상태 전이 일관성: PENDING_TRANSFER → CONFIRMED → MATCHED → COMPLETED 상태 흐름을
상수 로 정의하고, 유효한 전이 규칙을 코드 레벨에서 강제. Cron으로 서비스 종료 시간 경과 건 자동 완료
처리(KST 기준)
- 보안 계층 분리: 3개 인증 시스템이 서로 간섭하지 않도록 각각 독립된 쿠키·미들웨어·라우트 가드 적용.
관리 API는 서비스 롤 키(RLS 우회)로만 접근
- 동적 가격 관리: 서비스 가격을 DB 테이블로 관리하여 관리자가 실시간 변경 가능, 코드 내 fallback 상수로
DB 장애 시에도 서비스 지속
- 터치 친화적 UI: 모든 인터랙티브 요소에 min-h-[44px] 적용, 모바일 우선 반응형 디자인으로 고령 사용자
접근성 확보