From 4ab431bdfb78cf1af3d69e561dc519afe96fe95b Mon Sep 17 00:00:00 2001 From: dain Date: Thu, 16 Jan 2025 00:39:10 +0900 Subject: [PATCH 01/21] =?UTF-8?q?=F0=9F=92=84=20style:=20=EB=B0=A9=20?= =?UTF-8?q?=EB=A7=8C=EB=93=A4=EA=B8=B0=20=EB=B2=84=ED=8A=BC=EC=97=90=20+?= =?UTF-8?q?=20=EC=95=84=EC=9D=B4=EC=BD=98=20svg=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 | 5 ++++- src/pages/game/gameRoomListStyle.ts | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/pages/game/gameRoomList.tsx b/src/pages/game/gameRoomList.tsx index fa346df..fb0b527 100644 --- a/src/pages/game/gameRoomList.tsx +++ b/src/pages/game/gameRoomList.tsx @@ -1,6 +1,7 @@ import Button from "../../components/ui/button/Button"; import * as S from "./gameRoomListStyle"; import GameRoomCard from "../../components/ui/card/cardList/GameRoomCard"; +import iconPlus from "@assets/images/icon_plus.svg"; import { useGetGameRoomList } from "../../hooks/useQuery"; import { useModal } from "../../hooks/useModal"; @@ -32,7 +33,9 @@ export default function GameRoomList() { width="180px" onClick={onClickModalOpen} > - + 방 만들기 + 더하기 아이콘 + + 방 만들기 diff --git a/src/pages/game/gameRoomListStyle.ts b/src/pages/game/gameRoomListStyle.ts index 26ddf85..d01df38 100644 --- a/src/pages/game/gameRoomListStyle.ts +++ b/src/pages/game/gameRoomListStyle.ts @@ -14,6 +14,10 @@ export const buttonContainer = styled.div` justify-content: end; `; +export const buttonText = styled.span` + margin-left: 10px; +`; + export const gameroomListContainer = styled.div` display: grid; grid-template-columns: repeat(auto-fill, 500px); From 21af2daab2f9dc95cd0da4826b7a64ba2cc05b23 Mon Sep 17 00:00:00 2001 From: dain Date: Thu, 16 Jan 2025 21:11:51 +0900 Subject: [PATCH 02/21] =?UTF-8?q?=E2=9C=A8=20feat:=20=EA=B2=8C=EC=9E=84=20?= =?UTF-8?q?=EC=8B=9C=EC=9E=91=20=EA=B8=B0=EB=8B=A4=EB=A6=AC=EA=B8=B0,=20?= =?UTF-8?q?=EC=83=81=EB=8C=80=20=ED=84=B4=20=EA=B8=B0=EB=8B=A4=EB=A6=AC?= =?UTF-8?q?=EA=B8=B0=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/components/ui/modal/Modal.tsx | 6 ++++ .../ui/modalContents/GameWaiting.tsx | 15 ++++++++++ .../ui/modalContents/TurnWaiting.tsx | 21 ++++++++++++++ .../ui/modalContents/gameWaitingStyle.ts | 25 ++++++++++++++++ .../ui/modalContents/turnWaitingStyle.ts | 29 +++++++++++++++++++ 5 files changed, 96 insertions(+) create mode 100644 src/components/ui/modalContents/GameWaiting.tsx create mode 100644 src/components/ui/modalContents/TurnWaiting.tsx create mode 100644 src/components/ui/modalContents/gameWaitingStyle.ts create mode 100644 src/components/ui/modalContents/turnWaitingStyle.ts diff --git a/src/components/ui/modal/Modal.tsx b/src/components/ui/modal/Modal.tsx index 2578d09..22b24fe 100644 --- a/src/components/ui/modal/Modal.tsx +++ b/src/components/ui/modal/Modal.tsx @@ -3,10 +3,16 @@ import FirstSelect from "../modalContents/FirstSelect"; import MakeRoom from "../modalContents/MakeRoom"; import { useModalStore } from "../../../store/useModalStore"; import { Inside, ModalFrame, Overlay } from "./modalStyle"; +import BigDeck from "../bigDeck/BigDeck"; +import TurnWaiting from "../modalContents/TurnWaiting"; +import GameWaiting from "../modalContents/GameWaiting"; const modalComponents: Record = { firstSelect: , makeRoom: , + selectWhiteBlack: , + turnWaiting: , + gameWaiting: , }; export default function Modal() { diff --git a/src/components/ui/modalContents/GameWaiting.tsx b/src/components/ui/modalContents/GameWaiting.tsx new file mode 100644 index 0000000..ab8eb33 --- /dev/null +++ b/src/components/ui/modalContents/GameWaiting.tsx @@ -0,0 +1,15 @@ +import { Container, Contents, ContentsContainer } from "./gameWaitingStyle"; + +export default function GameWaiting() { + return ( + <> + + {/* 로딩 컴포넌트 */} + + 잠시 후 게임이 시작됩니다. + 조금만 기다려 주세요. 😊 + + + + ); +} diff --git a/src/components/ui/modalContents/TurnWaiting.tsx b/src/components/ui/modalContents/TurnWaiting.tsx new file mode 100644 index 0000000..13518c8 --- /dev/null +++ b/src/components/ui/modalContents/TurnWaiting.tsx @@ -0,0 +1,21 @@ +import imagePuzzle from "@assets/images/icon_puzzle.svg"; +import { + Container, + Contents, + ContentsContainer, + Image, +} from "./turnWaitingStyle"; + +export default function TurnWaiting() { + return ( + <> + + 퍼즐 이미지 + + 상대부터 시작합니다. + 상대의 턴이 끝날때까지 잠시만 기다려 주세요. + + + + ); +} diff --git a/src/components/ui/modalContents/gameWaitingStyle.ts b/src/components/ui/modalContents/gameWaitingStyle.ts new file mode 100644 index 0000000..eb98142 --- /dev/null +++ b/src/components/ui/modalContents/gameWaitingStyle.ts @@ -0,0 +1,25 @@ +import styled from "styled-components"; + +export const Container = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 40px; +`; + +export const ContentsContainer = styled.div` + text-align: center; +`; + +export const Contents = styled.p` + max-width: 250px; + font-size: 20px; + font-weight: 500; + line-height: 1.7rem; + word-break: break-word; + + &:first-child { + margin-bottom: 20px; + } +`; diff --git a/src/components/ui/modalContents/turnWaitingStyle.ts b/src/components/ui/modalContents/turnWaitingStyle.ts new file mode 100644 index 0000000..91d4d11 --- /dev/null +++ b/src/components/ui/modalContents/turnWaitingStyle.ts @@ -0,0 +1,29 @@ +import styled from "styled-components"; + +export const Container = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 40px; +`; + +export const Image = styled.img` + width: 130px; + height: auto; +`; + +export const ContentsContainer = styled.div` + text-align: center; +`; + +export const Contents = styled.p` + max-width: 200px; + font-size: 20px; + line-height: 1.7rem; + word-break: break-word; + + &:first-child { + margin-bottom: 20px; + } +`; From 1987346888de9fe9c3ef76694f957439a39acb73 Mon Sep 17 00:00:00 2001 From: dain Date: Fri, 17 Jan 2025 00:09:40 +0900 Subject: [PATCH 03/21] =?UTF-8?q?=F0=9F=8D=B1=20assets:=20=ED=8A=B8?= =?UTF-8?q?=EB=A1=9C=ED=94=BC=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95,=20=ED=99=88=20=ED=99=94=EB=A9=B4=20=EB=A1=9C?= =?UTF-8?q?=EA=B3=A0=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/icon_trophy.svg | 15 ++++++++++----- src/assets/images/logo_large.svg | 8 ++++++++ 2 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 src/assets/images/logo_large.svg diff --git a/src/assets/images/icon_trophy.svg b/src/assets/images/icon_trophy.svg index f2e6784..1646155 100644 --- a/src/assets/images/icon_trophy.svg +++ b/src/assets/images/icon_trophy.svg @@ -1,9 +1,14 @@ - - + + + - - + + - + + + + + diff --git a/src/assets/images/logo_large.svg b/src/assets/images/logo_large.svg new file mode 100644 index 0000000..f6f9bb1 --- /dev/null +++ b/src/assets/images/logo_large.svg @@ -0,0 +1,8 @@ + + + + + + + + From 1315d4796cd4ffed5fe88df30d23d73a0ea2247d Mon Sep 17 00:00:00 2001 From: dain Date: Fri, 17 Jan 2025 00:11:25 +0900 Subject: [PATCH 04/21] =?UTF-8?q?=E2=9C=A8=20feat:=20=ED=99=88=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/header/Header.tsx | 2 +- src/components/layout/layout/Layout.tsx | 18 +++++-- src/components/ui/button/Button.tsx | 2 + src/pages/home/Home.tsx | 67 ++++++++++++++++++++++++- src/pages/home/homeStyle.ts | 53 +++++++++++++++++++ src/styles/GlobalStyle.ts | 1 + src/styles/font.css | 8 +++ 7 files changed, 145 insertions(+), 6 deletions(-) create mode 100644 src/pages/home/homeStyle.ts diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx index 58d7727..71c487f 100644 --- a/src/components/layout/header/Header.tsx +++ b/src/components/layout/header/Header.tsx @@ -22,7 +22,7 @@ export default function Header() { <> - + diff --git a/src/components/layout/layout/Layout.tsx b/src/components/layout/layout/Layout.tsx index 1f3219c..1ac6104 100644 --- a/src/components/layout/layout/Layout.tsx +++ b/src/components/layout/layout/Layout.tsx @@ -7,22 +7,32 @@ import { Outlet, useLocation } from "react-router-dom"; import { Wrapper, Container } from "./LayoutStyle"; import { useModalStore } from "@store/useModalStore"; -const HIDDEN_HEADERS = "/game/room/"; +const GAME_ROOM = "/game/room/"; +const HIDDEN_HEADER_FOOTER = "/home"; export default function Layout() { const { showModal } = useModalStore(); const location = useLocation(); const pathname = location.pathname; - const isHiddenHeader = pathname.includes(HIDDEN_HEADERS); + const isGameRoom = pathname.includes(GAME_ROOM); + const isHiddenHeaderFooter = pathname.includes(HIDDEN_HEADER_FOOTER); + + console.log(isHiddenHeaderFooter); return ( <> - {!isHiddenHeader ?
: } + {isHiddenHeaderFooter ? ( + "" + ) : !isGameRoom ? ( +
+ ) : ( + + )} -