Merge branch 'dev' into chore/#261-C

Author: wcho21

client/src/components/ConfMediaBar/ConfMedia/index.tsx renamed to client/src/components/MeetingMediaBar/MeetingMedia/index.tsx

@@ -7,7 +7,7 @@ interface MediaProps {
   muted: boolean;
 }
 
-function ConfMedia({ stream, muted }: MediaProps) {
+function MeetingMedia({ stream, muted }: MediaProps) {
   const ref = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
@@ -18,4 +18,4 @@ function ConfMedia({ stream, muted }: MediaProps) {
   return <video className={style.video} ref={ref} muted={muted} autoPlay />;
 }
 
-export default memo(ConfMedia);
+export default memo(MeetingMedia);

client/src/components/ConfMediaBar/ConfMedia/style.module.scss renamed to client/src/components/MeetingMediaBar/MeetingMedia/style.module.scss

@@ -1,14 +1,14 @@
 import { useEffect, useState } from 'react';
-import { useConfMediaStreams } from 'src/hooks/useConfMediaStreams';
+import { useMeetingMediaStreams } from 'src/hooks/useMeetingMediaStreams';
 import useSocketContext from 'src/hooks/useSocketContext';
 
-import ConfMedia from './ConfMedia';
+import MeetingMedia from './MeetingMedia';
 import StreamButton from './StreamButton';
 import style from './style.module.scss';
 
-function ConfMediaBar() {
+function MeetingMediaBar() {
   const { workspaceSocket: socket } = useSocketContext();
-  const [streams, setMyTrack] = useConfMediaStreams(socket);
+  const [streams, setMyTrack] = useMeetingMediaStreams(socket);
 
   const [isMicOn, setIsMicOn] = useState(true);
   const [isCamOn, setIsCamOn] = useState(true);
@@ -22,11 +22,11 @@ function ConfMediaBar() {
   }, [isCamOn]);
 
   return (
-    <div className={style['conf-bar']}>
+    <div className={style['meeting-bar']}>
       <ul>
         {Array.from(streams).map(([id, stream]) => (
           <li key={id}>
-            <ConfMedia
+            <MeetingMedia
               key={id}
               stream={stream}
               muted={id === 'me' ? true : false}
@@ -50,4 +50,4 @@ function ConfMediaBar() {
   );
 }
 
-export default ConfMediaBar;
+export default MeetingMediaBar;

client/src/components/ConfMediaBar/StreamButton/CamButton/index.tsx renamed to client/src/components/MeetingMediaBar/StreamButton/CamButton/index.tsx

@@ -1,4 +1,4 @@
-.conf-bar {
+.meeting-bar {
   display: flex;
   flex-direction: column;
   align-items: center;

client/src/components/ConfMediaBar/StreamButton/MicButton/index.tsx renamed to client/src/components/MeetingMediaBar/StreamButton/MicButton/index.tsx

@@ -1,35 +1,35 @@
 import { memo } from 'react';
 import SOCKET_MESSAGE from 'src/constants/socket-message';
-import { useConfContext } from 'src/hooks/useConfContext';
+import { useMeetingContext } from 'src/hooks/useMeetingContext';
 import useSocketContext from 'src/hooks/useSocketContext';
 import color from 'styles/color.module.scss';
 
 import style from './style.module.scss';
 
-function ConfButton() {
+function MeetingButton() {
   const { workspaceSocket: socket } = useSocketContext();
 
-  const ConfContext = useConfContext();
-  const { isStart, setIsStart } = ConfContext;
+  const MeetingContext = useMeetingContext();
+  const { isOnGoing, setIsOnGoing } = MeetingContext;
 
   const onClick = () => {
-    setIsStart(!isStart);
+    setIsOnGoing(!isOnGoing);
     socket.emit(
-      isStart
+      isOnGoing
         ? SOCKET_MESSAGE.WORKSPACE.END_MEETING
         : SOCKET_MESSAGE.WORKSPACE.START_MEETING,
     );
   };
 
   return (
     <button
-      className={style['conf-button']}
+      className={style['meeting-button']}
       onClick={onClick}
-      style={{ backgroundColor: isStart ? color.red : color.green }}
+      style={{ backgroundColor: isOnGoing ? color.red : color.green }}
     >
-      {isStart ? '회의종료' : '회의시작'}
+      {isOnGoing ? '회의종료' : '회의시작'}
     </button>
   );
 }
 
-export default memo(ConfButton);
+export default memo(MeetingButton);

client/src/components/ConfMediaBar/StreamButton/index.tsx renamed to client/src/components/MeetingMediaBar/StreamButton/index.tsx

@@ -1,11 +1,12 @@
 import useSelectedMom from 'src/hooks/useSelectedMom';
 import { WorkspaceInfo } from 'src/types/workspace';
 
-import ConfButton from './ConfButton';
 import Header from './Header';
+import MeetingButton from './MeetingButton';
 import MemberList from './MemberList';
 import MomList from './MomList';
 import style from './style.module.scss';
+
 interface SidebarProps {
   workspace: WorkspaceInfo;
 }
@@ -18,7 +19,7 @@ function Sidebar({ workspace }: SidebarProps) {
       <Header name={workspace.name} />
       <MemberList members={workspace.members} />
       <MomList moms={workspace.moms} setSelectedMom={setSelectedMom} />
-      <ConfButton />
+      <MeetingButton />
     </div>
   );
 }