Merge pull request #195 from boostcampwm-2024/feature/#191

[Feat] 비디오 / 오디오 테스트 기능 추가

packages/frontend/src/components/gamePage/rightSection/SettingSection.tsx

@@ -1,12 +1,12 @@
-import CameraSettingButton from '@/components/gamePage/rightSection/CameraSettingButton';
-import MikeSettingButton from '@/components/gamePage/rightSection/MikeSettingButton';
+import CameraSettingButton from '@/components/gamePage/stream/CameraSettingButton';
+import MikeSettingButton from '@/components/gamePage/stream/MikeSettingButton';
 import LeaveButton from '@/components/gamePage/rightSection/LeaveButton';
 
 export default function SettingSection() {
   return (
     <div className="flex justify-around p-4 bg-black rounded-lg opacity-80">
-      <MikeSettingButton />
-      <CameraSettingButton />
+      <MikeSettingButton iconColor="text-white-default" />
+      <CameraSettingButton iconColor="text-white-default" />
       <LeaveButton />
     </div>
   );

packages/frontend/src/components/gamePage/rightSection/CameraSettingButton.tsx → packages/frontend/src/components/gamePage/stream/CameraSettingButton.tsx

@@ -3,7 +3,7 @@ import CameraOn from '@/assets/images/CameraOn.svg?react';
 import CameraOff from '@/assets/images/CameraOff.svg?react';
 import { useLocalStreamStore } from '@/states/store/localStreamStore';
 
-export default function CameraSettingButton() {
+export default function CameraSettingButton({ iconColor }: { iconColor: string }) {
   const { localStream } = useLocalStreamStore();
   const [isCameraOn, setIsCameraOn] = useState(false);
   function handleCamera() {
@@ -12,20 +12,16 @@ export default function CameraSettingButton() {
     if (camera) camera.enabled = !isCameraOn;
   }
   useEffect(() => {
-    const initSetting = !!localStream?.getVideoTracks()[0];
+    const initSetting = !!localStream?.getVideoTracks()[0].enabled;
     setIsCameraOn(initSetting);
   }, [localStream]);
   return (
     <button
       className="p-4 w-[120px] bg-transparent rounded-lg flex flex-col items-center justify-center gap-2"
       onClick={handleCamera}
     >
-      {isCameraOn ? (
-        <CameraOn className="text-white-default" />
-      ) : (
-        <CameraOff className="text-white-default" />
-      )}
-      <p className="text-white-default text-lg">
+      {isCameraOn ? <CameraOn className={iconColor} /> : <CameraOff className={iconColor} />}
+      <p className={`text-lg ${iconColor}`}>
         카메라 {isCameraOn ? <span className="text-red-600">ON</span> : <span>OFF</span>}
       </p>
     </button>

packages/frontend/src/components/gamePage/rightSection/MikeSettingButton.tsx → packages/frontend/src/components/gamePage/stream/MikeSettingButton.tsx

@@ -3,7 +3,7 @@ import MikeOn from '@/assets/images/MikeOn.svg?react';
 import MikeOff from '@/assets/images/MikeOff.svg?react';
 import { useLocalStreamStore } from '@/states/store/localStreamStore';
 
-export default function MikeSettingButton() {
+export default function MikeSettingButton({ iconColor }: { iconColor: string }) {
   const { localStream } = useLocalStreamStore();
   const [isMikeOn, setIsMikeOn] = useState(false);
   function handleMike() {
@@ -12,20 +12,16 @@ export default function MikeSettingButton() {
     if (mike) mike.enabled = !isMikeOn;
   }
   useEffect(() => {
-    const initSetting = !!localStream?.getAudioTracks()[0];
+    const initSetting = !!localStream?.getAudioTracks()[0].enabled;
     setIsMikeOn(initSetting);
   }, [localStream]);
   return (
     <button
-      className="w-[120px] p-4 bg-transparent rounded-lg flex flex-col items-center justify-center gap-2"
+      className="w-[120px] p-4 bg-transparent rounded-lg flex flex-col items-center justify-center gap-2 text-black"
       onClick={handleMike}
     >
-      {isMikeOn ? (
-        <MikeOn className="text-white-default" />
-      ) : (
-        <MikeOff className="text-white-default" />
-      )}
-      <p className="text-white-default text-lg">
+      {isMikeOn ? <MikeOn className={iconColor} /> : <MikeOff className={iconColor} />}
+      <p className={`text-lg ${iconColor}`}>
         마이크 {isMikeOn ? <span className="text-red-600">ON</span> : <span>OFF</span>}
       </p>
     </button>

packages/frontend/src/components/lobbyPage/VideoAudioTestButton.tsx

@@ -1,12 +1,21 @@
 import Button from '@/components/common/Button';
+import VideoAudioTestModal from '@/components/lobbyPage/VideoAudioTestModal';
+import { useState } from 'react';
 
 export default function VideoAudioTestButton() {
-  function handleClick() {}
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const title = '비디오 및 오디오 테스트';
+  function handleClick() {
+    setIsModalOpen(true);
+  }
   return (
-    <Button
-      className="w-full h-20 text-xl font-semibold text-black bg-white hover:bg-gray-300"
-      onClick={handleClick}
-      buttonText="비디오 및 오디오 테스트"
-    />
+    <>
+      <Button
+        className="w-full h-20 text-xl font-semibold text-black bg-white hover:bg-gray-300"
+        onClick={handleClick}
+        buttonText={title}
+      />
+      {isModalOpen && <VideoAudioTestModal title={title} onClose={() => setIsModalOpen(false)} />}
+    </>
   );
 }

packages/frontend/src/components/lobbyPage/VideoAudioTestModal.tsx

@@ -0,0 +1,31 @@
+import VideoStream from '@/components/gamePage/stream/VideoStream';
+import { useLocalStreamStore } from '@/states/store/localStreamStore';
+import CameraSettingButton from '@/components/gamePage/stream/CameraSettingButton';
+import MikeSettingButton from '@/components/gamePage/stream/MikeSettingButton';
+
+interface IVideoAudioTestModalProps {
+  onClose: () => void;
+  title: string;
+}
+
+export default function VideoAudioTestModal({ onClose, title }: IVideoAudioTestModalProps) {
+  const localStream = useLocalStreamStore((state) => state.localStream);
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-50">
+      <div className="min-w-[600px] max-w-lg p-8 bg-white shadow-lg rounded-2xl flex flex-col items-center gap-8">
+        <h2 className="mb-4 text-xl font-semibold text-center text-gray-900">{title}</h2>
+        <VideoStream userName="카메라 테스트" stream={localStream} />
+        <div className="flex gap-4">
+          <CameraSettingButton iconColor="text-black" />
+          <MikeSettingButton iconColor="text-black" />
+        </div>
+        <button
+          onClick={onClose}
+          className="w-32 py-2 text-black border border-black rounded-lg hover:bg-gray-100"
+        >
+          닫기
+        </button>
+      </div>
+    </div>
+  );
+}

packages/frontend/src/pages/lobbyPage/index.tsx

@@ -1,13 +1,11 @@
 import { useEffect } from 'react';
 import { useSocketStore } from '@/states/store/socketStore';
-import { useAuthStore } from '@/states/store/authStore';
 import BackgroundImage from '@/components/layout/BackgroundImage';
 import MainLogo from '@/assets/images/MainLogo.svg?react';
 import RoomCreationButton from '@/components/lobbyPage/RoomCreationButton';
 import RoomJoinButton from '@/components/lobbyPage/RoomJoinButton';
 import VideoAudioTestButton from '@/components/lobbyPage/VideoAudioTestButton';
 import Header from '@/components/layout/Header';
-import SettingSection from '@/components/lobbyPage/SettingSection';
 import { useRoomStore } from '@/states/store/roomStore';
 import { useChatStore } from '@/states/store/chatStore';
 import { useLocalStreamStore } from '@/states/store/localStreamStore';
@@ -50,9 +48,6 @@ export default function LobbyPage() {
           <RoomCreationButton />
           <RoomJoinButton />
         </div>
-        <div className="absolute flex justify-end w-full bottom-10">
-          <SettingSection />
-        </div>
       </div>
     </>
   );

packages/frontend/src/states/store/signalingSocketStore.ts

@@ -52,7 +52,7 @@ export const useSignalingSocketStore = create<ISignalingSocketStore>((set, get)
 
     signalingSocket.on('user_joined', async ({ fromUserId, gsid }) => {
       console.log('[Client][📢] user_joined', fromUserId, gsid);
-      const localStream = await getVideoStream();
+      const localStream = useLocalStreamStore.getState().localStream;
       const { setRemoteStream } = usePeerConnectionStore.getState();
       const peerConnection = createPeerConnection({
         fromUserId,
@@ -85,7 +85,7 @@ export const useSignalingSocketStore = create<ISignalingSocketStore>((set, get)
     });
 
     signalingSocket.on('video_offer', async ({ offer, fromUserId, gsid }) => {
-      const localStream = await getVideoStream();
+      const localStream = useLocalStreamStore.getState().localStream;
       const { setRemoteStream } = usePeerConnectionStore.getState();
       const peerConnection = createPeerConnection({
         fromUserId,