From 4ab431bdfb78cf1af3d69e561dc519afe96fe95b Mon Sep 17 00:00:00 2001 From: dain Date: Thu, 16 Jan 2025 00:39:10 +0900 Subject: [PATCH 01/40] =?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 9bce0ef91962562cf720168fe5c267209c7b26a8 Mon Sep 17 00:00:00 2001 From: salwwkd Date: Thu, 16 Jan 2025 18:07:54 +0900 Subject: [PATCH 02/40] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=9E=AD=ED=82=B9,?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EB=A7=88=EB=AC=B4?= =?UTF-8?q?=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/finish/Finish.tsx | 16 ++++++++ src/components/ui/finish/finishStyle.ts | 30 ++++++++++++++ src/components/ui/ranking/Ranking.tsx | 35 ----------------- src/components/ui/ranking/RankingList.tsx | 24 ++++++++++++ src/components/ui/ranking/rankingListStyle.ts | 5 +++ src/pages/rank/Ranking.tsx | 3 -- src/pages/rank/RankingPage.tsx | 29 ++++++++++++++ src/pages/rank/rankingPageStyle.ts | 39 +++++++++++++++++++ src/pages/testpage/Testpage.tsx | 13 ++++++- src/pages/user/signUp/Finish.tsx | 26 +++++++++++++ src/pages/user/signUp/finishStyle.ts | 30 ++++++++++++++ src/routes/router.tsx | 9 ++++- 12 files changed, 217 insertions(+), 42 deletions(-) create mode 100644 src/components/ui/finish/Finish.tsx create mode 100644 src/components/ui/finish/finishStyle.ts delete mode 100644 src/components/ui/ranking/Ranking.tsx create mode 100644 src/components/ui/ranking/RankingList.tsx create mode 100644 src/components/ui/ranking/rankingListStyle.ts delete mode 100644 src/pages/rank/Ranking.tsx create mode 100644 src/pages/rank/RankingPage.tsx create mode 100644 src/pages/rank/rankingPageStyle.ts create mode 100644 src/pages/user/signUp/Finish.tsx create mode 100644 src/pages/user/signUp/finishStyle.ts diff --git a/src/components/ui/finish/Finish.tsx b/src/components/ui/finish/Finish.tsx new file mode 100644 index 0000000..50503c3 --- /dev/null +++ b/src/components/ui/finish/Finish.tsx @@ -0,0 +1,16 @@ +import heartImg from "../../../assets/images/icon_heart.svg"; + +import { HeartImage, Message, Welcome, Wrapper } from "./finishStyle"; + +export default function Finish() { + return ( + + + +

환영합니다, 닉네임 님.

+

가입이 완료되었습니다.

+ + 로그인 후 게임을 플레이 해 보세요! + + ); +} diff --git a/src/components/ui/finish/finishStyle.ts b/src/components/ui/finish/finishStyle.ts new file mode 100644 index 0000000..d7b5f55 --- /dev/null +++ b/src/components/ui/finish/finishStyle.ts @@ -0,0 +1,30 @@ +import styled from "styled-components"; + +export const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; +export const HeartImage = styled.img` + width: 150px; + height: 132px; +`; +export const Welcome = styled.p` + color: var(--gray-999); + text-align: center; + font-size: 18px; + font-weight: 400; + line-height: 28px; + letter-spacing: -0.36px; + margin-top: 50px; + margin-bottom: 44px; +`; +export const Message = styled.p` + color: var(--gray-999); + text-align: center; + font-size: 18px; + font-weight: 600; + line-height: 28px; + letter-spacing: -0.36px; + margin-bottom: 255px; +`; diff --git a/src/components/ui/ranking/Ranking.tsx b/src/components/ui/ranking/Ranking.tsx deleted file mode 100644 index 105bf5d..0000000 --- a/src/components/ui/ranking/Ranking.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import styled from "styled-components"; - -const FullBox = styled.div` - display: flex; - flex-direction: column; - align-items: center; -`; -const TrophyImage = styled.img` - width: 100%; - height: 100px; -`; -const MainTextBox = styled.div` - display: flex; - margin-top: 45px; -`; -const Hr = styled.hr` - width: 100%; - position: relative; - border-top: 2px solid #000; - box-sizing: border-box; - height: 2px; -`; -export default function Rangking() { - return ( - - -

전체 랭킹

- -
닉네임
-
순위
-
- - - ); -} diff --git a/src/components/ui/ranking/RankingList.tsx b/src/components/ui/ranking/RankingList.tsx new file mode 100644 index 0000000..dd197bb --- /dev/null +++ b/src/components/ui/ranking/RankingList.tsx @@ -0,0 +1,24 @@ +import gold from "../../../assets/images/icon_gold.svg"; +import silver from "../../../assets/images/icon_silver.svg"; +import bronze from "../../../assets/images/icon_bronze.svg"; +import { BronzeImage, GoldImage, SilverImage } from "./rankingListStyle"; + +export default function RankingList({ nickname, index }) { + return ( +
+

+ {index === 0 ? ( + + ) : index === 1 ? ( + + ) : index === 2 ? ( + + ) : ( + "" + )} +

+

{nickname}

+

{index + 1}

+
+ ); +} diff --git a/src/components/ui/ranking/rankingListStyle.ts b/src/components/ui/ranking/rankingListStyle.ts new file mode 100644 index 0000000..6b93fd6 --- /dev/null +++ b/src/components/ui/ranking/rankingListStyle.ts @@ -0,0 +1,5 @@ +import styled from "styled-components"; + +export const GoldImage = styled.img``; +export const SilverImage = styled.img``; +export const BronzeImage = styled.img``; diff --git a/src/pages/rank/Ranking.tsx b/src/pages/rank/Ranking.tsx deleted file mode 100644 index ab08ea3..0000000 --- a/src/pages/rank/Ranking.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Ranking() { - return
Ranking
; -} diff --git a/src/pages/rank/RankingPage.tsx b/src/pages/rank/RankingPage.tsx new file mode 100644 index 0000000..fa6aa46 --- /dev/null +++ b/src/pages/rank/RankingPage.tsx @@ -0,0 +1,29 @@ +import { + FullBox, + H1, + Hr, + MainTextBox, + TrophyBox, + TrophyImage, +} from "./rankingPageStyle"; +import trophy from "../../assets/images/icon_trophy.svg"; +// import RankingList from "../../components/ui/ranking/RankingList"; + +export default function RangkingPage() { + return ( + + + +

전체 랭킹

+ + +
닉네임
+
순위
+ +
+ {/* {data?.ranking.map((user, index) => ( + + ))} */} + + ); +} diff --git a/src/pages/rank/rankingPageStyle.ts b/src/pages/rank/rankingPageStyle.ts new file mode 100644 index 0000000..c11a019 --- /dev/null +++ b/src/pages/rank/rankingPageStyle.ts @@ -0,0 +1,39 @@ +import styled from "styled-components"; + +export const FullBox = styled.div` + width: 400px; + display: flex; + flex-direction: column; +`; +export const TrophyBox = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +`; +export const TrophyImage = styled.img` + width: 100px; + height: 100px; +`; +export const H1 = styled.h1` + color: var(--gray-999); + font-size: 32px; + font-weight: 700; +`; +export const MainTextBox = styled.div` + display: flex; + margin-top: 45px; + gap: 138px; + margin-left: 111px; + color: var(--gray-999, #000); + font-size: 24px; + font-weight: 600; + margin-bottom: 20px; +`; +export const Hr = styled.hr` + width: 100%; + position: relative; + border-top: 2px solid #000; + box-sizing: border-box; + height: 2px; +`; diff --git a/src/pages/testpage/Testpage.tsx b/src/pages/testpage/Testpage.tsx index e24920a..6197203 100644 --- a/src/pages/testpage/Testpage.tsx +++ b/src/pages/testpage/Testpage.tsx @@ -1,9 +1,18 @@ -import Rangking from "../../components/ui/ranking/Ranking"; +import Finish from "../../components/ui/finish/Finish"; +// import RankingList from "../../components/ui/ranking/RankingList"; + +// export default function TestPage() { +// return ( +//
+// +//
+// ); +// } export default function TestPage() { return (
- +
); } diff --git a/src/pages/user/signUp/Finish.tsx b/src/pages/user/signUp/Finish.tsx new file mode 100644 index 0000000..339a757 --- /dev/null +++ b/src/pages/user/signUp/Finish.tsx @@ -0,0 +1,26 @@ +import heartImg from "../../../assets/images/icon_heart.svg"; +import Button from "../../../components/ui/button/Button"; + +import { HeartImage, Message, Welcome, Wrapper } from "./finishStyle"; + +export default function Finish() { + return ( + + + +

환영합니다, 닉네임 님.

+

가입이 완료되었습니다.

+ + 로그인 후 게임을 플레이 해 보세요! + + + ); +} diff --git a/src/pages/user/signUp/finishStyle.ts b/src/pages/user/signUp/finishStyle.ts new file mode 100644 index 0000000..d7b5f55 --- /dev/null +++ b/src/pages/user/signUp/finishStyle.ts @@ -0,0 +1,30 @@ +import styled from "styled-components"; + +export const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; +export const HeartImage = styled.img` + width: 150px; + height: 132px; +`; +export const Welcome = styled.p` + color: var(--gray-999); + text-align: center; + font-size: 18px; + font-weight: 400; + line-height: 28px; + letter-spacing: -0.36px; + margin-top: 50px; + margin-bottom: 44px; +`; +export const Message = styled.p` + color: var(--gray-999); + text-align: center; + font-size: 18px; + font-weight: 600; + line-height: 28px; + letter-spacing: -0.36px; + margin-bottom: 255px; +`; diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 460b4c6..a728344 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -1,6 +1,6 @@ import { createBrowserRouter, Navigate } from "react-router-dom"; import Login from "@pages/user/login/Login"; -import Ranking from "@pages/rank/Ranking"; +import RangkingPage from "@pages/rank/RankingPage"; import SignUp from "@pages/user/signUp/SignUp"; import Layout from "@components/layout/layout/Layout"; import GameRoomList from "@pages/game/gameRoomList"; @@ -10,6 +10,7 @@ import GameRoom from "@pages/game/GameRoom"; import Game from "@pages/game/Game"; import TestPage from "../pages/testpage/Testpage"; import Home from "@pages/home/Home"; +import Finish from "../pages/user/signUp/Finish"; export const router = createBrowserRouter([ { @@ -34,7 +35,7 @@ export const router = createBrowserRouter([ }, { path: "/rank", - element: , + element: , }, { path: "/game", @@ -62,6 +63,10 @@ export const router = createBrowserRouter([ path: "/test", element: , }, + { + path: "/user/signup/finish", + element: , + }, ], }, ]); From 7ed7242e47e04f299cfed157c725357cacb692ea Mon Sep 17 00:00:00 2001 From: salwwkd Date: Thu, 16 Jan 2025 18:15:58 +0900 Subject: [PATCH 03/40] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=ED=91=B8=EC=89=AC?= =?UTF-8?q?=EC=97=90=EB=9F=AC=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/ranking/RankingList.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/ui/ranking/RankingList.tsx b/src/components/ui/ranking/RankingList.tsx index dd197bb..3ac6345 100644 --- a/src/components/ui/ranking/RankingList.tsx +++ b/src/components/ui/ranking/RankingList.tsx @@ -3,7 +3,12 @@ import silver from "../../../assets/images/icon_silver.svg"; import bronze from "../../../assets/images/icon_bronze.svg"; import { BronzeImage, GoldImage, SilverImage } from "./rankingListStyle"; -export default function RankingList({ nickname, index }) { +interface IRankingList { + nickname: string; + index: number; +} + +export default function RankingList({ nickname, index }: IRankingList) { return (

From 21af2daab2f9dc95cd0da4826b7a64ba2cc05b23 Mon Sep 17 00:00:00 2001 From: dain Date: Thu, 16 Jan 2025 21:11:51 +0900 Subject: [PATCH 04/40] =?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 05/40] =?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 06/40] =?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 ? ( +
+ ) : ( + + )} -