[FE] feat: 방 입장 전 세팅 화면 구성

frontEnd/.eslintrc.cjs

@@ -29,5 +29,6 @@ module.exports = {
     'no-param-reassign': 'off',
     'react/no-array-index-key': 'off',
     'react/no-danger': 'off',
+    'react/require-default-props': 'off',
   },
 };

frontEnd/package.json

@@ -18,7 +18,8 @@
     "react-router-dom": "^6.18.0",
     "socket.io-client": "^4.7.2",
     "uuid": "^9.0.1",
-    "yjs": "^13.6.8"
+    "yjs": "^13.6.8",
+    "zustand": "^4.4.6"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.4",

frontEnd/src/components/Button.tsx

@@ -5,8 +5,11 @@ type ButtonProps = {
   onClick: () => void;
   fontSize: string;
 };
+function Button({ children }: { children: ReactNode }) {
+  return <div>{children}</div>;
+}
 
-export default function Button({ children, onClick, fontSize }: ButtonProps) {
+function Default({ children, onClick, fontSize }: ButtonProps) {
   return (
     <button
       type="button"
@@ -18,3 +21,21 @@ export default function Button({ children, onClick, fontSize }: ButtonProps) {
     </button>
   );
 }
+
+function Full({ children, onClick, fontSize }: ButtonProps) {
+  return (
+    <button
+      type="button"
+      className="px-[1.6vw] py-[14px] bg-mainColor text-white rounded-[15px] font-Pretendard w-full"
+      onClick={onClick}
+      style={{ fontSize }}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default Object.assign(Button, {
+  Default,
+  Full,
+});

frontEnd/src/components/MediaSelector.tsx

@@ -0,0 +1,32 @@
+export default function MediaSelector({
+  stream,
+  optionsData,
+  setFunc,
+}: {
+  stream: MediaStream;
+  optionsData: MediaDeviceInfo[];
+  setFunc: React.Dispatch<React.SetStateAction<string>>;
+}) {
+  const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setFunc(e.target.value);
+  };
+  return (
+    <select className="w-[33%] font-Pretendard text-xl" onChange={onChange}>
+      {optionsData?.map((device) => {
+        const isSelected = stream.getTracks().find((track) => track.label === device.label);
+        if (isSelected)
+          return (
+            <option key={device.label} value={device.deviceId} selected className="font-Pretendard">
+              {device.label}
+            </option>
+          );
+
+        return (
+          <option key={device.label} value={device.deviceId} className="font-Pretendard">
+            {device.label}
+          </option>
+        );
+      })}
+    </select>
+  );
+}

frontEnd/src/components/SettingVideo.tsx

@@ -0,0 +1,90 @@
+import { ReactNode, useState } from 'react';
+import { MediaObject } from '@/hooks/useMedia';
+import MediaSelector from './MediaSelector';
+import Video from './Video';
+import micOnSVG from '@/assets/micOn.svg';
+import micOffSVG from '@/assets/micOff.svg';
+import videoOffSVG from '@/assets/videoOff.svg';
+import videoOnSVG from '@/assets/videoOn.svg';
+import useSpeaker from '@/stores/useSpeaker';
+
+function ControlButton({ onClick, style, children }: { onClick: () => void; style: Record<string, string>; children: ReactNode }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="w-[5vw] p-[1vw] hover:opacity-50 border-solid border-[1px] rounded-[50%] border-white"
+      style={style}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default function SettingVideo({ mediaObject }: { mediaObject: MediaObject }) {
+  const { stream, camera, mic, speaker } = mediaObject;
+  const { list: cameraList, setCamera } = camera;
+  const { list: micList, setMic } = mic;
+  const { list: speakerList } = speaker;
+  const setSpeaker = useSpeaker((state) => state.setSpeaker);
+  const [micOn, setMicOn] = useState(true);
+
+  const [videoOn, setVideoOn] = useState(true);
+
+  const offVideo = () => {
+    stream?.getVideoTracks().forEach((track) => {
+      track.enabled = !track.enabled;
+    });
+  };
+
+  const muteMic = () => {
+    stream?.getAudioTracks().forEach((track) => {
+      track.enabled = !track.enabled;
+    });
+  };
+  const handleMicClick = () => {
+    setMicOn((prev) => !prev);
+    muteMic();
+  };
+  const handleVideoClick = () => {
+    setVideoOn((prev) => !prev);
+    offVideo();
+  };
+  return (
+    stream && (
+      <div className="flex flex-col gap-[20px] ">
+        <div className="relative">
+          <Video stream={stream} muted />
+          <div className="absolute flex items-center justify-center w-full gap-[1vw] bottom-[10px]">
+            <ControlButton onClick={handleMicClick} style={{ backgroundColor: micOn ? 'transparent' : '#ea4335', transition: 'all 0.5s' }}>
+              <img src={micOn ? micOnSVG : micOffSVG} alt="micButton" />
+            </ControlButton>
+            <ControlButton
+              onClick={handleVideoClick}
+              style={{ backgroundColor: videoOn ? 'transparent' : '#ea4335', transition: 'all 0.5s' }}
+            >
+              <img src={videoOn ? videoOnSVG : videoOffSVG} alt="videoButton" />
+            </ControlButton>
+          </div>
+        </div>
+        <div className="flex gap-[10px]">
+          {[
+            [cameraList, setCamera],
+            [micList, setMic],
+            [speakerList, setSpeaker],
+          ].map(
+            ([deviceList, setFunc], i) =>
+              deviceList && (
+                <MediaSelector
+                  key={i}
+                  stream={stream}
+                  optionsData={deviceList as MediaDeviceInfo[]}
+                  setFunc={setFunc as React.Dispatch<React.SetStateAction<string>>}
+                />
+              ),
+          )}
+        </div>
+      </div>
+    )
+  );
+}