From 9bce0ef91962562cf720168fe5c267209c7b26a8 Mon Sep 17 00:00:00 2001 From: salwwkd Date: Thu, 16 Jan 2025 18:07:54 +0900 Subject: [PATCH 1/2] =?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 2/2] =?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 (