From 51d7bb58995af85e4c37c4dc3adfd7e8cd054ecb Mon Sep 17 00:00:00 2001 From: danggin Date: Fri, 17 Jan 2025 13:37:14 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=90=9B=20fix:=20NavLink=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layout/gameRoomHeader/GameRoomHeader.tsx | 10 ++-- src/components/ui/card/chatting/Chatting.tsx | 7 +-- .../ui/card/chatting/ChattingStyle.ts | 8 +-- src/components/ui/chatInput/ChatInputBox.tsx | 54 ++++++++++++------- src/components/ui/chatInput/chatInputStyle.ts | 8 +++ .../circleBackground/circleBackgroundStyle.ts | 5 +- src/components/ui/modal/Modal.tsx | 14 +---- src/components/ui/modal/modalComponent.tsx | 17 ++++++ src/components/ui/modalContents/Alert.tsx | 31 +++++++++++ src/components/ui/modalContents/alertStyle.ts | 18 +++++++ src/components/ui/profile/Profile.tsx | 3 +- 11 files changed, 124 insertions(+), 51 deletions(-) create mode 100644 src/components/ui/modal/modalComponent.tsx create mode 100644 src/components/ui/modalContents/Alert.tsx create mode 100644 src/components/ui/modalContents/alertStyle.ts diff --git a/src/components/layout/gameRoomHeader/GameRoomHeader.tsx b/src/components/layout/gameRoomHeader/GameRoomHeader.tsx index f69d897..41629ca 100644 --- a/src/components/layout/gameRoomHeader/GameRoomHeader.tsx +++ b/src/components/layout/gameRoomHeader/GameRoomHeader.tsx @@ -20,12 +20,10 @@ export default function GameRoomHeader() { return ( <> - - onClickOut(roomId)}> - 게임방 나가기 - 나가기 - - + onClickOut(roomId)}> + 게임방 나가기 + 나가기 + ); diff --git a/src/components/ui/card/chatting/Chatting.tsx b/src/components/ui/card/chatting/Chatting.tsx index 91f00a7..7a3f0fd 100644 --- a/src/components/ui/card/chatting/Chatting.tsx +++ b/src/components/ui/card/chatting/Chatting.tsx @@ -1,10 +1,5 @@ -import ChatInputBox from "../../chatInput/ChatInputBox"; import * as S from "./ChattingStyle"; -// import { Socket } from "socket.io-client"; - -// export interface IChattingProps { -// socket: Socket | null; -// } +import ChatInputBox from "../../chatInput/ChatInputBox"; export default function ChattingBox() { return ( diff --git a/src/components/ui/card/chatting/ChattingStyle.ts b/src/components/ui/card/chatting/ChattingStyle.ts index e1d04ee..7f6a6ff 100644 --- a/src/components/ui/card/chatting/ChattingStyle.ts +++ b/src/components/ui/card/chatting/ChattingStyle.ts @@ -4,6 +4,7 @@ export const chat = styled.div` position: relative; width: 390px; height: 390px; + padding: 20px; border-radius: 12px; border: 1px solid var(--color-gray-999); box-shadow: 1px 1px 3px 0px #00000080; @@ -15,8 +16,7 @@ export const chat = styled.div` `; export const chatInputBoxContainer = styled.div` - position: absolute; - bottom: 20px; - padding: 0 10px; - width: 100%; + display: flex; + flex-direction: column; + gap: 10px; `; diff --git a/src/components/ui/chatInput/ChatInputBox.tsx b/src/components/ui/chatInput/ChatInputBox.tsx index 4fdbd2d..62377bc 100644 --- a/src/components/ui/chatInput/ChatInputBox.tsx +++ b/src/components/ui/chatInput/ChatInputBox.tsx @@ -1,10 +1,21 @@ import Button from "../button/Button"; import * as S from "./chatInputStyle"; -// import { IChattingProps } from "../card/chatting/Chatting"; -// import { useEffect, useState } from "react"; +import { useSocketStore } from "@store/useSocketStore"; +import { useEffect } from "react"; // import { useParams } from "react-router-dom"; export default function ChatInputBox() { + const { socket } = useSocketStore(); + + useEffect(() => { + if (!socket) { + console.error("Socket is not connected."); + return; + } + }, []); + + console.log("🚀 Socket:", socket); + // const [message, setMessage] = useState(""); // const params = useParams(); // const roomId = Number(params.id); @@ -26,23 +37,26 @@ export default function ChatInputBox() { // }; return ( - - - - - - + <> + + + + + + + + ); } diff --git a/src/components/ui/chatInput/chatInputStyle.ts b/src/components/ui/chatInput/chatInputStyle.ts index 4290bc2..ca77810 100644 --- a/src/components/ui/chatInput/chatInputStyle.ts +++ b/src/components/ui/chatInput/chatInputStyle.ts @@ -1,5 +1,12 @@ import styled from "styled-components"; +export const chatLog = styled.div` + flex-grow: 1; + font-size: 14px; + max-height: 290px; + overflow-y: scroll; +`; + export const chatInput = styled.input` width: 100%; flex-grow: 1; @@ -24,4 +31,5 @@ export const chatInputBox = styled.div` width: 100%; display: flex; gap: 10px; + height: 100%; `; diff --git a/src/components/ui/circleBackground/circleBackgroundStyle.ts b/src/components/ui/circleBackground/circleBackgroundStyle.ts index 65fe959..5c5e054 100644 --- a/src/components/ui/circleBackground/circleBackgroundStyle.ts +++ b/src/components/ui/circleBackground/circleBackgroundStyle.ts @@ -47,7 +47,10 @@ const MovingYellow = keyframes` transform: translate(260%, 320%); } `; -export const Wrapper = styled.div``; +export const Wrapper = styled.div` + max-height: 600px; + overflow: hidden; +`; export const CircleGreen = styled.div` position: absolute; diff --git a/src/components/ui/modal/Modal.tsx b/src/components/ui/modal/Modal.tsx index 53e2a67..caf7341 100644 --- a/src/components/ui/modal/Modal.tsx +++ b/src/components/ui/modal/Modal.tsx @@ -1,21 +1,9 @@ import ModalPortal from "./ModalPortal"; -import FirstSelect from "../modalContents/FirstSelect"; -import MakeRoom from "../modalContents/MakeRoom"; -import BigDeck from "../bigDeck/BigDeck"; -import TurnWaiting from "../modalContents/TurnWaiting"; -import GameWaiting from "../modalContents/GameWaiting"; import { useModalStore } from "../../../store/useModalStore"; import { Inside, ModalFrame, Overlay } from "./modalStyle"; import { useEffect } from "react"; import { useModal } from "@hooks/useModal"; - -const modalComponents: Record = { - firstSelect: , - makeRoom: , - selectWhiteBlack: , - turnWaiting: , - gameWaiting: , -}; +import { modalComponents } from "./modalComponent"; export default function Modal() { const { showModal, currentModal, modalColor } = useModalStore(); diff --git a/src/components/ui/modal/modalComponent.tsx b/src/components/ui/modal/modalComponent.tsx new file mode 100644 index 0000000..36684b3 --- /dev/null +++ b/src/components/ui/modal/modalComponent.tsx @@ -0,0 +1,17 @@ +import FirstSelect from "../modalContents/FirstSelect"; +import MakeRoom from "../modalContents/MakeRoom"; +import BigDeck from "../bigDeck/BigDeck"; +import TurnWaiting from "../modalContents/TurnWaiting"; +import GameWaiting from "../modalContents/GameWaiting"; +import Alert from "../modalContents/Alert"; + +export const modalComponents: Record = { + firstSelect: , + makeRoom: , + selectWhiteBlack: , + turnWaiting: , + gameWaiting: , + GamrRoomJoinConfirm: ( + + ), +}; diff --git a/src/components/ui/modalContents/Alert.tsx b/src/components/ui/modalContents/Alert.tsx new file mode 100644 index 0000000..72e03ac --- /dev/null +++ b/src/components/ui/modalContents/Alert.tsx @@ -0,0 +1,31 @@ +import Button from "../button/Button"; +import { useModal } from "@hooks/useModal"; +import { Container, Message } from "./alertStyle"; + +interface IAlertConfirmProps { + message: string; +} + +export default function Alert({ message }: IAlertConfirmProps) { + const { closeModal } = useModal(); + + const onClickCancel = () => { + closeModal(); + }; + + return ( + + {message} + + + ); +} diff --git a/src/components/ui/modalContents/alertStyle.ts b/src/components/ui/modalContents/alertStyle.ts new file mode 100644 index 0000000..3f50083 --- /dev/null +++ b/src/components/ui/modalContents/alertStyle.ts @@ -0,0 +1,18 @@ +import styled from "styled-components"; + +export const Container = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + gap: 50px; +`; + +export const Message = styled.p` + font-size: 20px; + word-wrap: break-word; + max-width: 400px; + line-height: 1.7rem; + text-align: center; +`; diff --git a/src/components/ui/profile/Profile.tsx b/src/components/ui/profile/Profile.tsx index 9f5c800..ce279f7 100644 --- a/src/components/ui/profile/Profile.tsx +++ b/src/components/ui/profile/Profile.tsx @@ -1,9 +1,10 @@ import * as S from "./profileStyle"; +import myProfileImage from "@assets/images/image_profile_01.svg"; export default function Profile({ nickname }: IprofileProps) { return ( - + {nickname} From 1d1c539a154a05bc8e1e797100b9e9a525c7530c Mon Sep 17 00:00:00 2001 From: danggin Date: Fri, 17 Jan 2025 13:38:07 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=92=84=20style:=20flex-shrink=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/home/homeStyle.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/home/homeStyle.ts b/src/pages/home/homeStyle.ts index c5da5de..1401712 100644 --- a/src/pages/home/homeStyle.ts +++ b/src/pages/home/homeStyle.ts @@ -10,12 +10,14 @@ const basicStyle = css` export const HomeContainer = styled.div` width: 100%; + min-width: 600px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; + flex-shrink: 0; `; export const NavWrapper = styled.nav` From 60d4d2beb2005fc51ee6a6c8385b5a8059ff4738 Mon Sep 17 00:00:00 2001 From: danggin Date: Fri, 17 Jan 2025 13:38:54 +0900 Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=92=A4=20chore:=20=ED=86=A0=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=98=81=EC=97=AD=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/game/GameRoom.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/game/GameRoom.tsx b/src/pages/game/GameRoom.tsx index 10e35c6..ad831d5 100644 --- a/src/pages/game/GameRoom.tsx +++ b/src/pages/game/GameRoom.tsx @@ -164,7 +164,6 @@ export default function GameRoom() { - From 2a8b05b464c19273699d764839ecdb9e31bb02eb Mon Sep 17 00:00:00 2001 From: danggin Date: Fri, 17 Jan 2025 13:39:31 +0900 Subject: [PATCH 4/7] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=83=81=ED=83=9C=EB=A1=9C=20=EB=B0=A9=20?= =?UTF-8?q?=EB=A7=8C=EB=93=A4=EA=B8=B0=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20?= =?UTF-8?q?alert=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/game/gameRoomList.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/pages/game/gameRoomList.tsx b/src/pages/game/gameRoomList.tsx index fb0b527..8025b58 100644 --- a/src/pages/game/gameRoomList.tsx +++ b/src/pages/game/gameRoomList.tsx @@ -17,9 +17,15 @@ export default function GameRoomList() { const { openModal } = useModal(); const { data: gameRooms } = useGetGameRoomList(); console.log("gameRooms✅", gameRooms); + const accessToken = localStorage.getItem("accessToken"); + console.log(accessToken); const onClickModalOpen = () => { - openModal("makeRoom", "white"); + if (!accessToken || accessToken === null) { + openModal("GamrRoomJoinConfirm", "white"); + } else { + openModal("makeRoom", "white"); + } }; return ( From a88210fe3eb357c2dedb63b6e5c8d0a400ad78db Mon Sep 17 00:00:00 2001 From: danggin Date: Fri, 17 Jan 2025 13:39:42 +0900 Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=92=84=20style:=20=EA=B2=8C=EC=9E=84?= =?UTF-8?q?=EB=B0=A9=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/game/gameRoomStyle.ts | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/src/pages/game/gameRoomStyle.ts b/src/pages/game/gameRoomStyle.ts index 7cc6079..aecb6a1 100644 --- a/src/pages/game/gameRoomStyle.ts +++ b/src/pages/game/gameRoomStyle.ts @@ -14,41 +14,33 @@ export const leftContainer = styled.div` display: flex; flex-direction: column; justify-content: space-between; - background-color: yellow; + gap: 30px; `; export const centerContainer = styled.div` height: 100%; width: 100%; - background-color: green; + flex-grow: 1; position: relative; `; export const rightContainer = styled.div` - margin-right: 77px; - padding-bottom: 44px; width: 390px; - height: 100%; display: flex; gap: 40px; flex-direction: column; - justify-content: end; - background-color: blue; + justify-content: space-between; `; export const myDeckBox = styled.div` width: 100%; height: 90px; - gap: 40px; - background-color: purple; -`; - -export const guideBox = styled.div` - width: 100%; - height: 60px; + flex-grow: 1; display: flex; - flex-direction: center; - background-color: red; + justify-content: end; + align-items: flex-end; + flex-wrap: wrap; + color: white; `; export const otherPlayerDeck = styled.div` @@ -57,12 +49,10 @@ export const otherPlayerDeck = styled.div` height: 90px; display: flex; gap: 12px; - background-color: aqua; `; export const selectNumberBox = styled.div` margin-top: 40px; width: 100%; height: 229px; - background-color: black; `; From a75e3ef8fc59c926cf778d526d624fed6934af42 Mon Sep 17 00:00:00 2001 From: danggin Date: Fri, 17 Jan 2025 13:40:37 +0900 Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20import=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/gameRoomHeader/GameRoomHeader.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/layout/gameRoomHeader/GameRoomHeader.tsx b/src/components/layout/gameRoomHeader/GameRoomHeader.tsx index 41629ca..3209248 100644 --- a/src/components/layout/gameRoomHeader/GameRoomHeader.tsx +++ b/src/components/layout/gameRoomHeader/GameRoomHeader.tsx @@ -1,7 +1,6 @@ import iconExit from "@assets/images/icon_close.svg"; -import { NavLink, useNavigate, useParams } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; import { Flex, StyledHeader, TextButton } from "./GameRoomHeaderStyle"; - import { useSocketStore } from "../../../store/useSocketStore"; export default function GameRoomHeader() { From 7f04898f8f1ddca7ff0c61cb4131ae5e50f78987 Mon Sep 17 00:00:00 2001 From: danggin Date: Fri, 17 Jan 2025 14:29:19 +0900 Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EB=B9=8C=EB=93=9C=20?= =?UTF-8?q?=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 --- src/components/ui/modal/Modal.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/ui/modal/Modal.tsx b/src/components/ui/modal/Modal.tsx index c975bc8..caf7341 100644 --- a/src/components/ui/modal/Modal.tsx +++ b/src/components/ui/modal/Modal.tsx @@ -1,14 +1,9 @@ import ModalPortal from "./ModalPortal"; import { useModalStore } from "../../../store/useModalStore"; import { Inside, ModalFrame, Overlay } from "./modalStyle"; -import GuessNumber from "../selectionNumber/GuessNumber"; import { useEffect } from "react"; import { useModal } from "@hooks/useModal"; import { modalComponents } from "./modalComponent"; -import TurnWaiting from "../modalContents/TurnWaiting"; -import GameWaiting from "../modalContents/GameWaiting"; -import SelectTurn from "../modalContents/SelectTurn"; - export default function Modal() { const { showModal, currentModal, modalColor } = useModalStore();