[AdvICE] React 프레임워크로 "수업 등록 페이지" 구현

1. 구현 페이지  소개

"AdvICE"의 두 번째 서비스인 코딩존 예약/관리 시스템의 수업 등록 페이지를 개발하게 되었다. 갑작스럽게 프론트엔드 작업을 맡게 된 이유는 아직 구현해야 할 페이지들이 남아있는 상황에서 "AdvICE" 서비스를 개강(9월) 전에 배포하고 학과 사람들에게 소개하기 위해서입니다. 

 

수업 등록 페이지는 과 사무실 조교가 사용할 페이지로, 세 가지 주요 컴포넌트로 구성되어 있다. 이 세 컴포넌트는 각각 다음과 같은 기능을 제공한다:

1. 수업 등록 컴포넌트
   • 기능 설명: 이 컴포넌트는 조교가 매주 학생들이 예약할 수 있는 수업들을 등록할 수 있게 한다. 각 수업의 요일, 시간,날짜, 조교 이름, 과목명, 학년, 인원과 같은 필요한 정보를 입력하여 수업을 새롭게 생성한다.
2. 조 정보 등록 컴포넌트

• 기능 설명: 이 컴포넌트를 통해 두 가지 조(A/B)의 정보를 미리 등록할 수 있다. 각 조에 대한 정보로는 조의 종류, 요일, 시간,날짜, 조교 이름, 과목명, 학년, 인원을 포함하고 있다. 조 정보 등록 컴포넌트를 통해 매주 수업을 등록할 때 미리 등록한 조 정보를 반환받아서 날짜만 추가해서 효율적이고 간편하게 수업들을 등록할 수 있다.

1. 학기 초기화 컴포넌트

• 기능 설명: 이 컴포넌트는 새로운 학기 시작에 필요한 모든 준비를 할 수 있도록 지원한다. 코딩존 관련 모든 데이터를 초기화하고, 필요한 경우 조교의 권한을 박탈하는 기능을 포함한다. 이는 시스템을 새 학기 상태로 재설정하여 새로운 시작을 깔끔하게 준비할 수 있게 해준다.

 

2. 수업 등록 UI

- 추가, 삭제 버튼을 통해 수업을 원하는 수만큼 등록 가능하게 구현

- 요일 선택은 드롭다운 메뉴를 통해 '월요일'부터 '금요일'까지만 선택할 수 있게 설정

- 사용자가 입력한 월과 일이 유효하지 않은 경우(예: 13월, 32일 등), 해당 입력 박스는 빨간색으로 변경되어 입력 오류를 시각적으로 알리도록 설정

- 시간을 select로 코딩존이 진행되는 시간(오전9시~오후6시) 사이에서만 고를 수 있게 설정

3.  조(A/B) 정보 등록 UI

4. 학기 초기화 UI