Merge pull request #269 from connect-foundation/feature/snow-gif

방 배경에 눈 내리는 효과 적용

Author: gyustar

client/src/components/Room/index.js

@@ -4,7 +4,7 @@ import GameArea from './GameArea';
 import ChatArea from './ChatArea';
 import Alert from '../Alert';
 import {
-  Wrapper, RoomWrapper, SoundToggleWrapper, SoundToggle,
+  RoomBackground, Wrapper, RoomWrapper, SoundToggleWrapper, SoundToggle,
 } from './style';
 import socket from '../../modules/socket';
 import URL from '../../constants/url';
@@ -79,7 +79,7 @@ const Room = () => {
   }, []);
 
   return (
-    <>
+    <RoomBackground>
       <Wrapper>
         <SoundToggleWrapper>
           <SoundToggle onClick={toggleSound}>{isSoundOn ? '🔊sound on' : '🔇sound off'}</SoundToggle>
@@ -90,7 +90,7 @@ const Room = () => {
         </RoomWrapper>
       </Wrapper>
       {isExistRoom ? '' : <Alert message={ROOM.PATH_ERROR_MESSAGE} closeCallback={goToLobby} />}
-    </>
+    </RoomBackground>
   );
 };
 

client/src/components/Room/style.js

@@ -2,6 +2,12 @@ import styled from 'styled-components';
 import { setSize, setFlex } from '../Style/util';
 import { ROOM, SOUND_TOGGLE } from '../Style/Room';
 
+export const RoomBackground = styled.div`
+    min-width: 100vw;
+    min-height: 100vh;
+    background: url(${ROOM.BACKGROUND_GIF});
+`;
+
 export const Wrapper = styled.div`
     position: absolute;
     width: ${ROOM.getWidth()}px;

client/src/components/Style/Room.js

@@ -109,6 +109,7 @@ export const ROOM = {
   BORDER_RADIUS_BIG: 12,
   FONT_FAMILY: 'DungGeunMo',
   BUTTON_HOVER_EFFECT: 'linear-gradient(-180deg, rgba(150, 150, 150, 0.1), rgba(150, 150, 150, 0.2) 50%)',
+  BACKGROUND_GIF: 'https://kr.object.ncloudstorage.com/connect-2019-01/image/transparent-gfllffmJEBXju33FPg.gif',
 };
 
 export const ROOM_NAME = {