학습 LMS 기반 영어 시험 관리 시스템 '머머부스트'

프로젝트 개요

머머부스트는 학습 관리자가 학생들에게 제공할 시험 코스를 생성하고, 문장과 단어를 추가하며, 시험의 노출 여부를 관리할 수 있는 학습 콘텐츠 관리 시스템입니다. 이 프로젝트는 학습 콘텐츠 관리 과정을 효율화하고, 학습 관리자의 업무를 직관적으로 지원하는 데 초점을 맞추어 개발되었습니다.

주요 기능 및 역할

1. 시험 코스 생성 및 관리

• 시험 코스 리스트 제공

  • 시험 코스명을 변경할 수 있도록 코스명 변경 버튼 구현
  • 시험 코스와 해당 시험의 문장 및 단어 개수를 한눈에 확인할 수 있는 리스트 뷰 구현.
  • GraphQL Cursor를 이용한 무한 스크롤을 도입하여 대량의 데이터를 효율적으로 탐색 가능.

• 노출 여부 제어

  • 코스 내 문장과 단어의 등록 상태, 단어 선택지 섞기에 따라 시험 노출 여부를 자동 활성화하는 기능 구현.
  • 노출 활성화 시, 앱에서 해당 시험이 학생들에게 제공되도록 연동.

2. 문장 추가 기능

• 문장 검색 및 추가
  • 서버에서 관리 중인 문장을 ID로 검색하고, 검색된 문장을 시험 코스에 추가할 수 있는 팝업 UI 구현
  • 검색 결과로 문장의 상세 정보(내용, 시험 정보, 문항 번호 등)를 제공하여 정확한 데이터를 지원

3. 단어 추가 기능

• 단어 검색 및 추가
  • 서버에 저장된 단어를 키워드로 검색하여 시험 코스에 추가할 수 있는 기능 개발.
  • 검색된 단어 리스트에서 원형 단어와 관련 데이터를 확인하며 선택 가능.
• 선택지 섞기 기능
  • 등록된 단어가 일정 개수에 도달했을 때, 선택지 섞기 기능이 활성화되도록 함.
  • 앱에서 생성되는 시험 선택지의 정합성을 높이고, 동일한 시험 제공을 보장하기 위해 일정 개수 도달 시 한 번만 선택지 기능을 사용할 수 있도록 서버와 통신하여 선택지 여부를 판별

기술 스택

• 프론트엔드: React, TailwindCSS, shadcn/ui, graphQL
• 데이터 연동: GraphQL, Apollo Client
• 상태 관리 및 성능 최적화: 로컬 캐싱 및 실시간 데이터 처리