계획한 하루와 실제로 보낸 하루를 시간축 위에서 나란히 비교하는 타임라인 플래너 (PWA)
Structured 같은 시간 블로킹 플래너는 "계획"은 잘 보여주지만, 계획대로 실제로 보냈는지는 알려주지 않습니다. 플랜핏은 바로 그 회고에 집중합니다.
- 왼쪽 = 계획, 오른쪽 = 실제 — 같은 시간축 위에 좌우로 정렬
- 계획대로 했으면 ✓ 그대로 → 오른쪽에 즉시 반영
- 다르게 보냈으면 ✎ 다르게 / 스킵 → 무엇이 어떻게 어긋났는지 배지로 표시
(
10분 늦게 시작,25분 초과,대체: 독서→유튜브,스킵됨,계획에 없던 일) - 하단·캘린더에 하루 실천율 / 계획 vs 실제 시간 / 이탈 건수 요약 (도넛 링)
설치형 PWA라 홈 화면에 추가해 앱처럼 쓸 수 있고, 오프라인에서도 동작합니다.
| 홈 (계획 vs 실제) | 계획 추가 | 설정 |
|---|---|---|
 |
 |
 |
- 계획 vs 실제 비교 — 공유 시간축 위 2열 배치, 이탈 배지, 하루 실천율
- 월간/주간 캘린더 — 날짜별 실천율 도넛 링
- 반복 일정 — 매일 / 매주 + 요일 선택
- 예정 종료 알림 — 예약 알림(Chromium Notification Triggers) + 인앱 폴백
- 다크 모드 — 사용자 토글(시스템 추종 아님), 무플래시
- 오프라인 / 설치형 PWA — 새 버전 감지 시 업데이트 프롬프트
데이터는 전적으로 사용자 브라우저 로컬(IndexedDB) 에만 저장됩니다.
서버로 전송되거나 외부에 공유되는 일정 데이터는 없습니다. 계정·로그인도 필요 없습니다.
저장 계층은 src/shared/db/repository.ts(ScheduleRepository)로 추상화되어 있어,
추후 클라우드 동기화 구현으로 교체할 수 있습니다.
- React + Vite + TypeScript
- Tailwind CSS — UI (
darkMode: 'class') - Zustand — 상태 관리
- Dexie (IndexedDB) — 로컬 저장 / 오프라인
- vite-plugin-pwa — 설치형 PWA (커스텀 서비스 워커
src/sw.ts) - date-fns — 날짜/시간 처리
npm install
npm run dev # 개발 서버
npm run build # 타입체크 + 프로덕션 빌드 (dist/)
npm run preview # 빌드 결과 미리보기
npm run lint # ESLintsrc/
app/ # 최상위 App / 진입점
features/
schedule/ # Timeline, Plan/ActualColumn, TimeBlock, DiffBadge, DaySummary · deviation/timeScale
task-editor/ # TaskEditor 모달, 이모지 팔레트 스토어
calendar/ # 주↔월 캘린더 헤더, 실천율 링
todo/ # 할 일 목록
notifications/# 예약/인앱 알림
pwa/ # 설치 배너, 업데이트 프롬프트
shared/
db/ # schema(Dexie) · repository(인터페이스) · indexedDbRepository(구현)
store/ # useScheduleStore (zustand)
lib/ # time · recurrence · palette · theme
types/ # 도메인 타입
sw.ts # 커스텀 서비스 워커 (precache + 알림 딥링크 + 업데이트)
Vercel에 프레임워크 자동 인식(Vite)으로 배포되며,
main 브랜치에 푸시하면 자동 배포됩니다. SPA 폴백 rewrite는 vercel.json에 정의되어 있습니다.
- 클라우드 동기화 / 계정 (OAuth + 백엔드, Web Push)
- 드래그 & 리사이즈로 블록 편집
- AI 받아쓰기(말로 일정 입력) · 인박스 · 외부 캘린더 연동