feat: 트랙 추가하기 기능 구현

client/src/api/track.ts

@@ -0,0 +1,17 @@
+import { API } from "./axios";
+
+// 트랙 생성
+export const addTrack = async (projectId: string, params: {}) => {
+  const url = `/projects/${projectId}/tracks`;
+  const errorMessage = "트랙이 생성되지 않았습니다. 잠시 후 다시 시도해주세요.";
+
+  try {
+    const res = await API.post(url, params);
+    return res.data;
+  } catch (err) {
+    console.log(err);
+    alert(errorMessage);
+  }
+
+  return Promise.reject(new Error(errorMessage));
+};

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

@@ -14,6 +14,7 @@ import UnderPlayBarViewModel from "viewmodel/UnderPlayBarViewModel";
 import useAudios from "hooks/useAudios";
 import useTrackSetting from "hooks/useTrackSetting";
 import useCreateTrack from "hooks/useCreateTrack";
+import { NEW_TRACK_ID } from "constants/key";
 
 import "./style.scss";
 
@@ -22,20 +23,14 @@ interface ProjectInfoType {
   bpmState: number;
   trackTags: Track[];
   tracks: TrackResponseType[];
+  onTrackCreate: (title: string, trackTag: Track, audio: HTMLAudioElement) => void;
 }
 
-function TrackSetting({ projectTitle, bpmState, trackTags, tracks }: ProjectInfoType) {
-  const {
-    inputDeviceId,
-    inputTextDevice,
-    trackTag,
-    handleTitleInput,
-    handleTrackTagSelect,
-    handleDeviceClick,
-    handleSettingSubmit,
-  } = useTrackSetting();
+function TrackSetting({ projectTitle, bpmState, trackTags, tracks, onTrackCreate }: ProjectInfoType) {
+  const { title, inputDeviceId, inputTextDevice, trackTag, handleTitleInput, handleTrackTagSelect, handleDeviceClick } =
+    useTrackSetting();
 
-  const { setAudios, addAudio, removeAudio } = useAudios();
+  const { audioList, setAudios, addAudio, removeAudio } = useAudios();
 
   const { isRecording, isRecordSuccess, handleRecordButtonClick, handleTrackRemove } = useCreateTrack({
     inputDeviceId,
@@ -49,6 +44,16 @@ function TrackSetting({ projectTitle, bpmState, trackTags, tracks }: ProjectInfo
     },
   });
 
+  const handleTrackSubmit = () => {
+    const recordedAudio = audioList.find(({ id }) => id === NEW_TRACK_ID);
+
+    if (!title || !trackTag || !recordedAudio) {
+      return;
+    }
+
+    onTrackCreate(title, trackTag, recordedAudio.audio);
+  };
+
   useEffect(() => {
     if (tracks.length === 0) {
       return;
@@ -72,7 +77,7 @@ function TrackSetting({ projectTitle, bpmState, trackTags, tracks }: ProjectInfo
               <RecordDevice onDeviceClick={handleDeviceClick} inputTextDevice={inputTextDevice} />
               <TrackTag onTrackClick={handleTrackTagSelect} selectedTrack={trackTag} tracks={trackTags} />
             </div>
-            <Button type="green" onBtnClick={handleSettingSubmit} marginTop="4rem" width="100%">
+            <Button type="green" onBtnClick={handleTrackSubmit} marginTop="4rem" width="100%">
               트랙 추가하기
             </Button>
           </div>

client/src/hooks/useTrackSetting.ts

@@ -22,9 +22,6 @@ const useTrackSetting = () => {
     setTrackTag(e.currentTarget.lastChild?.nodeValue as Track);
   };
 
-  // 프로젝트 생성하기 버튼 클릭
-  const handleSettingSubmit = () => {};
-
   return {
     title,
     inputDeviceId,
@@ -33,7 +30,6 @@ const useTrackSetting = () => {
     handleTitleInput,
     handleDeviceClick,
     handleTrackTagSelect,
-    handleSettingSubmit,
   };
 };
 

client/src/viewmodel/CreateTrackViewModel.tsx

@@ -1,20 +1,44 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
-import { ProjectResponseType } from "types/projectType";
+import { ProjectResponseType, Track } from "types/projectType";
 
 import { getProject } from "api/project";
+import { addTrack } from "api/track";
 import { trackList as TrackTags } from "utils/data/track";
+import { getAudioBlob } from "utils/audio";
 
 import TrackSetting from "components/blocks/TrackSetting";
 
 function CreateTrackViewModel() {
   const { projectId } = useParams();
+  const navigate = useNavigate();
 
   const [projectInfo, setProjectInfo] = useState<ProjectResponseType>();
   const [isLoading, setIsLoading] = useState(false);
   const isFetched = !isLoading && projectInfo;
 
+  // 트랙 생성하기 버튼 클릭
+  const handleTrackCreate = (title: string, trackTag: Track, audio: HTMLAudioElement) => {
+    if (!projectId) {
+      return;
+    }
+
+    const createTrack = async () => {
+      const recordedBlob = await getAudioBlob(audio);
+
+      const formData = new FormData();
+      formData.append("trackName", title);
+      formData.append("trackTag", trackTag);
+      formData.append("audioFile", recordedBlob);
+
+      await addTrack(projectId, formData);
+      navigate(`/${projectId}`);
+    };
+
+    createTrack();
+  };
+
   useEffect(() => {
     if (!projectId) {
       return;
@@ -38,6 +62,7 @@ function CreateTrackViewModel() {
       projectTitle={projectInfo.projectName}
       bpmState={projectInfo.bpm}
       tracks={projectInfo.tracks}
+      onTrackCreate={handleTrackCreate}
     />
   ) : (
     <div>Loading...</div>