🍅 뽀모도로 타이머 & 메모장

React + Vite로 만든 뽀모도로 타이머와 메모장 통합 앱입니다.

주요 기능

🍅 뽀모도로 타이머

• 25분 작업 시간 타이머
• 5분 짧은 휴식
• 15분 긴 휴식 (4회 작업 후)
• 시작/일시정지/재설정/건너뛰기 기능
• 세션 완료 시 알림 및 자동 전환
• 시각적 진행률 표시

📝 메모장

• 메모 추가/수정/삭제
• 로컬 스토리지에 자동 저장
• 최신 메모 순 정렬
• 상대 시간 표시 (방금 전, 5분 전 등)

시작하기

설치

npm install

개발 서버 실행

npm run dev

빌드

npm run build

미리보기

npm run preview

기술 스택

• React 18
• Vite 5
• CSS3 (모바일 반응형)
• LocalStorage (데이터 영구 저장)

프로젝트 구조

src/
├── components/
│   ├── PomodoroTimer.jsx    # 뽀모도로 타이머 컴포넌트
│   ├── PomodoroTimer.css
│   ├── MemoApp.jsx          # 메모장 컴포넌트
│   └── MemoApp.css
├── App.jsx                   # 메인 앱 컴포넌트
├── App.css
├── main.jsx                  # 진입점
└── index.css                 # 전역 스타일