[NDD-237] Interview 페이지의 useMedia hooks 개발 (2h/2h)

FE/src/GlobalSvgProvider.tsx

@@ -137,6 +137,8 @@ const spliteSvgCode = (
       <path
         d="M7.15964 4.50879C7.49297 4.50879 7.76797 4.78379 7.76797 5.11712C7.76797 5.45046 7.49297 5.72546 7.15964 5.72546C4.80964 5.72546 2.89297 7.64212 2.89297 9.99212C2.89297 12.3421 4.80964 14.2588 7.15964 14.2588C9.50964 14.2588 11.4263 12.3421 11.4263 9.99212C11.4263 9.65879 11.7013 9.38379 12.0346 9.38379C12.368 9.38379 12.643 9.65879 12.643 9.99212C12.643 13.0171 10.1846 15.4838 7.1513 15.4838C4.11797 15.4838 1.66797 13.0255 1.66797 10.0005C1.66797 6.97546 4.1263 4.50879 7.15964 4.50879Z"
         fill="#292D32"
+      />
+    </symbol>
     <symbol id="edit" viewBox="0 0 32 32">
       <path
         d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z"

FE/src/hooks/useMedia.ts

@@ -0,0 +1,40 @@
+import { closeMedia, getMedia, getSupportedMimeTypes } from '@/utils/media';
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+const useMedia = () => {
+  const [media, setMedia] = useState<MediaStream | null>(null);
+  const [selectedMimeType, setSelectedMimeType] = useState('');
+  const [connectStatus, setIsConnectedStatus] = useState<
+    'connect' | 'fail' | 'pending'
+  >('pending');
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const connectMedia = useCallback(async () => {
+    try {
+      const media = await getMedia();
+
+      setMedia(media);
+      if (media) setIsConnectedStatus('connect');
+      else setIsConnectedStatus('fail');
+      if (videoRef.current) videoRef.current.srcObject = media;
+    } catch (e) {
+      console.log(`현재 마이크와 카메라가 연결되지 않았습니다`);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!media) {
+      void connectMedia();
+    }
+    const mimeTypes = getSupportedMimeTypes();
+    if (mimeTypes.length > 0) setSelectedMimeType(mimeTypes[0]);
+
+    return () => {
+      closeMedia(media);
+    };
+  }, [media, connectMedia]);
+
+  return { media, videoRef, connectStatus, selectedMimeType };
+};
+
+export default useMedia;

FE/src/page/interviewPage/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 
 import InterviewPageLayout from '@components/interviewPage/InterviewPageLayout';
 import InterviewHeader from '@/components/interviewPage/InterviewHeader/InterviewHeader';
@@ -14,64 +14,36 @@ import { PATH } from '@constants/path';
 import { Navigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { recordSetting } from '@/atoms/interviewSetting';
+import useMedia from '@/hooks/useMedia';
 
+import { useNavigate } from 'react-router-dom';
 const InterviewPage: React.FC = () => {
   const isAllSuccess = useIsAllSuccess();
   const { method } = useRecoilValue(recordSetting);
 
   const isLogin = useQueryClient().getQueryState(QUERY_KEY.MEMBER);
+  const navigate = useNavigate();
   const { currentQuestion, getNextQuestion, isLastQuestion } =
     useInterviewFlow();
 
-  const [stream, setStream] = useState<MediaStream | null>(null);
+  const {
+    media,
+    videoRef: mirrorVideoRef,
+    connectStatus,
+    selectedMimeType,
+  } = useMedia();
+
   const [isRecording, setIsRecording] = useState(false);
   const [isScriptInView, setIsScriptInView] = useState(true);
   const [recordedBlobs, setRecordedBlobs] = useState<Blob[]>([]);
-  const [selectedMimeType, setSelectedMimeType] = useState('');
   const [interviewIntroModalIsOpen, setInterviewIntroModalIsOpen] =
     useState<boolean>(true);
 
-  const mirrorVideoRef = useRef<HTMLVideoElement>(null);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
 
-  useEffect(() => {
-    if (!stream && isAllSuccess) {
-      void getMedia();
-    }
-    const mimeTypes = getSupportedMimeTypes();
-    if (mimeTypes.length > 0) setSelectedMimeType(mimeTypes[0]);
-
-    return () => {
-      if (stream) {
-        // recoil 을 모두 초기화
-        stream.getTracks().forEach((track) => track.stop());
-      }
-    };
-  }, [isAllSuccess, stream]);
-
-  const getMedia = async () => {
-    try {
-      const mediaStream = await navigator.mediaDevices.getUserMedia({
-        audio: {
-          echoCancellation: { exact: true },
-        },
-        video: {
-          width: 1280,
-          height: 720,
-        },
-      });
-
-      setStream(mediaStream);
-      if (mirrorVideoRef.current)
-        mirrorVideoRef.current.srcObject = mediaStream;
-    } catch (e) {
-      console.log(`현재 마이크와 카메라가 연결되지 않았습니다`);
-    }
-  };
-
   const handleStartRecording = () => {
     try {
-      mediaRecorderRef.current = new MediaRecorder(stream as MediaStream, {
+      mediaRecorderRef.current = new MediaRecorder(media as MediaStream, {
         mimeType: selectedMimeType,
       });
       mediaRecorderRef.current.ondataavailable = (event) => {
@@ -129,50 +101,38 @@ const InterviewPage: React.FC = () => {
     setRecordedBlobs([]);
   };
 
-  const getSupportedMimeTypes = () => {
-    const types = [
-      'video/webm; codecs=vp8',
-      'video/webm; codecs=vp9',
-      'video/webm; codecs=h264',
-      'video/mp4; codecs=h264',
-    ];
-    return types.filter((type) => MediaRecorder.isTypeSupported(type));
-  };
-
-  if (!isAllSuccess) return <Navigate to={PATH.ROOT} />;
-
-  return (
-    <InterviewPageLayout>
-      <InterviewHeader
-        isRecording={isRecording}
-        intervieweeName="가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하"
-      />
-      <InterviewMain
-        mirrorVideoRef={mirrorVideoRef}
-        isScriptInView={isScriptInView}
-        question={currentQuestion.questionContent}
-        answer={currentQuestion.answerContent}
-      />
-      <InterviewFooter
-        isRecording={isRecording}
-        recordedBlobs={recordedBlobs}
-        isLastQuestion={isLastQuestion}
-        handleStartRecording={handleStartRecording}
-        handleStopRecording={handleStopRecording}
-        handleScript={() => setIsScriptInView((prev) => !prev)}
-        handleNextQuestion={getNextQuestion}
-        handleDownload={handleDownload}
-      />
-      <InterviewIntroModal
-        isOpen={interviewIntroModalIsOpen}
-        closeModal={() => setInterviewIntroModalIsOpen((prev) => !prev)}
-      />
-      <InterviewTimeOverModal
-        isOpen={false}
-        closeModal={() => console.log('모달을 종료합니다.')}
-      />
-    </InterviewPageLayout>
-  );
+  if (!isAllSuccess || connectStatus === 'fail') {
+    return <Navigate to={PATH.ROOT} />;
+  } else
+    return (
+      <InterviewPageLayout>
+        <InterviewHeader isRecording={isRecording} intervieweeName="면접자" />
+        <InterviewMain
+          mirrorVideoRef={mirrorVideoRef}
+          isScriptInView={isScriptInView}
+          question={currentQuestion.questionContent}
+          answer={currentQuestion.answerContent}
+        />
+        <InterviewFooter
+          isRecording={isRecording}
+          recordedBlobs={recordedBlobs}
+          isLastQuestion={isLastQuestion}
+          handleStartRecording={handleStartRecording}
+          handleStopRecording={handleStopRecording}
+          handleScript={() => setIsScriptInView((prev) => !prev)}
+          handleNextQuestion={getNextQuestion}
+          handleDownload={handleDownload}
+        />
+        <InterviewIntroModal
+          isOpen={interviewIntroModalIsOpen}
+          closeModal={() => setInterviewIntroModalIsOpen((prev) => !prev)}
+        />
+        <InterviewTimeOverModal
+          isOpen={false}
+          closeModal={() => console.log('모달을 종료합니다.')}
+        />
+      </InterviewPageLayout>
+    );
 };
 
 export default InterviewPage;

FE/src/utils/media.ts

@@ -0,0 +1,37 @@
+export const closeMedia = (media: MediaStream | null) => {
+  if (media) {
+    media.getTracks().forEach((track) => track.stop());
+  }
+};
+
+export const getMedia = async (): Promise<MediaStream | null> => {
+  try {
+    const media = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        echoCancellation: { exact: true },
+      },
+      video: {
+        width: 1280,
+        height: 720,
+      },
+    });
+
+    return media;
+  } catch (error) {
+    alert(
+      '현재 브라우저에 카메라 및 마이크가 연결되지 않았습니다. 카메라 및 마이크의 접근 권한의 재설정 후 서비스를 이용하실 수 있습니다.'
+    );
+
+    return null;
+  }
+};
+
+export const getSupportedMimeTypes = () => {
+  const types = [
+    'video/webm; codecs=vp8',
+    'video/webm; codecs=vp9',
+    'video/webm; codecs=h264',
+    'video/mp4; codecs=h264',
+  ];
+  return types.filter((type) => MediaRecorder.isTypeSupported(type));
+};