데브허브 | DEVHUB | Productivity Desktop App With Countdown Timer With Electron JS, daisyUI, TailwindCSS & React JSProductivity Desktop App With Countdown Timer With Electron JS, daisyUI, TailwindCSS & React JS
- Electron JS, React JS, TypeScript, DaisyUI, TailwindCSS를 활용하여 카운트다운 타이머 기능이 포함된 할 일 목록 데스크톱 앱을 구축합니다. 🚀
- 작업 추가, 편집, 삭제, 순서 변경, 전체 초기화, 입력 유효성 검사(숫자만 허용), 중복 작업 방지 등 포괄적인 할 일 관리 기능을 제공합니다. ✅
- 타이머 시작 시 별도의 창이 열려 카운트다운을 표시하며, 메인 창은 숨겨지고 타이머 완료 시 알림음이 재생됩니다. ⏱️
- 작업 중단 시 일시정지 및 재개 기능, 모든 작업 완료 시 축하 사운드, 그리고 메인 창 자동 복귀 기능을 통해 유연성을 높였습니다. ⏸️
- 사용자 정의 가능한 드래그 가능한 헤더, 시스템 테마에 따른 자동 다크/라이트 모드 전환, 그리고 다른 앱 위에 항상 표시되는(Always on Top) 카운트다운 창을 구현했습니다. ✨
- Electron Forge를 사용하여 ReactJS 및 TypeScript 프로젝트 설정을 간소화하고, DaisyUI와 TailwindCSS로 UI 개발 속도를 향상시켰습니다. 🛠️
- 메인 프로세스와 렌더러 프로세스의 분리, IPC 통신을 위한 preload 스크립트의 역할, 그리고 초기 앱 로딩 시 빈 화면 방지 기법을 설명합니다. 🖥️
- 기본 OS 헤더를 제거하고 사용자 정의 헤더를 적용하는 방법, 그리고 Mac OS에서 윈도우 버튼 가시성을 설정하는 방법을 다룹니다. 🎨
file-loader를 사용하여 WAV 및 MP3와 같은 오디오 파일을 앱 내에서 효과적으로 관리하고 재생하는 방법을 보여줍니다. 🔊