버그 수정 및 좋아요 토글

backend/src/socket/socket.gateway.ts

@@ -65,8 +65,8 @@ export class SocketGateway implements OnGatewayConnection, OnGatewayDisconnect {
 
     client['userData'] = {
       ...userData,
-      x: -25,
-      y: 400,
+      x: 800,
+      y: 800,
       direction: 'right',
       state: 'wait',
       userState: 'on',

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

@@ -4,6 +4,7 @@ import {
   changePosition,
   changeState,
   calcMoveToPos,
+  changeDirection,
 } from '../../util';
 import { Player } from './player';
 
@@ -71,6 +72,9 @@ export class MyPlayer extends Player {
       const move: any = calcMoveToPos(this, this.heldDirection);
       this.getBody().setVelocity(move.x * this.speed, move.y * this.speed);
 
+      const direction = move.x > 0 ? 'right' : 'left';
+      changeDirection(this, direction);
+
       changePosition(this, move.x * this.speed, move.y * this.speed);
     } else {
       this.checkAndSetState('wait');

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

@@ -1,14 +1,16 @@
-import { changePosition, changeState } from '../../util';
+import { changeDirection, changePosition, changeState } from '../../util';
 import { Player } from './player';
 
 export class OtherPlayer extends Player {
   constructor(scene: Phaser.Scene, data: any) {
     super(scene, data.x, data.y, data.id, data.characterName, data.nickname);
   }
-  update(state: string, x: number, y: number) {
+  update(state: string, x: number, y: number, direction: string) {
     const prevState = this.state;
     this.state = state;
 
+    changeDirection(this, direction);
+
     if (this.x !== x || this.y !== y)
       changePosition(this, x - this.x, y - this.y);
     if (prevState !== this.state) changeState(this);

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

@@ -57,7 +57,7 @@ export class Player extends Phaser.Physics.Arcade.Sprite {
     );
 
     scene.physics.add.existing(this);
-    this.getBody().setCollideWorldBounds(true).setSize(64, 64);
+    this.getBody().setCollideWorldBounds(true).setSize(30, 50);
 
     changeState(this);
   }

frontend/src/component/Game/game.ts

@@ -46,19 +46,19 @@ export default class Game extends Phaser.Scene {
 
       this.myPlayer = new MyPlayer(
         this,
-        400,
-        400,
+        800,
+        800,
         data.id,
         data.hair,
         data.nickname,
         data.socket
       );
 
-      const debugGraphics = this.add.graphics().setAlpha(0.7);
-      this.townLayer.renderDebug(debugGraphics, {
-        tileColor: null,
-        collidingTileColor: new Phaser.Display.Color(243, 234, 48, 255),
-      });
+      // const debugGraphics = this.add.graphics().setAlpha(0.7);
+      // this.townLayer.renderDebug(debugGraphics, {
+      //   tileColor: null,
+      //   collidingTileColor: new Phaser.Display.Color(243, 234, 48, 255),
+      // });
 
       this.physics.add.collider(this.myPlayer, this.townLayer);
 
@@ -74,6 +74,13 @@ export default class Game extends Phaser.Scene {
     emitter.on('updateHair', (hair: string) => {
       this.myPlayer?.updateHair(hair);
     });
+
+    window.onclick = (e: MouseEvent) => {
+      const elem = e.target as HTMLElement;
+      const checkInput = elem.tagName === 'INPUT';
+
+      this.input.keyboard.manager.enabled = !checkInput;
+    };
   }
 
   preload() {
@@ -203,7 +210,8 @@ export default class Game extends Phaser.Scene {
       const id = data.id.toString().trim();
 
       if (!this.otherPlayer[id]) return;
-      this.otherPlayer[id].update(data.state, data.x, data.y);
+      const { state, x, y, direction } = data;
+      this.otherPlayer[id].update(state, x, y, direction);
     });
 
     this.socket.on('userLeaved', (data: any) => {

frontend/src/component/Game/util.ts

@@ -15,16 +15,15 @@ export const changeState = (player: any) => {
   }
 };
 
-export const changeDirection = (player: any, moveX: number) => {
+export const changeDirection = (player: any, direction: string) => {
   if (!player.character || !player.hair) return;
-  if (player.direction === 'left' && moveX <= 0) return;
-  if (player.direction === 'right' && moveX >= 0) return;
+  if (player.direction === direction) return;
 
   player.character.toggleFlipX();
   player.hair.toggleFlipX();
   player.dust.toggleFlipX();
 
-  player.direction = player.direction === 'left' ? 'right' : 'left';
+  player.direction = direction;
 };
 
 export const calcMoveToPos = (player: any, dir: string[]) => {
@@ -57,8 +56,6 @@ export const changePosition = (player: any, x: number, y: number) => {
   player.x += x;
   player.y += y;
 
-  changeDirection(player, x);
-
   player.character.setPosition(player.x, player.y);
   player.hair.setPosition(player.x, player.y);
 

frontend/src/component/SleepyBoard/content.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
 import * as style from './sleepyboard.styled';
 import { calcTime } from './util';
 
@@ -8,13 +9,27 @@ const Content = ({ data }: { data: any }) => {
     'data:image/png;base64,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';
   const image =
     'http://image.dongascience.com/Photo/2020/03/5bddba7b6574b95d37b6079c199d7101.jpg';
-  const { nickname, created_at, category, content } = data;
+  const { id, nickname, created_at, category, content } = data;
   const createdDate = calcTime(created_at);
 
-  const [isLike, setIsLike] = useState(false);
+  const [isLike, setIsLike] = useState('');
 
-  const handleLike = () => {
-    setIsLike(!isLike);
+  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 (res.status === 200) setIsLike(value);
+    } catch (e) {
+      console.log(e);
+    }
   };
 
   return (
@@ -29,9 +44,10 @@ const Content = ({ data }: { data: any }) => {
         <div css={style.description}>{content}</div>
       </div>
       <button
+        data-articleid={id}
         type="button"
         onClick={handleLike}
-        css={style.likeBtn(isLike)}></button>
+        css={style.likeBtn(!!isLike)}></button>
     </div>
   );
 };

frontend/src/store/atom/socket.ts

@@ -4,7 +4,9 @@ import { getCookieValue } from '../../page/Main';
 import { v1 } from 'uuid';
 
 const path =
-  location.origin === 'sleepywoods.kr' ? 'sleepywoods.kr' : 'localhost:3333';
+  location.origin === 'sleepywoods.kr'
+    ? 'https//sleepywoods.kr'
+    : 'http//localhost:3333';
 
 export const socketState = atom<Socket>({
   key: `socketState/${v1()}`,