공지 서랍 (Notice Drawer)

학교 공지가 대학 공식 홈페이지, 학과 홈페이지, 사업단 홈페이지로 흩어져 있어서 매번 여러 사이트를 돌아야 하는 문제를 해결하려고 만든 개인용 웹 도구입니다. 자주 들어가는 링크를 한 화면에 모아두고, 공모전·공지 캡처를 함께 기록합니다.

만든 이유

• 공지 출처가 최소 3~4곳으로 나뉘어 있어 놓치는 공고가 생김
• 즐겨찾기는 "이게 무슨 링크였는지" 설명을 달 수 없고, 한시적으로 자주 보는 링크와 상시 링크가 섞임
• 공모전 캡처는 갤러리에, 마감일은 메모장에, 링크는 즐겨찾기에 흩어져 있어 마감을 놓침

해결 방식

링크 수집 → 공고 기록 → 마감 관리를 한 화면에서 이어지게 구성했습니다. 서랍에서 공지 출처로 들어가고, 본 공고는 스크랩에 캡처와 함께 남기고, 스크랩에 적은 마감일이 달력과 D-day 목록에 자동으로 나타납니다.

기능

서랍 (링크)

• 책상 위 / 서랍 2단 구조 — 요즘 자주 들어가는 링크만 위로 올려두고, 볼일이 끝나면 내려도 링크는 서랍에 그대로 남습니다
• 링크마다 여러 줄 설명 — "이게 무슨 사이트이고 언제 들어가야 하는지" 기록
• 서랍(분류) 직접 추가·이름 변경, 주소만 붙여넣는 빠른 담기
• 이름 | 주소 | 설명 형식으로 여러 줄 한 번에 등록
• 이름·주소·설명 통합 검색 (/ 키로 검색창 이동)
• 삭제 되돌리기

달력 (일정)

• 월 단위 달력에서 이번 달 일정과 스크랩 마감일을 한눈에 확인
• 날짜를 누르면 그 날짜로 일정 추가 창이 열림
• 일정(파란 표시)과 스크랩 마감(노란 표시)을 색으로 구분
• 아래 '다가오는 일정'에 D-day 순으로 정리 — 누르면 해당 일정이나 스크랩으로 이동
• 상단 탭에 2주 안쪽 일정 개수를 표시해 앱을 열자마자 급한 게 있는지 보임

스크랩 (기록)

• 캡처 이미지를 클립보드 붙여넣기 / 끌어다 놓기 / 파일 선택으로 추가 (한 항목에 여러 장)
• 업로드 시 긴 변 1600px로 자동 축소해 용량 절약
• 제목, 마감일, 원문 주소, 여러 줄 기록
• 마감일 기준 D-day 배지 표시, 7일 이내는 강조색. 목록은 마감 임박 순 정렬 (달력에도 함께 표시)
• 끝난 항목은 '지난 것'으로 이동 — 삭제하지 않고 기록으로 보관
• 사진 클릭 시 원본 크기 보기

공통

• 라이트 / 다크 / 시스템 설정 따라가기
• 모바일 대응. iOS 사파리에서 홈 화면에 추가하면 전용 아이콘으로 전체화면 실행
• 백업(JSON 내려받기) / 불러오기

기술

• 순수 HTML / CSS / JavaScript 단일 파일 — 빌드 도구·프레임워크·서버 없음
• 링크와 글 기록: localStorage
• 캡처 이미지: IndexedDB (Blob 저장 후 Object URL로 렌더, 용량 제한 회피)
• 이미지 축소: Canvas 리사이즈 후 JPEG 재인코딩
• 접근성: 키보드 포커스 표시, aria-label, prefers-reduced-motion 대응
• 웹 폰트: IBM Plex Sans KR, 고운바탕

데이터와 개인정보

• 서버가 없습니다. 모든 데이터는 사용자 브라우저 안에만 저장되고 외부로 전송되지 않습니다
• API 키나 인증 정보를 사용하지 않습니다
• 브라우저 데이터를 지우면 함께 지워지므로, 중요한 기록은 백업 버튼으로 내려받아 두세요

실행

# 그냥 파일을 열어도 동작합니다
open index.html

배포

정적 파일 하나라서 어디든 올릴 수 있습니다.

• Vercel: 프로젝트 폴더를 드래그 앤 드롭하거나 GitHub 저장소를 연결
• GitHub Pages: 저장소 Settings → Pages → 브랜치 지정

재실행 오류 회귀 검사

Node.js 18 이상에서 별도 패키지 설치 없이 실행합니다.

node --test tests/startup.test.cjs

• 마지막 탭(서랍·스크랩·달력)을 복원한 뒤 로그인·추가 버튼이 연결되는지 검사합니다.
• 달력을 본 뒤 앱을 다시 열고, 일정을 저장하고, 다시 실행해 기록이 유지되는지 검사합니다.
• 인증 이벤트 콜백이 끝난 뒤 클라우드 조회가 시작되는지 검사합니다.
• 비밀번호 찾기 메일 요청과, 메일 링크로 돌아왔을 때 새 비밀번호 저장 흐름을 검사합니다.
• 두 기기가 같은 계정으로 동기화할 때 한쪽 저장이 다른 쪽에서 추가·삭제한 링크를 덮어쓰지 않는지 검사합니다.

기존 코드는 달력 상태(calCursor)를 초기화하기 전에 첫 화면을 그렸습니다. 달력 탭을 기억한 상태에서 다시 실행하면 예외가 발생해 이후 로그인·추가 버튼 초기화까지 중단됐습니다. 첫 화면은 모든 초기화가 끝난 뒤 그리도록 수정했습니다. 인증 콜백에서 동기화를 즉시 시작하던 코드도 다음 타이머 작업으로 옮겼습니다. 이는 Supabase의 인증 콜백 교착 관련 안내를 따른 예방 수정입니다.

동기화는 처음에 기기의 전체 데이터를 클라우드에 통째로 덮어썼습니다. 그래서 맥북이 새로고침하지 않은 채 저장하면 폰에서 추가한 링크가 사라졌습니다. 지금은 저장 직전에 클라우드 데이터를 읽어 항목(id) 단위로 합치고(updatedAt이 최근인 쪽, 삭제는 deleted 기록으로 전달), 읽은 뒤 다른 기기가 먼저 저장했다면 다시 읽어 합칩니다. 앱이 켜져 있는 동안 1분마다, 창에 포커스가 올 때 새 내용을 받아오고, 앱을 내릴 때는 아직 보내지 않은 변경을 바로 보냅니다.

자동 검사는 브라우저 DOM·저장소·인증 모형으로 실행합니다. 실제 iPhone에서는 배포 후 홈 화면 앱에서 달력 선택 → 앱 완전 종료 → 재실행 → 로그인·일정 추가를 확인하고, 잠금 화면이나 다른 앱에 머문 뒤 돌아왔을 때도 동작하는지 확인합니다.

앞으로

• 태그로 스크랩 묶기
• 마감 임박 항목 브라우저 알림
• 링크 목록 순서 직접 바꾸기
• 공지 페이지 변경 자동 감지