Merge pull request #102 from SWM-FIRE/FIRE-411-방에-접속하면-해당하는-화이트-노이즈가-나온다

Fire 411 방에 접속하면 해당하는 화이트 노이즈가 나온다

src/components/room/Theme.tsx

@@ -1,18 +1,31 @@
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import MovingTheme from './screenShare/MovingTheme';
 import { ReactComponent as VolumeOn } from '../../assets/svg/VolumeOn.svg';
 import { ReactComponent as VolumeOff } from '../../assets/svg/VolumeOff.svg';
 import UserMediaStreamStore from '../../stores/userMediaStreamStore';
+import ThemeSound from './header/ThemeSound';
 
 export default function Theme({ theme }) {
   const { userSpeaker, setUserSpeaker } = UserMediaStreamStore();
   const [volume, setVolume] = useState<number>(0.5);
+  const volumeRef = useRef<HTMLAudioElement>(null);
   const setSpeaker = () => {
     setUserSpeaker();
   };
+  useEffect(() => {
+    if (!userSpeaker) {
+      volumeRef.current.volume = 0;
+      return;
+    }
+    if (volumeRef.current) {
+      volumeRef.current.volume = volume;
+    }
+  }, [volume, userSpeaker]);
+
   return (
     <Container>
+      <ThemeSound volumeRef={volumeRef} theme={theme} />
       <MovingTheme theme={theme} size="3.2" />
       <Volume onClick={setSpeaker}>
         {userSpeaker && volume !== 0 ? <VolumeOn /> : <VolumeOff />}

src/components/room/header/ThemeSound.tsx

@@ -0,0 +1,37 @@
+import campingOST from '../../../assets/sound/camping.mp3';
+import cosmosOST from '../../../assets/sound/cosmos.mp3';
+import fireOST from '../../../assets/sound/fire.mp3';
+import oceanOST from '../../../assets/sound/ocean.mp3';
+import travelOST from '../../../assets/sound/travel.mp3';
+
+export default function ThemeSound({ theme, volumeRef }) {
+  console.log('sound theme', theme);
+
+  let myTheme;
+  switch (theme) {
+    case 'fire':
+      myTheme = fireOST;
+      break;
+    case 'ocean':
+      myTheme = oceanOST;
+      break;
+    case 'camping':
+      myTheme = campingOST;
+      break;
+    case 'cosmos':
+      myTheme = cosmosOST;
+      break;
+    case 'travel':
+      myTheme = travelOST;
+      break;
+    default:
+      myTheme = fireOST;
+      break;
+  }
+
+  return (
+    <audio ref={volumeRef} src={myTheme} autoPlay loop>
+      <track kind="captions" />
+    </audio>
+  );
+}

src/custom.d.ts

@@ -6,3 +6,4 @@ declare module '*.svg' {
   export default src;
 }
 declare module '*.gif';
+declare module '*.mp3';

src/pages/Room.tsx

@@ -31,20 +31,20 @@ export default function Room() {
 
   if (error) return <div>An error has occurred: </div>;
 
-  const onCotrolSidebarClick = () => {
+  const onControlSidebarClick = () => {
     openSidebar();
   };
 
   return (
     <ThemeProvider theme={theme}>
       <Component>
-        <Header theme={theme} />
+        <Header theme={data?.theme} />
         <Contents>
-          <ScreenShare theme={theme} />
+          <ScreenShare theme={data?.theme} />
           {!isOpenSidebar && (
             <ControlSidebar
               backgroundColor={theme.chatBackground}
-              onClick={onCotrolSidebarClick}
+              onClick={onControlSidebarClick}
             >
               <LeftTwoArrows />
               <Chatting />