My Report View 레벨 변경 기획안

버전(ver)	v1.0	페이지코드	CL-001	페이지명	Class Details — Change Level (클래스 레벨 변경)	이용자	교사 (PC / Mobile / Tablet)	Description
작성인		작성일	2026.05.11	페이지 경로	Teacher > Class Details > Edit Class Information (changelevel_v2.html)			Description

1

2

■ 요약

- Edit Class Information 모달에서 Change Level 시 해당 클래스 자체의 레벨이 변경됨
- 소속 학생의 다른 레벨 학습 이력 조회는 Progress View(리포트 화면)의 View 셀렉트박스에서 가능 (→ VL-001)
- 레벨 변경 시 충돌 학생이 있으면 Level Change Conflict 모달로 안내 (→ CL-002)

■ 진입 경로

- Manage Classes → 클래스 선택 → Class Details

1 Class Details 화면 구성

1-1. 클래스 정보 영역

클래스명 + 편집 버튼(연필 아이콘)
현재 레벨 (예: Level 5) · Class ID 표시

1-2. 학습 현황

Average Completion: 클래스 평균 완료율 (프로그레스 바)
Average Score: 클래스 평균 점수

1-3. 학생 목록

유닛별 Online Learning Progress, Total Score, 최근 학습일 표시
학생 이름 클릭 시 해당 학생의 My Report로 이동

2 Edit Class Information 모달

2-1. 진입 방법

클래스명 옆 편집 버튼(연필 아이콘) 클릭

2-2. 모달 구성

Class Name: 클래스명 변경 입력 필드 (최대 20자)
Change Level: 레벨 변경 드롭다운 셀렉트 (Level 1 ~ Level 6)
Change Level은 클래스 자체의 레벨을 변경하는 기능 (개별 학생 레벨이 아닌 클래스 엔티티의 속성 변경)

2-3. 레벨 변경 동작

드롭다운에서 원하는 레벨 선택 후 Save 버튼 클릭
충돌 학생이 없으면 즉시 레벨 변경 완료
충돌 학생이 존재하면 Level Change Conflict 모달 표시 (→ CL-002)
레벨 변경 후 소속 학생의 기존 레벨 학습 이력은 Progress View의 View 셀렉트박스에서 조회 가능 (→ VL-001)
Cancel 클릭 시 변경 없이 모달 닫힘

버전(ver)	v1.0	페이지코드	CL-002	페이지명	Level Change Conflict — 레벨 변경 충돌 알림	이용자	교사 (PC / Mobile / Tablet)	Description
작성인		작성일	2026.05.12	페이지 경로	Teacher > Class Details > Edit Class Information > Save (changelevel_v2.html)			Description

1

2

3

■ 요약

- Edit Class Information에서 레벨 변경 시, 변경 대상 레벨에 이미 타 클래스에 소속된 학생이 있을 경우 충돌 알림 모달 표시
- 충돌 학생 목록을 보여주고, 해당 학생을 제외하고 나머지 학생만 레벨 변경할지 선택

■ 진입 경로

- Edit Class Information 모달 → 레벨 변경 선택 → Save 클릭 시 자동 노출

1 충돌 발생 조건

1-1. 충돌 기준

학생은 레벨당 하나의 클래스에만 소속 가능
레벨 변경 시, 소속 학생 중 변경 대상 레벨에 이미 다른 클래스에 가입되어 있는 경우 충돌 발생

1-2. 현행 문제점 (Starship)

현재 Starship은 충돌 발생 시 기존 클래스에서 학생을 강제 탈퇴시킨 뒤 레벨 변경 처리
교사·학생에게 사전 안내 없이 처리되어, 해당 클래스 교사가 학생 이탈을 인지하지 못하는 문제
본 모달은 충돌 학생을 사전 고지하고, 제외 후 변경하거나 취소할 수 있도록 개선

1-3. 예시

A 선생님의 Level 2 클래스 → Level 3으로 변경 시도
소속 학생 B가 이미 C 선생님의 Level 3 클래스에 가입되어 있음
→ 학생 B가 충돌 대상으로 표시됨

2 충돌 모달 구성

2-1. 안내 메시지

변경 대상 레벨에 이미 소속된 학생이 있음을 안내
"A student can only belong to one class per level."

2-2. 충돌 학생 테이블

No. / Name / E-mail(ID) 컬럼 표시
모바일에서는 No. 컬럼 숨김, Name + E-mail(ID) 2컬럼

2-3. 안내 문구

충돌 학생은 레벨 변경에서 제외됨을 안내
나머지 학생만 변경 레벨로 이동됨을 표시

3 사용자 선택지

3-1. Change Level

충돌 학생을 제외한 나머지 학생들만 포함하여 클래스 레벨 변경 진행

3-2. Cancel

레벨 변경을 취소하고 모달 닫힘
클래스 레벨은 변경되지 않음

3-3. 반응형 동작

PC: Cancel + Change Level 버튼 나란히 표시
태블릿: 콘텐츠 높이에 맞는 모달, Cancel + Change Level 표시
모바일: 전체화면 모달, 하단에 Cancel + Change Level 버튼

버전(ver)	v1.0	페이지코드	VL-001	페이지명	My Report — View 레벨 변경 (PC)	이용자	교사 (PC)	Description
작성인		작성일	2026.05.11	페이지 경로	Teacher > My Report (tea_my_report_v2.html)			Description

1

2

■ 요약

- My Report 타이틀 우측에 View 셀렉트박스를 추가하여 레벨 간 리포트 전환 기능 제공
- 기존 뒤로가기 버튼 우측의 레벨 표시는 제거 — View 셀렉트박스가 현재 조회 레벨을 표시하므로 중복
- 학생이 실제 소속된 클래스는 드롭다운에서 (Enrolled Class)로 표기하여 현재 소속 레벨을 구분

■ 진입 경로

- Manage Classes → 클래스 선택 → Class Details → 학생 선택 → Progress (교사/기관 공통)
- Manage Students → 학생 선택 → Progress (교사/기관 공통)
- Manage Teachers → 교사 선택 → Class List → 클래스 선택 → Class Details → 학생 선택 → Progress (기관 전용)

■ 대상 사용자

- 교사 / 기관 관리자 계정으로 학생 리포트 열람 시

1 View 셀렉트박스 위치 및 정렬

1-1. 위치

타이틀 ("OO's Report") 라인의 우측에 배치
타이틀과 수직 중앙 정렬

1-2. 우측 정렬 기준

셀렉트박스 우측 끝이 하단 Overall Progress 박스 우측과 일치
Overall Progress는 max-width: 1630px 적용 — 셀렉트박스도 동일 기준으로 right offset 계산

1-3. 닫힌 상태

"View:" 라벨 + 현재 선택된 레벨 (예: Level 5) + 드롭다운 화살표
폰트 크기: 18px

2 드롭다운 옵션 목록

2-1. 옵션 구성

레벨 목록 표시 (Level 1 ~ Level 6)
현재 선택된 레벨은 파란색(#0072BC) + 볼드 표시
선택되지 않은 상태에서는 일반 font-weight

2-2. Enrolled Class 표기

학생이 실제 속한 클래스에만 (Enrolled Class) 표기
Enrolled Class 폰트 크기: 16px, 색상: 선택 시 파란색 / 미선택 시 회색(#667085)
"Enrolled Class"는 현재 조회 중인 레벨이 아닌, 실제 소속된 클래스를 의미
기존 뒤로가기 버튼 우측의 레벨 표시를 대체 — 소속 레벨을 드롭다운 내에서 직관적으로 확인 가능

2-3. 레벨 선택 동작

옵션 클릭 시 해당 레벨의 리포트 데이터로 화면 갱신
셀렉트박스 닫힌 상태의 텍스트가 선택된 레벨로 변경
드롭다운 외부 클릭 시 자동 닫힘

버전(ver)	v1.0	페이지코드	VL-002	페이지명	My Report — View 레벨 변경 (반응형)	이용자	교사 (Mobile / Tablet)	Description
작성인		작성일	2026.05.11	페이지 경로	Teacher > My Report (tea_my_report_v2.html)			Description

Mobile (375px)

Tablet (768px)

1

2

■ 요약

- 반응형에서는 셀렉트박스가 뒤로가기 버튼과 같은 라인의 우측에 배치
- 기존 뒤로가기 버튼의 레벨 표시는 제거 — View 셀렉트박스로 대체
- 뷰포트 크기에 따라 폰트 크기 차등 적용

■ 진입 경로

- VL-001과 동일 (모바일/태블릿 뷰포트에서 접근 시)

1 모바일 — 위치 및 스타일

1-1. 위치

뒤로가기(←) 버튼과 같은 라인, 우측 끝 배치
뒤로가기 버튼과 수직 중앙 정렬

1-2. 폰트 크기

셀렉트박스 (닫힌 상태): 15px
드롭다운 옵션: 15px
Enrolled Class 텍스트: 14px

1-3. 적용 범위

세로: max-width: 767px
가로: max-height: 500px (landscape)

2 태블릿 — 위치 및 스타일

2-1. 위치

모바일과 동일 — 뒤로가기(←) 버튼 라인 우측

2-2. 폰트 크기

셀렉트박스 (닫힌 상태): 18px (PC와 동일)
드롭다운 옵션: 18px
Enrolled Class 텍스트: 16px

2-3. 적용 범위

768px ~ 1366px (모바일 범위 제외)

2-4. 브레이크포인트 기준

1367px 이상: PC 레이아웃 (뒤로가기 + 타이틀 한 줄)
1366px 이하: 반응형 레이아웃 (뒤로가기와 타이틀 분리)