데브허브 | DEVHUB | Create an LMS Course Platform with Next.js, Arcjet, Better-Auth, and Stripe (Part 2/2)Create an LMS Course Platform with Next.js, Arcjet, Better-Auth, and Stripe (Part 2/2)
- Marshall LMS는 Next.js, Arcjet, Better-Auth, Stripe를 활용하여 구축된 완전한 기능의 학습 관리 시스템입니다. 🚀
- 학생들을 위한 매력적인 랜딩 페이지, 코스 카탈로그, 상세 개요, 커리큘럼, Stripe를 통한 즉시 구매 기능을 제공합니다. 💳
- GitHub OAuth 또는 이메일 OTP를 통한 빠르고 안전한 사용자 인증 시스템을 갖추고 있습니다. 🔐
- 크리에이터는 강력한 관리자 대시보드, 분석 기능, 맞춤형 코스 생성 및 편집 도구(리치 텍스트 에디터 포함)를 이용할 수 있습니다. 📊
- 파일 업로드는 드래그 앤 드롭 방식으로 간편하며, 사전 서명된 URL과 S3 버킷을 통해 안전하고 확장 가능하게 처리됩니다. ☁️
- 코스 구조 관리는 직관적인 드래그 앤 드롭 인터페이스를 통해 챕터와 레슨을 쉽게 재정렬할 수 있도록 지원합니다. 🔄
- Arcjet을 사용하여 봇, XSS, SQL 인젝션 등 일반적인 공격으로부터 플랫폼을 보호하며, 속도 제한 및 봇 감지 기능을 구현했습니다. 🛡️
- 학생 대시보드는 등록된 코스와 개별 진행 상황을 보여주며, 깔끔한 2패널 레이아웃의 코스 플레이어에서 학습을 진행합니다. 🧑🎓
- 튜토리얼의 2부에서는 드래그 앤 드롭 재정렬 기능의 버그를 해결하는 데 중점을 둡니다. 🐛
handleDragEnd 함수는 active (드래그된 항목)와 over (드롭 대상) 객체를 사용하여 재정렬 로직을 처리합니다. 💡
- 재정렬 시 위치 변경이 없는 경우 함수를 조기에 종료하는 로직을 구현하여 불필요한 상태 업데이트를 방지합니다. 🛑
- 드래그된 항목과 드롭 대상의 ID, 유형(챕터 또는 레슨), 코스 ID를 추출하여 동적인 재정렬 로직을 가능하게 합니다. 🏷️
- 챕터 재정렬 시, 드롭 대상이 챕터인지 레슨인지에 따라
targetChapterId를 다르게 결정하며, 레슨에 드롭된 경우 부모 챕터 ID를 찾습니다. 🌳
targetChapterId가 결정되지 않은 경우 사용자에게 오류 메시지(토스트)를 표시하고 함수를 종료합니다. ❌
let 키워드를 사용하여 targetChapterId와 같이 재할당이 필요한 변수를 선언합니다. ✍️
items.findIndex를 사용하여 드래그된 항목의 oldIndex와 드롭 대상의 newIndex를 정확히 찾아냅니다. 📍
findIndex가 항목을 찾지 못해 -1을 반환하는 경우를 대비하여 오류 처리 로직을 포함합니다. ⚠️