Merge pull request #267 from SWM-FIRE/FIRE-765-룸-상단-theme-svg에서-stati…

…c-img로-변경 FIRE-765 change theme svg to static img
SWM-FIRE · Oct 18, 2022 · 4fc6ca7 · 4fc6ca7
2 parents 1e8b203 + 30ea11a
commit 4fc6ca7
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 16 deletions.
diff --git a/src/components/atoms/ThemeImages.tsx b/src/components/atoms/ThemeImages.tsx
@@ -7,49 +7,69 @@ import Travel from '../../assets/theme/travel.png';
 import Camping from '../../assets/theme/camp.png';
 import { ReactComponent as Bar } from '../../assets/svg/Room/Bar.svg';
 
-export default function ThemeImage({ theme }) {
+export default function ThemeImage({ theme, type }) {
   if (theme === 'cosmos') {
     return (
       <Component>
         <Img src={Cosmos} alt="cosmos" />
-        <Name>우주</Name>
-        <Bar />
+        {type === 'block' && (
+          <>
+            <Name>우주</Name>
+            <Bar />
+          </>
+        )}
       </Component>
     );
   }
   if (theme === 'fire') {
     return (
       <Component>
         <Img src={Fire} alt="fire" />
-        <Name>모닥불</Name>
-        <Bar />
+        {type === 'block' && (
+          <>
+            <Name>모닥불</Name>
+            <Bar />
+          </>
+        )}
       </Component>
     );
   }
   if (theme === 'ocean') {
     return (
       <Component>
         <Img src={Ocean} alt="ocean" />
-        <Name>바다</Name>
-        <Bar />
+        {type === 'block' && (
+          <>
+            <Name>바다</Name>
+            <Bar />
+          </>
+        )}
       </Component>
     );
   }
   if (theme === 'travel') {
     return (
       <Component>
         <Img src={Travel} alt="travel" />
-        <Name>여행</Name>
-        <Bar />
+        {type === 'block' && (
+          <>
+            <Name>여행</Name>
+            <Bar />
+          </>
+        )}
       </Component>
     );
   }
   if (theme === 'camping') {
     return (
       <Component>
         <Img src={Camping} alt="camping" />
-        <Name>캠핑</Name>
-        <Bar />
+        {type === 'block' && (
+          <>
+            <Name>캠핑</Name>
+            <Bar />
+          </>
+        )}
       </Component>
     );
   }

diff --git a/src/components/main/block/Block.tsx b/src/components/main/block/Block.tsx
@@ -13,7 +13,7 @@ import useEnterProfile from '../useEnterProfile';
 export default function Block({ isMain, data }) {
   const navigate = useNavigate();
   const { nickname } = UserStore();
-  const { enterProfile } = useEnterProfile(data.moderator.uid);
+  const { enterProfile } = useEnterProfile(data?.moderator.uid);
 
   const enterRoom = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
@@ -35,7 +35,7 @@ export default function Block({ isMain, data }) {
   return (
     <Container main={isMain} data-cy="main-room-cards">
       <AvatarContainer data-cy="main-room-moderator" onClick={enterProfile}>
-        <MyAvatar num={Number(data.moderator.avatar)} />
+        <MyAvatar num={Number(data?.moderator.avatar)} />
         <Moderator>
           방장<Nickname>{data.moderator.nickname}</Nickname>
         </Moderator>

diff --git a/src/components/ready/card/Header.tsx b/src/components/ready/card/Header.tsx
@@ -5,7 +5,7 @@ export default function Header({ data }) {
   return (
     <Container data-cy="ready-card-header">
       <AvatarControl>
-        <MyAvatar num={Number(data.moderator.avatar)} />
+        <MyAvatar num={Number(data?.moderator.avatar)} />
       </AvatarControl>
       <NameTag data-cy="ready-card-name">
         <Moderator isModerator={1}>방장</Moderator>

diff --git a/src/components/room/header/Theme.tsx b/src/components/room/header/Theme.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
-import MovingTheme from '../screenShare/MovingTheme';
+import ThemeImage from '../../atoms/ThemeImages';
 import { ReactComponent as VolumeOn } from '../../../assets/svg/VolumeOn.svg';
 import { ReactComponent as VolumeOff } from '../../../assets/svg/VolumeOff.svg';
 import UserMediaStreamStore from '../../../stores/room/userMediaStreamStore';
@@ -32,7 +32,7 @@ export default function Theme({ theme }) {
   return (
     <Container>
       <ThemeSound volumeRef={volumeRef} theme={theme} />
-      <MovingTheme theme={theme} size="3.2" />
+      <ThemeImage theme={theme} type="header" />
       <Volume onClick={setSpeaker}>
         {userSpeaker && volume !== 0 ? <VolumeOn /> : <VolumeOff />}
       </Volume>