1. 컨텍스트
1.1. 프로젝트 목적
•
선생님이 수업화면을 보면서 강의 할 때 학생이 화면동기화 상태일 경우라도, 강의재생이나 문제풀이 등 다른 액션은 할 수 있다.
이런 상황을 학생화면잠금기능을 통해 방지하고자 함
1.2. 용어 정리
새로 등장한 도메인 용어나 개념, 팀간 용어 일치를 위한 목적
•
화면 잠금
◦
선생님이 수업화면에서 화면잠금 Toggle ON 일 경우 학생화면(그룹이 특정될 수 있는 화면들)에 Opacity가 낮은 Overlay가 생성되며, 학생은 페이지 내 다른 Dom 요소와 상호작용 불가
1.3. 프로젝트 범위
•
선생님이 수업화면에서 화면잠금 Toggle 버튼을 통해 학생화면의 잠금상태를 제어
1.4. 프로젝트 성공 기준
•
선생님이 수업화면에서 화면잠금 Toggle 버튼을 통해 학생화면의 잠금상태를 제어할 수 있다.
2. FE 시스템 요구사항
2.1. 기능적 요구사항
2.1.1. 새로운 기능 추가 및 확장
기능 | 위치 | 설명 | 패키지 | 컴포넌트 계층 / 영향도 | 비고 |
화면잠금 Overlay | B2C | 선생님이 화면잠금 활성화 시에 학생화면에 덮히는 Overlay | mildang-ui | 신규 컴포넌트 추가
| overlay 가 DOM 최상단에 위치, 다른 DOM요소는 pointer-events 없애는걸로 구상중.
overlay 활성화 시, 강의재생/말하기 중이더라도 멈춰야함. 따라서 최상단 Store를 사용예정 |
화면잠금 Button | LMS | 수업화면에서 화면동기화버튼 좌측에 위치한 화면잠금 ON/OFF 토글버튼.
| mildang-ui | 기존 Button 컴포넌트 사용 | |
화면잠금 HealthCheck 갱신 | LMS | 선생님화면에서 화면잠금을 ON한 상태로 동작이없거나, 브라우저창이 종료된경우 Refresh 잠금 지속시간갱신을 할 수 없게 해서 학생이 잠금기능에서 벗어날 수 있게 하는 목적의 interval | mildang-ui | 화면동기화 기능의 refreshSync와 동일 | |
화면잠금 HealthCheck 수신 | B2C | 선생님이 화면잠금의 지속시간을 갱신하지 않으면 자동으로 풀리게끔 Interval 관리 | mildang-ui | 화면동기화 기능의 refreshSync와 동일 |
2.1.2. 기존 기능 변경 및 개선
기능 | 위치 | AS-IS | TO-BE | 컴포넌트 영향도 |
CMS LMS B2C | 기존 컴포넌트 사용 / 새로운 컴포넌트 추가 등 UI 재사용 여부 및 영향도를 작성 | |||
2.1.3. 밀당 디자인시스템(MDS) 영향도
컴포넌트 | 위치 | AS-IS | TO-BE | figma / storybook(chromatic) |
CMS LMS B2C | (신규 DS라면 '-' 표시) | |||
2.2. 비기능적 요구사항
(품질, 신뢰성, 사용성 / 효율성, 유지보수성, 호환성, 보안성)
리팩토링, 구조 변경 등의 작업으로 영향도가 있다면 어느 부분이 테스트되어야할지, 리그레션 테스트 범위를 작성
•
N/A
3. BE 시스템 요구사항
3.1. 외부 인터페이스 요구사항
•
Query.screenLockStatus
◦
화면 잠금 상태 조회
•
Mutation.lockScreen
◦
화면 잠그기
•
Mutation.unlockScreen
◦
화면 잠금 풀기
•
Mutation.refreshScreenLock
◦
화면 잠금 상태 갱신
◦
FE에서 1분에 한번씩 갱신 요청
•
Subscription.screenLockSubscription
◦
화면 잠금 상태 구독
3.2. 기능적 요구사항
3.2.1. 새로운 기능 추가 요구사항
•
N/A
•
3.2.2. 기존 기능 개선 요구사항
•
N/A
3.3. 비기능적 요구사항
•
N/A
4. 기타 요구사항
•
N/A
5. 참고문헌
•
N/A