diff --git a/frontend/src/component/Chat/ChatContent.tsx b/frontend/src/component/Chat/ChatContent.tsx
index 0b44388..d9c3f99 100644
--- a/frontend/src/component/Chat/ChatContent.tsx
+++ b/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 (
diff --git a/frontend/src/component/Chat/ChatMessage.tsx b/frontend/src/component/Chat/ChatMessage.tsx
index f0ee5de..5e438a4 100644
--- a/frontend/src/component/Chat/ChatMessage.tsx
+++ b/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>
diff --git a/frontend/src/component/Chat/index.tsx b/frontend/src/component/Chat/index.tsx
index d0fd0ae..fecdcdf 100644
--- a/frontend/src/component/Chat/index.tsx
+++ b/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]);
   };
 
   // 채팅창 크기 변경
diff --git a/frontend/src/component/Chat/util.ts b/frontend/src/component/Chat/util.ts
index f869712..57cc7dc 100644
--- a/frontend/src/component/Chat/util.ts
+++ b/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');
diff --git a/frontend/src/component/Game/Phaser/Player/myPlayer.ts b/frontend/src/component/Game/Phaser/Player/myPlayer.ts
index 161248e..b5dd3cd 100644
--- a/frontend/src/component/Game/Phaser/Player/myPlayer.ts
+++ b/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) {
diff --git a/frontend/src/component/Game/Phaser/Player/otherPlayer.ts b/frontend/src/component/Game/Phaser/Player/otherPlayer.ts
index 080c86f..9a2e076 100644
--- a/frontend/src/component/Game/Phaser/Player/otherPlayer.ts
+++ b/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) {
diff --git a/frontend/src/component/Game/game.ts b/frontend/src/component/Game/game.ts
index d674b2c..c872004 100644
--- a/frontend/src/component/Game/game.ts
+++ b/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,12 +226,12 @@ 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;
@@ -236,13 +239,13 @@ export default class Game extends Phaser.Scene {
       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);
diff --git a/frontend/src/component/Game/util.ts b/frontend/src/component/Game/util.ts
index 1951040..561e5fd 100644
--- a/frontend/src/component/Game/util.ts
+++ b/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);
     }
   });
 };
diff --git a/frontend/src/component/Info/Help.tsx b/frontend/src/component/Info/Help.tsx
index bfc5b5f..d3d19e0 100644
--- a/frontend/src/component/Info/Help.tsx
+++ b/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);
     }
diff --git a/frontend/src/component/Info/Users.tsx b/frontend/src/component/Info/Users.tsx
index b09ec22..8f8c8dc 100644
--- a/frontend/src/component/Info/Users.tsx
+++ b/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);
     });
 
diff --git a/frontend/src/component/Info/info.styled.ts b/frontend/src/component/Info/info.styled.ts
index 6846e3b..993f100 100644
--- a/frontend/src/component/Info/info.styled.ts
+++ b/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;
   }
 `;
 
diff --git a/frontend/src/component/Sidebar/Chat/ChatList.tsx b/frontend/src/component/Sidebar/Chat/ChatList.tsx
index e4231c5..8a6c292 100644
--- a/frontend/src/component/Sidebar/Chat/ChatList.tsx
+++ b/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} />
             ))
           ) : (
diff --git a/frontend/src/component/Sidebar/Chat/ChatMessage.tsx b/frontend/src/component/Sidebar/Chat/ChatMessage.tsx
index dde7ae0..a288542 100644
--- a/frontend/src/component/Sidebar/Chat/ChatMessage.tsx
+++ b/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;
 
diff --git a/frontend/src/component/Sidebar/Chat/ChatRoom.tsx b/frontend/src/component/Sidebar/Chat/ChatRoom.tsx
index fd55d58..ccadb88 100644
--- a/frontend/src/component/Sidebar/Chat/ChatRoom.tsx
+++ b/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 (
diff --git a/frontend/src/component/Sidebar/Chat/Chatting.tsx b/frontend/src/component/Sidebar/Chat/Chatting.tsx
index 9383439..cff83dd 100644
--- a/frontend/src/component/Sidebar/Chat/Chatting.tsx
+++ b/frontend/src/component/Sidebar/Chat/Chatting.tsx
@@ -8,12 +8,13 @@ import ChatMessage from './ChatMessage';
 import { socketState } from '../../../store/atom/socket';
 import { calcDate } from './util';
 import SeparateTimeLine from './SeparateTimeLine';
+import { chatTargetType, privateChatType } from '../../../types/types';
 
 const Chatting = ({
   chatTarget,
   setChatTarget,
 }: {
-  chatTarget: any;
+  chatTarget: chatTargetType;
   setChatTarget: Function;
 }) => {
   const socket = useRecoilValue(socketState);
@@ -43,7 +44,7 @@ const Chatting = ({
 
     getMessage();
 
-    socket.on('privateChat', (data: any) => {
+    socket.on('privateChat', (data: privateChatType) => {
       setChatDatas(chatDatas => [...chatDatas, data]);
     });
 
@@ -85,7 +86,6 @@ const Chatting = ({
       message: chatValue,
     });
 
-    console.log([...chatDatas, chat]);
     setChatDatas([...chatDatas, chat]);
     setChatValue('');
   };
@@ -107,7 +107,7 @@ const Chatting = ({
             onClick={handleChatRoom}></button>
         </div>
         <ul css={style.textWrapper} ref={chatRef}>
-          {chatDatas.map((data: any, idx: number) => {
+          {chatDatas.map((data, idx: number) => {
             const date = calcDate(data.timestamp);
             const checkSameDate = date === lastDate;
             if (!checkSameDate) lastDate = date;
diff --git a/frontend/src/component/Sidebar/Chat/util.ts b/frontend/src/component/Sidebar/Chat/util.ts
index e30a886..ddc353c 100644
--- a/frontend/src/component/Sidebar/Chat/util.ts
+++ b/frontend/src/component/Sidebar/Chat/util.ts
@@ -1,4 +1,5 @@
-export const calcTimeFromMs = (ms: number, option: boolean) => {
+export const calcTimeFromMs = (ms: number | string, option: boolean) => {
+  if (typeof ms === 'string') return;
   const date = new Date(ms);
 
   if (option) {
diff --git a/frontend/src/component/SleepyBoard/RankContainer.tsx b/frontend/src/component/SleepyBoard/RankContainer.tsx
index 7622f1b..790e7c1 100644
--- a/frontend/src/component/SleepyBoard/RankContainer.tsx
+++ b/frontend/src/component/SleepyBoard/RankContainer.tsx
@@ -3,6 +3,7 @@ import * as style from './sleepyboard.styled';
 
 import axios from 'axios';
 import { formattingWalk } from './util';
+import { walkType } from '../../types/types';
 
 const RankContainer = () => {
   const date = new Date();
@@ -16,11 +17,11 @@ const RankContainer = () => {
 
   const [monthIdx, setMonthIdx] = useState(2);
   const [filter, setFilter] = useState('all');
-  const [rank, setRank] = useState<any>([]);
+  const [rank, setRank] = useState<walkType[]>([]);
   const medals = ['🥇', '🥈', '🥉'];
 
   useEffect(() => {
-    const getRank = async (key: string) => {
+    const getRank = async () => {
       try {
         const { data, status } = await axios(
           `/api/achievement/walk?year=${dateList[monthIdx].year}&month=${dateList[monthIdx].month}&range=${filter}`
@@ -30,7 +31,7 @@ const RankContainer = () => {
       } catch (e) {}
     };
 
-    getRank(filter);
+    getRank();
   }, [filter, monthIdx]);
 
   return (
@@ -52,7 +53,7 @@ const RankContainer = () => {
 
       <div css={style.contentWrapper}>
         <div css={style.selectMonthBox}>
-          {dateList.map((date: any, idx: number) => (
+          {dateList.map((date, idx: number) => (
             <button
               key={date.month}
               css={style.selectMonth(monthIdx === idx)}
@@ -62,7 +63,7 @@ const RankContainer = () => {
           ))}
         </div>
         <ul css={style.topRankContainer}>
-          {rank.map((user: any, idx: number) => {
+          {rank.map((user, idx: number) => {
             if (idx >= 3) return;
             return (
               <li key={idx}>
@@ -73,7 +74,7 @@ const RankContainer = () => {
           })}
         </ul>
         <ul css={style.rankContainer}>
-          {rank.map((user: any, idx: number) => {
+          {rank.map((user, idx: number) => {
             if (idx < 3) return;
             return (
               <li key={idx}>
diff --git a/frontend/src/component/SleepyBoard/SleepyBoardContainer.tsx b/frontend/src/component/SleepyBoard/SleepyBoardContainer.tsx
index 921c23b..53ea282 100644
--- a/frontend/src/component/SleepyBoard/SleepyBoardContainer.tsx
+++ b/frontend/src/component/SleepyBoard/SleepyBoardContainer.tsx
@@ -4,10 +4,11 @@ import Content from './content';
 import like from '../../assets/icon/like.svg';
 import user from '../../assets/icon/user.svg';
 import axios from 'axios';
+import { boardType } from '../../types/types';
 
 const SleepyBoardContainer = () => {
   const [filter, setFilter] = useState('all');
-  const [board, setBoard] = useState<any>([]);
+  const [board, setBoard] = useState<boardType[]>([]);
 
   useEffect(() => {
     getPost(filter);
@@ -16,6 +17,7 @@ const SleepyBoardContainer = () => {
   const getPost = async (key: string) => {
     try {
       const { data, status } = await axios(`/api/board/${key}`);
+
       if (status === 200) setBoard(data);
     } catch (e) {}
   };
@@ -39,7 +41,7 @@ const SleepyBoardContainer = () => {
           css={style.filterBtn(filter === 'me', user)}></button>
       </nav>
       <ul css={style.contentWrapper}>
-        {board.map((data: any) => (
+        {board.map(data => (
           <Content key={data.id} data={data} />
         ))}
       </ul>
diff --git a/frontend/src/component/SleepyBoard/content.tsx b/frontend/src/component/SleepyBoard/content.tsx
index 61a81ad..6a9bc73 100644
--- a/frontend/src/component/SleepyBoard/content.tsx
+++ b/frontend/src/component/SleepyBoard/content.tsx
@@ -1,32 +1,30 @@
 import axios from 'axios';
 import { useEffect, useState } from 'react';
+import { boardType } from '../../types/types';
 import * as style from './sleepyboard.styled';
 import { calcTime } from './util';
 
-const Content = ({ data }: { data: any }) => {
-  // const { user, , timestamp, category, description, like, url } = data;
+const Content = ({ data }: { data: boardType }) => {
   const avatar =
     'data:image/png;base64,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';
   const image =
     'http://image.dongascience.com/Photo/2020/03/5bddba7b6574b95d37b6079c199d7101.jpg';
-  const { id, nickname, created_at, category, content } = data;
+
+  const { id, liked, nickname, created_at, category, content } = data;
   const createdDate = calcTime(created_at);
 
-  const [isLike, setIsLike] = useState('');
+  const [isLiked, setIsLiked] = useState(liked);
 
   const handleLike = async (e: React.MouseEvent) => {
     const elem = e.target as HTMLButtonElement;
     if (!elem.dataset.articleid) return;
 
     const articleId = elem.dataset.articleid;
-    const value = isLike ? '' : articleId;
-
     try {
-      let res;
-      if (value) res = await axios.put(`/api/board/like/${articleId}`);
-      else res = await axios.delete(`/api/board/like/${articleId}`);
+      if (isLiked) await axios.delete(`/api/board/like/${articleId}`);
+      else await axios.put(`/api/board/like/${articleId}`);
 
-      if (res.status === 200) setIsLike(value);
+      setIsLiked(!isLiked);
     } catch (e) {
       console.log(e);
     }
@@ -47,7 +45,7 @@ const Content = ({ data }: { data: any }) => {
         data-articleid={id}
         type="button"
         onClick={handleLike}
-        css={style.likeBtn(!!isLike)}></button>
+        css={style.likeBtn(isLiked)}></button>
     </div>
   );
 };
diff --git a/frontend/src/component/SleepyBoard/sleepyboard.styled.ts b/frontend/src/component/SleepyBoard/sleepyboard.styled.ts
index 91c5b06..5f00a2c 100644
--- a/frontend/src/component/SleepyBoard/sleepyboard.styled.ts
+++ b/frontend/src/component/SleepyBoard/sleepyboard.styled.ts
@@ -153,7 +153,7 @@ export const time = css`
   font-weight: 700;
 `;
 
-export const likeBtn = (isLike: boolean) => css`
+export const likeBtn = (isLiked: boolean) => css`
   position: absolute;
   bottom: 20px;
   right: 20px;
@@ -164,7 +164,7 @@ export const likeBtn = (isLike: boolean) => css`
     display: block;
     width: 25px;
     height: 20px;
-    background-image: url(${isLike ? like : unlike});
+    background-image: url(${isLiked ? like : unlike});
     background-repeat: no-repeat;
     background-size: contain;
   }
diff --git a/frontend/src/component/SleepyBoard/util.ts b/frontend/src/component/SleepyBoard/util.ts
index 6f0daec..8f01ce5 100644
--- a/frontend/src/component/SleepyBoard/util.ts
+++ b/frontend/src/component/SleepyBoard/util.ts
@@ -3,6 +3,6 @@ export const calcTime = (date: string) => {
   return `${time[0]}년 ${time[1]}월 ${time[2]}일`;
 };
 
-export const formattingWalk = (walk: number) => {
+export const formattingWalk = (walk: number | string) => {
   return walk.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 };
diff --git a/frontend/src/page/Town/index.tsx b/frontend/src/page/Town/index.tsx
index 30106c3..dcdf212 100644
--- a/frontend/src/page/Town/index.tsx
+++ b/frontend/src/page/Town/index.tsx
@@ -3,6 +3,7 @@ import { useSetRecoilState, useRecoilValue } from 'recoil';
 import Call from '../../component/Call';
 import Chat from '../../component/Chat';
 import Game from '../../component/Game';
+import { emitter } from '../../component/Game/util';
 import Info from '../../component/Info';
 import Loading from '../../component/Loading';
 import Sidebar from '../../component/Sidebar';
@@ -22,6 +23,15 @@ const Town = () => {
   const isSnowing = useRecoilValue(snowState);
 
   useEffect(() => {
+    emitter.on('game-start', () => {
+      setTimeout(() => {
+        setIsClose(true);
+        setTimeout(() => {
+          setIsLoadingComplete(true);
+        }, 800);
+      }, 500);
+    });
+
     const getDevicePermission = async () => {
       const constraints = { audio: true, video: true };
       const permission = await navigator.mediaDevices.getUserMedia(constraints);
@@ -29,13 +39,6 @@ const Town = () => {
     };
 
     getDevicePermission();
-
-    setTimeout(() => {
-      setIsClose(true);
-      setTimeout(() => {
-        setIsLoadingComplete(true);
-      }, 800);
-    }, 1500);
   }, []);
 
   return (
diff --git a/frontend/src/store/atom/user.ts b/frontend/src/store/atom/user.ts
index 5727f7a..1be7e1f 100644
--- a/frontend/src/store/atom/user.ts
+++ b/frontend/src/store/atom/user.ts
@@ -1,11 +1,11 @@
 import { atom } from 'recoil';
 import { v1 } from 'uuid';
 
-export interface userProps {
+export type userProps = {
   id: string;
   nickname: string;
   hair: string;
-}
+};
 
 export const userState = atom<userProps>({
   key: `userState/${v1()}`,
diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts
index 42d6243..5a7909e 100644
--- a/frontend/src/types/types.ts
+++ b/frontend/src/types/types.ts
@@ -1,3 +1,6 @@
+import { Socket } from 'socket.io-client';
+import { userProps } from '../store/atom/user';
+
 export type childrenType = {
   children: JSX.Element | JSX.Element[];
 };
@@ -5,3 +8,76 @@ export type childrenType = {
 export type stringObjectType = {
   [key: string]: string;
 };
+
+export type chatType = {
+  type: string;
+  timestamp: string;
+  nickname: string | number;
+  message: string;
+};
+
+export type userType = {
+  callingRoom: string;
+  characterName: string;
+  direction: string;
+  exp: number;
+  iat: number;
+  id: string;
+  nickname: string;
+  roomName: string;
+  social: string;
+  state: string;
+  userState: string;
+  walk: number;
+  x: number;
+  y: number;
+};
+
+export type gameInitType = userProps & {
+  socket: Socket;
+};
+
+export type lastMsgType = {
+  id: number;
+  timestamp: string;
+  message: string;
+};
+
+export type chatRoomType = {
+  lastMsg: lastMsgType;
+  roomId: number;
+  targetUserId: string;
+  targetUserNickname: string;
+  unReadCount: number;
+};
+
+export type privateChatType = {
+  id: number;
+  roomId: number;
+  timestamp: string;
+  message: string;
+  senderId: string;
+};
+
+export type chatTargetType = {
+  id: string;
+  nickname: string;
+};
+
+export type boardType = {
+  category: string;
+  content: string;
+  created_at: string;
+  id: number;
+  liked: boolean;
+  nickname: string;
+  userid: string;
+};
+
+export type walkType = {
+  month: number;
+  nickname: string;
+  userid: string;
+  walkcount: string;
+  year: number;
+};