Refactor/#142-S : 소켓 Context 생성 (#143)

juyeong-s · web-flow · commit b1f601eb75f8 · 2022-11-29T18:44:33.000+09:00
## 🤠 개요 - resolve #142 ## 💫 설명 - #139 를 구현하다가 mom 소켓을 다른 컴포넌트에서도 사용할 일이 있었어요 - ConfButton에서 mom 소켓에 회의 시작과 종료를 알려야 해요 - mom 소켓은 현재 `Editor`에서도 필요해요. 하지만 `Editor`와 `ConfButton`의 거리가 좀 멀어요.. props로 넘겨주기는 몇 단계를 거쳐야 하고, `ConfButton` 안에서 `io(URL)`로 다시 mom 소켓 커넥션을 만들고 싶지도 않았어요 - 그래서 SocketContext를 만들어서 하나의 인스턴스로 관리하도록 했어요 - 어짜피 회의록 소켓 커넥션을 워크스페이스 페이지 내에서 항상 열려있으니까 WorkspacePage에서 소켓을 생성해서 Context를 정의해주었어요. 그리곤 Editor와 ConfButton에서 가져다 사용했어요 - #144 `ConfButton` 개발 내용은 이 안에 있어요. 지금 PR 작업과 겹치는 파일들이 있어서 저 안에 들어간 것도 있어요.. - 참고 자료 [https://itnext.io/how-to-use-a-single-instance-of-socket-io-in-your-react-app-6a4465dcb398](https://itnext.io/how-to-use-a-single-instance-of-socket-io-in-your-react-app-6a4465dcb398) ## 🌜 고민거리 (Optional) ### Q.1 signalingSocket도 context안에서 하나로만 사용할 수 있도록 하고 싶었는데, 현재 WorkspacePage에서 momSocket을 미리 생성해주고 Context를 정의했는데, 시그널링 같은 경우는 아예 ConfMediaBar가 열리면 커넥션이 맺어지게 하려고 했어서 함께 관리하지는 못했어요 ## 📷 스크린샷 (Optional)
diff --git a/client/src/components/ConfMediaBar/ConfMedia/index.tsx b/client/src/components/ConfMediaBar/ConfMedia/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { memo, useEffect, useRef } from 'react';
 
 import style from './style.module.scss';
 
@@ -17,4 +17,4 @@ function ConfMedia({ stream }: MediaProps) {
   return <video className={style.video} ref={ref} autoPlay />;
 }
 
-export default ConfMedia;
+export default memo(ConfMedia);
diff --git a/client/src/components/ConfMediaBar/StreamButton/CamButton/index.tsx b/client/src/components/ConfMediaBar/StreamButton/CamButton/index.tsx
@@ -0,0 +1,27 @@
+import { MdVideocam } from '@react-icons/all-files/md/MdVideocam';
+import { MdVideocamOff } from '@react-icons/all-files/md/MdVideocamOff';
+import { Dispatch, SetStateAction } from 'react';
+import color from 'styles/color.module.scss';
+
+interface CamButtonProps {
+  isOn: boolean;
+  setIsCamOn?: Dispatch<SetStateAction<boolean>>;
+}
+
+function CamButton({ isOn, setIsCamOn }: CamButtonProps) {
+  const onClick = () => {
+    if (setIsCamOn) setIsCamOn(!isOn);
+  };
+
+  return (
+    <button onClick={onClick}>
+      {isOn ? (
+        <MdVideocamOff color={color.red} size={20} />
+      ) : (
+        <MdVideocam color={color.green} size={20} />
+      )}
+    </button>
+  );
+}
+
+export default CamButton;
diff --git a/client/src/components/ConfMediaBar/StreamButton/MicButton/index.tsx b/client/src/components/ConfMediaBar/StreamButton/MicButton/index.tsx
@@ -0,0 +1,27 @@
+import { MdMic } from '@react-icons/all-files/md/MdMic';
+import { MdMicOff } from '@react-icons/all-files/md/MdMicOff';
+import { Dispatch, SetStateAction } from 'react';
+import color from 'styles/color.module.scss';
+
+interface MicButtonProps {
+  isOn: boolean;
+  setIsMicOn?: Dispatch<SetStateAction<boolean>>;
+}
+
+function MicButton({ isOn, setIsMicOn }: MicButtonProps) {
+  const onClick = () => {
+    if (setIsMicOn) setIsMicOn(!isOn);
+  };
+
+  return (
+    <button onClick={onClick}>
+      {isOn ? (
+        <MdMicOff color={color.red} size={20} />
+      ) : (
+        <MdMic color={color.green} size={20} />
+      )}
+    </button>
+  );
+}
+
+export default MicButton;
diff --git a/client/src/components/ConfMediaBar/StreamButton/index.tsx b/client/src/components/ConfMediaBar/StreamButton/index.tsx
@@ -0,0 +1,28 @@
+import { Dispatch, memo, SetStateAction } from 'react';
+
+import CamButton from './CamButton';
+import MicButton from './MicButton';
+import style from './style.module.scss';
+
+interface StreamButtonProps {
+  isMicOn: boolean;
+  isCamOn: boolean;
+  setIsMicOn?: Dispatch<SetStateAction<boolean>>;
+  setIsCamOn?: Dispatch<SetStateAction<boolean>>;
+}
+
+function StreamButton({
+  isMicOn,
+  isCamOn,
+  setIsMicOn,
+  setIsCamOn,
+}: StreamButtonProps) {
+  return (
+    <div className={style['stream-button']}>
+      <MicButton isOn={isMicOn} setIsMicOn={setIsMicOn} />
+      <CamButton isOn={isCamOn} setIsCamOn={setIsCamOn} />
+    </div>
+  );
+}
+
+export default memo(StreamButton);
diff --git a/client/src/components/ConfMediaBar/StreamButton/style.module.scss b/client/src/components/ConfMediaBar/StreamButton/style.module.scss
@@ -0,0 +1,12 @@
+@import 'styles/color.module';
+
+.stream-button {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  margin: auto;
+  padding: 5px 10px;
+  border-radius: 20px;
+  background-color: $gray-300-transparent;
+  cursor: pointer;
+}
diff --git a/client/src/components/ConfMediaBar/index.tsx b/client/src/components/ConfMediaBar/index.tsx
@@ -1,29 +1,41 @@
-import { io } from 'socket.io-client';
-import env from 'src/config';
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
 import { useConfMediaStreams } from 'src/hooks/useConfMediaStreams';
+import useSocket from 'src/hooks/useSocket';
 
 import ConfMedia from './ConfMedia';
+import StreamButton from './StreamButton';
 import style from './style.module.scss';
 
-interface ConfMediaBarProps {
-  workspaceId?: string;
-}
-
-function ConfMediaBar({ workspaceId }: ConfMediaBarProps) {
-  const socketUrl = `${env.SERVER_PATH}/signaling/${workspaceId}`;
-  const socket = io(socketUrl);
-
+function ConfMediaBar() {
+  const { id } = useParams();
+  const socket = useSocket(`/signaling/${id}`);
   const streams = useConfMediaStreams(socket);
 
+  const [isMicOn, setIsMicOn] = useState(false);
+  const [isCamOn, setIsCamOn] = useState(false);
+
   return (
     <div className={style['conf-bar']}>
       <ul>
         {Array.from(streams).map(([id, stream]) => (
           <li key={id}>
             <ConfMedia key={id} stream={stream} />
+            <StreamButton
+              isMicOn={false}
+              isCamOn={true} // TODO: 임시로 지정
+            />
           </li>
         ))}
       </ul>
+      <StreamButton
+        {...{
+          isMicOn,
+          isCamOn,
+          setIsMicOn,
+          setIsCamOn,
+        }}
+      />
     </div>
   );
 }
diff --git a/client/src/components/ConfMediaBar/style.module.scss b/client/src/components/ConfMediaBar/style.module.scss
@@ -10,12 +10,24 @@
 
   ul {
     height: 100%;
-    padding: 0 10px;
+    padding: 10px;
     overflow: hidden;
     overflow-y: auto;
 
+    li {
+      position: relative;
+      & > div {
+        position: absolute;
+        right: 5px;
+        bottom: 10px;
+      }
+    }
+
     li:not(:last-child) {
       margin-bottom: 10px;
     }
   }
+  & > div {
+    margin-top: 10px;
+  }
 }
diff --git a/client/src/components/Confbar/index.tsx b/client/src/components/Confbar/index.tsx
diff --git a/client/src/components/Editor/index.tsx b/client/src/components/Editor/index.tsx
@@ -1,15 +1,12 @@
-import { useRef, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import io, { Socket } from 'socket.io-client';
-import env from 'src/config';
+import { useEffect, useRef } from 'react';
 import { useCRDT } from 'src/hooks/useCRDT';
 import { useOffset } from 'src/hooks/useOffset';
+import useSocketContext from 'src/hooks/useSocketContext';
 
 import style from './style.module.scss';
 
 function Editor() {
-  const workspace = useParams();
-  const socket: Socket = io(`${env.SERVER_PATH}/sc-workspace/${workspace.id}`);
+  const { momSocket: socket } = useSocketContext();
 
   const {
     syncCRDT,
diff --git a/client/src/components/Sidebar/ConfButton.tsx b/client/src/components/Sidebar/ConfButton.tsx
@@ -1,7 +1,29 @@
+import { useConfContext } from 'src/hooks/useConfContext';
+import useSocketContext from 'src/hooks/useSocketContext';
+import color from 'styles/color.module.scss';
+
 import style from './style.module.scss';
 
 function ConfButton() {
-  return <button className={style['conf-button']}>회의시작</button>;
+  const { momSocket: socket } = useSocketContext();
+
+  const ConfContext = useConfContext();
+  const { isStart, setIsStart } = ConfContext;
+
+  const onClick = () => {
+    setIsStart(!isStart);
+    socket.emit(isStart ? 'stop-mom' : 'start-mom');
+  };
+
+  return (
+    <button
+      className={style['conf-button']}
+      onClick={onClick}
+      style={{ backgroundColor: isStart ? color.red : color.green }}
+    >
+      {isStart ? '회의종료' : '회의시작'}
+    </button>
+  );
 }
 
 export default ConfButton;
diff --git a/client/src/components/WorkspaceList/index.tsx b/client/src/components/WorkspaceList/index.tsx
@@ -3,7 +3,7 @@ import WorkspaceModal from 'components/WorkspaceModal';
 import WorkspaceThumbnaliList from 'components/WorkspaceThumbnailList';
 import { memo, useEffect, useState } from 'react';
 import { MENUS } from 'src/constants/workspace';
-import SetWorkspacesContext from 'src/contexts/set-workspaces';
+import WorkspaceContext from 'src/contexts/workspaces';
 import { useUserContext } from 'src/hooks/useUserContext';
 import { SelectorStyle } from 'src/types/selector';
 import { Workspace } from 'src/types/workspace';
@@ -35,7 +35,7 @@ function WorkspaceList() {
   };
 
   return (
-    <SetWorkspacesContext.Provider value={setWorkspaces}>
+    <WorkspaceContext.Provider value={{ setWorkspaces }}>
       <div className={style['workspace-list-container']}>
         <WorkspaceThumbnaliList workspaces={workspaces} />
         <Selector
@@ -49,7 +49,7 @@ function WorkspaceList() {
           setSelectedMenu={setSelectedMenu}
         />
       </div>
-    </SetWorkspacesContext.Provider>
+    </WorkspaceContext.Provider>
   );
 }
 
diff --git a/client/src/components/WorkspaceModal/CreateModal.tsx b/client/src/components/WorkspaceModal/CreateModal.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { postWorkspace, postWorkspaceJoin } from 'src/apis/workspace';
 import { MENU } from 'src/constants/workspace';
-import { useSetWorkspaces } from 'src/hooks/useSetWorkspaces';
+import useWorkspaceContext from 'src/hooks/useWorkspaceContext';
 
 import FormModal, { ModalContents } from './FormModal';
 
@@ -18,7 +18,7 @@ function CreateModal({
   setSelectedMenu,
   setCode,
 }: CreateModalProps) {
-  const setWorkspaces = useSetWorkspaces();
+  const { setWorkspaces } = useWorkspaceContext();
   const [inputValue, setInputValue] = useState<string>('');
 
   const onSubmit = async () => {
diff --git a/client/src/components/WorkspaceModal/JoinModal.tsx b/client/src/components/WorkspaceModal/JoinModal.tsx
@@ -2,7 +2,7 @@
 import { AxiosError, AxiosResponse } from 'axios';
 import { useState } from 'react';
 import { postWorkspaceJoin } from 'src/apis/workspace';
-import { useSetWorkspaces } from 'src/hooks/useSetWorkspaces';
+import useWorkspaceContext from 'src/hooks/useWorkspaceContext';
 
 import FormModal, { ModalContents } from './FormModal';
 
@@ -14,7 +14,7 @@ interface JoinModalProps {
 function JoinModal({ modalContents, onClose }: JoinModalProps) {
   const [inputValue, setInputValue] = useState<string>('');
 
-  const setWorkspaces = useSetWorkspaces();
+  const { setWorkspaces } = useWorkspaceContext();
   const [errorMessage, setErrorMessage] = useState<string | undefined>(
     undefined,
   );
diff --git a/client/src/contexts/conf.ts b/client/src/contexts/conf.ts
@@ -0,0 +1,10 @@
+import { createContext, Dispatch, SetStateAction } from 'react';
+
+interface IConfContext {
+  isStart: boolean;
+  setIsStart: Dispatch<SetStateAction<boolean>>;
+}
+
+const ConfContext = createContext<IConfContext | null>(null);
+
+export default ConfContext;
diff --git a/client/src/contexts/set-workspaces.ts b/client/src/contexts/set-workspaces.ts
diff --git a/client/src/contexts/socket.ts b/client/src/contexts/socket.ts
@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import { Socket } from 'socket.io-client';
+
+interface ISocketContext {
+  momSocket: Socket;
+}
+
+export const SocketContext = createContext<ISocketContext | null>(null);
diff --git a/client/src/contexts/workspaces.ts b/client/src/contexts/workspaces.ts
@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import { Workspace } from 'src/types/workspace';
+
+interface IWorkspceContext {
+  setWorkspaces: React.Dispatch<React.SetStateAction<Workspace[]>>;
+}
+
+const WorkspaceContext = createContext<IWorkspceContext | null>(null);
+
+export default WorkspaceContext;
diff --git a/client/src/hooks/useConfContext.ts b/client/src/hooks/useConfContext.ts
@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import ConfContext from 'src/contexts/conf';
+
+export function useConfContext() {
+  const context = useContext(ConfContext);
+
+  if (!context)
+    throw new Error('ConfContext는 정의된 스코프 안에서만 사용 가능해요 ^^');
+
+  return context;
+}
diff --git a/client/src/hooks/useSocket.ts b/client/src/hooks/useSocket.ts
@@ -0,0 +1,6 @@
+import { io } from 'socket.io-client';
+import env from 'src/config';
+
+export default function useSocket(namespace: string) {
+  return io(`${env.SERVER_PATH}${namespace}`);
+}
diff --git a/client/src/hooks/useSocketContext.ts b/client/src/hooks/useSocketContext.ts
@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { SocketContext } from 'src/contexts/socket';
+
+export default function useSocketContext() {
+  const context = useContext(SocketContext);
+
+  if (!context)
+    throw new Error('SocketContext는 정의된 스코프 안에서만 사용 가능해요 ^^');
+
+  return context;
+}
diff --git a/client/src/hooks/useWorkspaceContext.ts b/client/src/hooks/useWorkspaceContext.ts
@@ -1,8 +1,8 @@
 import { useContext } from 'react';
-import SetWorkspacesContext from 'src/contexts/set-workspaces';
+import WorkspaceContext from 'src/contexts/workspaces';
 
-export function useSetWorkspaces() {
-  const context = useContext(SetWorkspacesContext);
+export default function useWorkspaceContext() {
+  const context = useContext(WorkspaceContext);
 
   if (!context)
     throw new Error('UserContext는 정의된 스코프 안에서만 사용 가능해요 ^^');
diff --git a/client/src/pages/Workspace/index.tsx b/client/src/pages/Workspace/index.tsx
diff --git a/client/src/styles/color.module.scss b/client/src/styles/color.module.scss
diff --git a/server/socket/mom.ts b/server/socket/mom.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { useEffect, useRef } from 'react';`
	`1`	`+import { memo, useEffect, useRef } from 'react';`
`2`	`2`
`3`	`3`	`import style from './style.module.scss';`
`4`	`4`
`@@ -17,4 +17,4 @@ function ConfMedia({ stream }: MediaProps) {`
`17`	`17`	`return <video className={style.video} ref={ref} autoPlay />;`
`18`	`18`	`}`
`19`	`19`
`20`		`-export default ConfMedia;`
	`20`	`+export default memo(ConfMedia);`