From ca149f530f4c27832a4803cf0f7a0995b7cb9eb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=82=98=EC=97=B0?= <apinksky00@gmail.com>
Date: Mon, 11 Nov 2024 20:13:18 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20useRecord=20=EC=84=B1=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MediaRecorder 객체를 주기적으로 생성하는 것 방지
- ondataavailable에 할당하는 함수를 따로 선언 후 할당
- mediaRecorder.start의 인수에 3000ms 전달
---
 src/hooks/useRecorder.ts | 59 +++++++++++++++-------------------------
 1 file changed, 22 insertions(+), 37 deletions(-)

diff --git a/src/hooks/useRecorder.ts b/src/hooks/useRecorder.ts
index 041b608..dcc2f28 100644
--- a/src/hooks/useRecorder.ts
+++ b/src/hooks/useRecorder.ts
@@ -4,49 +4,38 @@ import { useAlertStore } from '../store/useAlertStore';
 export const useRecorder = (onAudioData: (data: string) => void) => {
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
-  const intervalRef = useRef<number | null>(null);
 
   const addAlert = useAlertStore((state) => state.addAlert);
 
-  const initMediaRecorder = (stream: MediaStream) => {
-    const options = { mimeType: 'audio/webm;codecs=opus' };
-    mediaRecorderRef.current = new MediaRecorder(stream, options);
-
-    mediaRecorderRef.current.ondataavailable = (event) => {
-      if (event.data.size > 0 && event.data != null) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          const arrayBuffer = e.target?.result as ArrayBuffer;
-          if (arrayBuffer) {
-            const base64EncodedData = btoa(
-              String.fromCharCode(...new Uint8Array(arrayBuffer)),
-            );
-            onAudioData(base64EncodedData);
-          } else {
-            console.error(
-              '[mediaRecorder]-[ondataavailable] ArrayBuffer is null',
-            );
-          }
-        };
-        reader.readAsArrayBuffer(event.data);
-      }
-    };
-
-    mediaRecorderRef.current.start();
+  const handleDataAvailable = (event: BlobEvent) => {
+    if (event.data.size > 0) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const arrayBuffer = e.target?.result as ArrayBuffer;
+        if (arrayBuffer) {
+          const base64EncodedData = btoa(
+            String.fromCharCode(...new Uint8Array(arrayBuffer)),
+          );
+          onAudioData(base64EncodedData);
+        } else {
+          console.error(
+            '[mediaRecorder]-[ondataavailable] ArrayBuffer is null',
+          );
+        }
+      };
+      reader.readAsArrayBuffer(event.data);
+    }
   };
 
   const startRecording = async () => {
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       streamRef.current = stream;
-      initMediaRecorder(stream);
 
-      intervalRef.current = setInterval(() => {
-        if (mediaRecorderRef.current?.state === 'recording') {
-          mediaRecorderRef.current.stop();
-        }
-        initMediaRecorder(stream);
-      }, 3000);
+      const options = { mimeType: 'audio/webm;codecs=opus' };
+      mediaRecorderRef.current = new MediaRecorder(stream, options);
+      mediaRecorderRef.current.ondataavailable = handleDataAvailable;
+      mediaRecorderRef.current.start(3000);
     } catch (error) {
       addAlert(
         '마이크를 사용할 수 없습니다. 브라우저 설정을 확인해주세요.',
@@ -60,12 +49,8 @@ export const useRecorder = (onAudioData: (data: string) => void) => {
       mediaRecorderRef.current.stop();
     }
     streamRef.current?.getTracks().forEach((track) => track.stop());
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-    }
     mediaRecorderRef.current = null;
     streamRef.current = null;
-    intervalRef.current = null;
   };
 
   return { startRecording, stopRecording };