Merge branch 'dev' of https://github.com/boostcampwm-2022/web27-Wabinar

Author: se030

client/src/App.tsx

@@ -3,19 +3,19 @@ import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { getAuth } from 'src/apis/auth';
 import UserContext from 'src/contexts/user';
 import { LoadingPage, LoginPage, OAuthPage, WorkspacePage } from 'src/pages';
-import { UserInfo } from 'src/types/user';
+import { User } from 'src/types/user';
 
 import 'styles/reset.scss';
 
 function App() {
   const [isLoaded, setIsLoaded] = useState<boolean>(false);
-  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
+  const [user, setUser] = useState<User | null>(null);
 
   const navigate = useNavigate();
   const location = useLocation();
 
   const autoLogin = async () => {
-    const { user, workspaces } = await getAuth();
+    const { user } = await getAuth();
 
     setIsLoaded(true);
 
@@ -24,22 +24,20 @@ function App() {
       return;
     }
 
-    setUserInfo({ user, workspaces });
-
-    const { id } = workspaces[0];
-    navigate(`/workspace/${id}`);
+    setUser(user);
+    navigate('/workspace');
   };
 
   useEffect(() => {
     autoLogin();
   }, []);
 
   return isLoaded ? (
-    <UserContext.Provider value={{ userInfo, setUserInfo }}>
+    <UserContext.Provider value={{ user, setUser }}>
       <Routes>
         <Route path="/" element={<LoginPage />} />
         <Route path="/oauth" element={<OAuthPage />} />
-        <Route path="/workspace/:id" element={<WorkspacePage />} />
+        <Route path="/workspace/*" element={<WorkspacePage />} />
       </Routes>
     </UserContext.Provider>
   ) : (

client/src/apis/auth.ts

@@ -1,9 +1,16 @@
 import { PostLoginParams } from 'params/auth';
-import { GetUserInfo } from 'src/types/workspace';
+import { User } from 'src/types/user';
+import { Workspace } from 'src/types/workspace';
 
 import { http } from './http';
 import { CREATED, OK } from './http-status';
 
+// TODO: BE API 변경할 때 제거
+type GetUserInfo = {
+  user: User;
+  workspaces: Workspace[];
+};
+
 export const getAuth = async (): Promise<GetUserInfo> => {
   const res = await http.get(`/auth`);
 

client/src/apis/user.ts

@@ -1,9 +1,11 @@
-import { GetWorkspaceParams } from 'params/user';
+import { GetWorkspaceParams, GetWorkspacesResBody } from 'params/user';
 
 import { http } from './http';
 import { OK } from './http-status';
 
-export const getWorkspaces = async ({ id }: GetWorkspaceParams) => {
+export const getWorkspaces = async ({
+  id,
+}: GetWorkspaceParams): Promise<GetWorkspacesResBody> => {
   const res = await http.get(`/user/${id}/workspace`);
 
   if (res.status !== OK) throw new Error();

client/src/components/ConfMediaBar/StreamButton/CamButton/index.tsx

@@ -16,9 +16,9 @@ function CamButton({ isOn, setIsCamOn }: CamButtonProps) {
   return (
     <button onClick={onClick}>
       {isOn ? (
-        <MdVideocamOff color={color.red} size={20} />
-      ) : (
         <MdVideocam color={color.green} size={20} />
+      ) : (
+        <MdVideocamOff color={color.red} size={20} />
       )}
     </button>
   );

client/src/components/ConfMediaBar/StreamButton/MicButton/index.tsx

@@ -16,9 +16,9 @@ function MicButton({ isOn, setIsMicOn }: MicButtonProps) {
   return (
     <button onClick={onClick}>
       {isOn ? (
-        <MdMicOff color={color.red} size={20} />
-      ) : (
         <MdMic color={color.green} size={20} />
+      ) : (
+        <MdMicOff color={color.red} size={20} />
       )}
     </button>
   );

client/src/components/ConfMediaBar/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useConfMediaStreams } from 'src/hooks/useConfMediaStreams';
 import useSocketContext from 'src/hooks/useSocketContext';
 
@@ -7,18 +7,30 @@ import StreamButton from './StreamButton';
 import style from './style.module.scss';
 
 function ConfMediaBar() {
-  const { signalingSocket: socket } = useSocketContext();
-  const streams = useConfMediaStreams(socket);
+  const { workspaceSocket: socket } = useSocketContext();
+  const [streams, setMyTrack] = useConfMediaStreams(socket);
 
-  const [isMicOn, setIsMicOn] = useState(false);
-  const [isCamOn, setIsCamOn] = useState(false);
+  const [isMicOn, setIsMicOn] = useState(true);
+  const [isCamOn, setIsCamOn] = useState(true);
+
+  useEffect(() => {
+    setMyTrack('audio', isMicOn);
+  }, [isMicOn]);
+
+  useEffect(() => {
+    setMyTrack('video', isCamOn);
+  }, [isCamOn]);
 
   return (
     <div className={style['conf-bar']}>
       <ul>
         {Array.from(streams).map(([id, stream]) => (
           <li key={id}>
-            <ConfMedia key={id} stream={stream} muted={id === 'me' ? true : false} />
+            <ConfMedia
+              key={id}
+              stream={stream}
+              muted={id === 'me' ? true : false}
+            />
             <StreamButton
               isMicOn={false}
               isCamOn={true} // TODO: 임시로 지정

client/src/components/Mom/Block/index.tsx

@@ -3,6 +3,7 @@ import {
   RemoteDeleteOperation,
 } from '@wabinar/crdt/linked-list';
 import { useEffect, useRef, memo } from 'react';
+import SOCKET_MESSAGE from 'src/constants/socket-message';
 import { useCRDT } from 'src/hooks/useCRDT';
 import { useOffset } from 'src/hooks/useOffset';
 import useSocketContext from 'src/hooks/useSocketContext';
@@ -44,7 +45,7 @@ function Block({ id, onKeyDown, index }: BlockProps) {
     if (event.inputType === 'deleteContentBackward') {
       const remoteDeletion = localDeleteCRDT(offsetRef.current);
 
-      socket.emit('text-deletion', id, remoteDeletion);
+      socket.emit(SOCKET_MESSAGE.BLOCK.DELETE_TEXT, id, remoteDeletion);
       return;
     }
 
@@ -54,7 +55,7 @@ function Block({ id, onKeyDown, index }: BlockProps) {
 
     const remoteInsertion = localInsertCRDT(previousLetterIndex, letter);
 
-    socket.emit('text-insertion', id, remoteInsertion);
+    socket.emit(SOCKET_MESSAGE.BLOCK.INSERT_TEXT, id, remoteInsertion);
   };
 
   // 리모트 연산 수행결과로 innerText 변경 시 커서의 위치 조정
@@ -89,7 +90,7 @@ function Block({ id, onKeyDown, index }: BlockProps) {
 
   // crdt의 초기화와 소켓을 통해 전달받는 리모트 연산 처리
   useEffect(() => {
-    socket.emit('block-initialization', id);
+    socket.emit(SOCKET_MESSAGE.BLOCK.INIT, id);
 
     const onInitialize = (crdt: unknown) => {
       syncCRDT(crdt);
@@ -124,14 +125,14 @@ function Block({ id, onKeyDown, index }: BlockProps) {
       updateCaretPosition(-Number(targetIndex <= offsetRef.current));
     };
 
-    ee.on(`block-initialization-${id}`, onInitialize);
-    ee.on(`text-insertion-${id}`, onInsert);
-    ee.on(`text-deletion-${id}`, onDelete);
+    ee.on(`${SOCKET_MESSAGE.BLOCK.INIT}-${id}`, onInitialize);
+    ee.on(`${SOCKET_MESSAGE.BLOCK.INSERT_TEXT}-${id}`, onInsert);
+    ee.on(`${SOCKET_MESSAGE.BLOCK.DELETE_TEXT}-${id}`, onDelete);
 
     return () => {
-      ee.off(`block-initialization-${id}`, onInitialize);
-      ee.off(`text-insertion-${id}`, onInsert);
-      ee.off(`text-deletion-${id}`, onDelete);
+      ee.off(`${SOCKET_MESSAGE.BLOCK.INIT}-${id}`, onInitialize);
+      ee.off(`${SOCKET_MESSAGE.BLOCK.INSERT_TEXT}-${id}`, onInsert);
+      ee.off(`${SOCKET_MESSAGE.BLOCK.DELETE_TEXT}-${id}`, onDelete);
     };
   }, []);
 
@@ -161,6 +162,7 @@ function Block({ id, onKeyDown, index }: BlockProps) {
   return (
     <p
       ref={blockRef}
+      data-id={id}
       data-index={index}
       onInput={onInput}
       onCompositionEnd={onCompositionEnd}

client/src/components/Mom/DefaultMom.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import GuideIcon from 'src/components/common/GuideIcon';
+import AmazedWabIcon from 'src/components/common/Icon/Wab/AmazedWabIcon';
+
+import style from './style.module.scss';
+
+function DefaultMom() {
+  return (
+    <div className={style['default-container']}>
+      <AmazedWabIcon />
+      <h1 className={style.message}>회의록이 텅텅 비었어요.</h1>
+      <GuideIcon>
+        <p>
+          사이드바에서 <span className={style.highlight}>+ 회의록 추가</span>{' '}
+          버튼을 클릭해 회의록을 추가해 보세요!
+        </p>
+      </GuideIcon>
+    </div>
+  );
+}
+
+export default DefaultMom;