Merge pull request #270 from connect-foundation/develop

ktseo41 · web-flow · commit 648225b4ba8f · 2020-02-07T22:09:57.000+09:00
v1.0.1 배포
diff --git a/client/src/components/Room/index.js b/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>
   );
 };
 
diff --git a/client/src/components/Room/style.js b/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;
diff --git a/client/src/components/Style/Room.js b/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 = {
diff --git a/client/src/constants/room.js b/client/src/constants/room.js
@@ -93,6 +93,7 @@ export const DASHBOARD = {
 
 
 export const CHAT_AREA = {
+  WIDTH: 250,
   MAX_MESSAGE_LENGTH: 50,
   NOTICE_MESSAGE: '** 매너채팅 해요 ^_^ **',
   EMOJI_URL_VIEWER: 'https://kr.object.ncloudstorage.com/connect-2019-01/image/viewer-emoji.png',
@@ -112,7 +113,7 @@ export const ROOM = {
 };
 
 export const ROOM_NAME = {
-  WRAPPER_WIDTH: CHAT_AREA.WIDTH - 30,
+  WRAPPER_WIDTH: CHAT_AREA.WIDTH,
   FONT_WIDTH: {
     HANGUL: 30,
     EMOJI: 30,
diff --git a/script/docker-compose.yml b/script/docker-compose.yml
@@ -29,7 +29,7 @@ services:
         restart: always
         image: dev-2019-01.kr.ncr.ntruss.com/front-end
         ports:
-            - "80:80"
+            - "443:443"
         depends_on:
             - server
         networks:
diff --git a/server/app.js b/server/app.js
@@ -5,8 +5,7 @@ import socketio from 'socket.io';
 import cookieParser from 'cookie-parser';
 import {} from 'dotenv/config';
 import cors from 'cors';
-import loginRouter from './routes/login';
-import adminRouter from './routes/admin';
+import rootRouter from './routes';
 import controller from './controller';
 import URL from './constants/url';
 import ERROR_MSG from './constants/error-message';
@@ -27,8 +26,7 @@ if (process.env.NODE_ENV === 'development') {
   app.use(cors(corsOptions));
 }
 
-app.use('/admin', adminRouter);
-app.use('/oauth', loginRouter);
+app.use('/', rootRouter);
 
 app.use((req, res, next) => {
   next(createError(404, ERROR_MSG.REQUEST_NOT_FOUND));
diff --git a/server/constants/url.js b/server/constants/url.js
@@ -2,7 +2,7 @@ const clientID = process.env.NODE_ENV === 'production' ? process.env.PRODUCTION_
 const clientSecret = process.env.NODE_ENV === 'production' ? process.env.PRODUCTION_CLIENT_SECRET : process.env.LOCAL_CLIENT_SECRET;
 
 const URL = {
-  LOCAL_ORIGIN: 'http://localhost:3006/',
+  LOCAL_ORIGIN: 'http://localhost:3006',
   LOCAL_REACT_OAUTH: 'http://localhost:3006/oauth',
   PRODUCTION_REACT_OAUTH: '/oauth',
   LOCAL_REACT_LOBBY: 'http://localhost:3006/lobby',
diff --git a/server/routes/index.js b/server/routes/index.js
@@ -0,0 +1,10 @@
+import express from 'express';
+import loginRouter from './login';
+import adminRouter from './admin';
+
+const router = express.Router();
+
+router.use('/admin', adminRouter);
+router.use('/oauth', loginRouter);
+
+export default router;
diff --git a/server/test/client.js b/server/test/client.js
@@ -0,0 +1,47 @@
+class Client {
+  constructor() {
+    this.indexX = null;
+    this.indexY = null;
+    this.roomId = '';
+    this.socket = null;
+  }
+
+  getIndexes() {
+    return [this.indexX, this.indexY];
+  }
+
+  setIndexes([indexX, indexY]) {
+    this.indexX = indexX;
+    this.indexY = indexY;
+  }
+
+  getRoomId() {
+    return this.roomId;
+  }
+
+  setRoomId(roomId) {
+    this.roomId = roomId;
+  }
+
+  setSocket(socket) {
+    this.socket = socket;
+  }
+
+  once(event, callback) {
+    this.socket.once(event, callback);
+  }
+
+  emit(event, data) {
+    this.socket.emit(event, data);
+  }
+
+  isConnected() {
+    return this.socket.connected;
+  }
+
+  disconnect() {
+    this.socket.disconnect();
+  }
+}
+
+export default Client;
diff --git a/server/test/mock.js b/server/test/mock.js
@@ -1,4 +1,9 @@
 export default {
-  ENTER_RESPONSE_KEYS: ['characterList', 'isGameStarted', 'isOwner', 'timeLimit'],
+  ENTER_RESPONSE_KEYS: ['characterList', 'isOwner', 'roomName'],
   MOVE_RESPONSE_KEYS: ['canMove', 'nickname', 'direction', 'newIndexX', 'newIndexY'],
+  ROOM_INFO_KEYS: ['id', 'name', 'numOfUsers', 'isEnterable'],
+  KNOCK_ROOM_KEYS: ['isEnterable', 'roomId', 'message'],
+  START_ROUND_KEYS: ['question', 'timeLimit', 'characterList'],
+  UPDATE_PLAYER_NUM_KEYS: ['numOfPlayer', 'numOfViewer'],
+  CHAT_MESSAGE_KEYS: ['nickname', 'message'],
 };
diff --git a/server/test/socket-server.test.js b/server/test/socket-server.test.js
@@ -1,63 +1,187 @@
 import mock from './mock';
+import Client from './client';
 
-const { ENTER_RESPONSE_KEYS, MOVE_RESPONSE_KEYS } = mock;
+const {
+  ENTER_RESPONSE_KEYS, MOVE_RESPONSE_KEYS, ROOM_INFO_KEYS,
+  KNOCK_ROOM_KEYS, START_ROUND_KEYS, CHAT_MESSAGE_KEYS,
+} = mock;
 
 const ioClient = require('socket.io-client');
 const http = require('http');
 const { app, socketIo } = require('../bin/app').default;
 
-let socket;
 let httpServer;
 let httpServerAddr;
 
-describe('socket.io test', () => {
-  beforeAll(() => {
-    httpServer = http.createServer(app).listen('5001');
-    socketIo.attach(httpServer);
-    httpServerAddr = httpServer.address();
+const roomName = 'test room name';
+const ownerClient = new Client();
+const playerClient = new Client();
+const LEFT = 1;
 
-    socket = ioClient.connect(`http://[${httpServerAddr.address}]:${httpServerAddr.port}`, {
-      'reconnection delay': 0,
-      'reopen delay': 0,
-      'force new connection': true,
-      transports: ['websocket'],
+beforeAll(() => {
+  httpServer = http.createServer(app).listen('5001');
+  socketIo.attach(httpServer);
+  httpServerAddr = httpServer.address();
+
+  const connectUrl = `http://[${httpServerAddr.address}]:${httpServerAddr.port}`;
+  const connectOption = {
+    'reconnection delay': 0,
+    'reopen delay': 0,
+    'force new connection': true,
+    transports: ['websocket'],
+  };
+
+  const ownerSocket = ioClient.connect(connectUrl, connectOption);
+  const playerSocket = ioClient.connect(connectUrl, connectOption);
+
+  ownerClient.setSocket(ownerSocket);
+  playerClient.setSocket(playerSocket);
+});
+
+afterAll(() => {
+  if (ownerClient.isConnected()) {
+    ownerClient.disconnect();
+  }
+
+  if (playerClient.isConnected()) {
+    playerClient.disconnect();
+  }
+
+  socketIo.close();
+  httpServer.close();
+});
+
+describe('socket.io connect test', () => {
+  test('owner client connect test', (done) => {
+    ownerClient.once('connect', () => done());
+  });
+
+  test('player client connect test', (done) => {
+    playerClient.once('connect', () => done());
+  });
+});
+
+describe('lobby event test', () => {
+  test('[EMIT] owner client \'enter_lobby\' event test', (done) => {
+    ownerClient.once('enter_lobby', (message) => {
+      expect(message).toEqual([]);
+      done();
     });
+    ownerClient.emit('enter_lobby');
   });
 
-  afterAll(() => {
-    if (socket.connected) {
-      socket.disconnect();
-    }
-    socketIo.close();
-    httpServer.close();
+  test('[EMIT] owner client \'create_room\' event test', (done) => {
+    ownerClient.once('create_room', (message) => {
+      expect(typeof message).toEqual('string');
+      ownerClient.setRoomId(message);
+      done();
+    });
+    ownerClient.emit('create_room', roomName);
   });
 
-  test('connect test', (done) => {
-    socket.on('connect', () => {
+  test('[EMIT] player client \'enter_lobby\' event test2', (done) => {
+    playerClient.once('enter_lobby', (message) => {
+      expect(ROOM_INFO_KEYS).toEqual(expect.arrayContaining(Object.keys(message[0])));
       done();
     });
+    playerClient.emit('enter_lobby');
   });
 
-  test('[EMIT] \'enter_room\' event test', (done) => {
-    socket.once('enter_room', (message) => {
+  test('[EMIT] player client \'knock_room\' event test2', (done) => {
+    playerClient.once('knock_room', (message) => {
+      expect(KNOCK_ROOM_KEYS).toEqual(expect.arrayContaining(Object.keys(message)));
+      expect(message[KNOCK_ROOM_KEYS[0]]).toBeTruthy();
+      done();
+    });
+    const roomId = ownerClient.getRoomId();
+    playerClient.emit('knock_room', roomId);
+  });
+});
+
+describe('room event test', () => {
+  test('[EMIT] owner client \'enter_room\' event test2', (done) => {
+    ownerClient.once('enter_room', (message) => {
       expect(ENTER_RESPONSE_KEYS).toEqual(expect.arrayContaining(Object.keys(message)));
+      expect(message.isOwner).toBeTruthy();
+      expect(message.roomName).toBe(roomName);
+      message.characterList.forEach(({ isMine, indexX, indexY }) => {
+        if (isMine) ownerClient.setIndexes([indexX, indexY]);
+      });
       done();
     });
-    socket.emit('enter_room', 1);
+    const roomId = ownerClient.getRoomId();
+    ownerClient.emit('enter_room', roomId);
   });
 
-  test('\'move\' event test', (done) => {
-    socket.once('move', (message) => {
-      if (!message.canMove) done();
+  test('[EMIT] player client \'enter_room\' event test2', (done) => {
+    const roomId = ownerClient.getRoomId();
+    playerClient.once('enter_room', (message) => {
+      expect(ENTER_RESPONSE_KEYS).toEqual(expect.arrayContaining(Object.keys(message)));
+      expect(message.isOwner).toBeFalsy();
+      expect(message.roomName).toBe(roomName);
+      playerClient.setRoomId(roomId);
+      message.characterList.forEach(({ isMine, indexX, indexY }) => {
+        if (isMine) playerClient.setIndexes([indexX, indexY]);
+      });
+      done();
+    });
+    playerClient.emit('enter_room', roomId);
+  });
 
+  test('[EMIT] owner client \'chat_message\' event test1', (done) => {
+    playerClient.once('chat_message', (message) => {
+      expect(CHAT_MESSAGE_KEYS).toEqual(expect.arrayContaining(Object.keys(message)));
+      expect('test message').toBe(message.message);
+      done();
+    });
+    ownerClient.emit('chat_message', 'test message');
+  });
+});
+
+describe('move event test', () => {
+  test('[EMIT] owner client \'move\' event test', (done) => {
+    let expectedCanMove = true;
+    const [ownerIndexX, ownerIndexY] = ownerClient.getIndexes();
+    const [playerIndexX, playerIndexY] = playerClient.getIndexes();
+    let newOwnerIndexX = ownerIndexX;
+    if (ownerIndexX === 0) expectedCanMove = false;
+    if (ownerIndexX - playerIndexX === 1 && ownerIndexY === playerIndexY) expectedCanMove = false;
+    if (expectedCanMove) newOwnerIndexX -= 1;
+
+    ownerClient.once('move', (message) => {
       expect(MOVE_RESPONSE_KEYS).toEqual(expect.arrayContaining(Object.keys(message)));
+      expect(expectedCanMove).toBe(message.canMove);
+      if (message.canMove) {
+        expect(newOwnerIndexX).toBe(message.newIndexX);
+        done();
+      }
       done();
     });
-    socket.emit('move', 0);
+    ownerClient.emit('move', LEFT);
   });
+});
 
-  test('[EMIT] \'leave_room\' event test', (done) => {
-    socket.once('leave_room', () => done());
-    socket.emit('leave_room', 1);
+describe('game event test', () => {
+  test('[EMIT] owner client \'start game\' event test', (done) => {
+    ownerClient.once('start_game', () => done());
+    ownerClient.emit('start_game');
+  });
+
+  test('[EMIT] player client \'start game\' event test', (done) => {
+    playerClient.once('start_game', () => done());
+  });
+
+  test('[EMIT] owner client \'start round\' event test', (done) => {
+    ownerClient.once('start_round', (message) => {
+      expect(START_ROUND_KEYS).toEqual(expect.arrayContaining(Object.keys(message)));
+      done();
+    });
+  });
+
+  test('[EMIT] player client \'start round\' event test', (done) => {
+    playerClient.once('start_round', (message) => {
+      expect(START_ROUND_KEYS).toEqual(expect.arrayContaining(Object.keys(message)));
+      done();
+    });
   });
 });
