Design: 폰트 로드 방식 변경 및 assets에 폰트 파일 추가

client/src/App.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect } from 'react';
 import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
 import GlobalStyles from './styles/GlobalStyles';
-import GlobalFonts from './styles/GlobalFonts';
 import Introduction from '@pages/Introduction';
 import Main from '@pages/Main';
 import { useUser, useUserFns } from '@contexts/userContext';
 import { getUserByToken } from '@utils/apis';
 import Room from '@pages/Room';
+import './styles/fonts.css';
 
 const App = (): JSX.Element => {
   const user = useUser();
@@ -36,7 +36,6 @@ const App = (): JSX.Element => {
         </Switch>
       </BrowserRouter>
       <GlobalStyles />
-      <GlobalFonts />
     </>
   );
 };

client/src/components/VideoBox.tsx

@@ -7,7 +7,7 @@ import {
 } from 'agora-rtc-react';
 import styled from 'styled-components';
 import defaultImage from '@assets/default-avatar.jpeg';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
 
 const VIDEO_WIDTH = 30;
 const VIDEO_HEIGHT = 20;
@@ -31,11 +31,11 @@ const VolumeVisualizer = styled.div`
   height: ${VIDEO_HEIGHT}rem;
   position: absolute;
   right: 0;
-  border: 3px solid ${({ theme }) => theme.colors.primary};
+  border: 3px solid ${({ theme }) => theme.colors.blue};
   border-radius: ${BORDER_RADIUS};
 `;
 
-const SPEAK_VOLUME = 0.1;
+const SPEAK_VOLUME = 0.2;
 const VOLUME_VISUAL_TIME = 1000;
 
 interface VideoBoxProps {
@@ -45,13 +45,27 @@ interface VideoBoxProps {
 
 const VideoBox = ({ videoTrack, audioTrack }: VideoBoxProps): JSX.Element => {
   const [isSpeak, setIsSpeak] = useState(false);
+  const isInterval = useRef(false);
+
+  const initInterval = useCallback(
+    function () {
+      if (!isInterval.current) {
+        setInterval(() => {
+          if (audioTrack) {
+            setIsSpeak(audioTrack?.getVolumeLevel() > SPEAK_VOLUME);
+          }
+        }, VOLUME_VISUAL_TIME);
+      }
+      isInterval.current = true;
+    },
+    [isInterval, audioTrack],
+  );
 
   useEffect(() => {
-    if (audioTrack)
-      setInterval(() => {
-        setIsSpeak(audioTrack?.getVolumeLevel() > SPEAK_VOLUME);
-      }, VOLUME_VISUAL_TIME);
-  }, [audioTrack]);
+    if (audioTrack) {
+      initInterval();
+    }
+  }, [audioTrack, initInterval]);
 
   return (
     <VideoWrap>

client/src/pages/Room/style.ts

@@ -8,5 +8,6 @@ export const RoomWrapper = styled.div`
 
 export const RoomContainer = styled.div`
   height: 100%;
+  width: 100%;
   padding: ${({ theme }) => theme.paddings.lg};
 `;

client/src/styles/fonts.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Dongle';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../assets/fonts/dongle-v4-korean-700.woff2') format('woff2'),
+    url('../assets/fonts/dongle-v4-korean-700.woff') format('woff');
+} ;