From d0bd7df7bcc092e17591ba163cc6a9a6b2e6bec4 Mon Sep 17 00:00:00 2001
From: Minju9187 <alswn1583@naver.com>
Date: Tue, 3 Dec 2024 23:44:57 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat=20:=20text,=20voice=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=97=85=EB=A1=9C=EB=93=9C=EC=8B=9C=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=ED=99=95=EC=9D=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ControlSection/TextUpload.tsx             | 66 +++++++++++--------
 .../ControlSection/VoiceFileUpload.tsx        | 47 +++++++------
 .../components/Modal/ConfirmUploadModal.tsx   | 28 ++++++++
 3 files changed, 94 insertions(+), 47 deletions(-)
 create mode 100644 client/src/components/Modal/ConfirmUploadModal.tsx

diff --git a/client/src/components/MindMapMainSection/ControlSection/TextUpload.tsx b/client/src/components/MindMapMainSection/ControlSection/TextUpload.tsx
index b6878d1..14c800b 100644
--- a/client/src/components/MindMapMainSection/ControlSection/TextUpload.tsx
+++ b/client/src/components/MindMapMainSection/ControlSection/TextUpload.tsx
@@ -5,6 +5,9 @@ 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 } =
@@ -12,6 +15,7 @@ export default function TextUpload() {
   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,
+      )}
+    </>
   );
 }
diff --git a/client/src/components/MindMapMainSection/ControlSection/VoiceFileUpload.tsx b/client/src/components/MindMapMainSection/ControlSection/VoiceFileUpload.tsx
index 3d6e15a..0fa7484 100644
--- a/client/src/components/MindMapMainSection/ControlSection/VoiceFileUpload.tsx
+++ b/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,
+      )}
+    </>
   );
 }
diff --git a/client/src/components/Modal/ConfirmUploadModal.tsx b/client/src/components/Modal/ConfirmUploadModal.tsx
new file mode 100644
index 0000000..676b850
--- /dev/null
+++ b/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>
+  );
+}

From 337b9395fb529ef28eac9b319371cfa5029427e1 Mon Sep 17 00:00:00 2001
From: Minju9187 <alswn1583@naver.com>
Date: Tue, 3 Dec 2024 23:45:38 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor=20:=20Modal=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=EB=93=A4=20Modal=20=ED=8F=B4=EB=8D=94=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20&=20=EB=AA=A8=EB=8B=AC=20=EB=84=A4?=
 =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Dashboard/GuestDashBoard.tsx            | 4 ++--
 client/src/components/Dashboard/MindMapInfoItem.tsx           | 2 +-
 client/src/components/MindMapCanvas/CanvasButtons.tsx         | 4 ++--
 client/src/components/MindMapHeader/MindMapHeaderButtons.tsx  | 2 +-
 client/src/components/MindMapHeader/Profile.tsx               | 4 ++--
 .../DeleteConfirmModal.tsx => Modal/ConfirmResetModal.tsx}    | 2 +-
 .../index.tsx => Modal/DeleteMindMapModal.tsx}                | 0
 .../components/{Dashboard => Modal}/GuestNewMindMapModal.tsx  | 0
 .../src/components/{Sidebar => Modal}/LatestMindMapModal.tsx  | 0
 .../components/{LoginModal/index.tsx => Modal/LoginModal.tsx} | 0
 .../{OfflineModal/index.tsx => Modal/OfflineModal.tsx}        | 0
 .../src/components/{MindMapHeader => Modal}/ProfileModal.tsx  | 0
 .../components/{ShareModal/index.tsx => Modal/ShareModal.tsx} | 0
 client/src/components/Sidebar/Overview.tsx                    | 2 +-
 client/src/pages/layout/index.tsx                             | 2 +-
 15 files changed, 11 insertions(+), 11 deletions(-)
 rename client/src/components/{MindMapCanvas/DeleteConfirmModal.tsx => Modal/ConfirmResetModal.tsx} (89%)
 rename client/src/components/{DeleteMindMapModal/index.tsx => Modal/DeleteMindMapModal.tsx} (100%)
 rename client/src/components/{Dashboard => Modal}/GuestNewMindMapModal.tsx (100%)
 rename client/src/components/{Sidebar => Modal}/LatestMindMapModal.tsx (100%)
 rename client/src/components/{LoginModal/index.tsx => Modal/LoginModal.tsx} (100%)
 rename client/src/components/{OfflineModal/index.tsx => Modal/OfflineModal.tsx} (100%)
 rename client/src/components/{MindMapHeader => Modal}/ProfileModal.tsx (100%)
 rename client/src/components/{ShareModal/index.tsx => Modal/ShareModal.tsx} (100%)

diff --git a/client/src/components/Dashboard/GuestDashBoard.tsx b/client/src/components/Dashboard/GuestDashBoard.tsx
index ef659fc..ed0e34a 100644
--- a/client/src/components/Dashboard/GuestDashBoard.tsx
+++ b/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";
 
diff --git a/client/src/components/Dashboard/MindMapInfoItem.tsx b/client/src/components/Dashboard/MindMapInfoItem.tsx
index bd86616..33a4ab5 100644
--- a/client/src/components/Dashboard/MindMapInfoItem.tsx
+++ b/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";
diff --git a/client/src/components/MindMapCanvas/CanvasButtons.tsx b/client/src/components/MindMapCanvas/CanvasButtons.tsx
index ac8fc48..ba4bafa 100644
--- a/client/src/components/MindMapCanvas/CanvasButtons.tsx
+++ b/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>
   );
 }
diff --git a/client/src/components/MindMapHeader/MindMapHeaderButtons.tsx b/client/src/components/MindMapHeader/MindMapHeaderButtons.tsx
index 379a133..dd263fb 100644
--- a/client/src/components/MindMapHeader/MindMapHeaderButtons.tsx
+++ b/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";
diff --git a/client/src/components/MindMapHeader/Profile.tsx b/client/src/components/MindMapHeader/Profile.tsx
index 1b2190b..a80bed1 100644
--- a/client/src/components/MindMapHeader/Profile.tsx
+++ b/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";
 
diff --git a/client/src/components/MindMapCanvas/DeleteConfirmModal.tsx b/client/src/components/Modal/ConfirmResetModal.tsx
similarity index 89%
rename from client/src/components/MindMapCanvas/DeleteConfirmModal.tsx
rename to client/src/components/Modal/ConfirmResetModal.tsx
index c4260ae..8154793 100644
--- a/client/src/components/MindMapCanvas/DeleteConfirmModal.tsx
+++ b/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>
diff --git a/client/src/components/DeleteMindMapModal/index.tsx b/client/src/components/Modal/DeleteMindMapModal.tsx
similarity index 100%
rename from client/src/components/DeleteMindMapModal/index.tsx
rename to client/src/components/Modal/DeleteMindMapModal.tsx
diff --git a/client/src/components/Dashboard/GuestNewMindMapModal.tsx b/client/src/components/Modal/GuestNewMindMapModal.tsx
similarity index 100%
rename from client/src/components/Dashboard/GuestNewMindMapModal.tsx
rename to client/src/components/Modal/GuestNewMindMapModal.tsx
diff --git a/client/src/components/Sidebar/LatestMindMapModal.tsx b/client/src/components/Modal/LatestMindMapModal.tsx
similarity index 100%
rename from client/src/components/Sidebar/LatestMindMapModal.tsx
rename to client/src/components/Modal/LatestMindMapModal.tsx
diff --git a/client/src/components/LoginModal/index.tsx b/client/src/components/Modal/LoginModal.tsx
similarity index 100%
rename from client/src/components/LoginModal/index.tsx
rename to client/src/components/Modal/LoginModal.tsx
diff --git a/client/src/components/OfflineModal/index.tsx b/client/src/components/Modal/OfflineModal.tsx
similarity index 100%
rename from client/src/components/OfflineModal/index.tsx
rename to client/src/components/Modal/OfflineModal.tsx
diff --git a/client/src/components/MindMapHeader/ProfileModal.tsx b/client/src/components/Modal/ProfileModal.tsx
similarity index 100%
rename from client/src/components/MindMapHeader/ProfileModal.tsx
rename to client/src/components/Modal/ProfileModal.tsx
diff --git a/client/src/components/ShareModal/index.tsx b/client/src/components/Modal/ShareModal.tsx
similarity index 100%
rename from client/src/components/ShareModal/index.tsx
rename to client/src/components/Modal/ShareModal.tsx
diff --git a/client/src/components/Sidebar/Overview.tsx b/client/src/components/Sidebar/Overview.tsx
index 7cfe6f1..2d9f635 100644
--- a/client/src/components/Sidebar/Overview.tsx
+++ b/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";
diff --git a/client/src/pages/layout/index.tsx b/client/src/pages/layout/index.tsx
index ee84252..759280a 100644
--- a/client/src/pages/layout/index.tsx
+++ b/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";