(내가 쓰려고 만드는) 간단한 팟캐스트 웹앱 제작기 #3

https://bongman.tistory.com/1196

(내가 쓰려고 만드는) 간단한 팟캐스트 웹앱 제작기 #2

지난번에 예고했던 '종료 타이머' 기능을 추가했다. 이제 직접 쓸만해졌다(일명 개밥 먹기!). 이번 작업에는 Cluade Code만 사용했다. 콩글리쉬가 부끄럽지만 작업을 요청하는 프롬프트는 "add feature for stop timer by each episode. what's your plan?" 이렇게 시작했다.

---

Plan for Sleep Timer Feature

  1. Add Timer UI Controls
  - Add timer preset buttons (15min, 30min, 45min, 60min, custom) in the player container
  - Add a display showing remaining time when timer is active
  - Add a cancel button to stop the active timer

  2. Implement Timer State Management (app.js)
  - Add global variables: sleepTimer (interval ID), sleepTimerEnd (timestamp), sleepTimerDisplay (element
   reference)
  - Track timer state per playback session

  3. Create Timer Functions (app.js)
  - startSleepTimer(minutes) - Initialize timer with selected duration
  - stopSleepTimer() - Clear timer and reset UI
  - updateTimerDisplay() - Update countdown display every second
  - handleTimerComplete() - Pause audio and show notification when timer expires

  4. Add Timer Styling (styles.css)
  - Style timer control buttons
  - Style countdown display
  - Add active/inactive states

  5. Handle Edge Cases
  - Auto-cancel timer when episode changes
  - Pause timer display when audio is paused (but keep countdown running)
  - Clear timer on manual audio stop

  UI Design

  The timer controls will appear below the audio player with:
  - Quick preset buttons for common durations
  - Visual countdown display when active
  - Clear visual indication of timer state

  Would you like me to proceed with this implementation?

---

이런 답을 주시길래 feature/add-sleep-timer 라는 이름의 작업 브랜치를 생성해 놓고, 'good, go ahead'라고 답을 드렸다.

https://github.com/Hamjoon/simple-podcast/commit/ce64d2f48210642bccef99859a2b8cfb39b5600a

add sleep timer feature · Hamjoon/simple-podcast@ce64d2f

 

결과물이야 뭐..

잘 나왔고, 잘 동작한다. 작업 브랜치를 머지하고 (자동) 배포까지 쭉 끝냈다. 작업 시작부터 배포까지 대략 10분 정도 걸린 듯ㅋ

https://hamjoon.github.io/simple-podcast/

김혜리의 필름클럽

끝.