배경
기업 교육용 이러닝 LMS입니다. 학습자 웹 · 기업 교육담당자 · 운영 관리자 세 화면이 한 모노레포(pnpm + Turborepo)에 묶여 있고, 학습자·교육담당자 포털은 Next.js, 운영 관리자 콘솔은 Vite + React로 구성돼 있습니다. 팀 10여 명이 약 6개월간 진행했고, 저는 운영 어드민을 주담당으로 맡아 기업·콘텐츠·교육·결제 네 도메인의 관리 화면을 구현했습니다.
한 일
- 어드민 네 도메인 관리 화면: 기업 관리(조회·등록정보·담당자·쿠폰 발행·DB 다운로드), 콘텐츠 관리(오리지널·라이브·피드·브리프 4종의 목록과 등록·수정, 에디터, 리뷰 팝업 제어), 교육 관리(과정 등록·수정, 자격인증·수료 상태), 결제 관리(세부관리·멤버십 결제 내역·할인 관리)를 맡았습니다. 백엔드 API가 준비되기 전에는 MSW로 목 API를 세워 화면을 먼저 붙이고 실 API가 나오면 교체하는 방식으로 대기 시간을 줄였습니다.
- 결제 상태 6단계 분기와 데이터 검증: 미결제·결제완료·결제실패·결제취소·미입금·입금에 따라 버튼 활성 조건과 다음 동작이 전부 달라, 상태별 분기를 정리했습니다. 결제완료로 넘어왔는데 결제일시가 비어 있는 응답은 결제 취소로 처리하도록 바꿨습니다. 상태 코드만 믿으면 실제로 결제되지 않은 건이 완료로 잡혔습니다.
- 두 겹 할인 계산과 표시·청구 불일치 교정: 인원수 기반 금액에서 회원사 등급 할인을 빼고 그 위에 할인코드 비율 할인을 얹는 구조입니다. 화면에는 소수점 둘째 자리까지 할인액이 표시되는데 실제 청구는 소수점이 반영되지 않은 금액으로 나가고 있어 표기를 정리했습니다. 결제 전에 할인코드를 해제할 방법이 없던 것, 결제완료 화면에 할인 적용 사실이 표시되지 않아 금액 근거를 알 수 없던 것도 함께 고쳤습니다. 멤버십 종료일 말일 처리와 정산 이력·알림 메일 로그·엑셀 내려받기를 붙였습니다.
- 교육담당자 기능 개발: 교육담당자 기업 교육 과정 전반의 페이지를 개발했습니다. 기수 생성·조직원 추가·수강생 상세, 자격증 수료 상태, 멤버십 종료일 처리, 결제 진행 흐름을 붙였습니다. 영상 플레이어는 하단 컨트롤 계층만 맡았고(앞뒤 이동 버튼, 1분 미리보기 표시, 재생 상태 전이), HLS 재생 코어와 화질·세션 컴포넌트의 구현 흐름을 점검하며 실시간 플레이어 제어 구현 방식을 익혔습니다.
결과
- 어드민 주담당: 기업·콘텐츠·교육·결제 네 도메인 관리 화면 (본인 파일 변경의 83%가 어드민)
- 6단계: 결제 상태 분기와 결제일 검증
- 2단 할인: 인원수 기반 정산에 등급 할인과 할인코드 할인을 얹는 계산 구조
정리
화면이 많고 상태가 복잡할수록 분기와 검증을 빠뜨리지 않는 것이 핵심이라는 걸 배웠습니다. 결제 상태·정산 금액처럼 어긋나면 곤란한 부분은 도메인 규칙을 화면에서 떼어 내 다루고, 어긋난 데이터 자체를 잡아내는 검증을 화면마다 넣는 데 가장 공을 들였습니다.