[Refactor] 세션 페이지 컴포넌트 분리, 커스텀 훅 분리, UI 개선, 화상 회의 도중 미디어 장치 변경 가능하도록 수정

frontend/src/components/session/SessionSidebar.tsx

@@ -0,0 +1,50 @@
+import { FaClipboardList } from "react-icons/fa";
+import { FaUserGroup } from "react-icons/fa6";
+
+interface Props {
+  question: string;
+  participants: string[];
+}
+
+const SessionSidebar = ({ question, participants }: Props) => {
+  return (
+    <div className={"flex flex-col justify-between w-[440px] px-6"}>
+      <div className={"flex flex-col gap-4"}>
+        <div className={"flex flex-col gap-2"}>
+          <h2 className={"inline-flex gap-1 items-center text-semibold-s"}>
+            <FaClipboardList />
+            질문
+          </h2>
+          <p
+            className={
+              "border border-accent-gray p-2 bg-transparent rounded-xl"
+            }
+          >
+            {question}
+          </p>
+        </div>
+        <div className={"flex flex-col gap-2"}>
+          <h2 className={"inline-flex gap-1 items-center text-semibold-s"}>
+            <FaUserGroup />
+            참가자
+          </h2>
+          <ul>
+            {participants.map((participant, index) => (
+              <li key={index} className={"flex items-center gap-2"}>
+                <span className={"w-4 h-4 bg-accent-gray rounded-full"} />
+                <span>{participant}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+      <div className={"h-16 items-center flex w-full"}>
+        <button className={"w-full bg-red-500 text-white rounded-md py-2"}>
+          종료하기
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SessionSidebar;

frontend/src/components/session/SessionToolbar.tsx

@@ -0,0 +1,106 @@
+import { FaAngleLeft, FaAngleRight } from "react-icons/fa6";
+import {
+  BsCameraVideo,
+  BsCameraVideoOff,
+  BsMic,
+  BsMicMute,
+  BsHandThumbsUp,
+} from "react-icons/bs";
+
+interface Props {
+  handleVideoToggle: () => void;
+  handleMicToggle: () => void;
+  userVideoDevices: MediaDeviceInfo[];
+  userAudioDevices: MediaDeviceInfo[];
+  setSelectedVideoDeviceId: (deviceId: string) => void;
+  setSelectedAudioDeviceId: (deviceId: string) => void;
+  isVideoOn: boolean;
+  isMicOn: boolean;
+}
+const SessionToolbar = ({
+  handleVideoToggle,
+  handleMicToggle,
+  userVideoDevices,
+  userAudioDevices,
+  setSelectedVideoDeviceId,
+  setSelectedAudioDeviceId,
+  isVideoOn,
+  isMicOn,
+}: Props) => {
+  return (
+    <div
+      className={
+        "session-footer h-16 inline-flex w-full justify-between items-center border-t px-6"
+      }
+    >
+      <button
+        className={"bg-transparent rounded-full border p-3 text-xl"}
+        aria-label={"이전 질문 버튼"}
+      >
+        <FaAngleLeft />
+      </button>
+      <div className={"inline-flex center-buttons gap-2"}>
+        <button
+          onClick={handleVideoToggle}
+          className="h-full aspect-square bg-green-500 hover:bg-green-600 text-white p-3 rounded-full"
+          aria-label={isVideoOn ? `비디오 끄기` : "비디오 켜기"}
+        >
+          {isVideoOn ? <BsCameraVideo /> : <BsCameraVideoOff />}
+        </button>
+        <button
+          onClick={handleMicToggle}
+          className="h-full aspect-square bg-green-500 hover:bg-green-600 text-white p-3 rounded-full"
+          aria-label={isMicOn ? `마이크 끄기` : "마이크 켜기"}
+        >
+          {isMicOn ? <BsMic /> : <BsMicMute />}
+        </button>
+        <button
+          className="h-full aspect-square bg-white text-green-500 border box-border border-accent-gray-50 hover:bg-grayscale-50 p-3 rounded-full"
+          aria-label={"좋아요"}
+        >
+          {<BsHandThumbsUp />}
+        </button>
+        <select
+          className={
+            "max-w-40 bg-transparent text-gray-700 text-medium-xs border border-accent-gray py-2 px-2 rounded-xl hover:bg-gray-200"
+          }
+          onChange={(e) => setSelectedVideoDeviceId(e.target.value)}
+        >
+          {userVideoDevices.length > 0 ? (
+            userVideoDevices.map((device) => (
+              <option key={device.deviceId} value={device.deviceId}>
+                {device.label}
+              </option>
+            ))
+          ) : (
+            <option value={""}>발견된 비디오 장치가 없습니다.</option>
+          )}
+        </select>
+        <select
+          className={
+            "max-w-40 bg-transparent text-gray-700 text-medium-xs border border-accent-gray py-2 px-2 rounded-xl hover:bg-gray-200"
+          }
+          onChange={(e) => setSelectedAudioDeviceId(e.target.value)}
+        >
+          {userAudioDevices.length > 0 ? (
+            userAudioDevices.map((device) => (
+              <option key={device.deviceId} value={device.deviceId}>
+                {device.label}
+              </option>
+            ))
+          ) : (
+            <option value={""}>발견된 오디오 장치가 없습니다.</option>
+          )}
+        </select>
+      </div>
+      <button
+        className={"bg-transparent rounded-full border p-3 text-xl"}
+        aria-label={"다음 질문 버튼"}
+      >
+        <FaAngleRight />
+      </button>
+    </div>
+  );
+};
+
+export default SessionToolbar;

frontend/src/components/VideoContainer.tsx → frontend/src/components/session/VideoContainer.tsx

@@ -19,7 +19,7 @@ const VideoContainer = forwardRef(
     ref: React.Ref<HTMLVideoElement>
   ) => {
     return (
-      <div className="bg-black rounded-2xl overflow-hidden shadow relative flex-grow">
+      <div className="bg-black rounded-2xl overflow-hidden shadow relative flex-grow max-w-4xl">
         <video
           ref={ref}
           autoPlay

frontend/src/hooks/useMediaDevices.ts

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+
+const useMediaDevices = () => {
+  // 유저의 미디어 장치 리스트
+  const [userAudioDevices, setUserAudioDevices] = useState<MediaDeviceInfo[]>(
+    []
+  );
+  const [userVideoDevices, setUserVideoDevices] = useState<MediaDeviceInfo[]>(
+    []
+  );
+
+  // 유저가 선택한 미디어 장치
+  const [selectedVideoDeviceId, setSelectedVideoDeviceId] =
+    useState<string>("");
+  const [selectedAudioDeviceId, setSelectedAudioDeviceId] =
+    useState<string>("");
+
+  // 본인 미디어 스트림
+  const [stream, setStream] = useState<MediaStream | null>(null);
+
+  useEffect(() => {
+    // 비디오 디바이스 목록 가져오기
+
+    const getUserDevices = async () => {
+      try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const audioDevices = devices.filter(
+          (device) => device.kind === "audioinput"
+        );
+        const videoDevices = devices.filter(
+          (device) => device.kind === "videoinput"
+        );
+
+        setUserAudioDevices(audioDevices);
+        setUserVideoDevices(videoDevices);
+      } catch (error) {
+        console.error("미디어 기기를 찾는데 문제가 발생했습니다.", error);
+      }
+    };
+
+    getUserDevices();
+  }, []);
+
+  // 미디어 스트림 가져오기: 자신의 스트림을 가져옴
+  const getMedia = async () => {
+    try {
+      if (stream) {
+        // 이미 스트림이 있으면 종료
+        stream.getTracks().forEach((track) => {
+          track.stop();
+        });
+      }
+      const myStream = await navigator.mediaDevices.getUserMedia({
+        video: selectedVideoDeviceId
+          ? { deviceId: selectedVideoDeviceId }
+          : true,
+        audio: selectedAudioDeviceId
+          ? { deviceId: selectedAudioDeviceId }
+          : true,
+      });
+
+      setStream(myStream);
+      return myStream;
+    } catch (error) {
+      console.error(
+        "미디어 스트림을 가져오는 도중 문제가 발생했습니다.",
+        error
+      );
+    }
+  };
+
+  return {
+    userAudioDevices,
+    userVideoDevices,
+    selectedAudioDeviceId,
+    selectedVideoDeviceId,
+    setSelectedAudioDeviceId,
+    setSelectedVideoDeviceId,
+    getMedia,
+    stream,
+  };
+};
+
+export default useMediaDevices;

frontend/src/hooks/useSocket.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { Socket, io } from "socket.io-client";
+
+const useSocket = (socketURL: string) => {
+  // 소켓 상태
+  const [socket, setSocket] = useState<Socket | null>(null);
+
+  // 소켓 연결
+  useEffect(() => {
+    const newSocket = io(socketURL || "http://localhost:3000");
+
+    newSocket.on("connect_error", socketErrorHandler);
+    setSocket(newSocket);
+
+    return () => {
+      newSocket.disconnect();
+      setSocket(null);
+    };
+  }, [socketURL]);
+
+  return { socket };
+};
+
+const socketErrorHandler = (error: Error) => {
+  console.error("시그널링 서버와의 연결에 실패했습니다.", error);
+};
+
+export default useSocket;

frontend/src/index.css

@@ -4,6 +4,7 @@
 @tailwind components;
 @tailwind utilities;
 
+
 @layer base {
   html {
     font-family: Pretendard, system-ui, sans-serif; 
@@ -23,6 +24,7 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #171717;