feat: setting 페이지 프로젝트 정보 수정 API 연결

Author: surinkwon

frontend/src/components/setting/InformationSettingSection.tsx

@@ -4,16 +4,20 @@ import { useOutletContext } from "react-router-dom";
 import { Socket } from "socket.io-client";
 import useSettingProjectInfoSocket from "../../hooks/pages/setting/useSettingProjectInfoSocket";
 
-interface InformationSettingSectionProps {}
-
-const InformationSettingSection = ({}: InformationSettingSectionProps) => {
+interface InformationSettingSectionProps {
+  title: string;
+  subject: string;
+}
+
+const InformationSettingSection = ({
+  title,
+  subject,
+}: InformationSettingSectionProps) => {
   const { socket }: { socket: Socket } = useOutletContext();
-  const {
-    projectInfo: { title, subject },
-  } = useSettingProjectInfoSocket(socket);
-  const [titleValue, setTitleValue] = useState("");
+  const { emitProjectInfoUpdateEvent } = useSettingProjectInfoSocket(socket);
+  const [titleValue, setTitleValue] = useState(title);
   const [titleErrorMessage, setTitleErrorMessage] = useState("");
-  const [subjectValue, setSubjectValue] = useState("");
+  const [subjectValue, setSubjectValue] = useState(subject);
   const [subjectErrorMessage, setSubjectErrorMessage] = useState("");
   const submitActivated = useMemo(
     () =>
@@ -22,7 +26,7 @@ const InformationSettingSection = ({}: InformationSettingSectionProps) => {
         !subjectValue ||
         (titleValue === title && subjectValue === subject)
       ),
-    [titleValue, subjectValue]
+    [title, subject, titleValue, subjectValue]
   );
 
   const handleTitleChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -61,7 +65,9 @@ const InformationSettingSection = ({}: InformationSettingSectionProps) => {
     setSubjectErrorMessage("");
   };
 
-  const handleSubmit = () => {};
+  const handleSubmit = () => {
+    emitProjectInfoUpdateEvent({ title: titleValue, subject: subjectValue });
+  };
 
   useEffect(() => {
     setTitleValue(title);

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

@@ -1,58 +1,14 @@
-import { useEffect, useState } from "react";
 import { Socket } from "socket.io-client";
-import { SettingDTO, SettingProjectDTO } from "../../../types/DTO/settingDTO";
-import {
-  SettingSocketData,
-  SettingSocketDomain,
-  SettingSocketProjectInfoAction,
-} from "../../../types/common/setting";
 
 const useSettingProjectInfoSocket = (socket: Socket) => {
-  const [projectInfo, setProjectInfo] = useState<SettingProjectDTO>({
-    title: "",
-    subject: "",
-  });
-
-  const handleInitEvent = (content: SettingDTO) => {
-    const { project } = content;
-    setProjectInfo(project);
-  };
-
-  const handleProjectInfoEvent = (
-    action: SettingSocketProjectInfoAction,
-    content: SettingProjectDTO
-  ) => {
-    switch (action) {
-      case SettingSocketProjectInfoAction.UPDATE:
-        setProjectInfo(content);
-        break;
-    }
+  const emitProjectInfoUpdateEvent = (content: {
+    title: string;
+    subject: string;
+  }) => {
+    socket.emit("projectInfo", { action: "update", content });
   };
 
-  const handleOnProjectInfoSetting = ({
-    domain,
-    action,
-    content,
-  }: SettingSocketData) => {
-    switch (domain) {
-      case SettingSocketDomain.INIT:
-        handleInitEvent(content);
-        break;
-      case SettingSocketDomain.PROJECT_INFO:
-        handleProjectInfoEvent(action, content);
-        break;
-    }
-  };
-
-  useEffect(() => {
-    socket.on("setting", handleOnProjectInfoSetting);
-
-    return () => {
-      socket.off("setting", handleOnProjectInfoSetting);
-    };
-  }, []);
-
-  return { projectInfo };
+  return { emitProjectInfoUpdateEvent };
 };
 
 export default useSettingProjectInfoSocket;

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

@@ -1,10 +1,59 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Socket } from "socket.io-client";
+import {
+  SettingSocketData,
+  SettingSocketDomain,
+  SettingSocketProjectInfoAction,
+} from "../../../types/common/setting";
+import { SettingDTO, SettingProjectDTO } from "../../../types/DTO/settingDTO";
 
 const useSettingSocket = (socket: Socket) => {
+  const [projectInfo, setProjectInfo] = useState<SettingProjectDTO>({
+    title: "",
+    subject: "",
+  });
+
+  const handleInitEvent = (content: SettingDTO) => {
+    const { project } = content;
+    setProjectInfo(project);
+  };
+
+  const handleProjectInfoEvent = (
+    action: SettingSocketProjectInfoAction,
+    content: SettingProjectDTO
+  ) => {
+    switch (action) {
+      case SettingSocketProjectInfoAction.UPDATE:
+        setProjectInfo(content);
+        break;
+    }
+  };
+
+  const handleOnProjectInfoSetting = ({
+    domain,
+    action,
+    content,
+  }: SettingSocketData) => {
+    switch (domain) {
+      case SettingSocketDomain.INIT:
+        handleInitEvent(content);
+        break;
+      case SettingSocketDomain.PROJECT_INFO:
+        handleProjectInfoEvent(action, content);
+        break;
+    }
+  };
+
   useEffect(() => {
-    socket.emit("joinLanding");
+    socket.emit("joinSetting");
+    socket.on("setting", handleOnProjectInfoSetting);
+
+    return () => {
+      socket.off("setting", handleOnProjectInfoSetting);
+    };
   }, []);
+
+  return { projectInfo };
 };
 
 export default useSettingSocket;

frontend/src/pages/setting/SettingPage.tsx

@@ -26,11 +26,13 @@ const memberList: LandingMemberDTO[] = [
 
 const SettingPage = () => {
   const { socket }: { socket: Socket } = useOutletContext();
-  useSettingSocket(socket);
+  const {
+    projectInfo: { title, subject },
+  } = useSettingSocket(socket);
 
   return (
     <div className="w-full h-full">
-      <InformationSettingSection />
+      <InformationSettingSection {...{ title, subject }} />
       <MemberSettingSection memberList={memberList} />
       <ProjectDeleteSection projectTitle="프로젝트 이름" />
     </div>