bug : voiceroom 버그 수정

KUIT-Space · Aug 20, 2024 · 0bb9ae7 · 0bb9ae7
1 parent 65502ce
commit 0bb9ae7
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 24 deletions.
diff --git a/src/apis/voiceroomApi.ts b/src/apis/voiceroomApi.ts
@@ -1,16 +1,37 @@
-import { VrList } from "@/pages/VoiceRoomPage/VoiceRoomListPage";
+import { VrList, participantInfo } from "@/pages/VoiceRoomPage/VoiceRoomListPage";
 import {
   createRequestOptionsJSON,
   RequestOptions,
   createRequestOptionsJSON_AUTH,
+  fetchApi,
 } from "@/apis/_createRequestOptions";
 import { updateRoom } from "@/pages/VoiceRoomPage/EditVoiceRoomPage";
+import { UserInfo } from "@livekit/components-react";
+
+interface VoiceRoomParticipantInfoResponseType {
+  code: number;
+  status: number;
+  message: string;
+  result: {
+    participantInfoList: participantInfo[];
+  };
+}
 
 const fetchVrApi = async (url: string, options: RequestOptions) => {
   const response = await fetch(url, options).catch((err) => console.error(err));
   return response;
 };
 
+// API 함수 정의
+export const VrParticipantApi = async (spaceId: number, vrId: number) => {
+  const requestOptions = createRequestOptionsJSON_AUTH("GET");
+
+  if (!requestOptions) return null;
+
+  const url = `${import.meta.env.VITE_API_BACK_URL}/space/${spaceId}/voiceRoom/${vrId}/participant`;
+  return await fetchApi<VoiceRoomParticipantInfoResponseType>(url, requestOptions);
+};
+
 export const VrListApi = async (
   spaceID: number,
   setVRList: React.Dispatch<React.SetStateAction<VrList[] | undefined>>,
@@ -20,12 +41,21 @@ export const VrListApi = async (
     return null;
   }
   const response = await fetchVrApi(
-    `${import.meta.env.VITE_API_BACK_URL}/space/${spaceID}/voiceRoom`,
+    `${import.meta.env.VITE_API_BACK_URL}/space/${spaceID}/voiceRoom?showParticipant=true`,
     requestOptions,
   );
   if (response) {
     response.json().then((data) => {
-      setVRList(data.result.voiceRoomList);
+      const _temp: VrList[] = data.result.voiceRoomList;
+      // _temp.participantInfoList =
+      // _temp.map((value, index) =>
+      //   VrParticipantApi(spaceID, value.id).then((res) => {
+      //     if (res?.result.participantInfoList !== undefined) {
+      //       value.participantInfoList = res?.result.participantInfoList;
+      //     }
+      //   }),
+      // );
+      setVRList(_temp);
     });
   } else {
     setVRList([]);

diff --git a/src/pages/VoiceRoomPage/VoiceRoomListPage.styled.ts b/src/pages/VoiceRoomPage/VoiceRoomListPage.styled.ts
@@ -12,7 +12,7 @@ export const DropdownDiv = styled.div`
   color: var(--Foundation-Gray-white, #fff);
   margin: 0rem 0rem 0.5rem 1rem;
   padding: 1rem;
-  width: 7.5rem;
+  width: 12rem;
 
   /* text/Regular 14pt */
   font-family: Freesentation;

diff --git a/src/pages/VoiceRoomPage/VoiceRoomListPage.tsx b/src/pages/VoiceRoomPage/VoiceRoomListPage.tsx
@@ -26,20 +26,25 @@ export type VrList = {
 const VoiceRoomPortal = ({ vrList }: { vrList: VrList }) => {
   const navigate = useNavigate();
   return (
-    <div>
+    <div style={{ marginBottom: "0.75rem" }}>
       <s.BGdiv
         onClick={() => {
           navigate("/joinvoiceroom", { state: vrList });
         }}
       >
         <s.VRTitleDiv> {vrList.name} </s.VRTitleDiv>
         <s.InfoDiv>
-          <s.RoundDiv>대화 중인 스페이서 {vrList.numParticipant}명</s.RoundDiv>
+          <s.RoundDiv style={{ padding: "0.5rem" }}>
+            대화 중인 스페이서 {vrList.numParticipant}명
+          </s.RoundDiv>
           {vrList.numParticipant === 0 ? (
             <></>
           ) : (
             <s.DropdownDiv>
-              <VoiceRoomUser props={vrList.participantInfoList} />;
+              {vrList.participantInfoList !== null &&
+                vrList.participantInfoList.map((value, index) => (
+                  <VoiceRoomUser props={value} key={index} />
+                ))}
             </s.DropdownDiv>
           )}
         </s.InfoDiv>
@@ -51,20 +56,24 @@ const VoiceRoomListPage = () => {
   const [vrList, setVrList] = useState<VrList[] | undefined>([]);
   const [activeVrList, setActiveVrList] = useState<VrList[] | undefined>([]);
   const [inactiveVrList, setInActiveVrList] = useState<VrList[] | undefined>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   const filterVrList = () => {
+    let tmp1: VrList[] = [];
+    let tmp2: VrList[] = [];
     vrList?.map((value, index) => {
       {
-        value.active
-          ? setActiveVrList((activeVrList) => [...(activeVrList || []), value])
-          : setInActiveVrList((inactiveVrList) => [...(inactiveVrList || []), value]);
+        value.active ? (tmp1 = [...tmp1, value]) : (tmp2 = [...tmp2, value]);
       }
     });
+    setActiveVrList([...tmp1]);
+    setInActiveVrList([...tmp2]);
   };
 
   useEffect(() => {
     const spaceId = localStorage.getItem("spaceId");
     if (spaceId !== null) {
+      setIsLoading(true);
       VrListApi(Number.parseInt(spaceId), setVrList);
     }
     //space ID
@@ -74,12 +83,20 @@ const VoiceRoomListPage = () => {
     filterVrList();
   }, [vrList]);
 
+  useEffect(() => {
+    if (inactiveVrList?.length !== 0 || activeVrList?.length !== 0) {
+      setIsLoading(false);
+    }
+  }, [activeVrList, inactiveVrList]);
+
   const navigate = useNavigate();
   const onClickInActiveVrRoom = (vrInfo: VrList) => {
     navigate("/joinvoiceroom", { state: vrInfo });
   };
 
-  return (
+  return isLoading ? (
+    <>{isLoading}</>
+  ) : (
     <>
       <TopBarText
         left={LeftEnum.Logo}
@@ -89,21 +106,24 @@ const VoiceRoomListPage = () => {
           navigate("/editvoiceroom");
         }}
       />
-      <div style={{ marginLeft: "1.25rem", marginRight: "1.25rem" }}>
-        <s.ActiveP> 활동 중인 보이스룸 </s.ActiveP>
+      <div style={{ margin: "1rem 1.25rem 0rem 1.25rem" }}>
+        <s.ActiveP style={{ marginBottom: "0.75rem" }}> 활동 중인 보이스룸 </s.ActiveP>
         {activeVrList?.length == 0 ? (
-          <s.NoAlertDiv>요청한 정산이 없어요!</s.NoAlertDiv>
+          <s.NoAlertDiv>활동 중인 보이스룸이 없어요!</s.NoAlertDiv>
         ) : (
-          <div>
-            {activeVrList?.map((value, index) => {
-              return <VoiceRoomPortal key={value.id} vrList={value}></VoiceRoomPortal>;
-            })}
-          </div>
+          <>
+            {activeVrList?.map((value, index) => (
+              <VoiceRoomPortal key={value.id} vrList={value}></VoiceRoomPortal>
+            ))}
+          </>
         )}
 
-        <s.ActiveP> 아무도 없어요! </s.ActiveP>
+        <s.ActiveP style={{ marginTop: "1rem", marginBottom: "0.75rem" }}>
+          {" "}
+          아무도 없어요!{" "}
+        </s.ActiveP>
         {inactiveVrList?.length == 0 ? (
-          <s.NoAlertDiv>요청한 정산이 없어요!</s.NoAlertDiv>
+          <s.NoAlertDiv>조용한 보이스룸이 없어요!</s.NoAlertDiv>
         ) : (
           <div>
             {inactiveVrList?.map((value, index) => {

diff --git a/src/pages/VoiceRoomPage/VoiceRoomUser.tsx b/src/pages/VoiceRoomPage/VoiceRoomUser.tsx
@@ -2,14 +2,19 @@ import * as s from "@/pages/VoiceRoomPage/VoiceRoomUser.styled";
 import micON from "@/assets/VoiceRoom/icon_microphone_ON.svg";
 import micOFF from "@/assets/VoiceRoom/icon_microphone_OFF.svg";
 import { participantInfo } from "@/pages/VoiceRoomPage/VoiceRoomListPage";
+import { getUserDefaultImageURL } from "@/utils/getUserDefaultImageURL";
 
-export const VoiceRoomUser = ({ props }: { props: participantInfo[] }) => {
+export const VoiceRoomUser = ({ props }: { props: participantInfo }) => {
+  const userId = Number.parseInt(localStorage.getItem("userId")!);
+  console.log(props);
   return (
     <s.VRuserA>
       <s.VRuserListDiv>
-        {/* <s.VRuserImg src={props.profileImage}></s.VRuserImg>
+        <s.VRuserImg
+          src={props.profileImage ? props.profileImage : getUserDefaultImageURL(userId)}
+        ></s.VRuserImg>
         <div>{props.name}</div>
-        <s.MicImg src={props.mute ? micOFF : micON}></s.MicImg> */}
+        <s.MicImg src={props.mute ? micOFF : micON}></s.MicImg>
       </s.VRuserListDiv>
     </s.VRuserA>
   );