부광고 스마트보드
교무실 화면(TV/키오스크)에 띄워 두는 대시보드. 시계·시간표·공지·급식·날씨·할 일을 한 화면에 모아 보여줍니다.
원래 구글 앱스크립트 + 구글시트로 돌아가던 것을, GitHub Pages + Supabase로 옮겼습니다.
개발: 이용휘
어디서든 코드 고치는 법
이 저장소를 깃허브에서 연 다음, 주소창에서 github.com → github.dev 로 바꾸면 (또는 파일 목록 화면에서 키보드 . 를 누르면) 브라우저 안에서 바로 VS Code가 열립니다. 설치할 것도 로그인할 것도 없고, 아이패드에서도 됩니다.
고친 뒤 왼쪽 소스 제어 탭에서 메시지를 쓰고 커밋하면 그대로 저장됩니다.
로그인 (2026-09-25부터)
원래는 로그인이 없는 화면이었지만, 이제는 로그인해야 들어갈 수 있습니다. 아이디는 선생님 성함 그대로이고,
초기 비밀번호는 123456(처음 로그인하면 숫자 6자리로 바꾸게 강제됩니다). 로그인은 Supabase Auth를 그대로
쓰되, 성함을 안 보이게 이름@smartboard.local이라는 이메일로 속에서 바꿔서 쓰는 방식입니다(수시지원계획서·
이동수업 프로젝트에서 이미 쓰던 것과 같은 방식).
- 아이디는 "🗓️ 시간표 관리" 안 "📥 엑셀로 가져오기"로 선생님 시간표 엑셀을 올리면 자동으로 만들어집니다.
이미 있는 이름이면 계정을 그대로 두고, 새 이름이면 초기 비밀번호로 새로 만듭니다. 관리자만 이 버튼이 보입니다.
- 관리자(이용휘)로 로그인하면 우측 상단에 "⚙️ 설정" 버튼이 뜹니다. 아이디 관리(추가·비밀번호 초기화·
관리자 지정)와 학기별 초기화(선생님 계정 전체 삭제·시간표 전체 삭제)가 여기 들어 있습니다.
- 로그인만 하면 관리자가 아니어도 지금까지처럼 공지·시간표·감독표를 자유롭게 고칠 수 있습니다 — 달라진 건
"로그인 없이" 하던 걸 "로그인하면" 하게 된 것뿐입니다.
- 로그인하면 "⭐ 내 시간표" 칸이 로그인한 사람 이름으로 자동으로 고정됩니다(수동으로 ⭐ 지정할 필요 없음).
- 관련 SQL(테이블·함수·RLS)은 저장소가 아니라 Supabase 프로젝트(
pqreeimkjnphupqqwiqo)에만 있습니다 —
아래 "데이터베이스" 항목 참고.
날씨·급식·학사일정은 공개 API(open-meteo, 나이스 교육정보 개방포털)를 그대로 불러오고, 캘린더 메모·즐겨찾기·할 일 등은 각자 브라우저의 localStorage에만 저장됩니다(기기마다 따로).
파일 구조
.
├── index.html 화면 전체 (위젯 스타일 + 데이터 불러오기 스크립트가 한 파일에 있습니다)
└── docs/
├── 이어서-작업하기.md 다른 곳에서 이어 작업할 때 먼저 읽는 문서
└── NEIS-시간표-연동-설계.md 나이스 학급 시간표 연동 설계 + 진행 상황
고칠 곳 찾기
| 하고 싶은 일 | 볼 곳 |
|---|
| 공지·시간표·감독표를 서버에서 가져오는 방식 바꾸기 | index.html 안 gasGetDuty/gasSetDuty/gasGetNotice/gasGetSchedule 등 gas 로 시작하는 함수들 |
| 화면 모양(위젯 배치·색) 바꾸기 | index.html 안 <style> |
| 날씨·급식·학사일정 API 바꾸기 | fetchWeather(), updateMeal(), renderHalfCalendar()/renderBigCalendar() |
| 전체 선생님 시간표 엑셀 업로드 양식 바꾸기 | index.html 안 parseTimetableWorkbook() (요일 셀과 "N교시" 글자 위치를 스스로 찾아서 읽습니다) |
| 나이스 학급 시간표 연동 | index.html 안 NEIS_TIMETABLE_SVC/gasFetchNeisClassTimetable 등 neis 로 시작하는 함수들, 자세한 설계는 docs/NEIS-시간표-연동-설계.md |
⚠️ 스크립트는 일반 <script> 입니다 — type="module" 로 바꾸지 마세요
버튼들이 onclick="..." 처럼 함수를 이름으로 직접 부릅니다. 모듈로 바꾸면 함수가 전역에서 사라져 모든 버튼이 한꺼번에 죽습니다.
데이터베이스 (Supabase)
프로젝트: pqreeimkjnphupqqwiqo
| 테이블 | 용도 | 비고 |
|---|
notices | 공지사항 | 좋아요·하트는 bump_reaction() 함수로 원자적으로 더하고 뺍니다(SECURITY DEFINER — 수정 RLS가 작성자·관리자만이라, 한 번에 ±1만 허용) |
timetable | 선생님 시간표 | teacher_name 유니크, cells는 35칸(월금 × 17교시) jsonb 배열 |
duty_roster | 야자·급식·아침 감독표 세 개를 한 표로 | board 컬럼으로 구분('야자감독'/'급식감독'/'아침감독'), col_index로 몇 번째 이름칸인지 |
neis_timetable_snapshot | 나이스 학급 시간표를 조회한 기록(스냅샷) | 아직 시험 조회 화면에서만 씀, 자세한 내용은 docs/NEIS-시간표-연동-설계.md |
teachers | 로그인 계정 (교사 이름 ↔ Supabase Auth 사용자) | id는 auth.users.id, is_admin으로 관리자 구분, must_change_password로 최초 로그인 강제 |
app_settings | 학기 표시 등 간단한 설정값 | key-value, 지금은 current_semester 하나만 씀 |
이제 로그인해야 쓸 수 있는 화면이라 RLS가 authenticated(로그인한 사람)에게만 열려 있고, anon은 전부 막혀
있습니다. 계정 생성·비밀번호 초기화·관리자 지정·학기별 초기화는 전부 admin_*/set_my_password 등
SECURITY DEFINER 함수로만 되고, 그 함수들 안에서 assert_admin()으로 관리자인지 직접 검사합니다(테이블을
그냥 열어두는 게 아닙니다). 함수 목록과 정의는 Supabase 대시보드 SQL Editor에서 확인할 수 있습니다.
로컬에서 실행하기
npx serve
배포
GitHub Pages — https://08hwichemi.github.io/smartboard/
🧳 개인판 (lite.html) — 다른 학교 선생님용, 서버 없음
https://08hwichemi.github.io/smartboard/lite.html
같은 코드(index.html)에서 tools/개인판만들기.py가 만든 복사본으로, 스크립트 맨 앞 const APP_MODE = 'school' 한 줄만 'personal'이다
(판올리기.py가 끝에 함께 돌리므로 lite.html을 손으로 고치지 말 것). 개인판은:
- 로그인·Supabase 없음 — 모든 자료가 그 컴퓨터의 브라우저(localStorage, 키 앞에
lite:를 붙여 공용판과 분리)에만 저장된다.
처음 열면 이름·학교(나이스 schoolInfo로 찾기)·담임 반·일과 시간·학년/반 수를 정하는 창이 뜬다(lite-settings).
- 쓰는 기능: 명렬표(엑셀·붙여넣기로 넣음,
lite-roster-<학년>-<반>)·단축키·생기부·수행평가·양식(가정통신문 머리 제외)·좌석배치표·월간일정표·결석계·조퇴증,
홈 = 시계·D-day·즐겨찾기 8칸·내 시간표(칸에 직접 입력)·캘린더·½캘린더·급식·날씨·학사일정(나이스, 고른 학교)·뉴스(공개 함수 news를 로그인 없이 직접)·할 일.
- 없는 기능: 공지·감독표·시간표 관리·수업 변경·다른 선생님 시간표·학생 시간표 카드·관리자 설정·실무사 홈·시간표 만들기·수험표.
- 백업: 💾 백업 창에서 폴더를 고르면(바탕화면 자체는 Chrome이 막아 그 안에 새 폴더) 거기에, 자료가 바뀌면 1분 뒤(최대 5분에 한 번)
내 스마트보드_백업.json에 덮어쓰고 일주일에 한 번 내 스마트보드_백업_지난주.json도 남김(Chrome·Edge의 폴더 접근 기능, 폴더 손잡이는 IndexedDB lite-fs).
브라우저 자료가 비어 있는데 백업 파일이 크면 덮어쓰지 않고 복원을 권한다. 폴더를 못 쓰는 브라우저는 하루 한 번 내려받기를 권하는 띠만.
- 명렬표를 읽는 모든 화면은
rosterRows(학년, 반) 하나를 거친다(공용판은 서버 students, 개인판은 브라우저).
- 선생님께 보내는 안내 페이지:
https://08hwichemi.github.io/smartboard/lite-guide.html(lite-guide.html, 그림은 guide/lite/ — guide.html과 같은 CSS).
- 테스트:
tools/tests/lite-test.js.
