Merge pull request #36 from KWcapstone/34-feat-meeting-page-project-id-유통

Feat: 컨퍼런스 데이터 유통 (#34)

Author: Eunjin03

src/types/conferanceData.ts

@@ -0,0 +1,7 @@
+export interface conferenceData {
+  projectId: string;
+  projectName: string;
+  projectImage: null;
+  updatedAt: string;
+  creator: string;
+}

src/views/meeting/components/MindMapComponent.tsx

@@ -13,8 +13,6 @@ import {
 import "@xyflow/react/dist/style.css";
 import "@/views/meeting/style/mind-map.sass";
 
-// api
-import { getMeetingId } from "@/api/meeting/meeting";
 // import { getProfile } from "@/api/main/profile";
 
 // component
@@ -25,21 +23,22 @@ import useRecordingTimer from "@/views/meeting/components/RecodingTimer";
 import { useEffect, useState } from "react";
 import { Client } from "@stomp/stompjs";
 
+// type
+import { conferenceData } from "@/types/conferanceData";
+
 interface scriptData {
   time: string;
   script: string;
 }
 
 interface MindMapComponentProps {
   setScripts: React.Dispatch<React.SetStateAction<scriptData[]>>;
-  setProjectId: React.Dispatch<React.SetStateAction<string>>;
-  projectId: string;
+  conferenceData: conferenceData;
 }
 
 const MindMapComponent = ({
   setScripts,
-  setProjectId,
-  projectId,
+  conferenceData,
 }: MindMapComponentProps) => {
   const {
     // transcript,
@@ -53,16 +52,12 @@ const MindMapComponent = ({
     // audioUrl,
   } = UseSpeechToText();
 
+  console.log("컨퍼런스 데이터 :", conferenceData);
+
   const { formattedTime } = useRecordingTimer(isRecording, isPaused);
 
   const [mode, setMode] = useState<string>("none");
 
-  useEffect(() => {
-    getMeetingId().then((res: any) => {
-      setProjectId(res.data.data.projectId);
-    });
-  }, []);
-
   const meetingStart = () => {
     const client = new Client({
       brokerURL: "wss://www.moaba.site/ws", // 서버 WebSocket URL q
@@ -73,7 +68,7 @@ const MindMapComponent = ({
       onConnect: () => {
         console.log("연결");
         client.subscribe(
-          `/topic/conference/${projectId}/participants`,
+          `/topic/conference/${conferenceData.projectId}/participants`,
           (message: any) => {
             const data: any = JSON.parse(message.body);
             console.log(data.participants);

src/views/meeting/components/SideBar.tsx

@@ -10,6 +10,9 @@ import test from "@/assets/imgs/common/user.svg";
 // import
 import { useState } from "react";
 
+// type
+import { conferenceData } from "@/types/conferanceData";
+
 interface scriptData {
   time: string;
   script: string;
@@ -18,20 +21,20 @@ interface SideBarProps {
   isSidebarOpen: boolean;
   setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
   scripts?: scriptData[];
-  projectId: string;
+  conferenceData: conferenceData;
 }
 
 const SideBar = ({
   isSidebarOpen,
   setIsSidebarOpen,
   scripts,
-  projectId,
+  conferenceData,
 }: SideBarProps) => {
   const [isScript, setIsScript] = useState(false);
   const [isSummary, setIsSummary] = useState(true);
 
   // console.log("스크립트", scripts);
-  console.log("프로젝트 아이디", projectId);
+  console.log("프로젝트 아이디", conferenceData.projectId);
   return (
     <div
       className={`side-bar ${isSidebarOpen ? "open" : "closed"}`}

src/views/meeting/page/MeetingPage.tsx

@@ -6,8 +6,13 @@ import ShareModal from "@/views/components/ShareModal";
 import MindMapComponent from "@/views/meeting/components/MindMapComponent.tsx";
 
 // import
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 
+// api
+import { getMeetingId } from "@/api/meeting/meeting";
+
+// type
+import { conferenceData } from "@/types/conferanceData";
 interface scriptData {
   time: string;
   script: string;
@@ -17,7 +22,13 @@ const MeetingPage = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true); // 사이드바 상태
   const modalBackground = useRef<HTMLDivElement>(null);
   const [scripts, setScripts] = useState<scriptData[]>([]); // 스크립트 상태
-  const [projectId, setProjectId] = useState<string>("");
+  const [conferenceData, setConferenceData] = useState<conferenceData>({
+    projectId: "",
+    projectName: "",
+    projectImage: null,
+    updatedAt: "",
+    creator: "",
+  });
 
   // modal
   type ModalType = "share" | null;
@@ -27,6 +38,12 @@ const MeetingPage = () => {
 
   //console.log("projectId", projectId);
 
+  useEffect(() => {
+    getMeetingId().then((res: any) => {
+      setConferenceData(res.data.data);
+    });
+  }, []);
+
   return (
     <>
       <HeaderBar onOpenModal={openModal} />
@@ -40,7 +57,10 @@ const MeetingPage = () => {
               }
             }}
           >
-            <ShareModal onCloseModal={closeModal} projectId={projectId} />
+            <ShareModal
+              onCloseModal={closeModal}
+              projectId={conferenceData.projectId}
+            />
           </div>
         )}
       </div>
@@ -49,7 +69,7 @@ const MeetingPage = () => {
         isSidebarOpen={isSidebarOpen}
         setIsSidebarOpen={setIsSidebarOpen}
         scripts={scripts}
-        projectId={projectId}
+        conferenceData={conferenceData}
       />
 
       <div
@@ -61,8 +81,7 @@ const MeetingPage = () => {
         {/* <MyVoiceComponent /> */}
         <MindMapComponent
           setScripts={setScripts}
-          setProjectId={setProjectId}
-          projectId={projectId}
+          conferenceData={conferenceData}
         />
       </div>
     </>