Study Planner

대학생을 위한 학습 일정 관리 웹 앱입니다. 과제 · 시험 · 학교일정을 하나의 월간 캘린더에서 색상별로 구분해 관리하고, 완료한 일정은 체크해서 정리할 수 있습니다.

주요 기능

• 월간 캘린더 (이전/다음 달 이동, 오늘로 이동, 날짜 선택)
• 일정 추가 · 수정 · 삭제 (제목, 날짜, 시작~종료 시간, 카테고리, 메모)
• 여러 날짜에 한 번에 추가: 날짜를 하나씩 골라 추가하거나, 시작~끝 날짜로 기간 전체를 추가 (날짜마다 별도 일정으로 저장, 최대 100일)
• 반복 등록: 매일 / 매주(요일 선택) / 매월, N일·주·개월마다, 총 횟수(2100회) 지정 (예: 매주 월요일 오후 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로 두면 별도 빌드 없이 배포됩니다.