react-timer

💬 설명

이 프로젝트는 타이머와 알람 및 스톱워치 기능을 갖춘 간단한 시간 관리 도구입니다. 사용자가 직접 시간을 설정하고 시간을 추적할 수 있는 기능을 제공합니다.

🎯 목표

1. 간편한 사용자 인터페이스: 사용자가 쉽게 시간을 추가, 편집, 및 삭제할 수 있도록 직관적이고 간단한 사용자 인터페이스를 제공합니다.

2. 시간 관리: 사용자는 목록에서 시간을 확인하고 필요할 때 편집하거나 삭제할 수 있습니다.

3. 스타일링: Tailwind CSS를 사용하여 각 컴포넌트에 일관된 스타일을 적용하여 시각적으로 매력적인 UI를 제공합니다.

💻 Tech Stacks

Environment

Development

Design

🖥️ 화면 구성

메인 페이지	타이머 페이지
스톱워치 페이지	알람 페이지

✨ 주요 기능

타이머

• 원하는 분, 초를 설정할 수 있습니다.
• 시작 버튼을 누르면 설정한 시간에서 1초씩 감소합니다.
• 일시정지 및 정지(초기화) 할 수 있습니다.

스톱워치

• 분, 초, 밀리초를 0부터 측정할 수 있습니다.
• 랩(LAP) 버튼으로 각 구간의 차이를 측정할 수 있습니다.
• 일시정지 및 정지(초기화) 할 수 있습니다.

알림

• 원하는 시간, 분을 설정하고 추가할 수 있습니다.
• 알람 기능을 on/off 할 수 있습니다.
• 여러 개의 알람을 추가할 수 있습니다.

🏛️ Architecture

디렉토리 구조

sveltekit-timer
├─ README.md
├─ jsconfig.json
├─ package-lock.json
├─ package.json
├─ postcss.config.js
├─ src
│  ├─ app.css
│  ├─ app.d.ts
│  ├─ app.html
│  ├─ lib
│  │  ├─ components
│  │  │  └─ Button.svelte
│  │  └─ index.js
│  └─ routes
│     ├─ +layout.svelte
│     ├─ +page.svelte
│     ├─ alarm
│     │  └─ +page.svelte
│     ├─ stopwatch
│     │  └─ +page.svelte
│     └─ timer
│        └─ +page.svelte
├─ static
├─ svelte.config.js
├─ tailwind.config.js
└─ vite.config.js

👥 Team

🧑🏻‍💻 김승현(Developer)

👩🏻‍💻 남유민(Designer)