← 포트폴리오 목록

프리다이빙 클래스 운영 콘솔

MVP 이후 확장 방향으로 클래스 등록·정원 관리, 예약·결제·환불 처리, 알림톡·푸시 발송, 포인트·리뷰 관리, 회원·권한을 한 화면 체계에 담은 강사·운영자 콘솔 구현한 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종데이터 분석
기술 스택
HTML/JS 웹앱·웹뷰React 18Tailwind CSSSupabase Auth·RLSSupabase Edge FunctionsPostgreSQL토스페이먼츠·포트원카카오 알림톡FCM·APNs
주요 기능
  • 운영 대시보드
  • 클래스 등록·정원 관리
  • 예약·결제·환불 관리
  • 알림톡·푸시 발송

프로젝트 개요

범위: 개발, 디자인, 기획

MVP 이후 확장 방향으로 클래스 등록·정원 관리, 예약·결제·환불 처리, 알림톡·푸시 발송, 포인트·리뷰 관리, 회원·권한을 한 화면 체계에 담은 강사·운영자 콘솔 구현한 프로젝트입니다. 역할별로 메뉴와 버튼 범위가 달라지는 구조를 함께 보여 줍니다.

작업 범위

  • 운영 대시보드: 운영자가 오늘 클래스의 예약 현황, 처리할 환불 요청, 발송 예정 알림을 한 화면에서 확인합니다. 처리할 건을 눌러 해당 화면으로 이동합니다
  • 클래스 등록·정원 관리: 강사가 클래스의 일정·장소·정원·가격·유의사항을 입력하고 수정·마감합니다. 마감 임박 클래스를 거르고 정원을 조정합니다
  • 예약·결제·환불 관리: 운영자가 예약과 결제 상태를 목록으로 보고 환불 요청을 승인하거나 반려합니다. 환불 금액은 취소 규정에 따라 자동 계산됩니다
  • 알림톡·푸시 발송: 강사가 수강생 대상을 고르고 알림톡 또는 푸시 중 채널을 선택해 발송하며 발송 이력을 확인합니다. 템플릿 변수는 미리보기로 확인합니다

주요 업무

  • 운영 대시보드 화면: 오늘 클래스별 정원 막대, 처리 대기 목록, 최근 결제 내역, 발송 예정 알림 구조를 설계합니다
  • 클래스 등록·정원 관리 화면: 클래스 목록과 마감 임박 필터, 등록·수정 대화상자, 정원 조정, 유의사항 편집, 마감 처리 구조를 설계합니다
  • 예약·결제·환불 관리 화면: 예약·결제 통합 목록과 상태 칩, 상세 대화상자, 환불 승인 확인, 결제 취소 호출, 정산 내역 자리 구조를 설계합니다
  • 알림톡·푸시 발송 화면: 대상 선택, 채널 선택, 템플릿 변수 미리보기, 발송 확인, 발송 이력과 실패 재시도 구조를 설계합니다
프리다이빙 클래스 운영 콘솔
요구사항 정의

프로젝트 핵심 과제

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

강사 정산 방식(수수료 차감·정산 주기)이 협의 대상이라 결제 레코드에 정산 컬럼을 열어 두고 규칙을 설정 테이블로 분리하는 설계

환불 승인 중 같은 건에 취소 요청이 중복 들어올 때 결제 취소가 두 번 호출되지 않

상태 잠금 설계 필요

알림톡 발송 실패 시 대체 채널로 푸시를 보낼지 판단하는 규칙과 중복 수신 방지 설계

푸시 기기 토큰이 앱 재설치로 바뀔 때 이전 토큰을 정리하는 만료 작업과 등록 API 설계

구현 내용

핵심 기능 상세

핵심 기능 1

운영 대시보드

운영자가 오늘 클래스의 예약 현황, 처리할 환불 요청, 발송 예정 알림을 한 화면에서 확인합니다. 처리할 건을 눌러 해당 화면으로 이동합니다.

  • 예약·결제 테이블을 집계하는 뷰로 오늘 현황을 한 번의 조회로 제공
  • 처리 대기 항목을 상태 컬럼 기준으로 모아 화면 이동 링크와 연결
  • 역할별 조회 범위를 RLS 정책과 화면 메뉴 양쪽에 같은 규칙으로 적용

대시보드 숫자마다 출처 화면으로 이동하는 링크를 붙여 숫자와 처리 화면이 끊기지 않도록 구성합니다.

운영 대시보드
운영 대시보드 실제 화면
핵심 기능 2

클래스 등록·정원 관리

강사가 클래스의 일정·장소·정원·가격·유의사항을 입력하고 수정·마감합니다. 마감 임박 클래스를 거르고 정원을 조정합니다.

  • 클래스 등록 폼 검증을 화면과 서버 함수가 같은 스키마로 처리
  • 정원 축소 시 이미 확정된 예약 인원보다 작게 줄일 수 없도록 서버에서 검증
  • 마감 처리를 되돌릴 수 있도록 상태 이력 테이블에 변경 기록 저장

정원과 예약 인원의 관계 규칙을 서버 한 곳에 두어 화면이 달라도 같은 판정이 나오도록 구현합니다.

클래스 등록·정원 관리
클래스 등록·정원 관리 실제 화면
핵심 기능 3

예약·결제·환불 관리

운영자가 예약과 결제 상태를 목록으로 보고 환불 요청을 승인하거나 반려합니다. 환불 금액은 취소 규정에 따라 자동 계산됩니다.

  • 취소 시점별 환불 비율을 규정 테이블에서 읽어 환불 금액을 계산하는 함수 구현
  • 토스페이먼츠 결제 취소 API 호출 결과를 결제 레코드와 예약 상태에 함께 반영
  • 환불 승인은 되돌릴 수 없는 작업이라 확인 대화상자에서 금액을 숫자로 다시 보여 주는 구조 설계

결제 상태와 예약 상태를 한 트랜잭션 단위로 갱신해 두 목록이 서로 어긋나지 않도록 구현합니다.

예약·결제·환불 관리
예약·결제·환불 관리 실제 화면
핵심 기능 4

알림톡·푸시 발송

강사가 수강생 대상을 고르고 알림톡 또는 푸시 중 채널을 선택해 발송하며 발송 이력을 확인합니다. 템플릿 변수는 미리보기로 확인합니다.

  • 알림톡 템플릿 변수에 예약 데이터를 채워 미리보기로 보여 주는 매핑 함수 구현
  • 발송 요청을 큐 테이블에 적재하고 채널별 재시도 정책과 실패 사유를 이력에 저장
  • 푸시 기기 토큰의 등록·갱신·만료 정리를 서버 작업으로 분리

채널이 달라도 발송 요청·이력·재시도를 같은 큐 모델로 다뤄 화면과 로직을 한 벌로 유지합니다.

알림톡·푸시 발송
알림톡·푸시 발송 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

운영 데이터 모델과 권한 설계 · 2026.11

역할 3종 정의, 클래스·예약·결제·발송 테이블 관계와 RLS 정책 설계

STEP 2

클래스·정원 관리 화면 구현 · 2026.11

등록·수정·마감 대화상자와 정원 검증 함수 구현

STEP 3

결제·환불 관리 구현 · 2026.11

결제 목록, 환불 규정 계산, 결제 취소 호출 구현

STEP 4

발송 큐와 관리 화면 구현 · 2026.11

알림톡·푸시 발송 큐, 템플릿 미리보기, 이력·재시도 화면 구현

개발 결과

역할 기반 메뉴·정책 이중 적용 구축강사·운영자·관리자 역할을 화면 메뉴와 RLS 정책에 같은 규칙으로 적용하는 구조를 구축합니다.
환불 규정 계산 함수 설계취소 시점별 환불 비율을 규정 테이블에서 읽어 금액을 계산하는 함수를 설계합니다.
다채널 발송 큐 모델 구현알림톡과 푸시를 같은 큐 모델로 적재하고 채널별 재시도와 실패 이력을 구현합니다.
정원 검증 규칙 서버 단일화 구현정원 조정과 예약 생성이 같은 검증 함수를 쓰도록 서버 규칙을 단일화합니다.

기술적 주안점

  • 대시보드 숫자마다 출처 화면으로 이동하는 링크를 붙여 숫자와 처리 화면이 끊기지 않도록 구성합니다
  • 정원과 예약 인원의 관계 규칙을 서버 한 곳에 두어 화면이 달라도 같은 판정이 나오도록 구현합니다
  • 결제 상태와 예약 상태를 한 트랜잭션 단위로 갱신해 두 목록이 서로 어긋나지 않도록 구현합니다

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

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의