Merge pull request #116 from KUIT-Space/feat#96-space-home

Feat#96 space home

src/App.tsx

@@ -45,6 +45,7 @@ import LoginModal from "./pages/LoginPage/LoginModal";
 import InviteSpace from "./pages/SpacePage/InviteSpace";
 import HomePageMemberPage from "./pages/HomePage/HomePageMember";
 import HomePageProfile from "./pages/HomePage/HomePageProfile";
+import SpecialVoiceRoom from "./pages/VoiceRoomPage/SpecialVoiceRoom";
 
 // will we need constant path in later..?
 // const PATH = {
@@ -121,6 +122,7 @@ function App() {
     { path: "/createvoiceroom", element: <CreateVoiceRoomPage />, hasBottomBar: false },
     { path: "/joinvoiceroom", element: <JoinVoiceRoomPage />, hasBottombar: false },
     { path: "/editvoiceroom", element: <EditVoiceRoomPage />, hasBottombar: false },
+    { path: "/specialvoiceroom", element: <SpecialVoiceRoom />, hasBottombar: false },
   ];
 
   const routes_children_board = [

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([]);

src/pages/SpacePage/AddSpacePage.tsx

@@ -71,7 +71,10 @@ const AddSpacePage = () => {
 
   const handleCreateSpace = () => {
     createSpaceApi(spacename, spaceImg).then((data) => {
-      navigate(`/space/${data?.result.spaceId}`);
+      if (data?.result.spaceId !== undefined) {
+        localStorage.setItem("spaceId", data?.result.spaceId.toString());
+        navigate(`/space/${data?.result.spaceId}`);
+      }
     });
   };
 

src/pages/VoiceRoomPage/SpecialVoiceRoom.tsx

@@ -0,0 +1,104 @@
+import TopBarText from "@/components/TopBarText";
+import { LeftEnum } from "@/components/TopBarText";
+import plus from "@/assets/VoiceRoom/icon_plus.svg";
+import back from "@/assets/icon_back.svg";
+import setting from "@/assets/VoiceRoom/icon_setting.svg";
+
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import * as s from "@/pages/VoiceRoomPage/VoiceRoomListPage.styled";
+import * as sty from "@/components/TopBarText.styled";
+
+import {
+  CarouselLayout,
+  ControlBar,
+  FocusLayout,
+  FocusLayoutContainer,
+  FocusToggle,
+  GridLayout,
+  LiveKitRoom,
+  ParticipantTile,
+  RoomAudioRenderer,
+  useTracks,
+} from "@livekit/components-react";
+import "@livekit/components-styles";
+import { Room, Track } from "livekit-client";
+import { sleep } from "livekit-client/dist/src/room/utils";
+
+const SpecialVoiceRoom = () => {
+  const navigate = useNavigate();
+  const [room] = useState(new Room());
+  const [token, setToken] = useState<string | undefined>("");
+  const [isConnected, setIsConnected] = useState(false);
+  const [connect, setConnect] = useState(false);
+
+  const handleDisconnect = () => {
+    setIsConnected(false);
+    setConnect(false);
+    navigate("/voiceroom");
+  };
+
+  useEffect(() => {
+    const temp = localStorage.getItem("VrToken");
+    if (temp) {
+      const temp2 = temp.substring(7);
+      setToken(temp2);
+    } else {
+      setToken("");
+    }
+  }, []);
+  return (
+    <>
+      <LiveKitRoom
+        video={true}
+        audio={true}
+        token={token}
+        room={room}
+        serverUrl={"wss://space-biwhq7u2.livekit.cloud"}
+        onConnected={() => {
+          setIsConnected(true);
+          console.log("connect!");
+        }}
+        onDisconnected={handleDisconnect}
+      >
+        {/* The RoomAudioRenderer takes care of room-wide audio for you. */}
+        <RoomAudioRenderer />
+
+        {isConnected && <MyVideoConference />}
+        {/* Controls for the user to start/stop audio, video, and screen
+      share tracks and to leave the room. */}
+      </LiveKitRoom>
+    </>
+  );
+};
+function MyVideoConference() {
+  // `useTracks` returns all camera and screen share tracks. If a user
+  // joins without a published camera track, a placeholder track is returned.
+
+  const tracks = useTracks(
+    [
+      { source: Track.Source.Camera, withPlaceholder: false },
+      { source: Track.Source.ScreenShare, withPlaceholder: false },
+    ],
+    { onlySubscribed: false },
+  );
+  const track2 = tracks.find((trackRef) => trackRef.source === "screen_share");
+  return track2 ? (
+    <CarouselLayout
+      tracks={[track2]}
+      style={{ width: "100vw", height: "100vh", marginLeft: " calc(-50vw + 50%)" }}
+    >
+      {/* The GridLayout accepts zero or one child. The child is used
+      as a template to render all passed in tracks. */}
+      <ParticipantTile
+        style={{ width: "100vw", height: "100vh", marginLeft: " calc(-50vw + 50%)" }}
+        onClick={(e) => {
+          nextMode();
+        }}
+      ></ParticipantTile>
+    </CarouselLayout>
+  ) : (
+    <></>
+  );
+}
+export default SpecialVoiceRoom;

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;

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) => {