Merge pull request #183 from JJongBin/develop

에러 수정 및 타입 추가

frontend/src/component/Chat/ChatContent.tsx

@@ -1,6 +1,7 @@
+import { chatType } from '../../types/types';
 import { chat, chatTime, chatUser, info } from './chat.styled';
 
-const ChatContent = ({ data }: { data: any }) => {
+const ChatContent = ({ data }: { data: chatType }) => {
   const { type, timestamp, nickname, message } = data;
 
   return (

frontend/src/component/Chat/ChatMessage.tsx

@@ -3,6 +3,7 @@ import * as style from './chat.styled';
 import { useRecoilValue } from 'recoil';
 import { socketState } from '../../store/atom/socket';
 import ChatContent from './ChatContent';
+import { chatType, userType } from '../../types/types';
 
 const ChatMessage = ({
   updateChat,
@@ -12,7 +13,7 @@ const ChatMessage = ({
 }: {
   updateChat: Function;
   isExtend: boolean;
-  chatDatas: any;
+  chatDatas: chatType[];
   setChatDatas: Function;
 }) => {
   const socket = useRecoilValue(socketState);
@@ -26,11 +27,11 @@ const ChatMessage = ({
     }
 
     // 다른 사람의 채팅받기
-    socket.on('publicChat', (chat: any) => {
+    socket.on('publicChat', (chat: chatType) => {
       updateChat(chat);
     });
 
-    socket.on('userCreated', (data: any) => {
+    socket.on('userCreated', (data: userType) => {
       const chat = {
         type: 'info',
         nickname: data.nickname,
@@ -40,7 +41,7 @@ const ChatMessage = ({
       updateChat(chat);
     });
 
-    socket.on('userLeaved', (data: any) => {
+    socket.on('userLeaved', (data: userType) => {
       const chat = {
         type: 'info',
         nickname: data.nickname,
@@ -66,7 +67,7 @@ const ChatMessage = ({
   return (
     <div css={style.chatTextWrapper(isExtend)} ref={chatRef}>
       <ul css={style.chatText}>
-        {chatDatas.map((data: any, idx: any) => (
+        {chatDatas.map((data, idx: number) => (
           <ChatContent data={data} key={idx} />
         ))}
       </ul>

frontend/src/component/Chat/index.tsx

@@ -1,19 +1,20 @@
 import { useState } from 'react';
+import { chatType } from '../../types/types';
 import * as style from './chat.styled';
 import ChatMessage from './ChatMessage';
 import Input from './Input';
 import { calcTimeFromMs } from './util';
 
 const Chat = () => {
-  const [isExtend, setIsExtend] = useState(true);
-  const [chatDatas, setChatDatas] = useState<any[]>([]);
+  const [isExtend, setIsExtend] = useState(false);
+  const [chatDatas, setChatDatas] = useState<chatType[]>([]);
 
   // 채팅 업데이트
-  const updateChat = (chat: any) => {
+  const updateChat = (chat: chatType) => {
     chat.timestamp = calcTimeFromMs(chat.timestamp);
 
     sessionStorage.setItem('chat', JSON.stringify([...chatDatas, chat]));
-    setChatDatas((chatDatas: any) => [...chatDatas, chat]);
+    setChatDatas(chatDatas => [...chatDatas, chat]);
   };
 
   // 채팅창 크기 변경

frontend/src/component/Chat/util.ts

@@ -1,4 +1,6 @@
-export const calcTimeFromMs = (ms: number) => {
+export const calcTimeFromMs = (ms: number | string) => {
+  if (typeof ms === 'string') return '';
+
   const date = new Date(ms);
   const h = date.getHours().toString().padStart(2, '0');
   const m = date.getMinutes().toString().padStart(2, '0');

frontend/src/component/Game/Phaser/Player/myPlayer.ts

@@ -85,7 +85,12 @@ export class MyPlayer extends Player {
 
         sortHeldDirection(this, cursors);
         if (this.heldDirection.length) {
-          const move: any = calcMoveToPos(this, this.heldDirection);
+          const move: { x: number; y: number } | undefined = calcMoveToPos(
+            this,
+            this.heldDirection
+          );
+          if (!move) return;
+
           this.getBody().setVelocity(move.x * this.speed, move.y * this.speed);
 
           if (move.x !== 0) {

frontend/src/component/Game/Phaser/Player/otherPlayer.ts

@@ -1,8 +1,9 @@
+import { userType } from '../../../../types/types';
 import { changeDirection, changePosition, changeState } from '../../util';
 import { Player } from './player';
 
 export class OtherPlayer extends Player {
-  constructor(scene: Phaser.Scene, data: any) {
+  constructor(scene: Phaser.Scene, data: userType) {
     super(scene, data.x, data.y, data.id, data.characterName, data.nickname);
   }
   update(state: string, x: number, y: number, direction: string) {

frontend/src/component/Game/game.ts

@@ -16,7 +16,7 @@ import rollImg from '../../assets/character/roll/roll.png';
 import jumpImg from '../../assets/character/jump/jump.png';
 import attackImg from '../../assets/character/attack/attack.png';
 import attackTool from '../../assets/character/tool/attack.png';
-import { stringObjectType } from '../../types/types';
+import { gameInitType, stringObjectType, userType } from '../../types/types';
 
 const characterImg: stringObjectType = {
   wait: waitImg,
@@ -32,7 +32,7 @@ export default class Game extends Phaser.Scene {
   otherPlayer: { [key: string]: OtherPlayer };
   socket?: Socket;
   autoPlay: boolean;
-  townLayer: any;
+  townLayer?: Phaser.Tilemaps.TilemapLayer;
 
   constructor(config: Phaser.Types.Core.GameConfig) {
     super(config);
@@ -44,7 +44,7 @@ export default class Game extends Phaser.Scene {
   }
 
   init() {
-    emitter.on('init', (data: any) => {
+    emitter.on('init', (data: gameInitType) => {
       this.socket = data.socket.connect();
 
       this.myPlayer = new MyPlayer(
@@ -63,7 +63,8 @@ export default class Game extends Phaser.Scene {
       //   collidingTileColor: new Phaser.Display.Color(243, 234, 48, 255),
       // });
 
-      this.physics.add.collider(this.myPlayer, this.townLayer);
+      if (this.townLayer)
+        this.physics.add.collider(this.myPlayer, this.townLayer);
 
       this.socket?.on('connect', () => {
         this.socketInit();
@@ -85,6 +86,8 @@ export default class Game extends Phaser.Scene {
       if (this.myPlayer) this.myPlayer.isCanMove = !checkInput;
       this.input.keyboard.manager.enabled = !checkInput;
     };
+
+    emitter.emit('game-start');
   }
 
   preload() {
@@ -211,10 +214,10 @@ export default class Game extends Phaser.Scene {
   socketInit() {
     if (!this.socket) return;
 
-    this.socket.on('userInitiated', (data: any) => {
+    this.socket.on('userInitiated', (data: userType[]) => {
       if (!Array.isArray(data)) data = [data];
 
-      data.forEach((user: any) => {
+      data.forEach((user: userType) => {
         const id = user.id.toString().trim();
         if (this.myPlayer?.id === id) return;
         if (this.otherPlayer[id]) return;
@@ -223,26 +226,26 @@ export default class Game extends Phaser.Scene {
       });
     });
 
-    this.socket.on('userCreated', (user: any) => {
+    this.socket.on('userCreated', (user: userType) => {
       const id = user.id.toString().trim();
       this.otherPlayer[id] = new OtherPlayer(this, user);
     });
 
-    this.socket.on('move', (data: any) => {
+    this.socket.on('move', (data: userType) => {
       const id = data.id.toString().trim();
 
       if (!this.otherPlayer[id]) return;
       const { state, x, y, direction } = data;
       this.otherPlayer[id].update(state, x, y, direction);
     });
 
-    this.socket.on('userLeaved', (data: any) => {
+    this.socket.on('userLeaved', (data: userType) => {
       const id = data.id.toString().trim();
       this.otherPlayer[id].delete();
       delete this.otherPlayer[id];
     });
 
-    this.socket.on('userDataChanged', (data: any) => {
+    this.socket.on('userDataChanged', (data: userType) => {
       const { id, nickname, characterName } = data;
       this.otherPlayer[id].updateNickname(nickname);
       this.otherPlayer[id].updateHair(characterName);

frontend/src/component/Game/util.ts

@@ -1,7 +1,10 @@
+import { MyPlayer } from './Phaser/Player/myPlayer';
+import { OtherPlayer } from './Phaser/Player/otherPlayer';
+
 const responsiveness = 5;
 
-export const changeState = (player: any) => {
-  if (!player.character || !player.hair) return;
+export const changeState = (player: MyPlayer | OtherPlayer) => {
+  if (!player.character || !player.hair || !player.dust || !player.tool) return;
 
   player.character.play(`character-${player.state}`);
   player.hair.play(`${player.hairName}-${player.state}`);
@@ -22,8 +25,11 @@ export const changeState = (player: any) => {
   }
 };
 
-export const changeDirection = (player: any, direction: string) => {
-  if (!player.character || !player.hair) return;
+export const changeDirection = (
+  player: MyPlayer | OtherPlayer,
+  direction: string
+) => {
+  if (!player.character || !player.hair || !player.dust || !player.tool) return;
   if (player.direction === direction) return;
 
   player.character.toggleFlipX();
@@ -34,8 +40,11 @@ export const changeDirection = (player: any, direction: string) => {
   player.direction = direction;
 };
 
-export const calcMoveToPos = (player: any, dir: string[]) => {
-  if (!player.character || !player.hair) return;
+export const calcMoveToPos = (
+  player: MyPlayer | OtherPlayer,
+  dir: string[]
+) => {
+  if (!player.character || !player.hair || !player.dust || !player.tool) return;
 
   const move = { x: 0, y: 0 };
   const leftIdx = dir.indexOf('left');
@@ -58,8 +67,19 @@ export const calcMoveToPos = (player: any, dir: string[]) => {
   return move;
 };
 
-export const changePosition = (player: any, x: number, y: number) => {
-  if (!player.character || !player.hair) return;
+export const changePosition = (
+  player: MyPlayer | OtherPlayer,
+  x: number,
+  y: number
+) => {
+  if (
+    !player.character ||
+    !player.hair ||
+    !player.dust ||
+    !player.tool ||
+    !player.nicknameText
+  )
+    return;
 
   player.x += x;
   player.y += y;
@@ -75,16 +95,16 @@ export const changePosition = (player: any, x: number, y: number) => {
   player.dust.setPosition(player.x + editPosNum, player.y + 5);
 };
 
-export const sortHeldDirection = (scene: any, cursors: any) => {
+export const sortHeldDirection = (player: MyPlayer, cursors: any) => {
   const directions = ['left', 'right', 'up', 'down'];
 
   directions.forEach((dir: string) => {
-    const idx = scene.heldDirection.indexOf(dir);
+    const idx = player.heldDirection.indexOf(dir);
 
     if (cursors[dir].isDown && idx === -1) {
-      scene.heldDirection.push(dir);
+      player.heldDirection.push(dir);
     } else if (cursors[dir].isUp && idx > -1) {
-      scene.heldDirection.splice(idx, 1);
+      player.heldDirection.splice(idx, 1);
     }
   });
 };

frontend/src/component/Info/Help.tsx

@@ -31,7 +31,8 @@ const Help = () => {
 
   useEffect(() => {
     const openHelp = localStorage.getItem('openHelp');
-    if (openHelp === 'open') {
+
+    if (openHelp !== 'close') {
       setIsShowModal(true);
       isSetOpen(true);
     }

frontend/src/component/Info/Users.tsx

@@ -3,13 +3,14 @@ import users from '../../assets/icon/users.svg';
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { socketState } from '../../store/atom/socket';
+import { userType } from '../../types/types';
 
 const Users = () => {
   const socket = useRecoilValue(socketState);
   const [userCnt, setUseCnt] = useState(0);
 
   useEffect(() => {
-    socket.on('userInitiated', (data: any) => {
+    socket.on('userInitiated', (data: userType[]) => {
       setUseCnt(data.length);
     });
 

frontend/src/component/Info/info.styled.ts

@@ -117,7 +117,14 @@ export const content = css`
   padding: 5px;
 
   ::-webkit-scrollbar {
-    display: none;
+    width: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.1);
+    background-clip: padding-box;
+    border: 2px solid transparent;
+    border-radius: 10px;
   }
 `;
 

frontend/src/component/Sidebar/Chat/ChatList.tsx

@@ -5,10 +5,11 @@ import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { socketState } from '../../../store/atom/socket';
 import axios from 'axios';
+import { chatRoomType } from '../../../types/types';
 
 const ChatList = ({ setChatTarget }: { setChatTarget: Function }) => {
   const socket = useRecoilValue(socketState);
-  const [roomList, setRoomList] = useState<any[]>([]);
+  const [roomList, setRoomList] = useState<chatRoomType[]>([]);
   const [isLoaded, setIsLoaded] = useState(false);
   const [isClose, setIsClose] = useState(false); // 애니메이션
 
@@ -18,6 +19,7 @@ const ChatList = ({ setChatTarget }: { setChatTarget: Function }) => {
       try {
         const { data } = await axios('/api/chat/roomList');
 
+        console.log(data);
         setRoomList(() => data);
         setIsLoaded(true);
       } catch (e) {}
@@ -53,7 +55,7 @@ const ChatList = ({ setChatTarget }: { setChatTarget: Function }) => {
       <ul css={chatWrapper(isClose)} onClick={selectChatRoom}>
         {isLoaded &&
           (roomList.length ? (
-            roomList.map((data: any) => (
+            roomList.map(data => (
               <ChatRoom key={data.targetUserId} data={data} />
             ))
           ) : (

frontend/src/component/Sidebar/Chat/ChatMessage.tsx

@@ -1,9 +1,10 @@
 import { useRecoilValue } from 'recoil';
 import { userState } from '../../../store/atom/user';
+import { privateChatType } from '../../../types/types';
 import * as style from './chat.styled';
 import { calcTimeFromMs } from './util';
 
-const ChatMessage = ({ chat }: { chat: any }) => {
+const ChatMessage = ({ chat }: { chat: privateChatType }) => {
   const user = useRecoilValue(userState);
   const isSender = user.id === chat.senderId;
 

frontend/src/component/Sidebar/Chat/ChatRoom.tsx

@@ -1,8 +1,9 @@
+import { chatRoomType } from '../../../types/types';
 import Content from '../Content';
 import { chatInfo, chatItemWrapper, message } from './chat.styled';
 import { calcTimeFromMs } from './util';
 
-const ChatRoom = ({ data }: { data: any }) => {
+const ChatRoom = ({ data }: { data: chatRoomType }) => {
   const { unReadCount, targetUserNickname, lastMsg } = data;
 
   return (