diff --git a/client/public/index.html b/client/public/index.html index b27644df..5029fb36 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -8,7 +8,4 @@
- - - diff --git a/client/src/App.tsx b/client/src/App.tsx index 65734725..dae2ae45 100644 --- 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 index 0a5c9a83..b6ad5885 100644 --- 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 ( diff --git a/client/src/pages/Introduction/Introduction.tsx b/client/src/pages/Introduction/Introduction.tsx index d33a6ace..e2479afd 100644 --- a/client/src/pages/Introduction/Introduction.tsx +++ b/client/src/pages/Introduction/Introduction.tsx @@ -20,13 +20,13 @@ const IntroContainer = styled.div` `} 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 index 92b1b8bd..dbe28f23 100644 --- 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 index 284c3aa6..d72574d4 100644 --- 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 new file mode 100644 index 00000000..8c9a1a48 --- /dev/null +++ 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 new file mode 100644 index 00000000..733cd4e6 Binary files /dev/null and b/client/src/styles/fonts/dongle-v4-korean-700.woff differ diff --git a/client/src/styles/fonts/dongle-v4-korean-700.woff2 b/client/src/styles/fonts/dongle-v4-korean-700.woff2 new file mode 100644 index 00000000..25194922 Binary files /dev/null and b/client/src/styles/fonts/dongle-v4-korean-700.woff2 differ