2026년 9월 6일 일요일

[안전·행정] 교내 시설물 하자 보수 원클릭 접수·처리 포털 - 사진 촬영→상태 추적



타일이 부서졌다면 카메라를 들어주세요 — '교내 시설물 하자 보수 실시간 원클릭 접수 포털'

🔧 학교안전행정·교무 — 파손된 타일, 고장 난 냉난방기, 창문 파손 등을 교직원이 스마트폰으로 촬영하면 행정실 담당자에게 접수 알림이 표시되고, 보수 진행 상황(접수 → 처리 중 → 완료)이 실시간으로 투명하게 공유되는 원클릭 시설물 관리 포털입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
시설물 위치 코드 자동 분류 교실·복도·운동장·특별실 등 위치 코드를 선택하면 파손 종류(문·창문·냉난방기·타일)와 긴급도(긴급/일반)가 자동 분류됩니다. 긴급(빨강)으로 접수하면 관리자 대시보드 상단에 즉시 고정됩니다.
3단계 진행 상태 표시 "접수됨 → 처리 중 → 완료" 3단계 상태 라벨이 실시간 트래킹되어 보수 예정 시간을 투명하게 안내합니다. 완료 처리 시 파랑 표식이 자동으로 덮어써져 인정을 확인.
월간 보수 통계 요약 한 달간 접수 건수와 처리 완료율을 막대 차트로 집계하여 학교 안전 점검 보고서로 그대로 제출합니다. @media print 월간 하자 보수 통계 요약지 A4 인쇄 지원.

2. 핵심 아키텍처 해설

① 시설물 접수 및 상태 라벨링 엔진

const AREAS = ["교실", "복도", "운동장", "특별실", "급식실", "기타"];
const STATUS_LABELS = { pending: "🟡 접수", processing: "🔵 처리 중", done: "🟢 완료" };

function registerFix(area, detail, urgency) {
  const id = "FIX-" + String(FIX_LOG.length + 1).padStart(4, "0");
  FIX_LOG.push({ id, area, detail, urgency, status: "pending", at: nowStamp() });
  if (urgency === "긴급") moveTop(id);
  return id;
}

위치 코드와 긴급도(긴급/일반)를 선택하면 자동으로 ID가 부여되고, 긴급 건은 최상단으로 이동시켜 관리자가 즉시 인지하도록 합니다.

② 3단계 상태 전환 & 투명한 공유

function updateStatus(id, newStatus) {
  const item = FIX_LOG.find(f => f.id === id);
  if (!item) return false;
  item.status = newStatus;
  item.updatedAt = nowStamp();
  renderBoard();
  return true;
}

행정실 관리자가 보수 상태를 한 단계씩 업데이트하면 접수자(교사)의 화면에도 실시간으로 반영되어 "어디까지 처리됐는지" 투명하게 공유됩니다.

③ 월간 보수 통계 요약 리포트

function monthlyReport(logs) {
  const done = logs.filter(l => l.status === "done").length;
  const total = logs.length;
  const rate = Math.round(done / total * 100);
  return { done, total, rate };
}

월별 접수 건수, 처리 완료율(%), 미처리 긴급 건 등을 자동 집계하여 학교 안전 점검 보고서 양식으로 제출합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 관리 위치 코드(교실/특별실 등)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 시설보수.html로 저장하여 교무실 태블릿에 고정합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 서버 통신 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 시설물 위치 코드 선택: 교실·복도·운동장·특별실·급식실 등을 드롭다운으로 선택하고 상세 내용을 입력한다.
3. 3단계 진행 상태 라벨: 🟡 접수 → 🔵 처리 중 → 🟢 완료의 3단계 상태 표시 및 관리자 클릭 전환이 실시간 반영된다.
4. 긴급도 분류: 긴급 건은 대시보드 최상단에 붉은 배경으로 고정되어 즉시 관리자가 인지하도록 한다.
5. 학생 개인정보 0: 학생 정보는 취급하지 않으며, 교사 제보자 표기는 닉네임·부서만 사용한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 시설물 유형 드롭다운에 냉난방기·화장실·특별실험실까지 포함할까요?
Q2. 긴급 건 접수 시 화면 알림 사운드를 Web Audio로 합성할까요?
Q3. 월간 통계 요약을 인쇄용 A4 가로 보고서 양식으로 출력할까요?

🎯 에디터 한줄평

"'어제 행정실에 말했는데요'라는 아쉬움은 학교 안전사고의 뿌리입니다. 이 포털은 그 채찍질을 코드 라벨 하나로 명확하게 바꿔줍니다. 교사는 접수 시각과 상태 확인만으로 자신이 한 일을 증명하고, 행정 담당자는 '미처 못 본 것'을 미처 '완료해야 할 것'으로 변환하는 객관적 원장 연구의 일환이라 하겠습니다."

📚 기술·교육 참고 링크

  • 학교 시설물 안전 관리 지침 및 하자 보수 절차 표준화 이론
  • 교육과정 연계: 교무 행정 자동화, 학교 안전 점검, 시설 관리
By 시간: