Daily Routine Radial Planner

A React + Vite + TypeScript web app for visualizing daily routines on a 24-hour circular clock.

Features

• 24-hour radial timeline (midnight at top, clockwise)
• Drag on ring to create a job block
• Drag arc body to move a job
• Drag start/end handles to resize
• Overlap-friendly concentric lane rendering
• Midnight-crossing jobs (for example 23:00 -> 01:00)
• Global timezone selector
• Local persistence via localStorage
• Responsive desktop/mobile layout

Tech Stack

• React 19 + TypeScript
• Vite 7
• SVG-based interaction layer
• Vitest + Testing Library
• Playwright E2E
• ESLint + Prettier

Scripts

• npm run dev - start development server
• npm run build - type-check and production build
• npm run preview - preview production build
• npm run lint - lint source
• npm run test - run unit/component tests
• npm run test:coverage - run tests with coverage
• npm run test:e2e - run Playwright end-to-end tests
• npm run format - check Prettier formatting
• npm run format:write - write Prettier formatting

Project Structure

• src/components/RadialClock.tsx - radial SVG rendering and pointer interactions
• src/components/JobList.tsx - editable job list and delete actions
• src/components/TimezonePicker.tsx - global timezone control
• src/state/useRoutineStore.ts - reducer actions and persistence
• src/lib/timeMath.ts - time/angle math and midnight logic
• src/lib/lanes.ts - overlap lane assignment

Persistence Format

Data is stored under daily-routine.v1 in localStorage as:

{
  "version": 1,
  "state": {
    "timezone": "Asia/Seoul",
    "jobs": [],
    "ui": { "selectedJobId": null }
  }
}