2026년 9월 7일 월요일

[교무행정] 특별실·행사 신청 및 관리자 승인 캘린더 - 교무 스케줄러 통합 관리



종이 신청서를 없애는 '교내 특별실·행사 이용 신청 & 관리자 승인 캘린더'

🗓️ 교무행정 및 시설 관리 — 교사들이 교내 특별실(과학실, 음악실, 컴퓨터실)과 학교 행사 일정을 화면에서 선택하여 신청하면 관리자가 승인(PUT)이나 취소(DELETE)를 원클릭으로 처리하는 표준 웹앱입니다. 수기 장부나 메신저 쪽지로 확인하던 시설 예약 행정을 완전 디지털화하여 일정 충돌을 원천 차단합니다.

📖 한 줄 정의

심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
요청·승인·취소 3단계 워크플로 교사가 신청(요청) → 관리자가 승인(수정) → 취소 시 삭제. 표준 데이터 관리 3동작을 웹 화면으로 체험합니다. 과학실 3교시 신청 → 관리자 승인 → 상태 뱃지 '승인됨' 녹색 표시.
중복 예약 즉시 차단 같은 특별실의 같은 요시를 두 교사가 동시에 신청하면 두 번째 신청은 즉시 경고창으로 차단됩니다. 컴퓨터실 1교시 중복 시 '이미 예약되었습니다' 자동 경고.
주간 캘린더 뷰 + CSV 내보내기 월요일부터 금요일까지 7교시 그리드 캘린더에 승인된 예약이 색상 카드로 표시됩니다. 주간 스케줄을 한눈에 보고, 월말 행정 보고용 CSV를 원클릭 내보내기.

2. 핵심 아키텍처 해설

① 예약 데이터 구조: BOOKINGS 상수

const BOOKINGS = [
  { id: 1, room: "과학실", day: "월", period: 3, teacher: "김영희(교사 A)", status: "승인됨" },
  { id: 2, room: "컴퓨터실", day: "화", period: 2, teacher: "이민수(교사 B)", status: "대기중" }
];

예약 기본 정보(교실, 요일, 교시, 신청자, 승인 상태)를 하나의 배열로 관리합니다.

② 중복 예약 감지 로직

function isConflict(room, day, period) {
  return BOOKINGS.some(b =>
    b.room === room && b.day === day &&
    b.period === period && b.status !== "취소됨"
  );
}

function reserve(room, day, period, teacher) {
  if (isConflict(room, day, period)) {
    sound("nope");
    return "이미 예약된 시간입니다.";
  }
  BOOKINGS.push({ id: BOOKINGS.length + 1, room, day, period, teacher, status: "대기중" });
  sound("ding");
  renderCalendar();
}

같은 교실의 같은 요시에 취소되지 않은 예약이 이미 있으면 경고음과 함께 차단하고, 새 신청은 '대기중' 상태로 추가합니다.

③ 관리자 승인(PUT) 및 취소(DELETE) 처리

function approve(id) {
  const b = BOOKINGS.find(b => b.id === id);
  if (b) b.status = "승인됨";
  renderCalendar();
}

function cancel(id) {
  const b = BOOKINGS.find(b => b.id === id);
  if (b) b.status = "취소됨";
  renderCalendar();
}

관리자가 승인 버튼을 누르면 상태가 '승인됨'으로 업데이트되고, 취소 시 '취소됨'으로 전환됩니다. 승인된 예약만 캘린더에 색상 카드로 표시됩니다.

3. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 특별실 목록(과학실, 음악실, 컴퓨터실)과 교시 구조(1~7교시)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 특별실예약.html로 저장하여 교내 인트라넷에 배포합니다.

제미나이 전용 에러 제로 프롬프트

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const BOOKINGS = [...] 상수에 교내 특별실 예약 5건 이상의 예시 데이터를 내장하여 캘린더가 즉시 렌더링되도록 한다.
3. 중복 예약 차단: 같은 교실+같은 요일+같은 교시에 취소되지 않은 예약이 이미 있으면 즉시 경고음과 안내창으로 차단한다.
4. 교사 개인정보 최소 수집: 교사 성명은 닉네임(교사 A, 교사 B)으로 표기하고, 외부로 전송하지 않는다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 관리할 특별실 목록은 어떤 것들이 있나요? (과학실, 음악실, 컴퓨터실, 체육관 등)
2. 교시 구조는 1~7교시인가요, 방과후 연장까지 포함할까요?
3. 캘린더 테마 색상을 파란색 계열과 녹색 계열 중 어느 것으로 갈까요?

🎯 에디터 한줄평

"과학실 책상에 야트막야트막 붙어있던 수기 예약 장부, 그리고 쪽지로 오가던 '그 시간 제가 쓸게요'라는 부자연스러운 약속이 화면의 녹색 승인 뱃지로 깔끔하게 대체됩니다. 서버 없이도 요청-승인-취소의 3단계 행정을 완전히 전산화한다는 것, 그것이 가장 현실적인 교무실 스마트 워크의 실체입니다."

📚 기술·교육 참고 링크

  • 교육부 학교 시설·안전 및 특별실 관리 지침
  • 교육과정 연계: 교무 행정, 과학실 안전 관리, 특별실 활용 수업 계획
By 시간: