From 663a16b63bdc4fd7720e62e5640b7a61a24ef098 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 22:12:14 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[fix]=20#52=20=EC=A2=8B=EC=95=84=EC=9A=94?= =?UTF-8?q?=20=ED=86=A0=EA=B8=80=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/SleepyBoard/content.tsx | 17 +++++++---------- .../component/SleepyBoard/sleepyboard.styled.ts | 4 ++-- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/frontend/src/component/SleepyBoard/content.tsx b/frontend/src/component/SleepyBoard/content.tsx index 61a81ad..5bd680a 100644 --- a/frontend/src/component/SleepyBoard/content.tsx +++ b/frontend/src/component/SleepyBoard/content.tsx @@ -4,29 +4,26 @@ import * as style from './sleepyboard.styled'; import { calcTime } from './util'; const Content = ({ data }: { data: any }) => { - // const { user, , timestamp, category, description, like, url } = data; 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 +44,7 @@ const Content = ({ data }: { data: any }) => { data-articleid={id} type="button" onClick={handleLike} - css={style.likeBtn(!!isLike)}> + css={style.likeBtn(isLiked)}> ); }; 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; } From a9ee3a3e5d2aa8965c3cd9d9dcfb070226770c31 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 22:53:50 +0900 Subject: [PATCH 2/5] =?UTF-8?q?[fix]=20#83=20=EA=B2=8C=EC=9E=84=EC=9D=B4?= =?UTF-8?q?=20=EC=99=84=EB=A3=8C=EB=90=9C=20=EC=9D=B4=ED=9B=84=20=EB=8C=80?= =?UTF-8?q?=EA=B8=B0=ED=99=94=EB=A9=B4=20=EC=97=86=EC=95=A0=EC=A4=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Chat/index.tsx | 2 +- frontend/src/component/Game/game.ts | 2 ++ frontend/src/page/Town/index.tsx | 17 ++++++++++------- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/frontend/src/component/Chat/index.tsx b/frontend/src/component/Chat/index.tsx index d0fd0ae..82cecdf 100644 --- a/frontend/src/component/Chat/index.tsx +++ b/frontend/src/component/Chat/index.tsx @@ -5,7 +5,7 @@ import Input from './Input'; import { calcTimeFromMs } from './util'; const Chat = () => { - const [isExtend, setIsExtend] = useState(true); + const [isExtend, setIsExtend] = useState(false); const [chatDatas, setChatDatas] = useState([]); // 채팅 업데이트 diff --git a/frontend/src/component/Game/game.ts b/frontend/src/component/Game/game.ts index d674b2c..78584be 100644 --- a/frontend/src/component/Game/game.ts +++ b/frontend/src/component/Game/game.ts @@ -85,6 +85,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() { 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 ( From 1682648d36a7fa73842af30733947b528c74b1ac Mon Sep 17 00:00:00 2001 From: JJongBin Date: Sun, 11 Dec 2022 23:56:16 +0900 Subject: [PATCH 3/5] =?UTF-8?q?[refactor]=20any=20=ED=83=80=EC=9E=85=20ts?= =?UTF-8?q?=EC=9D=98=20type=EC=9D=84=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=97=AC=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Chat/ChatContent.tsx | 3 +- frontend/src/component/Chat/ChatMessage.tsx | 11 +-- frontend/src/component/Chat/index.tsx | 7 +- frontend/src/component/Chat/util.ts | 4 +- .../component/Game/Phaser/Player/myPlayer.ts | 7 +- .../Game/Phaser/Player/otherPlayer.ts | 3 +- frontend/src/component/Game/game.ts | 21 ++--- frontend/src/component/Game/util.ts | 44 ++++++++--- frontend/src/component/Info/Users.tsx | 3 +- .../src/component/Sidebar/Chat/ChatList.tsx | 6 +- .../component/Sidebar/Chat/ChatMessage.tsx | 3 +- .../src/component/Sidebar/Chat/ChatRoom.tsx | 3 +- .../src/component/Sidebar/Chat/Chatting.tsx | 8 +- frontend/src/component/Sidebar/Chat/util.ts | 3 +- .../component/SleepyBoard/RankContainer.tsx | 13 ++-- .../SleepyBoard/SleepyBoardContainer.tsx | 6 +- .../src/component/SleepyBoard/content.tsx | 3 +- frontend/src/component/SleepyBoard/util.ts | 2 +- frontend/src/store/atom/user.ts | 4 +- frontend/src/types/types.ts | 76 +++++++++++++++++++ 20 files changed, 174 insertions(+), 56 deletions(-) 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 (
    - {chatDatas.map((data: any, idx: any) => ( + {chatDatas.map((data, idx: number) => ( ))}
diff --git a/frontend/src/component/Chat/index.tsx b/frontend/src/component/Chat/index.tsx index 82cecdf..fecdcdf 100644 --- a/frontend/src/component/Chat/index.tsx +++ b/frontend/src/component/Chat/index.tsx @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { chatType } from '../../types/types'; import * as style from './chat.styled'; import ChatMessage from './ChatMessage'; import Input from './Input'; @@ -6,14 +7,14 @@ import { calcTimeFromMs } from './util'; const Chat = () => { const [isExtend, setIsExtend] = useState(false); - const [chatDatas, setChatDatas] = useState([]); + const [chatDatas, setChatDatas] = useState([]); // 채팅 업데이트 - 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 78584be..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(); @@ -213,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; @@ -225,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; @@ -238,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/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/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([]); + const [roomList, setRoomList] = useState([]); 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 }) => {
    {isLoaded && (roomList.length ? ( - roomList.map((data: any) => ( + roomList.map(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}>
    - {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([]); + const [rank, setRank] = useState([]); 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 = () => {
    - {dateList.map((date: any, idx: number) => ( + {dateList.map((date, idx: number) => (
      - {rank.map((user: any, idx: number) => { + {rank.map((user, idx: number) => { if (idx >= 3) return; return (
    • @@ -73,7 +74,7 @@ const RankContainer = () => { })}
      - {rank.map((user: any, idx: number) => { + {rank.map((user, idx: number) => { if (idx < 3) return; return (
    • 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([]); + const [board, setBoard] = useState([]); 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)}>
        - {board.map((data: any) => ( + {board.map(data => ( ))}
      diff --git a/frontend/src/component/SleepyBoard/content.tsx b/frontend/src/component/SleepyBoard/content.tsx index 5bd680a..6a9bc73 100644 --- a/frontend/src/component/SleepyBoard/content.tsx +++ b/frontend/src/component/SleepyBoard/content.tsx @@ -1,9 +1,10 @@ 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 Content = ({ data }: { data: boardType }) => { const avatar = 'data:image/png;base64,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'; const image = 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/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({ 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; +}; From 9a65e16edf05a47a7f22842c770cca2071515661 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Mon, 12 Dec 2022 00:13:26 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[fix]=20#179=20=EC=B2=98=EC=9D=8C=20?= =?UTF-8?q?=EC=A0=91=EC=86=8D=20=EC=8B=9C=20=EB=8F=84=EC=9B=80=EB=A7=90=20?= =?UTF-8?q?=EB=82=98=EC=98=A4=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Info/Help.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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); } From ce92ceacc00065e421b29dc09c0817d17b4b4924 Mon Sep 17 00:00:00 2001 From: JJongBin Date: Mon, 12 Dec 2022 00:15:18 +0900 Subject: [PATCH 5/5] =?UTF-8?q?[design]=20#179=20=EB=8F=84=EC=9B=80?= =?UTF-8?q?=EB=A7=90=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=B0=94=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/Info/info.styled.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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; } `;