Merge pull request #413 from Collusic/feat/fe/Issue-390

Fix/390: [FE] [녹음] 녹음을 중단하면 녹음이 저장되지 않고 바로 삭제될 수 있도록 수정

client/src/components/blocks/ProjectSetting/index.tsx

@@ -80,7 +80,7 @@ function ProjectSetting({ onProjectSubmit, trackTags }: ProjectSettingProps) {
         />
       </div>
       <div id="bottom-section">
-        <UnderPlayBarViewModel />
+        <UnderPlayBarViewModel isRecording={isRecording} />
       </div>
     </div>
   );

client/src/hooks/useCreateTrack.ts

@@ -34,7 +34,7 @@ const useCreateTrack = ({
   };
 
   const handleTrackRemove = (audioId: AudioType["id"]) => {
-    stopRecord();
+    stopRecord({ interrupted: true });
 
     if (window.confirm("녹음된 트랙이 있어요. 정말 삭제할까요?")) {
       initRecord();

client/src/hooks/useRecord.ts

@@ -6,7 +6,7 @@ interface MediaRecorderBaseResult {
   data: Blob | undefined;
   streamId: string | undefined;
   startRecord: () => void;
-  stopRecord: () => void;
+  stopRecord: (props?: { interrupted: boolean }) => void;
   initRecord: () => void;
 }
 
@@ -65,12 +65,14 @@ const getMediaRecorder = async ({
 const useRecord = (deviceId: ConstrainDOMString) => {
   const [isRecording, setIsRecording] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
+  const [isInterrupted, setIsInterrupted] = useState(true);
   const dataRef = useRef<Blob>();
   const mediaRecorderRef = useRef<MediaRecorder>();
 
   const handleRecordStart = () => {
     setIsRecording(true);
     setIsSuccess(false);
+    setIsInterrupted(true);
   };
 
   const handleRecordStop = (data: Blob) => {
@@ -82,6 +84,7 @@ const useRecord = (deviceId: ConstrainDOMString) => {
   const initRecord = () => {
     dataRef.current = undefined;
     setIsSuccess(false);
+    setIsInterrupted(true);
   };
 
   const startRecord = async () => {
@@ -102,9 +105,16 @@ const useRecord = (deviceId: ConstrainDOMString) => {
 
   useEffect(() => {}, [isSuccess]);
 
-  const stopRecord = () => {
+  const stopRecord = (props?: { interrupted: boolean }) => {
+    // stopRecord({interrupted: true})인 경우에만 interrupted = true
+    const interrupted = props?.interrupted || false;
+
     if (mediaRecorderRef.current && mediaRecorderRef.current.state === "recording") {
       mediaRecorderRef.current.stop();
+
+      if (!interrupted) {
+        setIsInterrupted(false);
+      }
     }
   };
 
@@ -116,7 +126,7 @@ const useRecord = (deviceId: ConstrainDOMString) => {
 
   return {
     isRecording,
-    isSuccess,
+    isSuccess: isSuccess && !isInterrupted,
     data: dataRef.current,
     streamId: mediaRecorderRef.current?.stream.id,
     startRecord,

client/src/hooks/useTrackPlayer.ts

@@ -7,7 +7,7 @@ import useTrackTimer from "./useTrackTimer";
  *  TrackPlayer의 재생 시간과 오디오를 함께 조작(동기화)하기 위한 hook
  */
 const useTrackPlayer = ({ bpm, isRecording }: { bpm: number; isRecording?: boolean }) => {
-  const { isAudioPlaying, changeAudioTime, playAudio, stopAudio, resetAudio } = useAudios();
+  const { isAudioPlaying, changeAudioTime, playAudio, stopAudio, resetAudio, audioList } = useAudios();
   const { trackTime, setTrackTime, startTrackTimer, stopTrackTimer, resetTrackTimer } = useTrackTimer();
 
   // bpm에 따른 전체 마디 계산
@@ -41,6 +41,11 @@ const useTrackPlayer = ({ bpm, isRecording }: { bpm: number; isRecording?: boole
 
   // 오디오와 TrackPlayer 재생 시간 동기화
   useEffect(() => {
+    if (audioList.length === 0 && !isRecording) {
+      return;
+    }
+
+    // 녹음 중이거나 트랙이 있는 경우에만 TrackPlayer 재생
     if (isAudioPlaying) {
       startTrackTimer();
     } else {
@@ -60,6 +65,11 @@ const useTrackPlayer = ({ bpm, isRecording }: { bpm: number; isRecording?: boole
     }
   }, [isRecording]);
 
+  // 트랙이 변경되면 TrackPlayer 초기화
+  useEffect(() => {
+    resetTrackPlayer();
+  }, [audioList]);
+
   // 언마운트 시 TrackPlayer 초기화
   useEffect(() => {
     return () => resetTrackPlayer();