Feat/403: [FE] [녹음] 녹음 시 트랙 재생 관련 인터랙션 막기

client/src/components/atoms/TrackPlayBox/index.tsx

@@ -49,6 +49,7 @@ export default function TrackPlayBox({
       isDisabled
       min={0}
       max={maxMeasure}
+      cursor="initial"
     >
       <SliderTrack width="100%" minH="inherit" borderRadius="inherit" bgColor="rgba(177, 255, 0, 0.1)">
         <SliderFilledTrack minH="inherit" bgColor={bgColor} borderLeftRadius="inherit" />

client/src/components/atoms/TrackRecordBox/index.tsx

@@ -21,10 +21,10 @@ export function TrackRecordBox({ onRecord }: { onRecord: () => void }) {
   };
 
   useEffect(() => {
-    if (isExpired) {
+    if (count === 0) {
       startRecord();
     }
-  }, [isExpired]);
+  }, [count]);
 
   useEffect(() => {
     const $recordBox = document.querySelector("#record-box");

client/src/components/atoms/TrackRecordBox/style.scss

@@ -4,6 +4,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #404040;
+  background-color: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
+  cursor: initial;
 }

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

@@ -38,8 +38,14 @@ function TrackPlayer({
       onChange={handlePlayerChange}
       min={0}
       max={totalMeasure}
+      step={0.5}
       focusThumbOnChange={false}
+      isReadOnly={isRecording}
+      cursor="pointer"
     >
+      <SliderThumb top="-6px" w="fit-content" h="100%" cursor="pointer" _focus={{ outline: "none" }}>
+        <PlayStick />
+      </SliderThumb>
       <SliderTrack w="100%" height="calc(100% - 3rem)" maxH="inherit" minH="inherit" paddingY="5%">
         <VStack
           w="100%"
@@ -73,9 +79,6 @@ function TrackPlayer({
           )}
         </VStack>
       </SliderTrack>
-      <SliderThumb top="-6px" w="fit-content" h="100%" cursor="pointer" _focus={{ outline: "none" }}>
-        <PlayStick />
-      </SliderThumb>
     </Slider>
   );
 }

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

@@ -86,7 +86,7 @@ function TrackSetting({ projectTitle, bpmState, trackTags, tracks }: ProjectInfo
         />
       </div>
       <div id="bottom-section">
-        <UnderPlayBarViewModel />
+        <UnderPlayBarViewModel isRecording={isRecording} />
       </div>
     </div>
   );

client/src/hooks/useCreateTrack.ts

@@ -1,9 +1,10 @@
 import { useEffect } from "react";
+import { useRecoilValue } from "recoil";
 
 import type { AudioType } from "types/audioType";
 
+import { isTrackPlayingState } from "model/audioModel";
 import useRecord from "./useRecord";
-import useTimer from "./useTimer";
 
 const useCreateTrack = ({
   inputDeviceId,
@@ -16,6 +17,8 @@ const useCreateTrack = ({
   onRecordCancel?: () => void;
   onTrackRemove?: (audioId: AudioType["id"]) => void;
 }) => {
+  const isTrackPlaying = useRecoilValue(isTrackPlayingState);
+
   const {
     isRecording,
     isSuccess: isRecordSuccess,
@@ -26,29 +29,31 @@ const useCreateTrack = ({
     initRecord,
   } = useRecord(inputDeviceId);
 
-  const { start: startTimer, pause: pauseTimer, isExpired, time: timerTime } = useTimer(30);
-
   const handleRecordButtonClick = () => {
     startRecord();
-    startTimer();
   };
 
   const handleTrackRemove = (audioId: AudioType["id"]) => {
     stopRecord();
-    pauseTimer();
 
     if (window.confirm("녹음된 트랙이 있어요. 정말 삭제할까요?")) {
       initRecord();
       onTrackRemove?.(audioId);
     }
   };
 
-  // timer가 종료되면 트랙 녹음 중지
+  // 녹음 상태이고, track player가 재생상태인 경우에 녹음 시작
   useEffect(() => {
-    if (isExpired) {
+    if (!isRecording) {
+      return;
+    }
+
+    if (isTrackPlaying) {
+      startRecord();
+    } else {
       stopRecord();
     }
-  }, [isExpired]);
+  }, [isTrackPlaying]);
 
   useEffect(() => {
     if (isRecordSuccess) {

client/src/hooks/useTrackPlayer.ts

@@ -11,15 +11,17 @@ const useTrackPlayer = ({ bpm, isRecording }: { bpm: number; isRecording?: boole
   const { trackTime, setTrackTime, startTrackTimer, stopTrackTimer, resetTrackTimer } = useTrackTimer();
 
   // bpm에 따른 전체 마디 계산
-  const totalMeasure = Math.floor(bpm / 2) + 1;
+  const totalMeasure = Math.floor(bpm / 2) + 2;
   const measure = trackTime / (30 / totalMeasure);
 
   // 현재 재생 중인 마디 값이 바뀌면 TrackPlayer, 오디오의 재생 시간도 변경
   const setMeasure = useCallback(
     (nextMeasure: number) => {
-      const currentTime = Number((nextMeasure * (30 / totalMeasure)).toFixed(3));
-      setTrackTime(currentTime);
-      changeAudioTime(currentTime);
+      const currentTime = nextMeasure * (30 / totalMeasure);
+      // TrackPlayer 재생 시간 정수 단위로 설정
+      setTrackTime(Math.floor(currentTime));
+      // 오디오 재생 시간 설정
+      changeAudioTime(Number(currentTime.toFixed(3)));
     },
     [changeAudioTime],
   );

client/src/viewmodel/UnderPlayBarViewModel.tsx

@@ -6,21 +6,32 @@ import useAudios from "hooks/useAudios";
 
 import UnderPlayBar from "components/blocks/UnderPlayBar";
 
-function UnderPlayBarViewModel() {
+function UnderPlayBarViewModel({ isRecording }: { isRecording?: boolean }) {
   const { isAudioPlaying, toggleAudio, chanegeAudioVolume } = useAudios();
   const time = useRecoilValue(trackTimeState);
   const refinedTime = `00:${Math.floor(time).toString().padStart(2, "0")}`;
 
+  // 녹음 중이면 오디오 재생상태 조작 불가능
+  const handlePlayButtonClick = () => {
+    if (!isRecording) {
+      toggleAudio();
+    }
+  };
+
   return (
     <UnderPlayBar
       sound={INITIAL_AUDIO_VOLUME}
       currentTime={refinedTime}
       totalTime="00:30"
       onSoundInput={chanegeAudioVolume}
       isPlaying={isAudioPlaying}
-      onClickPlay={toggleAudio}
+      onClickPlay={handlePlayButtonClick}
     />
   );
 }
 
+UnderPlayBarViewModel.defaultProps = {
+  isRecording: false,
+};
+
 export default UnderPlayBarViewModel;