디지털 워크북 기반 실시간 수업 플랫폼

클래스 코드로 입장해 활동별 워크북을 작성합니다. 카드 분류·레이더 차트·원형 일과표·연결선 등 활동마다 다른 입력을 제공하고, 입력은 자동 저장됩니다.

• 활동 문항을 DB의 UI 스키마로 정의하고 공용 렌더러가 필드 컴포넌트로 조립 — 활동 추가 시 화면 코드 복제 없음
• Chart.js 레이더 차트로 흥미 점수와 관심 직업 점수를 입력 즉시 겹쳐 그림
• 24시간 원형 시계에서 시작 시각을 눌러 시간대를 추가하고 남은 시간을 자동 계산
• 임시 저장·최종 제출 2단계와 자동 저장으로 수업 중 이탈에도 입력 보존

활동마다 화면을 따로 만들지 않고 스키마 기반 렌더러 하나로 6종 활동을 구성해, 문항·보기 변경을 데이터 수정만으로 반영할 수 있게 설계했습니다.

담당 반을 전환하며 접속 인원, 활동별 제출 현황, 평균 진행률을 한 화면에서 확인합니다. 반 추가 시 학생 접속용 반 코드가 자동 생성됩니다.

• Supabase Realtime 구독으로 학생 접속·제출 이벤트를 새로고침 없이 대시보드에 반영
• 활동별 제출 수와 워크북 평균 진행률을 반 단위로 집계
• 혼동 문자(0/1/I/L/O)를 제외한 6자리 반 코드 생성
• 학년도·반 전환과 학생 검색·정렬로 여러 반을 동시에 운영

교사 화면은 초기 데이터를 한 번 불러온 뒤 Realtime 변경분만 반영하는 방식으로, 30명 규모 반에서도 제출 현황이 즉시 갱신되도록 구성했습니다.

질문을 크게 띄우고, 학생 번호별 제출·접속 상태를 색으로 확인한 뒤, 익명 답변을 함께 봅니다. 세 단계는 버튼 하나로 전환됩니다.

• 질문 표시 → 답변 수집 → 답변 공개 3단계를 한 화면의 모드로 전환
• 학생 번호 격자에 제출 완료·접속 중·미접속을 색으로 구분해 실시간 표시
• 답변 공개 시 이름을 숨긴 익명 목록으로 표시
• ←/→ 키보드 이동과 ESC 닫기 등 대형 화면 조작 방식 적용

전자칠판 수업 흐름을 3개 모드로 나누고 학생 제출 상태를 Realtime으로 반영해, 교사가 판서하듯 한 화면에서 수업을 진행할 수 있게 했습니다.

학생과 활동을 교차 선택해 답변을 조회합니다. 답변은 작성 양식 그대로 표시되고, 전자칠판에서는 익명 답변을 한 명씩 크게 넘겨 봅니다.

• 학생 탭과 활동 탭을 오가며 제출 상태(완료·진행 중·미시작)와 답변을 조회
• 작성 화면과 같은 필드 컴포넌트를 읽기 전용 모드로 재사용해 차트·표·연결선까지 원형대로 표시
• 전자칠판 크게 보기에서 익명 답변을 순서대로 넘기며 수업 중 공유
• 학생 이름·번호 검색으로 반 전체 답변을 빠르게 탐색

작성용 컴포넌트를 조회용으로 재사용해, 답변 조회 화면을 별도로 만들지 않고도 어떤 활동 유형이든 학생이 본 그대로 확인할 수 있게 했습니다.

학교별 라이선스 키·활성 기간·교사 정원을 지정하고 교사 계정을 초대 링크로 발급합니다. 만료 임박 학교는 사용 통계에서 확인합니다.

• 라이선스 키 자동 생성과 활성일·만료일·교사 정원 설정
• 초대 메일 링크로 교사가 직접 비밀번호를 설정하는 계정 발급 흐름과 초대 재전송
• 학교 활성/비활성 전환과 지역·상태 필터, 페이지네이션 목록
• 만료 임박 학교를 남은 기간 순으로 보여주는 사용 통계

교사 계정을 관리자가 비밀번호로 만들지 않고 초대 링크로 발급해, 계정 정보가 관리자를 거치지 않도록 설계했습니다.