교육

온라인 강의 플랫폼 '배움결' — 수강 대시보드

차시를 체크하면 진도율·남은 시간·완료 강의 수가 한꺼번에 다시 계산되는 온라인 강의 플랫폼입니다. 강의 카탈로그는 카테고리·검색·정렬로 걸러 볼 수 있습니다.

비공개·데모 — AI 가상 데이터로 재구성한 예시입니다

데모 열기 ↗정적 HTML, Tailwind CSS(빌드), 바닐라 JS, nginx

문제

LMS는 브로슈어가 아니라 제품이다. 강의를 나열하는 것만으로는 부족하고, 수강생이 '내가 어디까지 들었는지'를 화면에서 확인하고 조작할 수 있어야 한다. 진도·남은 시간·완료 수가 서로 물려 있어 하나를 바꾸면 전부 다시 계산돼야 한다.

해결

차시를 체크하면 진도율(39%→44%), 들은 차시(7/18강→8/18강), 이어보기 라벨, 남은 시간, 사이드바의 진행 중·완료 카운트까지 연쇄로 재계산된다. 전부 체크하면 버튼이 수료증 보기로 바뀌고, 해제하면 역방향으로 돌아온다. 차트·상태 관리 라이브러리 없이 바닐라 JS로 짰고 외부 요청은 0건이다. 레퍼런스가 도배하는 할인·타임세일 배너는 이식하지 않고 조용한 앱 UI로 갔다.

0
외부 의존성: 63
차시(진도 연동): 0
가로 오버플로

화면