이러닝 LMS 플랫폼
포트폴리오
개발

이러닝 LMS 플랫폼

학습자·교육담당자·운영 관리자 세 화면을 한 모노레포에서: 결제·정산이 정확해야 하는 LMS

2025.02 - 2025.07프론트엔드주식회사 업폴 (Upfall) · 팀 10여 명3
  • Next.js
  • React
  • TypeScript
  • 모노레포 (pnpm · turbo)
  • TanStack Query
  • Zustand
  • React Hook Form
  • Ant Design
  • Tailwind CSS
  • hls.js
  • Docker
약 6개월
본인 300여 커밋
컴포넌트 97개
API 모듈 76개
타입 파일 34개
6단계 결제 상태 분기 + 결제일(payDt) 검증
HLS 영상 플레이어(이어보기
3기기 제한)
인원수 기반 정산
할인 계산

배경

기업 교육용 이러닝 LMS입니다. 학습자 웹 · 기업 교육담당자 · 운영 관리자 세 화면이 한 모노레포(pnpm + turbo)에 묶여 있고, 학습자·교육담당자 포털은 Next.js, 운영 관리자 콘솔은 Vite + React로 구성돼 있습니다. 팀 10여 명이 약 6개월간 진행했고, 저는 결제·영상 플레이어·정산처럼 데이터가 많고 분기·검증이 까다로운 영역을 맡았습니다(본인 300여 커밋).

한 일

  1. 결제: 6단계 상태 분기·결제일 검증·PG 연동: 결제 상태를 미결제·결제대기·결제완료·결제실패·결제취소·입금 등 여러 단계로 나눠 각 상태에 맞게 분기하고 NicePay PG를 연동(준비→체크아웃), 무통장·계산서·카드 등 결제수단을 다뤘습니다. 특히 결제완료인데 결제일시(payDt)가 비어 있는 어긋난 데이터를 취소로 처리해 결제 상태와 정산이 따로 노는 경우를 막았습니다. 목록은 기간·신청자·유형(교육담당자/개인)·상품·상태로 필터링.
  2. 이러닝 영상 플레이어: HLS·이어보기·기기 제한: hls.js 기반 HLS 플레이어(사파리는 네이티브 폴백), 화질 전환·10초 앞뒤 이동·비회원 1분 프리뷰. 마지막 재생 위치 저장·복원으로 이어보기, 시청 로그 주기 전송, 한 계정 최대 3기기 재생 제한(토큰 검증)으로 무단 공유 방지.
  3. 교육담당자 정산·할인 계산: 수강 인원수 기준 정산 금액 계산에 등급별 기본 할인 + 할인코드(%) 추가 할인을 반영해 최종 결제금액 산출, 두 종류 멤버십 등급 체계를 각각 처리. 멤버십 종료일을 말일로 맞추는 등 도메인 규칙을 화면과 분리, 정산 이력·알림 메일 로그·엑셀 다운로드 제공.
  4. myStudio: AI 추천·과정 검색: 학습자 대시보드의 수강 이력 기반 AI 추천 영역, 과정번호·과정명 검색 모달(페이지네이션·중복 추가 방지·검색어 변경 시 쿼리 초기화).

결과

  • 300여: 본인 커밋 · 약 6개월
  • 6단계: 결제 상태 분기 처리
  • 3기기: 재생 기기 제한 (무단공유 방지)

규모가 큰 모노레포에서 세 종류의 사용자가 쓰는 화면을 오가며, 결제·정산처럼 정확성이 중요한 영역을 맡았습니다.

정리

화면이 많고 상태가 복잡할수록, 분기와 검증을 빠뜨리지 않는 것이 핵심이라는 걸 배운 프로젝트입니다. 결제 상태·정산 금액처럼 어긋나면 곤란한 부분은 도메인 규칙을 화면에서 떼어 내 다루고, 어긋난 데이터 자체를 잡아내는 검증을 화면마다 넣는 데 가장 공을 들였습니다.