2026학년도 음악실 자리배치 프로그램

이 프로그램은 2026학년도 음악실의 좌석 배치를 교육과정 주차(1주차부터 21주차)에 따라 시뮬레이션하는 웹 애플리케이션입니다.

좌석은 4줄에 총 26개의 지정된 위치(좌석)로 구성되어 있습니다. 핵심 로직은 '매주 한 칸씩 옆으로 이동'하는 원리를 적용하여, 선택한 주차에 맞춰 각 좌석에 담당 학생 번호를 보여줍니다.

• 자리 이동 원리: 좌석들은 좌석 번호 1부터 순환하며 매주 한 칸씩 순서대로 이동합니다. 예를 들어, 1주차에 1번 좌석이 A 위치에 있었다면, 2주차에는 1번 좌석이 다음 칸으로 이동한 자리에 있게 됩니다.
• 주차 동기화: '오늘 주차로' 버튼을 누르거나 주차를 변경하면, 오늘 날짜 또는 입력한 주차에 해당하는 좌석 번호 배치가 즉시 반영됩니다.
• 안내 문구: 상단의 입력창을 통해 수업 안내 문구를 수정하고 저장할 수 있으며, 이 문구는 좌석 배치가 바뀌어도 유지됩니다.

화면·작동 안내

주요 UI 요소

• [배지] 2026 음악실 자리배치: 프로그램의 제목입니다. 학생들에게 현재 보고 있는 배치 정보가 2026학년도에 대한 것임을 알려줍니다.
• [오늘 날짜 정보 표시 영역]: 오늘 날짜와 현재 속한 교육과정 주차(예: 5월 10일 · 7학기 5주차 수업)를 표시합니다. 이 정보는 앱 실행 시 자동으로 업데이트되며, 브라우저를 다시 열어도 일정 시간 간격으로 갱신을 시도합니다.
• [주차 입력창]: 현재 보고 싶은 교육과정 주차(1~21)를 직접 입력하는 곳입니다. 이 값을 변경하고 엔터를 치거나 포커스를 잃으면 좌석 배치가 해당 주차에 맞춰 변경됩니다.
• [오늘 주차로 버튼]: 현재 시스템 시간을 기준으로 오늘이 속한 교육과정 주차로 자동 이동하여 좌석 배치를 업데이트합니다. (학교 일정 반영)
• [힌트/안내 문구(P 태그)]: 프로그램의 동작 원리(매주 좌석 이동, 주차 계산 방식 등)를 설명하는 안내문입니다.
• [좌석 배치 영역(room)]: 실제 음악실 좌석 26개가 배치되는 공간입니다. 각 좌석은 버튼 형태로 되어 있으며, 클릭하면 해당 좌석이 '1번'이 되는 주차로 주차 입력값이 자동 설정되고 배치가 업데이트됩니다. 좌석 번호는 현재 선택된 주차에 따라 다르게 표시됩니다.
• [수업 안내 문구 입력창]: 사용자가 원하는 수업 안내 문구를 입력하고 저장할 수 있는 텍스트 필드입니다.
• [초기화 버튼]: 입력된 수업 안내 문구를 지우고 기본 안내 문구로 되돌립니다.

사용 흐름

1. 기본 로딩: 앱을 열면, 현재 날짜에 해당하는 주차의 좌석 배치가 자동으로 로드됩니다. (로컬 저장소에 주차가 저장되어 있다면 해당 주차로 로드될 수도 있습니다.)
2. 주차 변경: 좌석 배치를 특정 주차로 보고 싶다면, [주차 입력창]에 원하는 주차 번호를 입력하고 엔터를 치거나 다른 곳을 클릭합니다.
3. 오늘 주차 반영: 오늘 날짜의 배치를 보고 싶으면, [오늘 주차로 버튼]을 클릭합니다. (이 기능은 오늘 날짜가 교육과정 주차에 속한 경우에만 작동합니다.)
4. 자리 특정화: 특정 좌석(버튼)을 클릭하면, 해당 좌석이 '1번'이 되도록 주차 입력창 값이 자동 변경되고, 좌석 배치가 해당 주차에 맞춰 다시 그려집니다.
5. 안내 문구 수정: [수업 안내 문구 입력창]에 새로운 문구를 입력하고, 이 상태에서 다른 곳을 클릭하거나 초기화 버튼을 누르지 않으면 문구가 자동 저장되어 유지됩니다.
6. 안내 문구 초기화: [초기화 버튼]을 클릭하면 안내 문구가 지워지고 기본 문구로 돌아갑니다.

프로젝트 진행 상황

• [x] README.md 기본 구조 및 내용 작성 완료
• [x] 화면·작동 안내 및 프로젝트 진행 상황 섹션 포함 완료