Merge pull request #161 from yewon830/feat/share-webcam

[Feat/Webrtc] 화면 공유 WebRtc 컴포넌트 UI 제작

front/src/components/Layout/Header.tsx

@@ -108,4 +108,4 @@ const Header = () => {
   );
 };
 
-export default Header;
+export default Header;

front/src/components/Map/ServerMap.tsx

@@ -2,6 +2,7 @@ import { forwardRef, useEffect, useLayoutEffect, useRef } from "react";
 import { EventBus } from "./EventBus";
 import { ServerMapProps, ServerMapTypes } from "../../types/server";
 import EnterServer from "./main";
+import VideoCallBoxList from "../VideoCall/VideoCallBoxList";
 
 // 서버를 생성하고 관리하는 컴포넌트
 // forwardRef를 사용해 부모 컴포넌트로부터 ref를 전달 받음
@@ -99,7 +100,9 @@ export const ServerMap = forwardRef<ServerMapTypes, ServerMapProps>(
           <div id="drag" className="cursor-pointer">
             드래그
           </div>
+          <VideoCallBoxList/>
         </div>
+
       </div>
     );
   }

front/src/components/VideoCall/VideoCallBoxList.tsx

@@ -0,0 +1,71 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import VideoCallBoxListItem from './VideoCallBoxListItem'
+import { messageMemberList } from "../../utils/fakeData";
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import { Member } from '../../types/layout';
+
+const VideoCallBoxList = () => {
+  const [curVideoCallBoxPage, setCurVideoCallBoxPage] = useState(0);
+  const [slicedMemberList, setSlicedMemberList] = useState<Member[]>([]); // 페이징 처리 된 멤버 리스트
+
+  // 마지막 페이지 수
+  const lastPage = useMemo(()=>{
+    const memberCnt = messageMemberList.length;
+    let lastPage = 0;
+    if(memberCnt%4 === 0){
+      lastPage = Math.floor(memberCnt/4) - 1
+    }else{
+      lastPage = Math.floor(memberCnt/4)
+    }
+    return lastPage
+  },[])
+
+  // TODO : 화면 공유 박스 이전 페이지 이동 핸들링 함수
+  const handleBoxPagePrev = useCallback(()=>{
+    let curPage = curVideoCallBoxPage;
+    if(curPage!==0){
+      setCurVideoCallBoxPage(curPage - 1)
+    }
+  },[curVideoCallBoxPage])
+
+  // // TODO : 화면 공유 박스 다음 페이지 이동 핸들링 함수
+  const handleBoxPageNext = useCallback(()=>{
+    if(curVideoCallBoxPage!==lastPage){
+      let curPage = curVideoCallBoxPage;
+      setCurVideoCallBoxPage(curPage + 1)
+    }
+  },[curVideoCallBoxPage,lastPage])
+
+
+  // TODO : 화면공유 멤버 리스트 슬라이싱 함수 
+  const sliceMemberList = useCallback(()=>{
+    const newMemberList = messageMemberList.slice(curVideoCallBoxPage*4, (curVideoCallBoxPage*4)+4);
+    setSlicedMemberList(newMemberList)
+  },[curVideoCallBoxPage])
+
+  useEffect(() => {
+    sliceMemberList();
+  }, [sliceMemberList]);
+
+  return (
+    <div className='w-[55rem] h-[10rem] flex items-center'>
+      <ArrowBackIosIcon 
+      className={`${curVideoCallBoxPage === 0 ? 'text-gray-400' : 'text-black cursor-pointer'}`}
+      onClick={handleBoxPagePrev} />
+      <div className='grid grid-cols-4 h-full w-full'>
+        {
+            slicedMemberList.map(member=>(
+                <VideoCallBoxListItem member={member}/>
+            ))
+        }
+      </div>
+      <ArrowForwardIosIcon 
+      className={`${curVideoCallBoxPage===lastPage? 'text-gray-400' : 'text-black cursor-pointer'}`}
+      onClick={handleBoxPageNext}
+      />
+    </div>
+  )
+}
+
+export default VideoCallBoxList

front/src/components/VideoCall/VideoCallBoxListItem.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Member } from '../../types/layout'
+import { Avatar } from '@mui/material';
+
+interface MemberListItemProps{
+  member: Member;
+}
+
+const VideoCallBoxListItem : React.FC<MemberListItemProps>= ({member}) => {
+  return (
+    <div className='h-full w-full flex flex-col items-center'>
+        <div className='bg-slate-800 w-4/5 h-4/5 rounded-2xl flex-center flex flex-col justify-center items-center shadow-lg relative'>
+          <Avatar src={member.profilePath}></Avatar>
+          <div>
+            <div className='text-white absolute bottom-2 right-4'>{member.userName}</div>
+          </div>
+
+        </div>
+
+
+    </div>
+  )
+}
+
+export default VideoCallBoxListItem

front/tailwind.config.js

@@ -2,17 +2,19 @@
 module.exports = {
   content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
-    colors: {
-      dark:{
-        DEFAULT : "#2A2F4F",
+    extend: {
+      // 기존 색상에서 확장 위해서 extend에 colors 넣는 방식으로 변경
+      colors: {
+        dark:{
+          DEFAULT : "#2A2F4F",
+        },
+        pink:{
+          DEFAULT : "#FDE2F3",
+        },
+        darkPink:{
+          DEFAULT : "#E5BEEC",
+        }
       },
-      pink:{
-        DEFAULT : "#FDE2F3",
-      },
-      darkPink:{
-        DEFAULT : "#E5BEEC",
-      }
     },
   },
   plugins: [],