S-DAY

스마트캠퍼스 과제, 직접 적은 과제, 시험 일정을 마감 순으로 모아 보는 학기 플래너입니다. 단독 웹으로도, 노션 페이지에 임베드해서도 씁니다. 같은 보드 코드를 입력한 기기끼리 과제가 동기화됩니다.

• 서비스: https://s-day-board.vercel.app
• 프론트엔드: HTML / CSS / Vanilla JS ES 모듈 (빌드 없음)
• 백엔드: Supabase (PostgreSQL, RPC 함수, Edge Function, pg_cron)
• 배포: Vercel (GitHub main push 시 자동 배포)

기능

보기

• 목록: 마감 지남 / 오늘 / 내일 / 이번 주 / 다음 주 / 그 이후 / 완료로 묶어서 표시
• 캘린더: 월 단위, 날짜를 누르면 그날 과제와 "이 날짜에 과제 추가"
• 과목: 왼쪽(좁은 화면은 위쪽 칩)에서 과목을 고르면 그 과목만 보기
• 상단에 "다음 마감은 ○○, 남은 시간" 한 줄, 일주일 안의 시험이 있으면 한 줄 더 (PC만. 폰에서는 바로 필터와 목록)

과제

• 과제명, 과목, 마감 일시, 메모. 목록 왼쪽 별로 중요 표시
• 과목은 색 점이 붙은 목록에서 고르고, 찾기 칸에 없는 이름을 적으면 새 과목으로 추가 (공부 화면과 같은 목록). 새로 추가한 과목은 보드에 저장돼 다른 기기에서도 보이고, 아직 어디에도 안 쓴 과목은 설정 → 과목에서 지울 수 있어요
• 과목 색은 기본으로 과목 이름 순서대로 정해지고, 설정 → 과목에서 순서(왼쪽 손잡이를 끌어서, 키보드는 손잡이에서 ↑ ↓)와 색 · 분류를 바꿀 수 있어요 (보드에 저장돼 모든 기기에서 같게). 과목 목록 · 필터 · 공부 화면이 이 순서를 따라요
• 체크 상자 없음: 스마트캠퍼스 과제는 제출하면 저절로 완료, 직접 넣은 과제는 편집 화면의 "제출 완료" 버튼, 시험은 시간이 지나면 저절로 끝난 일정(완료처럼 줄을 그어 표시)
• 날짜는 작은 달력, 시간은 시계 다이얼로 고르고, 자주 쓰는 날짜·시간은 한 번에 선택
• 삭제는 바로 되돌리기 가능
• 삭제 후 5초 동안 되돌리기
• D-day: 3일 이내는 노란 형광펜, 24시간 이내는 분홍 형광펜, 마감 지남은 빨간 글씨, 그 밖에는 흐린 글씨

시험

• 시험 템플릿(추가 → 시험): 시험 이름 빠른 선택(중간고사, 기말고사, 퀴즈, 실기시험), 시작·끝나는 시각, 장소, 시험 범위 메모
• 시작 시각을 고르면 끝나는 시각이 1시간 뒤로 자동으로 채워지고, 시험 시간(50분~2시간)도 버튼으로 고를 수 있어요
• 시작 시각 기준 D-day, 시험 중에는 "시험 중", 끝나면 자동으로 지난 일정으로 이동
• 목록과 캘린더에서 과제와 구분해 표시하고, "시험만" 보기 제공

스마트캠퍼스 강의 영상 (할 일)

• 추가 → 할 일로 직접 넣을 수도 있어요 (완료는 "완료로 표시")
• 토큰을 연결하면 아직 안 본 강의 영상을 "할 일"로 가져와요 (수강 기한이 마감, 다 보면 저절로 완료). 과제 · 시험과 따로 초록 "할 일" 표시

기타 일정 (할 일 · 휴강 등)

• 종류마다 "목록에는 안 보이게"를 켜면 목록 · 공부 탭에는 안 나오고 캘린더 · 위젯에만 보여요 (휴강은 기본으로 켜져 있음, 검색하면 보임)
• 시각 고르기에서 "종일"을 고르면 시각 없이 그날 하루 일정이 돼요 (목록은 "종일", 구독 캘린더는 종일 일정, 알림은 하루 단위만)
• 할 일은 따로 두지 않고 기타의 한 종류예요 (기본 종류: 할 일 · 휴강, T는 기타 · 할 일로 열림)
• 추가 → 기타에서 종류를 골라요. 종류는 이름과 색을 직접 만들 수 있어요 (예: 휴강 · 회색). 이름을 비우면 종류 이름이 제목이 돼요
• 캘린더 · 위젯에서 그 종류 색으로 보이고, 시간이 지나면 끝난 일정으로 넘어가요

과목 줄임말 · 짧은 이름

• 설정 → 과목에서 과목을 누르면 줄임말을 정할 수 있어요
• 캘린더 · 위젯은 짧은 이름으로 보여요: 과제는 "과목 과제", 시험 · 기타는 "과목 이름"(기타 이름을 비우면 "과목 종류" → 데이터베이스 휴강)
• 스마트캠퍼스 강의 영상은 기타의 '영상 시청' 종류로 보여요 ("과목 영상 시청", 색은 기타 → 영상 시청에서 바꿀 수 있음)

공부 중 알림 (폰)

• 알림을 허용한 폰에서 타이머를 켜면 알림 창에 "공부 중 · 과목 · 몇 시에 끝나요"가 계속 떠 있고, 거기서 바로 끝내기
• 떠 있던 타이머 창(PiP)을 폰이 저절로 닫았으면 S-DAY로 돌아왔을 때 "다시 띄우기"를 보여 줌

새 과제 알림

• 마감 알림을 켜 두면 스마트캠퍼스에서 새 과제 · 강의 영상이 들어올 때도 알려요 (처음 연결할 때와 이미 마감이 지난 것은 빼고)

스마트캠퍼스 공지

• 토큰을 연결하면 수강 과목의 최근 30일 공지를 함께 가져와요. 위쪽 종 아이콘(새 공지는 빨간 점)에서 보고, 새 공지가 올라오면 알림도 보내요.

미제출

• 마감이 지났는데 제출 기록이 없는 스마트캠퍼스 과제는 "미제출"로 마감 지남 묶음에 남아요 (스마트캠퍼스의 missing 판정 그대로, 면제 과제 제외).

캘린더로 보내기

• 설정 → 내 캘린더로 보내기에서 구독 주소를 만들면 구글 · 아이폰 캘린더에 과제와 시험이 떠요 (calendar-feed Edge Function, 읽기 전용 열쇠, 새로 만들면 이전 주소는 막힘).

반복

• 새 일정을 만들 때 "매주 · 4번 / 8번 / 학기 끝까지"로 한 번에 만들 수 있어요.

노션 간단 모드

• 주소에 ?compact를 붙이면 다가오는 일정 6개만 크게 보여요. 노션 임베드용.

마감 알림

• 설정 → 마감 알림에서 기기마다 켜요. 알림 시점은 1일 전 · 3시간 전 · 1시간 전 · 30분 전 중에서 골라요 (기본 1일 전, 3시간 전)
• 시험은 시작 시각 기준, 완료한 과제는 알리지 않아요. 마감을 바꾸면 바뀐 마감 기준으로 다시 알려요
• 알림을 누르면 그 과제가 열린 채로 앱이 떠요
• 노션 임베드 안에서는 권한을 받을 수 없어서 "새 창에서 열기"로 안내해요. 아이폰은 홈 화면에 추가한 앱에서만 켤 수 있어요(iOS 16.4 이상)

공부 모드 (왼쪽 위 일정 공부 글자, 단축키 S)

• 탭이 일정 모드는 목록 · 캘린더, 공부 모드는 오늘 · 기록. 폰에서는 옆으로 밀어 목록 ⇔ 캘린더 ⇔ 공부 오늘 ⇔ 기록을 넘겨요
• 캘린더는 화면 너비와 상관없이 일정 이름을 한 줄씩 종류 색(파스텔) 줄로 (시험 빨강 · 과제 노랑 · 할 일 파랑 · 기타는 정한 색, 끝낸 건 흐리게 + 취소선)
• 과목 고르기 목록은 '지금' 분류의 과목이 위(설정 → 과목에서 정한 순서), 그 밖의 과목은 "다른 과목" 아래에
• 친구 · 설정 같은 창이 열려 있으면 뒤 화면은 스크롤되지 않고, 창 바깥을 누르면 닫혀요. 앱은 폰의 화면 회전 설정을 따라요
• 오늘 · 왼쪽: 타이머(스톱워치, 25분 집중 · 5분 휴식, 50분 · 10분. 일시정지 없이 시작 · 끝내기만, 버튼은 상단바 친구 버튼 왼쪽, 고른 과목 색이 옅게 깔린 상자)와 "오늘 공부". 오늘 공부에는 내가 넣은 과목(과목만 골라도 되고 메모는 선택)과 D-7 안의 과제 · 시험(과목 | 이름 | D-day)이 한 줄씩 나오고, ▶로 바로 시작
• 계획 미리 잡기: 오늘 공부 머리의 오늘 · 내일 · 이번 주로 내일이나 이번 주(모레~7일 뒤) 중 고른 날에 넣어 두면 그날 오늘 공부에 나와요. 지난 7일 안에 넣고 못 한 계획은 오늘 공부 아래 "지난 계획"으로 흐리게 나오고 ← 버튼으로 오늘로 옮겨요
• 공부 중인 친구: 오늘 탭 왼쪽 아래에 오른쪽으로 한 명씩(사람 아이콘 · 이름 · 흘러가는 타이머), 올리면(폰은 누르면) 오늘 공부한 시간
• 타이머 시간 바로 오른쪽에 ▶(시작) / ❚❚(끝내기). 다른 기기에서 시작해 이 기기에 떠 있지 않으면 위쪽에 띄우기 아이콘
• 오늘 · 오른쪽: 오늘 공부 시간과 하루 목표, 하루 타임라인(한 시간이 한 줄, 줄 안의 위치가 분, 10분 격자), 그 아래 과목별 합계. 타이머 없이 공부한 시간은 타임라인의 빈 곳을 끌어서(폰은 누르면 30분, 길게 누른 채 끌면 원하는 범위) 범위를 고르고 시각 · 과목을 정해 기록. 타임라인의 공부 블록을 누르면 시작 · 끝 시각과 과목을 고치거나 지울 수 있어요. 기록 탭에서 고른 날(40일 안)에도 같은 방법으로
• 기록: 주간(하루가 한 줄인 새벽 5시~다음 날 5시 띠), 월간(목표 대비 진하기 달력), 1년(잔디: 53주, 하루 목표 대비 4단계 진하기, 가장 긴 연속 · 지금 연속). 기간 합계 · 하루 평균 · 공부한 날 · 과목별 시간, 날을 고르면 그날 타임라인과 기록(지우기 · 되돌리기)
• 과제 · 시험 편집 화면의 "공부 시작"으로 바로 타이머 시작. 일정 모드에 있으면 위쪽에 남은 시간이 작게 보여요
• 하루는 새벽 5시에 바뀌어요 (밤새 공부한 시간은 전날로). 1분 미만은 기록하지 않아요
• 타이머는 보드에 저장돼 PC와 폰이 같이 움직여요 (한쪽에서 시작 · 끝내면 다른 쪽도 몇 초 안에 따라옴, 같은 공부가 두 번 기록되지 않음). 집중 · 휴식이 끝나면 소리와 알림
• 배경 소리: 타이머 칸 오른쪽 위에서 빗소리 · 파도 · 잔잔한 선율(Cmaj7 · Am7 · Fmaj7 · G6 건반 화음)을 고르고 크기를 조절(아이폰은 기기 소리 버튼). 음원 파일 없이 브라우저가 60초짜리 소리를 미리 만들어 이음매 없이 반복하고, 진짜 오디오로 틀어서 화면을 끄거나 다른 앱으로 가도 이어져요
• 일정 모드에서도 타이머가 돌고 있으면 위쪽에 시간만 작게 보여요
• 친구: 위쪽 친구 버튼(공부 중인 친구 수, 받은 신청이 있으면 +N). 닉네임을 정하면 친구 코드(XXXX-XXXX)가 생기고, 친구 코드로 신청 → 상대가 수락하면 서로 친구가 돼요 (서로 신청하면 바로). 오늘 공부 시간과 지금 공부 중인지만 보이고 과목 · 계획은 안 보여요. 친구를 끊으면 양쪽에서 함께 지워져요. 코드를 새로 만들면 이전 코드로는 신청할 수 없어요

떠 있는 타이머

• 시작(위쪽 시작 버튼 · ▶ · Space · 과제의 공부 시작)을 누르면 타이머가 다른 창 위에 작게 함께 떠요. 닫기는 직접 (끝내도 창은 남아서 다시 시작할 수 있어요). 시작 · 끝내기도 그 창에서
• 크롬 · 엣지(PC)는 작은 창(Document Picture-in-Picture), 그 밖의 브라우저 · 폰은 영상 PiP로 띄우고 창의 ❚❚ 버튼이 시작 · 끝내기

친구 랭킹

• 친구 창은 설정 창처럼 탭: 랭킹 / 친구 목록(이름 바꾸기: 나에게만 보이는 별명, 친구 끊기) / 친구 신청(코드로 신청, 받은 신청 수락 · 거절, 보낸 신청 취소) / 개인 설정(내 친구 코드 · 새로 만들기, 닉네임, 공개 설정). 받은 신청이 있으면 친구 신청 탭으로 열려요
• 오늘 · 이번 주 · 이번 달 순위(나 포함, 지금 공부 중인 시간까지 더해서), 공부 중인 친구 수와 몇 분째인지

폰 홈 화면 위젯

• 설정 → 위젯에서 위젯 주소(보드 코드와 다른 읽기 전용 열쇠)를 만들어요. 위젯은 세 가지를 따로 넣어요
  • 오늘 공부: 오늘 공부 시간
  • 타이머: 공부 중이면 과목과 흘러가는 시간(25분 · 50분은 남은 시간), 아니면 "쉬는 중"
  • 다가오는 일정: 앞으로 2주. 첫 열에 요일(같은 날은 한 번만, 아래 작게 날짜) · 색 막대 · 짧은 이름 한 줄(데이터베이스 과제 · 데이터베이스 휴강 · 데이터베이스 영상 시청, 시험은 과목 + 시험 이름). 안드로이드는 많으면 스크롤, 아이폰은 들어가는 만큼 + n개 더
  • 위젯마다 화면 모드(폰 설정 따라 · 밝게 · 어둡게)와 배경 진하기를 따로 정해요 (안드로이드는 위젯 앱에서, 아이폰은 스크립트를 복사할 때)
  • 캘린더 날짜 고르기(안드로이드): 날짜 칸을 누르면 얇은 회색 테두리로 골라지고, 그 상태에서 +를 누르면 그 날 마감으로 새 과제, 고른 날을 한 번 더 누르면 앱에서 그 날짜 캘린더 (아이폰은 날짜 칸을 누르면 바로 그 날짜)
  • 캘린더: 머리줄 가운데 ‹ ○월 ›(안드로이드는 달을 넘겨 봄), 오른쪽 + (추가) · 오늘(날짜가 든 네모). 날짜는 칸 가운데, 그날 일정 이름을 한 줄씩 종류 파스텔 색 배경으로(시험 빨강 · 과제 노랑 · 할 일 파랑 · 기타는 정한 색, 지난 일정도 같은 색, 끝낸 건 흐리게 + 취소선, 넘치면 +n). 일요일 빨강 · 토요일 파랑. 누르면 설치한 S-DAY 앱(WebAPK)이 있으면 앱으로, 없으면 삼성 인터넷 · 기본 브라우저로. 위젯마다 새로 고침 버튼
  • 배경 진하기: 아이폰은 설정 → 위젯에서 고르고 복사(또는 위젯 편집 Parameter에 숫자, 예: upcoming 60), 안드로이드는 위젯 앱에서 위젯마다 따로
• 아이폰: 무료 앱 Scriptable + 위젯마다 "복사"(주소와 종류가 들어간 widgets/ios/S-DAY.js). 홈 화면 · 잠금 화면 위젯. 위젯 편집의 Parameter에 study · timer · upcoming을 적으면 한 스크립트로 다른 종류도 돼요
• 안드로이드: widgets/android의 위젯 앱 (GitHub Actions가 빌드해서 Releases의 android-widget에 S-DAY-widget.apk로 올림). 앱에 위젯 주소를 붙여 넣고 홈 화면에서 S-DAY 위젯 세 가지 중 골라 추가

분류 (학기 · 기간 · 넓은 의미의 과목)

• 위쪽 보기 고르기: 지금(오늘이 기간 안에 드는 분류 + 기간 없는 분류를 모두 합쳐서) · 분류 하나 · 미분류(어느 분류에도 없는 것) · 전체, 맨 아래 분류 관리. 폰에서는 필터 안의 칩
• 학기 분류는 마감 날짜로 저절로 만들어져요 (3월 2일8월 31일 1학기, 9월 1일다음 해 3월 1일 2학기). 이름 · 기간을 학교 일정에 맞게 수정하거나 삭제할 수 있어요 (삭제한 학기는 다시 만들지 않음)
• 계절학기처럼 기간이 있는 분류, ADsP · 동아리처럼 기간 없는 분류를 직접 추가할 수 있어요. 새 분류는 비어 있고, 과목을 넣어야 보여요
• 설정 → 과목(설정의 첫 탭)에서 과목을 누르면 수정 창: 이름(바꾸면 과제 · 시험 · 공부 기록까지 함께 바뀌고, 스마트캠퍼스에서 새로 들어오는 과제도 새 이름으로), 색, 분류(여러 개 가능, "모든 분류에 항상"은 예: 운동하기), 쓰는 중(끄면 "지금" 보기와 과목 고르기에서 숨김), 직접 추가하고 안 쓴 과목은 삭제. + 과목 추가로 새 과목
• 분류를 고르지 않은 과목과 과목 없는 일정은 마감 날짜가 든 분류에 보이고, 어디에도 안 들어가면 미분류예요
• 분류 · 소속 · 쓰는 중 여부는 보드에 저장돼 모든 기기에서 같아요
• 새로 불러오기(스마트캠퍼스 포함)는 화면 맨 아래 상태 줄의 ↻ 버튼

찾기

• 과제명·과목·메모 검색(위쪽 돋보기 또는 /, Esc로 닫기), 과목 필터, 완료 숨기기, 중요한 과제만 보기

그 밖에

• 스마트캠퍼스(Canvas) 과제 자동 가져오기 (아래 참고)
• 밝게 / 어둡게 / 시스템 설정 테마
• 단축키: S 일정 ↔ 공부, 1 2 탭(목록 · 캘린더 / 오늘 · 기록), N 새 과제, E 새 시험, T 새 할 일, / 검색, 공부 · 오늘에서 Space 타이머 시작 · 끝내기, Esc 닫기
• 앱으로 설치(PWA): 홈 화면 · 작업 표시줄 아이콘, 오프라인에서도 마지막으로 불러온 과제 보기, 앱 아이콘 길게 눌러 새 과제 · 새 시험 · 캘린더 바로가기
• 좁은 화면에서는 왼쪽 필터가 필터 버튼 하나로 바뀌고(과목 고르기 + 시험만 · 중요만 · 완료 숨기기 스위치), 양쪽 칸이 위아래로 쌓일 때는 회색 띠로 구분
• 백업 텍스트 복사와 가져오기

파일 구성

index.html              화면 뼈대 (연결 화면, 앱, 상세 패널, 설정)
assets/style.css        디자인 토큰과 스타일 (흰 바탕 + 형광펜 콘셉트)
assets/js/app.js        시작, 화면 그리기, 이벤트, 단축키
assets/js/views.js      목록 / 캘린더 보기
assets/js/store.js      상태, 낙관적 업데이트, 동기화, 되돌리기 삭제
assets/js/api.js        Supabase RPC와 Edge Function 호출, 오류 문구
assets/js/util.js       날짜·학기 계산, 과목 색, DOM 헬퍼
assets/js/canvas.js     스마트캠퍼스 데이터 변환, 북마클릿
assets/js/picker.js     달력, 시계 다이얼
assets/js/push.js       마감 알림 켜기 / 끄기
assets/js/subject-picker.js  과목 고르기 (색 점 목록, 찾기, 새 과목 추가)
assets/js/study.js      공부 모드 (오늘: 타이머 · 계획 · 타임라인, 기록: 주간 · 월간, 친구)
sw.js, manifest.webmanifest   PWA (캐시, 알림 표시, 바로가기)
supabase/migrations/    DB 스키마와 함수
supabase/functions/canvas-sync/   스마트캠퍼스 피드 동기화
supabase/functions/push-notify/   마감 알림 · 한 번짜리 알림 발송 (10분마다)
supabase/functions/calendar-feed/ 캘린더 구독용 .ics

구조

브라우저 (노션 임베드 / 모바일 브라우저)
   │  POST /rest/v1/rpc/dday_*       (publishable key + 보드 코드)
   │  POST /functions/v1/canvas-sync (보드 코드)
   ▼
Supabase
   ├─ public.dday_* 함수            ← 외부에서 호출 가능한 입구
   ├─ Edge Function canvas-sync     ← Canvas 피드를 읽어 병합
   ├─ pg_cron                       ← 하루 3번 canvas-sync 실행
   └─ app 스키마 (boards, tasks)    ← API 비노출, 직접 접근 차단

스마트캠퍼스(Canvas) 연동

보드마다 두 가지 중 하나로 자동 연동합니다. 둘 다 canvas-sync Edge Function이 하루 3번(07:03, 13:03, 21:03 KST), 그리고 상단 새로고침 버튼을 누르면 바로 실행합니다 (다른 기기 변경 사항도 함께 불러옴).

액세스 토큰 (추천)

스마트캠퍼스 계정 → 설정 → 승인된 통합 → + 새 액세스 토큰에서 만든 토큰을 설정에 붙여 넣으면, 서버가 Canvas REST API로 직접 읽습니다.

• GET /api/v1/courses?enrollment_state=active&enrollment_type=student → 과목별 GET /api/v1/courses/:id/assignments?include[]=submission
• 이번 학기 수강 과목과 최근(약 9개월 안에 끝난) 학기 과목의 과제 전체, 정확한 마감 시각, 제출 여부, 제출 시각, 제출한 파일 이름과 크기를 가져옵니다.
• 토큰은 계정 전체 권한이 있는 값이라 테이블에 두지 않고 Supabase Vault에 암호화해서 저장합니다. 보드에는 Vault 항목 id와 끝 4자리만 남고, 화면에는 끝 4자리만 돌려줍니다. 앱은 읽기 요청만 보냅니다.
• 토큰이 만료되거나 지워지면(401) token_invalid로 기록하고, 화면 위쪽 안내와 함께 알림을 켠 기기로 한 번 알려 줍니다.
• 토큰이 있으면 캘린더 피드는 쓰지 않습니다 (두 경로가 마감 시각을 번갈아 바꾸지 않게).
• 만들 때 만료일을 학기 말로 정해 두는 걸 권장합니다.
• 다른 학교: 설정 → 스마트캠퍼스 → "다른 학교 (Canvas)"에서 LMS 주소(https://호스트만, IP · localhost 안 됨)를 바꾸면 그 주소로 동기화합니다 (boards.canvas_api_origin, 기본 https://canvas.ssu.ac.kr). 토큰도 그 학교 것이어야 하고, 강의 영상은 learningx를 쓰는 학교만 가져옵니다.
• 강의 영상: 숭실대 강의 영상은 Canvas 모듈이 아니라 learningx(LTI 도구) 안에 있어서, 토큰으로 sessionless_launch를 열어 learningx가 주는 임시 쿠키를 받고 GET /learningx/api/v1/courses/:id/modules?include_detail=true에서 영상 항목(attendance_item)의 기한과 시청 완료 여부를 읽습니다. 임시 쿠키는 실행 중 메모리에만 두고 저장하지 않습니다. 진도를 세지 않는 영상(omit_progress)은 봤는지 알 수 없어서 넣지 않고, 새로 넣는 건 아직 안 봤고 기한이 남은 것만입니다.

캘린더 피드

스마트캠퍼스 캘린더 화면의 "캘린더 피드" 주소(…/feeds/calendars/user_….ics)를 등록하면 피드를 읽어 과제를 넣습니다. 토큰을 쓰지 않을 때의 대안입니다.

• 피드에서 UID:event-assignment-*인 항목만 과제로 봅니다.
• SUMMARY의 과제명 [과목명 (학수번호)]를 과제명과 과목으로 나눕니다.
• 피드에는 마감 날짜만 있고 시각이 없어서, 날짜만 있으면 그날 23:59:59(KST)로 봅니다.
• 피드는 지난 30일 일정까지만 내보내고 제출 정보가 없습니다.

공통 병합 규칙

• 처음 가져올 때 이미 마감이 지난 과제는 완료 상태로 넣습니다. 제출한 과제는 완료로 바꾸고, 완료를 미완료로 되돌리지는 않습니다.
• 사용자가 고친 제목, 과목, 마감은 *_custom 플래그로 기억해 이후 동기화가 덮어쓰지 않습니다.
• 스마트캠퍼스 과제를 지우면 실제로 지우지 않고 숨겨서, 다음 동기화 때 다시 생기지 않게 합니다.
• 한 번 가져온 과제는 스마트캠퍼스에서 빠져도 보드에 남습니다.

토큰 없이 학기 전체 가져오기 (북마클릿)

토큰을 쓰지 않을 때 피드의 30일 제한과 제출 정보 부족을 보완하려고, 설정에 "D-day로 가져오기" 북마클릿을 둡니다. 토큰을 연결하면 이 항목은 숨깁니다.

1. 북마클릿을 북마크바에 끌어다 놓습니다.
2. 스마트캠퍼스에 로그인한 화면에서 누르면, 로그인된 세션으로 /api/v1/courses와 과목별 /api/v1/courses/:id/assignments?include[]=submission을 모읍니다. 토큰이 필요 없습니다.
3. 앱 창을 열어 postMessage로 데이터를 넘기고, 앱에서 미리 보기 후 dday_canvas_import로 병합합니다.

• 제출 여부, 제출 시각, 제출한 파일 이름과 크기를 저장합니다. 인증 정보가 담긴 파일 다운로드 주소는 저장하지 않습니다.
• 보드 코드는 북마클릿에 넣지 않습니다. 앱 창이 자기 브라우저에 저장된 코드로 가져옵니다.
• 북마크바를 쓸 수 없으면 플래너 API(/api/v1/planner/items)를 브라우저에서 열어 저장한 파일을 올려도 됩니다. 이 경우 파일 이름 없이 제출 여부까지만 가져옵니다.

피드 주소는 로그인 없이 일정을 볼 수 있는 개인 주소라서, DB의 잠긴 스키마에만 저장하고 API로 다시 읽어 갈 수 없게 했습니다. 예약 실행 인증값은 Supabase Vault에 둡니다.

왜 노션 HTML 블록이 아니라 외부 호스팅인가

처음에는 노션 HTML 블록에 파일을 직접 넣었지만, 블록이 샌드박스 iframe으로 렌더링되면서 두 가지가 막혔습니다.

1. <form> 제출이 동작하지 않음 → 폼 태그 대신 버튼 클릭 이벤트로 처리
2. 외부 서버로의 fetch가 차단됨 → 위젯을 Vercel에 올리고 노션에서는 URL 임베드로 표시

보안 모델

로그인 없이 쓰기 위해 보드 코드가 곧 열쇠인 구조입니다.

• 보드 코드는 서버에서 생성하는 20자 무작위 문자열입니다. 헷갈리는 0, O, 1, I를 뺀 32자 알파벳을 써서 약 100비트입니다.
• DB에는 코드 원문이 아니라 SHA-256 해시만 저장합니다.
• 테이블은 API에 노출되지 않는 app 스키마에 두고, anon/authenticated 역할의 접근 권한을 모두 회수했습니다. RLS도 켜 두고 정책은 두지 않았습니다.
• 외부에서는 SECURITY DEFINER 함수 5개만 실행할 수 있고, 각 함수는 보드 코드를 검증한 뒤 해당 보드의 데이터만 다룹니다.
• 프론트엔드에 들어 있는 키는 Supabase의 공개용 publishable key입니다. 키가 노출돼도 코드 없이는 어떤 데이터도 읽거나 쓸 수 없습니다.

Supabase 보안 어드바이저는 "로그인 없이 실행 가능한 SECURITY DEFINER 함수" 경고를 띄우는데, 위 구조상 의도된 것입니다.

API

모든 함수는 POST {SUPABASE_URL}/rest/v1/rpc/{함수명}으로 호출하고, 헤더에 apikey를 넣습니다.

함수	인자	반환	설명
dday_create_board	없음	text	새 보드를 만들고 코드 반환
dday_list	p_code	jsonb 배열	보드의 과제 목록 (마감 순)
dday_upsert	p_code, p_task	jsonb	과제 추가 또는 수정
dday_delete	p_code, p_id	없음	과제 삭제 (스마트캠퍼스 과제는 숨김)
dday_import	p_code, p_tasks	int	여러 과제 일괄 추가 (이미 있는 id는 건너뜀)
dday_set_canvas_feed	p_code, p_url	jsonb	피드 주소 등록, 빈 값이면 해제
dday_set_canvas_token	p_code, p_token	jsonb	액세스 토큰 등록 (Vault에 저장), 빈 값이면 해제
dday_canvas_status	p_code	jsonb	연동 여부(feed, token, tokenHint), 마지막 동기화 시각, 오류
dday_push_subscribe	p_code, p_sub, p_leads	jsonb	이 기기 알림 켜기 또는 알림 시점 변경 (p_sub은 PushSubscription.toJSON(), p_leads는 분 단위)
dday_push_unsubscribe	p_code, p_endpoint	없음	이 기기 알림 끄기
dday_push_status	p_code, p_endpoint	jsonb	이 기기 알림 상태와 알림 시점
dday_study	p_code, p_from	jsonb	공부 기록(p_from 이후, 최대 40일), 날짜별 합계(400일), 최근 계획, 하루 목표, 프로필

dday_svc_* 함수는 Edge Function(service_role) 전용이라 외부에서 호출할 수 없습니다.

dday_upsert의 memo, starred는 보내지 않으면 기존 값을 유지합니다.

Edge Function POST {SUPABASE_URL}/functions/v1/canvas-sync에 { "code": "<보드 코드>" }를 보내면 그 보드를 바로 동기화하고 { added, updated, total }을 돌려줍니다.

과제 형식:

{ "id": "lzx1a2b3", "subject": "데이터베이스", "title": "ER 다이어그램", "due": "2026-10-20T14:59:00.000Z", "done": false,
  "memo": "", "starred": false, "source": "manual", "link": null, "doneAt": null, "createdAt": "…" }

Edge Function push-notify에 { "code", "endpoint" }를 보내면 그 기기로 테스트 알림을 보냅니다. 예약 실행(10분마다)은 x-cron-secret 헤더로 인증하고, 알림 시점이 지난 과제마다 가장 가까운 시점 하나만 보낸 뒤 기록합니다. VAPID 개인 키는 Vault(dday_vapid_private)에만 있고, 공개 키는 assets/js/push.js와 함수에 들어 있습니다.

오류는 invalid_code, too_many_tasks(보드당 500개 제한), invalid_import, invalid_feed_url, no_feed, feed_* 메시지로 돌아옵니다.

직접 띄워 보기

1. Supabase 프로젝트를 만들고 supabase/migrations/의 SQL을 순서대로 실행합니다. canvas_cron 마이그레이션의 함수 URL은 자기 프로젝트 ref로 바꿉니다.
2. supabase/functions/canvas-sync와 push-notify를 Edge Function으로 배포합니다. 알림을 쓰려면 VAPID 키를 만들어(npx web-push generate-vapid-keys) 개인 키는 Vault에 dday_vapid_private로 넣고, 공개 키는 assets/js/push.js와 함수의 VAPID_PUBLIC에 넣습니다. 인증은 함수 안에서 보드 코드와 Vault 값으로 하므로 JWT 검증은 끕니다.
3. assets/js/api.js 상단의 PROJECT(Supabase 프로젝트 주소)와 API_KEY(publishable key)를 자기 프로젝트 값으로 바꿉니다.
4. 저장소 전체를 정적 호스팅(Vercel 등)에 올리고, 노션에서 /embed로 그 주소를 넣습니다.

빌드 과정은 없지만 ES 모듈을 쓰기 때문에 로컬에서는 python3 -m http.server처럼 간단한 서버로 열어야 합니다.

한계와 다음 단계

• 보드 코드를 잃어버리면 복구할 방법이 없습니다.
• 동기화는 주기적 조회 방식이라 다른 기기 변경이 최대 30초 늦게 보입니다.
• 같은 과제를 두 기기에서 동시에 수정하면 나중에 저장된 쪽이 남습니다.
• Supabase 무료 플랜은 오래 접속이 없으면 프로젝트가 일시정지될 수 있습니다.

생각 중인 것:

• boards.owner_id를 이용한 로그인 계정 연결