[Feature-modal-refactor-fe] AI text, voice 파일 업로드 시 모달 추가 & 모달 관련 파일들 리팩토링

client/src/components/Dashboard/GuestDashBoard.tsx

@@ -1,7 +1,7 @@
 import dashboardIcon from "@/assets/dashbordIcon.png";
 import plusIcon from "@/assets/plus.png";
-import GuestNewMindMapModal from "@/components/Dashboard/GuestNewMindMapModal";
-import LoginModal from "@/components/LoginModal";
+import GuestNewMindMapModal from "@/components/Modal/GuestNewMindMapModal";
+import LoginModal from "@/components/Modal/LoginModal";
 import useModal from "@/hooks/useModal";
 import { Button } from "@headlessui/react";
 

client/src/components/Dashboard/MindMapInfoItem.tsx

@@ -2,7 +2,7 @@ import profile from "@/assets/profile.png";
 import useModal from "@/hooks/useModal";
 import { Button } from "@headlessui/react";
 import extractDate from "@/utils/extractDate";
-import DeleteMindMapModal from "../DeleteMindMapModal";
+import DeleteMindMapModal from "../Modal/DeleteMindMapModal";
 import { createPortal } from "react-dom";
 import { FaRegTrashAlt, FaUserCircle } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";

client/src/components/MindMapCanvas/CanvasButtons.tsx

@@ -1,4 +1,4 @@
-import DeleteConfirmModal from "@/components/MindMapCanvas/DeleteConfirmModal";
+import ConfirmResetModal from "@/components/Modal/ConfirmResetModal";
 import useModal from "@/hooks/useModal";
 import { findRootNodeKey } from "@/konva_mindmap/utils/findRootNodeKey";
 import { useNodeListContext } from "@/store/NodeListProvider";
@@ -51,7 +51,7 @@ export default function CanvasButtons({ handleReArrange, handleCenterMove, showM
       >
         캔버스 비우기
       </Button>
-      {createPortal(<DeleteConfirmModal open={open} closeModal={closeModal} onConfirm={resetAllNode} />, document.body)}
+      {createPortal(<ConfirmResetModal open={open} closeModal={closeModal} onConfirm={resetAllNode} />, document.body)}
     </div>
   );
 }

client/src/components/MindMapHeader/MindMapHeaderButtons.tsx

@@ -1,7 +1,7 @@
 import { downloadURI } from "@/konva_mindmap/utils/download";
 import { Button } from "@headlessui/react";
 import useModal from "@/hooks/useModal";
-import ShareModal from "../ShareModal";
+import ShareModal from "../Modal/ShareModal";
 import { LuShare, LuShare2 } from "react-icons/lu";
 import { createPortal } from "react-dom";
 import { useNodeListContext } from "@/store/NodeListProvider";

client/src/components/MindMapHeader/Profile.tsx

@@ -1,8 +1,8 @@
-import LoginModal from "@/components/LoginModal";
+import LoginModal from "@/components/Modal/LoginModal";
 import { Button } from "@headlessui/react";
 import { createPortal } from "react-dom";
 import useModal from "@/hooks/useModal";
-import ProfileModal from "@/components/MindMapHeader/ProfileModal";
+import ProfileModal from "@/components/Modal/ProfileModal";
 import { FaUserCircle } from "react-icons/fa";
 import { useConnectionStore } from "@/store/useConnectionStore";
 

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

@@ -5,13 +5,17 @@ import { Button, Textarea } from "@headlessui/react";
 import { useNodeListContext } from "@/store/NodeListProvider";
 import UploadAvailabilityArrowBox from "@/components/MindMapMainSection/ControlSection/UploadAvailabilityArrowBox";
 import { useConnectionStore } from "@/store/useConnectionStore";
+import useModal from "@/hooks/useModal";
+import ConfirmUploadModal from "@/components/Modal/ConfirmUploadModal";
+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();
 
   function textUploadValidation() {
     if (content.length < MIN_TEXT_UPLOAD_LIMIT) {
@@ -30,35 +34,41 @@ export default function TextUpload() {
   const { aiCount } = useNodeListContext();
 
   return (
-    <div className="flex h-full flex-col gap-6 text-grayscale-100">
-      <div className="flex h-full flex-col gap-4">
-        <p>요약할 텍스트</p>
-        <Textarea
-          className="h-full w-full resize-none rounded-xl bg-grayscale-600 p-4"
-          placeholder="Text를 넣어주세요. (500자 이상 15000자 이하)"
-          onKeyDown={(e) => e.stopPropagation()}
-          onChange={(e) => updateContent(e.target.value)}
-          maxLength={MAX_TEXT_UPLOAD_LIMIT}
-        />
-        <div className="flex justify-between text-grayscale-400">
-          <p>AI 변환 남은 횟수 : {aiCount}번</p>
-          <p className="text-right text-grayscale-400">
-            {content.length}/{MAX_TEXT_UPLOAD_LIMIT}
-          </p>
+    <>
+      <div className="flex h-full flex-col gap-6 text-grayscale-100">
+        <div className="flex h-full flex-col gap-4">
+          <p>요약할 텍스트</p>
+          <Textarea
+            className="h-full w-full resize-none rounded-xl bg-grayscale-600 p-4"
+            placeholder="Text를 넣어주세요. (500자 이상 15000자 이하)"
+            onKeyDown={(e) => e.stopPropagation()}
+            onChange={(e) => updateContent(e.target.value)}
+            maxLength={MAX_TEXT_UPLOAD_LIMIT}
+          />
+          <div className="flex justify-between text-grayscale-400">
+            <p>AI 변환 남은 횟수 : {aiCount}번</p>
+            <p className="text-right text-grayscale-400">
+              {content.length}/{MAX_TEXT_UPLOAD_LIMIT}
+            </p>
+          </div>
+        </div>
+        <div className="flex flex-col">
+          <Button
+            className="relative rounded-xl bg-bm-blue p-3 transition hover:brightness-90"
+            onClick={openModal}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            만들기
+            <UploadAvailabilityArrowBox content={availabilityInform} />
+          </Button>
+          {errorMsg && <p className="text-red-500">{errorMsg}</p>}
         </div>
       </div>
-      <div className="flex flex-col">
-        <Button
-          className="relative rounded-xl bg-bm-blue p-3 transition hover:brightness-90"
-          onClick={handleAiProcessButton}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        >
-          만들기
-          <UploadAvailabilityArrowBox content={availabilityInform} />
-        </Button>
-        {errorMsg && <p className="text-red-500">{errorMsg}</p>}
-      </div>
-    </div>
+      {createPortal(
+        <ConfirmUploadModal open={open} closeModal={closeModal} onConfirm={handleAiProcessButton} />,
+        document.body,
+      )}
+    </>
   );
 }

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

@@ -11,9 +11,13 @@ import { useParams } from "react-router-dom";
 import { getMindMapByConnectionId } from "@/api/mindmap.api";
 import { audioFormData } from "@/utils/formData";
 import { FILE_UPLOAD_LIMIT } from "@/constants/uploadLimit";
+import { createPortal } from "react-dom";
+import useModal from "@/hooks/useModal";
+import ConfirmUploadModal from "@/components/Modal/ConfirmUploadModal";
 
 export default function VoiceFileUpload() {
   const [file, setFile] = useState<File | null>(null);
+  const { open, openModal, closeModal } = useModal();
   const { mindMapId: connectionId } = useParams<{ mindMapId: string }>();
   const { availabilityInform, handleMouseEnter, handleMouseLeave, errorMsg, updateErrorMsg } = useUpload();
   const { aiCount, updateLoadingStatus } = useNodeListContext();
@@ -39,7 +43,6 @@ export default function VoiceFileUpload() {
 
     try {
       const mindMapId = await getMindMapByConnectionId(connectionId);
-      console.log(mindMapId);
       const formData = audioFormData(file, mindMapId, connectionId);
       await AudioAiConvert(formData);
     } catch (error) {
@@ -51,24 +54,30 @@ export default function VoiceFileUpload() {
   }
 
   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={sendAudioFile}
-        >
-          만들기
-          <UploadAvailabilityArrowBox content={availabilityInform} />
-        </Button>
-        {errorMsg && <p className="text-red-500">{errorMsg}</p>}
+    <>
+      <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>
-      <div className="flex w-48 justify-end">
-        <img src={clovaX} alt="clovaX" />
-      </div>
-    </div>
+      {createPortal(
+        <ConfirmUploadModal open={open} closeModal={closeModal} onConfirm={sendAudioFile} />,
+        document.body,
+      )}
+    </>
   );
 }

client/src/components/MindMapCanvas/DeleteConfirmModal.tsx → client/src/components/Modal/ConfirmResetModal.tsx

@@ -6,7 +6,7 @@ type DeleteConfirmModalProps = {
   closeModal: () => void;
   onConfirm: () => void;
 };
-export default function DeleteConfirmModal({ open, closeModal, onConfirm }: DeleteConfirmModalProps) {
+export default function ConfirmResetModal({ open, closeModal, onConfirm }: DeleteConfirmModalProps) {
   return (
     <Modal open={open} closeModal={closeModal}>
       <p className="mb-4 text-lg font-bold text-black">모든 노드를 초기화할까요?</p>

client/src/components/Modal/ConfirmUploadModal.tsx

@@ -0,0 +1,28 @@
+import { Button } from "@headlessui/react";
+import Modal from "../common/Modal";
+
+export default function ConfirmUploadModal({ open, closeModal, onConfirm }) {
+  return (
+    <Modal open={open} closeModal={closeModal}>
+      <p className="mb-4 text-lg font-bold text-black">
+        AI 기능을 사용하면
+        <br />
+        마인드맵이 초기화됩니다
+      </p>
+      <div className="flex justify-center gap-2">
+        <Button
+          onClick={closeModal}
+          className="flex-1 rounded-lg bg-grayscale-100 py-2.5 text-center text-sm text-black transition hover:brightness-90"
+        >
+          안할래요
+        </Button>
+        <Button
+          onClick={onConfirm}
+          className="flex-1 rounded-lg bg-red-500 py-2.5 text-sm transition hover:brightness-90"
+        >
+          초기화할게요
+        </Button>
+      </div>
+    </Modal>
+  );
+}

client/src/components/Sidebar/Overview.tsx

@@ -3,7 +3,7 @@ import useSection from "@/hooks/useSection";
 import { useNavigate } from "react-router-dom";
 import useModal from "@/hooks/useModal";
 import { createPortal } from "react-dom";
-import LatestMindMapModal from "@/components/Sidebar/LatestMindMapModal";
+import LatestMindMapModal from "@/components/Modal/LatestMindMapModal";
 import { useState } from "react";
 import { RxDashboard } from "react-icons/rx";
 import { FaListUl } from "react-icons/fa";

client/src/pages/layout/index.tsx

@@ -4,7 +4,7 @@ import { useSideBar } from "@/store/useSideBar";
 import { ErrorBoundary } from "react-error-boundary";
 import { Outlet } from "react-router-dom";
 import { useConnectionStore } from "@/store/useConnectionStore";
-import OfflineModal from "@/components/OfflineModal";
+import OfflineModal from "@/components/Modal/OfflineModal";
 import useWindowEventListener from "@/hooks/useWindowEventListener";
 import { useState } from "react";
 import NotFound from "@/components/common/NotFound";