feat: 삭제 API 연결 로직 작성

Author: surinkwon

frontend/src/components/setting/ProjectDeleteModal.tsx

@@ -1,18 +1,24 @@
 import { ChangeEvent, MouseEventHandler, useState } from "react";
+import useSettingProjectSocket from "../../hooks/pages/setting/useSettingProjectSocket";
 import Closed from "../../assets/icons/closed.svg?react";
+import { Socket } from "socket.io-client";
 
 interface ProjectDeleteModalProps {
   projectTitle: string;
+  socket: Socket;
   close: () => void;
 }
 
 const ProjectDeleteModal = ({
   projectTitle,
+  socket,
   close,
 }: ProjectDeleteModalProps) => {
   const [inputValue, setInputValue] = useState("");
   const [confirmed, setConfirmed] = useState(false);
 
+  const { emitProjectDeleteEvent } = useSettingProjectSocket(socket);
+
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
 
@@ -34,6 +40,12 @@ const ProjectDeleteModal = ({
     close();
   };
 
+  const handleDeleteButtonClick = () => {
+    if (confirmed) {
+      emitProjectDeleteEvent();
+    }
+  };
+
   return (
     <div
       className="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-full bg-black bg-opacity-30"
@@ -63,12 +75,15 @@ const ProjectDeleteModal = ({
             } h-7 relative`}
           >
             {!confirmed && (
-              <div className="absolute w-full h-full bg-black rounded opacity-20"></div>
+              <div className="absolute w-full h-full bg-black rounded opacity-40"></div>
             )}
             <button
-              className="w-full h-full text-sm text-center text-white rounded bg-error-red"
+              className={`w-full h-full text-sm text-center text-white rounded ${
+                !confirmed ? "bg-gray-300" : "bg-error-red"
+              }`}
               type="button"
               disabled={!confirmed}
+              onClick={handleDeleteButtonClick}
             >
               프로젝트 삭제
             </button>

frontend/src/components/setting/ProjectDeleteSection.tsx

@@ -1,3 +1,5 @@
+import { useOutletContext } from "react-router-dom";
+import { Socket } from "socket.io-client";
 import { useModal } from "../../hooks/common/modal/useModal";
 import ProjectDeleteModal from "./ProjectDeleteModal";
 
@@ -7,8 +9,9 @@ interface ProjectDeleteSectionProps {
 
 const ProjectDeleteSection = ({ projectTitle }: ProjectDeleteSectionProps) => {
   const { open, close } = useModal(true);
+  const { socket }: { socket: Socket } = useOutletContext();
   const handleDeleteButtonClick = () => {
-    open(<ProjectDeleteModal {...{ projectTitle, close }} />);
+    open(<ProjectDeleteModal {...{ projectTitle, close, socket }} />);
   };
 
   return (

frontend/src/hooks/common/socket/useSocket.ts

@@ -1,7 +1,9 @@
-import { io } from "socket.io-client";
-import { BASE_URL } from "../../../constants/path";
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { io } from "socket.io-client";
+import { BASE_URL, ROUTER_URL } from "../../../constants/path";
 import { getAccessToken } from "../../../apis/utils/authAPI";
+import { SettingSocketData } from "../../../types/common/setting";
 
 const useSocket = (projectId: string) => {
   const WS_URL = `${BASE_URL}/project-${projectId}`;
@@ -15,6 +17,16 @@ const useSocket = (projectId: string) => {
     })
   );
   const [connected, setConnected] = useState<boolean>(false);
+  const navigate = useNavigate();
+
+  const handleProjectDeleted = ({ domain, action }: SettingSocketData) => {
+    if (domain === "projectInfo" && action === "delete") {
+      alert("프로젝트가 삭제되었습니다.");
+      setTimeout(() => {
+        navigate(ROUTER_URL.PROJECTS);
+      }, 1000);
+    }
+  };
 
   useEffect(() => {
     const handleOnConnect = () => {
@@ -27,11 +39,13 @@ const useSocket = (projectId: string) => {
     socket.connect();
     socket.on("connect", handleOnConnect);
     socket.on("disconnect", handleOnDisconnect);
+    socket.on("main", handleProjectDeleted);
 
     return () => {
       socket.disconnect();
       socket.off("connect", handleOnConnect);
       socket.off("disconnect", handleOnDisconnect);
+      socket.off("main", handleProjectDeleted);
     };
   }, []);
 

frontend/src/hooks/pages/setting/useSettingProjectSocket.ts

@@ -0,0 +1,11 @@
+import { Socket } from "socket.io-client";
+
+const useSettingProjectSocket = (socket: Socket) => {
+  const emitProjectDeleteEvent = () => {
+    socket.emit("projectInfo", { action: "delete", content: {} });
+  };
+
+  return { emitProjectDeleteEvent };
+};
+
+export default useSettingProjectSocket;

frontend/src/pages/setting/SettingPage.tsx

@@ -34,7 +34,7 @@ const SettingPage = () => {
     <div className="w-full h-full">
       <InformationSettingSection {...{ title, subject }} />
       <MemberSettingSection memberList={memberList} />
-      <ProjectDeleteSection projectTitle="프로젝트 이름" />
+      <ProjectDeleteSection projectTitle={title} />
     </div>
   );
 };