Merge branch 'dev' into Refactor/#275-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

@@ -127,10 +127,22 @@ function TextBlock({
     };
   }, []);
 
+  useEffect(() => {
+    updateCaretPosition();
+  }, [isOpen]);
+
   // 로컬에서 일어나는 작성 - 삽입과 삭제 연산
   const onInput: React.FormEventHandler = (e) => {
     setOffset();
 
+    if (!blockRef.current) return;
+
+    if (blockRef.current.innerText === '/') {
+      setIsOpen(true);
+    } else if (isOpen) {
+      setIsOpen(false);
+    }
+
     if (offsetRef.current === null) return;
 
     const event = e.nativeEvent as InputEvent;

client/src/components/ConfMediaBar/StreamButton/index.tsx renamed to client/src/components/MeetingMediaBar/StreamButton/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);