← 포트폴리오 목록

실버케어 매칭 CRM

광고 랜딩부터 상태확인 신청, 계약금 결제, 관리자 CRM 상태관리와 선생님 수동배정까지 이어지는 헬스케어 O2O 매칭서비스, 시니어 방문재활 백오피스를 React + Node.js + PostgreSQL 기반으로 설계·구현합니다.

신청 상태머신 원자적 전이 구현PostgreSQL 상태 컬럼과 Prisma 트랜잭션으로 신청→확인→배정→계약 4단계 전이를 원자적으로 처리하는 구조를 설계합니다.
결제 webhook 서버측 재검증 로직 구축포트원 webhook 수신 후 서버에서 금액·주문번호를 재대조해 클라이언트 조작으로 결제 상태가 왜곡되지 않는 구조를 구현합니다.
배정 중복 방지 락 설계동일 선생님에 대한 동시 배정 요청을 트랜잭션 락으로 직렬화해 담당 고객 수 초과 배정을 방지하는 로직을 구현합니다.
서비스 타입Web
업종헬스케어
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrisma포트원 결제 연동SMS API 연동
주요 기능
  • 신청 현황 마스터-디테일 CRM
  • 광고 랜딩 & 상태확인 신청폼
  • 단일 상품 노출 & 계약금 결제
  • 선생님 수동배정 & 미확인 알림
Overview

프로젝트 개요

범위: 개발, 디자인, 기획
광고 랜딩부터 상태확인 신청, 계약금 결제, 관리자 CRM 상태관리와 선생님 수동배정까지 이어지는 헬스케어 O2O 매칭서비스, 시니어 방문재활 백오피스를 React + Node.js + PostgreSQL 기반으로 설계·구현합니다.
실버케어 매칭 CRM
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

신청→확인→배정→계약 단계 전이 중 동시 갱신이 발생할 때 상태 충돌을 방지하는 트랜잭션 격리 수준 설계가 필요합니다

포트원 결제 webhook과 프론트엔드 결제 완료 이벤트의 도착 순서가 뒤바뀔 때 상태 정합성을 보장하는 로직 설계가 필요합니다

지역·시간·담당 고객 수 조건이 겹치는 다수 선생님 후보를 관리자가 빠르게 비교할 수 있는 배정 UI 설계가 필요합니다

광고 소재별 UTM 데이터를 신청·결제 전환까지 끊김 없이 유지하는 세션 관리 전략이 필요합니다

구현 내용

핵심 기능 상세

핵심 기능 1

신청 현황 마스터-디테일 CRM

관리자가 좌측 리스트에서 신청 건을 선택하면 우측 패널에서 상태 단계(신청→확인→배정→계약)와 결제·배정 이력을 한 화면에서 확인할 수 있는 마스터-디테일 CRM입니다
신청 현황 마스터-디테일 CRM
핵심 기능 2

광고 랜딩 & 상태확인 신청폼

광고 캠페인별 랜딩페이지에서 질환·재활목적·거주지역·거동가능여부를 입력하면 결과 안내 화면까지 이탈 없이 이어지는 신청 퍼널을 구현합니다
광고 랜딩 & 상태확인 신청폼
핵심 기능 3

단일 상품 노출 & 계약금 결제

12주 재활 과정 단일 상품을 정가로 노출하고, 계약금을 PG 결제로 진행해 성공·실패 처리까지 이어지는 결제 플로우를 구현합니다
단일 상품 노출 & 계약금 결제
핵심 기능 4

선생님 수동배정 & 미확인 알림

관리자가 지역·가능 시간·담당 고객 수 조건을 확인한 뒤 선생님을 직접 선택해 배정하고, 확인하지 않은 신청 건은 대시보드 상단 알림으로 표시합니다
선생님 수동배정 & 미확인 알림
구현 과정

프로젝트 진행 단계

STEP 1

신청·결제 도메인 ERD 및 상태머신 설계

신청→확인→배정→계약 상태머신과 결제·배정 테이블 14개 관계 매핑, Prisma 스키마 정의

STEP 2

결제·SMS 외부 연동 API 개발

포트원 결제 SDK, SMS·카카오 알림톡 API 연동, webhook 검증 로직 포함 API 26개 구현

STEP 3

관리자 CRM 화면 개발

React 기반 마스터-디테일 CRM, 배정·알림 화면 등 12개 화면 구현, 상태 배지 컴포넌트화

STEP 4

신청 퍼널 통합 테스트

랜딩→폼→결제 전 구간 E2E 테스트, 결제 실패·중복 시나리오 검증

프로젝트 성과

주요 성과

신청 상태머신 원자적 전이 구현PostgreSQL 상태 컬럼과 Prisma 트랜잭션으로 신청→확인→배정→계약 4단계 전이를 원자적으로 처리하는 구조를 설계합니다.
결제 webhook 서버측 재검증 로직 구축포트원 webhook 수신 후 서버에서 금액·주문번호를 재대조해 클라이언트 조작으로 결제 상태가 왜곡되지 않는 구조를 구현합니다.
배정 중복 방지 락 설계동일 선생님에 대한 동시 배정 요청을 트랜잭션 락으로 직렬화해 담당 고객 수 초과 배정을 방지하는 로직을 구현합니다.
미확인 신청 알림 배치 구현일정 주기로 미확인 신청 건을 스캔해 대시보드 알림 배지로 노출하는 배치 스케줄러를 구현합니다.
Review

기술적 주안점

  • 리스트-상세 동시 갱신 구조로 관리자가 신청 단계를 전환할 때마다 화면 전체 리로드 없이 상세 패널만 갱신되는 인터랙션을 구현합니다
  • 신청 폼 각 단계의 완료 여부를 이벤트로 기록해, 어느 단계에서 입력이 중단되는지 코드 레벨에서 추적할 수 있는 구조를 설계합니다
  • PG webhook 검증과 서버측 금액 재대조를 함께 구현해 클라이언트 조작만으로 결제 상태가 왜곡되지 않는 구조를 설계합니다

유사한 프로젝트를 기획하고 계신가요?

FIRSTPIP이 개발 범위와 로드맵을 함께 정리해드립니다

무료 상담 시작하기