merge: [FE] MediaControlButton 개선 (#226)

merge: [FE] MediaControlButton 개선 (#226)

frontEnd/src/components/common/MicControlButton.tsx

@@ -0,0 +1,30 @@
+import useMediaControl from '@/stores/useMediaControl';
+import { MediaControlButtonProps } from './VideoControlButton';
+import MicOffSvg from '@/assets/MicOffSvg';
+import MicOnSvg from '@/assets/MicOnSvg';
+
+export default function MicControlButton({ stream, className, onColor, offColor }: MediaControlButtonProps) {
+  const { micOn, micToggle } = useMediaControl((state) => state);
+
+  const muteMic = () => {
+    stream?.getAudioTracks().forEach((track) => {
+      track.enabled = !track.enabled;
+    });
+  };
+
+  const handleMicClick = () => {
+    muteMic();
+    micToggle();
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleMicClick}
+      className={className}
+      style={{ backgroundColor: micOn ? 'transparent' : '#ea4335', transition: 'all 0.5s' }}
+    >
+      {micOn ? <MicOnSvg color={onColor} /> : <MicOffSvg color={offColor} />}
+    </button>
+  );
+}

frontEnd/src/components/common/VideoControlButton.tsx

@@ -0,0 +1,36 @@
+import VideoOffSvg from '@/assets/VideoOffSvg';
+import VideoOnSvg from '@/assets/VideoOnSvg';
+import useMediaControl from '@/stores/useMediaControl';
+
+export interface MediaControlButtonProps {
+  stream: MediaStream;
+  className: string;
+  onColor: string;
+  offColor: string;
+}
+
+export default function VideoControlButton({ stream, className, onColor, offColor }: MediaControlButtonProps) {
+  const { videoOn, videoToggle } = useMediaControl((state) => state);
+
+  const offVideo = () => {
+    stream?.getVideoTracks().forEach((track) => {
+      track.enabled = !track.enabled;
+    });
+  };
+
+  const handleClick = () => {
+    offVideo();
+    videoToggle();
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className={className}
+      style={{ backgroundColor: videoOn ? 'transparent' : '#ea4335', transition: 'all 0.5s' }}
+    >
+      {videoOn ? <VideoOnSvg color={onColor} /> : <VideoOffSvg color={offColor} />}
+    </button>
+  );
+}

frontEnd/src/components/common/tests/MicControlButton.test.tsx

@@ -0,0 +1,19 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import MicControlButton from '../MicControlButton';
+
+const audioTrack = [{ enabled: true }];
+
+const mockGetAudioTrack = jest.fn().mockImplementation(() => audioTrack);
+
+const mockStream = {
+  getAudioTracks: mockGetAudioTrack,
+} as unknown as MediaStream;
+
+describe('MicControllButton테스트', () => {
+  it('audio에 대한 MicControllButton을 누르면 audio 설정이 반전된다.', async () => {
+    render(<MicControlButton onColor="white" offColor="white" stream={mockStream} className="" />);
+    fireEvent.click(await screen.findByRole('button'));
+    expect(mockGetAudioTrack).toHaveBeenCalled();
+    expect(audioTrack).toStrictEqual([{ enabled: false }]);
+  });
+});

frontEnd/src/components/common/tests/VideoControlButton.test.tsx

@@ -0,0 +1,19 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import VideoControlButton from '../VideoControlButton';
+
+const videoTrack = [{ enabled: true }];
+
+const mockGetVideoTrack = jest.fn().mockImplementation(() => videoTrack);
+
+const mockStream = {
+  getVideoTracks: mockGetVideoTrack,
+} as unknown as MediaStream;
+
+describe('MediaControllButton테스트', () => {
+  it('video 대한 MediaControllButton을 누르면 video 설정이 반전된다.', async () => {
+    render(<VideoControlButton onColor="white" offColor="white" stream={mockStream} className="" />);
+    fireEvent.click(await screen.findByRole('button'));
+    expect(mockGetVideoTrack).toHaveBeenCalled();
+    expect(videoTrack).toStrictEqual([{ enabled: false }]);
+  });
+});

frontEnd/src/components/room/ControllSection.tsx

@@ -1,8 +1,9 @@
 import { MediaObject } from '@/hooks/useMedia';
-import MediaControlButton from '../common/MediaControlButton';
 import settingIcon from '@/assets/setting.svg';
 import SettingModal from './modal/SettingModal';
 import useModal from '@/hooks/useModal';
+import MicControlButton from '../common/MicControlButton';
+import VideoControlButton from '../common/VideoControlButton';
 
 export default function ControllSection({ mediaObject }: { mediaObject: MediaObject }) {
   const { stream } = mediaObject;
@@ -11,17 +12,17 @@ export default function ControllSection({ mediaObject }: { mediaObject: MediaObj
   return (
     <div className="flex justify-between p-2 bg-white border rounded-lg drop-shadow-lg">
       <div className="flex gap-2">
-        <MediaControlButton
+        <MicControlButton
           stream={stream as MediaStream}
-          kind="mic"
           className="w-[3vw] p-[1vw] hover:opacity-50 rounded-[15px]  shadow drop-shadow-2xl"
-          color="black"
+          onColor="black"
+          offColor="white"
         />
-        <MediaControlButton
+        <VideoControlButton
           stream={stream as MediaStream}
-          kind="video"
           className="w-[3vw] p-[1vw] hover:opacity-50 rounded-[15px]  shadow drop-shadow-2xl"
-          color="black"
+          onColor="black"
+          offColor="white"
         />
       </div>
       <button type="button" className="w-[3vw] p-[1vw] hover:opacity-50 rounded-[15px] border-white " onClick={() => show({ mediaObject })}>

frontEnd/src/components/setting/SettingVideo.tsx

@@ -3,8 +3,8 @@ import Video from '../common/Video';
 import MediaSelector from './MediaSelector';
 import useSpeaker from '@/stores/useSpeaker';
 import EmptyVideo from './EmptyVideo';
-import VideoControlButton from './VideoControlButton';
-import MicControlButton from './MicControlButton';
+import MicControlButton from '../common/MicControlButton';
+import VideoControlButton from '../common/VideoControlButton';
 
 export default function SettingVideo({ mediaObject }: { mediaObject: MediaObject }) {
   const { stream, camera, mic, speaker } = mediaObject;
@@ -23,8 +23,18 @@ export default function SettingVideo({ mediaObject }: { mediaObject: MediaObject
       <div className="relative w-full h-[60vh]">
         <Video stream={stream} muted />
         <div className="absolute flex items-center justify-center w-full gap-6 bottom-4">
-          <MicControlButton stream={stream} />
-          <VideoControlButton stream={stream} />
+          <MicControlButton
+            className="p-3 border-2 border-white border-solid rounded-full w-[72px] tablet:w-14 hover:opacity-50"
+            stream={stream}
+            onColor="white"
+            offColor="white"
+          />
+          <VideoControlButton
+            className="p-3 border-2 border-white border-solid rounded-full w-[72px] tablet:w-14 hover:opacity-50"
+            stream={stream}
+            onColor="white"
+            offColor="white"
+          />
         </div>
       </div>
       <div className="flex gap-2.5">