[Feature-dev-hotfix]음성파일 요청 관련 에러 처리

client/src/api/ai.api.ts

@@ -21,9 +21,5 @@ instanceForAi.interceptors.request.use((config: InternalAxiosRequestConfig) => {
 });
 
 export function AudioAiConvert(formData: FormData) {
-  return instanceForAi.post(`/ai/audio`, formData, {
-    headers: {
-      "Content-Type": "multipart/form-data",
-    },
-  });
+  return instanceForAi.post(`/ai/audio`, formData);
 }

client/src/components/MindMapMainSection/ControlSection/TextUpload.tsx

@@ -12,8 +12,6 @@ import { createPortal } from "react-dom";
 export default function TextUpload() {
   const { content, updateContent, availabilityInform, handleMouseEnter, handleMouseLeave, errorMsg, updateErrorMsg } =
     useUpload();
-  const role = useConnectionStore((state) => state.currentRole);
-  const ownerAvailability = role === "owner";
   const handleSocketEvent = useConnectionStore((state) => state.handleSocketEvent);
   const { open, openModal, closeModal } = useModal();
 
@@ -26,7 +24,8 @@ export default function TextUpload() {
   }
 
   function handleAiProcessButton() {
-    if (!textUploadValidation() || !ownerAvailability) return;
+    if (availabilityInform) return;
+    if (!textUploadValidation()) return;
     updateErrorMsg("");
     handleSocketEvent({ actionType: "aiRequest", payload: { aiContent: content } });
   }

client/src/components/MindMapMainSection/ControlSection/UploadBox.tsx

@@ -53,7 +53,6 @@ export default function UploadBox({ file, setFile }: UploadBoxProps) {
     setIsDragging(false);
   };
 
-  //TODO : 머시기 확장자에서 나중에 정확히 확장자 표기하기
   return (
     <div
       className={`flex h-full w-full border-spacing-9 cursor-pointer flex-col items-center justify-center gap-8 rounded-xl border-[3px] border-grayscale-300 p-4 text-grayscale-400 ${isDragging ? "bg-grayscale-400" : "border-dotted"}`}

client/src/components/MindMapMainSection/ControlSection/VoiceFileUpload.tsx

@@ -23,6 +23,7 @@ export default function VoiceFileUpload() {
   const { aiCount, updateLoadingStatus } = useNodeListContext();
   const handleSocketEvent = useConnectionStore((state) => state.handleSocketEvent);
   const propagateError = useConnectionStore((state) => state.propagateError);
+  const [key, setKey] = useState(0);
 
   function fileValidation(file) {
     if (!file) {
@@ -37,10 +38,10 @@ export default function VoiceFileUpload() {
   }
 
   async function sendAudioFile() {
+    if (availabilityInform) return;
     if (!fileValidation(file)) return;
     updateErrorMsg("");
     handleSocketEvent({ actionType: "audioAiRequest" });
-
     try {
       const mindMapId = await getMindMapByConnectionId(connectionId);
       const formData = audioFormData(file, mindMapId, connectionId);
@@ -50,29 +51,26 @@ export default function VoiceFileUpload() {
     } finally {
       updateLoadingStatus({ type: "aiPending", status: false });
       setFile(null);
+      setKey((prev) => prev + 1);
     }
   }
 
   return (
-    <>
-      <div className="flex h-full flex-col text-grayscale-100">
-        <UploadBox file={file} setFile={setFile} />
-        <p className="mb-5 mt-1 text-grayscale-400">AI 변환 남은 횟수 : {aiCount}번</p>
-        <div className="mb-5 flex w-full flex-col gap-1">
-          <Button
-            className="rounded-xl bg-bm-blue p-3 transition hover:brightness-90"
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-            onClick={openModal}
-          >
-            만들기
-            <UploadAvailabilityArrowBox content={availabilityInform} />
-          </Button>
-          {errorMsg && <p className="text-red-500">{errorMsg}</p>}
-        </div>
-        <div className="flex w-48 justify-end">
-          <img src={clovaX} alt="clovaX" />
-        </div>
+    <div className="flex h-full flex-col text-grayscale-100">
+      <UploadBox key={key} file={file} setFile={setFile} />
+      <p className="mb-5 mt-1 text-grayscale-400">AI 변환 남은 횟수 : {aiCount}번</p>
+      <div className="mb-5 flex w-full flex-col gap-1">
+        <Button
+          className="rounded-xl bg-bm-blue p-3 transition hover:brightness-90"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onClick={sendAudioFile}
+        >
+          만들기
+          <UploadAvailabilityArrowBox content={availabilityInform} />
+        </Button>
+        {errorMsg && <p className="text-red-500">{errorMsg}</p>}
+
       </div>
       {createPortal(
         <ConfirmUploadModal open={open} closeModal={closeModal} onConfirm={sendAudioFile} />,

client/src/store/NodeListProvider.tsx

@@ -167,6 +167,7 @@ export default function NodeListProvider({ children }: { children: ReactNode })
         initializeAiCount,
         loadingStatus,
         stage,
+        updateLoadingStatus,
       }}
     >
       {children}