diff --git a/client/src/components/blocks/ProjectSetting/index.tsx b/client/src/components/blocks/ProjectSetting/index.tsx index f1a81bf..37a166c 100644 --- a/client/src/components/blocks/ProjectSetting/index.tsx +++ b/client/src/components/blocks/ProjectSetting/index.tsx @@ -80,7 +80,7 @@ function ProjectSetting({ onProjectSubmit, trackTags }: ProjectSettingProps) { />
- +
); diff --git a/client/src/hooks/useCreateTrack.ts b/client/src/hooks/useCreateTrack.ts index 9e53c02..f21f687 100644 --- a/client/src/hooks/useCreateTrack.ts +++ b/client/src/hooks/useCreateTrack.ts @@ -34,7 +34,7 @@ const useCreateTrack = ({ }; const handleTrackRemove = (audioId: AudioType["id"]) => { - stopRecord(); + stopRecord({ interrupted: true }); if (window.confirm("녹음된 트랙이 있어요. 정말 삭제할까요?")) { initRecord(); diff --git a/client/src/hooks/useRecord.ts b/client/src/hooks/useRecord.ts index 9e63d9f..eaa4791 100644 --- a/client/src/hooks/useRecord.ts +++ b/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(); const mediaRecorderRef = useRef(); 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, diff --git a/client/src/hooks/useTrackPlayer.ts b/client/src/hooks/useTrackPlayer.ts index 146e21f..abca35e 100644 --- a/client/src/hooks/useTrackPlayer.ts +++ b/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();