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();