Merge pull request #197 from Narastro/feat/tadak-room-fix

폰트 파일 로딩 버벅임 감소를 위한 작업
boostcampwm-2021 · Nov 18, 2021 · 479d3e7 · 479d3e7
2 parents 5b9a8ef + a11f1d0
commit 479d3e7
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 14 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -8,7 +8,4 @@
   <body>
     <div id="root"></div>
   </body>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Dongle:wght@400;700&display=swap" rel="stylesheet" />
 </html>
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,3 +1,4 @@
+import './styles/fonts.css';
 import { useCallback, useEffect } from 'react';
 import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
 import GlobalStyles from './styles/GlobalStyles';

diff --git a/client/src/components/VideoBox.tsx b/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>

diff --git a/client/src/pages/Introduction/Introduction.tsx b/client/src/pages/Introduction/Introduction.tsx
@@ -20,13 +20,13 @@ const IntroContainer = styled.div<IntroContainerProps>`
     `}
   transition: background-color 1500ms linear;
   padding: ${({ theme }) => theme.paddings.base};
-  font-family: 'Dongle', sans-serif;
+  font-family: 'Dongle';
 `;
 
 const IntroTitle = styled.div`
   z-index: 2;
   color: white;
-  font-size: 200px;
+  font-size: 250px;
 `;
 const IntroDescription = styled.div`
   z-index: 2;

diff --git a/client/src/pages/Room/style.ts b/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};
 `;
diff --git a/client/src/styles/GlobalStyles.ts b/client/src/styles/GlobalStyles.ts
@@ -21,7 +21,7 @@ const GlobalStyles = createGlobalStyle`
     font-size : 62.5%; // 1rem === 10px
   }
   body {
-    font-family: 'Dongle', sans-serif;
+    font-family: 'Dongle';
   }
   a {
     text-decoration: none;

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