Study Planner
대학생을 위한 학습 일정 관리 웹 앱입니다.
과제 · 시험 · 학교일정을 하나의 월간 캘린더에서 색상별로 구분해 관리하고, 완료한 일정은 체크해서 정리할 수 있습니다.
주요 기능
- 월간 캘린더 (이전/다음 달 이동, 오늘로 이동, 날짜 선택)
- 일정 추가 · 수정 · 삭제 (제목, 날짜, 시작~종료 시간, 카테고리, 메모)
- 여러 날짜에 한 번에 추가: 날짜를 하나씩 골라 추가하거나, 시작~끝 날짜로 기간 전체를 추가 (날짜마다 별도 일정으로 저장, 최대 100일)
- 반복 등록: 매일 / 매주(요일 선택) / 매월, N일·주·개월마다, 총 횟수(2
100회) 지정 (예: 매주 월요일 오후 12:002:00, 총 10회)
- 반복 일정 수정·삭제 시 범위 선택: 이 일정만 / 이 일정과 이후 일정 / 반복 일정 전체 (목록에
↻ 반복 표시)
- 완료한 일정과 남은 일정은 따로 묶여, 완료 목록에서 삭제해도 남은 일정은 지워지지 않음
- 시간은 오전/오후 선택 + 직접 입력 (
3:30, 930, 15:00 모두 가능, 비우면 종일)
- 카테고리별 색상 (기본: 과제 노란색 · 시험 하늘색 · 학교일정 보라색)
- 전체 + 카테고리별 필터 탭
- 일정 목록 정렬: 생성순 / 카테고리순(설정의 카테고리 순서) / 시간순 (선택 기준은 저장됨)
- 완료 체크 → 완료 목록으로 이동, 완료 목록에서 복구·삭제, '모든 완료된 일정 삭제'로 한 번에 정리 (확인 후 삭제, 남은 일정은 유지)
- 설정(⚙): 카테고리 추가·이름 변경·색상 변경·삭제(최대 8개), 배경색 변경
- localStorage 저장 (새로고침해도 유지)
- PC · 태블릿 · 모바일 반응형
실행 방법
ES Modules를 사용하므로 index.html을 더블클릭해 직접 열면 동작하지 않습니다. 로컬 서버로 실행하세요.
npm (권장, Node.js 필요)
npm run dev
브라우저가 http://127.0.0.1:5500으로 자동으로 열리고, 파일을 저장하면 자동 새로고침됩니다. 종료는 Ctrl + C.
Windows PowerShell에서 "스크립트를 실행할 수 없으므로" 오류가 나면 npm.cmd run dev로 실행하세요.
그 밖의 방법
- VS Code 확장
Live Server → index.html 우클릭 → Open with Live Server
python -m http.server 5500 후 http://localhost:5500 접속
폴더 구조
├── index.html 화면 뼈대 (헤더, 탭, 캘린더, 목록, 입력 창, 설정 창)
├── css/
│ ├── variables.css 디자인 변수 (배경·카테고리 색은 theme.js가 덮어씀)
│ ├── base.css 기본 스타일, 버튼, 레이아웃, 알림
│ ├── calendar.css 월간 캘린더
│ ├── list.css 필터 탭, 일정 목록, 완료 목록
│ ├── modal.css 일정 입력/수정 창
│ ├── settings.css 설정 창
│ └── responsive.css 태블릿·모바일 대응
└── js/
├── main.js 시작점: 이벤트 연결, 화면 다시 그리기
├── constants.js 기본 카테고리·배경색, 저장 키
├── utils.js 날짜·시간 처리, ID 생성, DOM 도우미
├── color.js 색상 계산 (연한 색, 읽기 쉬운 글자색)
├── storage.js localStorage 읽기/쓰기
├── store.js 일정 추가·조회·수정·삭제·완료
├── settings.js 카테고리·배경색 설정 관리
├── theme.js 설정한 색을 화면에 적용
├── state.js 화면 상태 (보는 월, 선택 날짜, 필터)
├── calendar.js 캘린더 그리기
├── list.js 일정 목록·완료 목록 그리기
├── filterTabs.js 필터 탭
├── modal.js 일정 입력/수정 창
├── settingsModal.js 설정 창
├── categoryDeleteModal.js 카테고리 삭제 시 일정 처리 방법 선택 창
├── seriesScopeModal.js 반복 일정 수정·삭제 범위 선택 창
└── toast.js 알림 메시지
데이터 저장
- 저장 위치: 브라우저 localStorage
- 일정:
studyPlanner.events.v1
- 설정(카테고리, 배경색, 정렬 기준):
studyPlanner.settings.v1
- 데이터는 브라우저·기기마다 따로 저장됩니다. (PC에서 입력한 일정은 휴대폰에서 보이지 않습니다.)
- 일정이 있는 카테고리를 삭제할 때는 처리 방법을 고릅니다.
- 다른 카테고리로 옮기기: 일정은 그대로 두고 고른 카테고리로 일괄 이동
- 일정도 모두 삭제: 한 번 더 확인한 뒤 카테고리와 일정을 함께 삭제 (되돌릴 수 없음)
배포
Vercel에서 GitHub 저장소를 Import하고 Framework Preset을 Other로 두면 별도 빌드 없이 배포됩니다.
