Feat: CallContext 일부 상태값 제거 및 AudioContext 생성 #50

src/contexts/AudioProvider.tsx

@@ -0,0 +1,67 @@
+import { AudioInfo } from "@typings/front";
+import React, { createContext, FC, useMemo, useReducer } from "react";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const AudioActionType = {
+  SET_STREAM: "SET_STREAM",
+  SET_AUDIOLIST: "SET_AUDIOLIST",
+  DEL_ALL: "DEL_ALL",
+};
+
+const initialAudioState: AudioInfo = {
+  stream: null,
+  deviceId: null,
+  audioList: [],
+};
+
+export const AudioContext = createContext<{
+  audio: AudioInfo;
+  dispatch: React.Dispatch<{
+    type: string;
+    payload?: any;
+  }>;
+}>({
+  audio: initialAudioState,
+  dispatch: () => {},
+});
+
+const callReducer = (
+  state: AudioInfo,
+  action: { type: string; payload?: any }
+): AudioInfo => {
+  switch (action.type) {
+    case AudioActionType.SET_STREAM:
+      return {
+        ...state,
+        stream: action.payload.stream,
+        deviceId: action.payload.deviceId,
+      };
+    case AudioActionType.SET_AUDIOLIST:
+      return {
+        ...state,
+        audioList: action.payload,
+      };
+    case AudioActionType.DEL_ALL:
+      return {
+        stream: null,
+        deviceId: null,
+        audioList: [],
+      };
+    default:
+      return state;
+  }
+};
+
+const AudioProvider: FC<Props> = ({ children }) => {
+  const [audio, dispatch] = useReducer(callReducer, initialAudioState);
+  const value = useMemo(() => ({ audio, dispatch }), [audio]);
+
+  return (
+    <AudioContext.Provider value={value}>{children}</AudioContext.Provider>
+  );
+};
+
+export default AudioProvider;

src/contexts/CallProvider.tsx

@@ -6,16 +6,13 @@ interface Props {
 }
 
 export const CallActionType = {
-  SET_STREAM: "SET_STREAM",
   SET_MATCHING: "SET_MATCHING",
   SET_ROOMTYPE: "SET_ROOMTYPE",
   SET_CURRNUM: "SET_CURRNUM",
   DEL_ALL: "DEL_ALL",
 };
 
 const initialCallState: CallInfo = {
-  stream: null,
-  deviceId: null,
   roomName: null,
   roomType: null,
   opponent: null,
@@ -38,12 +35,6 @@ const callReducer = (
   action: { type: string; payload?: any }
 ): CallInfo => {
   switch (action.type) {
-    case CallActionType.SET_STREAM:
-      return {
-        ...state,
-        stream: action.payload.stream,
-        deviceId: action.payload.deviceId,
-      };
     case CallActionType.SET_MATCHING:
       return {
         ...state,
@@ -52,8 +43,6 @@ const callReducer = (
       };
     case CallActionType.DEL_ALL:
       return {
-        stream: null,
-        deviceId: null,
         roomName: null,
         roomType: null,
         opponent: null,