[FEAT] 타이머 종료 및 수동 완료 시 소리 알림 구현

apps/timo-web/app/[locale]/(main)/_containers/MainShellContainer.tsx

@@ -1,12 +1,14 @@
 "use client";
 
 import { cn } from "@repo/timo-design-system/utils";
+import { useEffect } from "react";
 
 import { NavigationSidebar } from "@/components/layout/sidebar/navigation/NavigationSidebar";
 import {
   NavigationSidebarProvider,
   useNavigationSidebar,
 } from "@/components/layout/sidebar/navigation/NavigationSidebarContext";
+import { unlockTimerSound } from "@/utils/timer/timer-sound";
 
 interface MainShellContainerProps {
   children: React.ReactNode;
@@ -33,6 +35,22 @@ const MainContent = ({ children }: { children: React.ReactNode }) => {
 };
 
 export const MainShellContainer = ({ children }: MainShellContainerProps) => {
+  useEffect(() => {
+    const unlock = (event: Event) => {
+      if (!event.isTrusted) return;
+      void unlockTimerSound().then((isUnlocked) => {
+        if (isUnlocked) removeListeners();
+      });
+    };
+    const removeListeners = () => {
+      window.removeEventListener("click", unlock, true);
+      window.removeEventListener("keydown", unlock, true);
+    };
+    window.addEventListener("click", unlock, true);
+    window.addEventListener("keydown", unlock, true);
+    return removeListeners;
+  }, []);
+
   return (
     <NavigationSidebarProvider>
       <NavigationSidebar />

apps/timo-web/app/[locale]/(main)/focus/_hooks/use-focus-session.ts

@@ -24,6 +24,7 @@ import { useTimerActions } from "@/hooks/timer/use-timer-actions";
 import { useTimerOvertime } from "@/hooks/timer/use-timer-overtime";
 import { useTimerQueryInvalidation } from "@/hooks/timer/use-timer-query-invalidation";
 import { getTimerProgress } from "@/utils/timer/get-timer-progress";
+import { playTimerSound } from "@/utils/timer/timer-sound";
 
 export interface UseFocusSessionOptions {
   onMutationError: () => void;
@@ -138,6 +139,7 @@ export const useFocusSession = ({
   useEffect(() => {
     if (isTimeUp && !wasTimeUpRef.current) {
       timerSessionControlsRef.current?.openEndModal();
+      void playTimerSound();
       if (timer && isRunning) {
         changeStatus({ timerId: timer.timerId, data: { action: "PAUSE" } });
       }

apps/timo-web/components/layout/sidebar/time/TimerPanel.tsx

@@ -22,6 +22,7 @@ import { formatDateKey } from "@/utils/date/date";
 import { convertDurationToTimeText } from "@/utils/duration/convert-duration-to-time-text";
 import { formatDurationLabel } from "@/utils/duration/format-duration-label";
 import { getTimerProgress } from "@/utils/timer/get-timer-progress";
+import { playTimerSound } from "@/utils/timer/timer-sound";
 
 export const TimerPanel = () => {
   const [feedbackText, setFeedbackText] = useState<string | undefined>();
@@ -87,6 +88,7 @@ export const TimerPanel = () => {
   useEffect(() => {
     if (isTimeUp && !wasTimeUpRef.current) {
       timerSessionControlsRef.current?.openEndModal();
+      void playTimerSound();
       if (activeTimer && isRunning) {
         changeStatus({
           timerId: activeTimer.timerId,

apps/timo-web/components/timer/TimerSessionControls.tsx

@@ -11,6 +11,7 @@ import {
   type ExtendTimePreset,
 } from "@/components/timer/TimerExtendModalPanel";
 import { TimerStopModalPanel } from "@/components/timer/TimerStopModalPanel";
+import { playTimerSound } from "@/utils/timer/timer-sound";
 
 type TimerModalStep = "end" | "stop" | "extend" | "complete";
 
@@ -124,7 +125,10 @@ export const TimerSessionControls = forwardRef<
         {step === "stop" && (
           <TimerStopModalPanel
             minutes={actualMinutes}
-            onSwitch={() => setStep("complete")}
+            onSwitch={() => {
+              void playTimerSound();
+              setStep("complete");
+            }}
           />
         )}
         {step === "extend" && (

apps/timo-web/utils/timer/timer-sound.ts

@@ -0,0 +1,39 @@
+let audioContext: AudioContext | undefined;
+let soundBuffer: Promise<AudioBuffer> | undefined;
+
+export const unlockTimerSound = async () => {
+  try {
+    audioContext ??= new AudioContext();
+    if (audioContext.state !== "running") await audioContext.resume();
+    return audioContext.state === "running";
+  } catch {
+    return false;
+  }
+};
+
+export const playTimerSound = async () => {
+  try {
+    audioContext ??= new AudioContext();
+    const context = audioContext;
+    const resume = context.resume();
+    soundBuffer ??= fetch("/sounds/timer-completed.mp3")
+      .then((response) => {
+        if (!response.ok) throw new Error("Failed to load timer sound");
+        return response.arrayBuffer();
+      })
+      .then((data) => context.decodeAudioData(data))
+      .catch((error: unknown) => {
+        soundBuffer = undefined;
+        throw error;
+      });
+    const [, buffer] = await Promise.all([resume, soundBuffer]);
+
+    const source = context.createBufferSource();
+    source.buffer = buffer;
+    source.connect(context.destination);
+    source.onended = () => source.disconnect();
+    source.start();
+  } catch {
+    return;
+  }
+};