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..3ac6345 --- /dev/null +++ b/src/components/ui/ranking/RankingList.tsx @@ -0,0 +1,29 @@ +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"; + +interface IRankingList { + nickname: string; + index: number; +} + +export default function RankingList({ nickname, index }: IRankingList) { + 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 6ac6e50..961fa4c 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"; @@ -9,6 +9,7 @@ import UpdateMyPage from "@pages/mypage/updateMypage/UpdateMyPage"; import GameRoom from "@pages/game/GameRoom"; import Game from "@pages/game/Game"; import Home from "@pages/home/Home"; +import Finish from "../pages/user/signUp/Finish"; export const router = createBrowserRouter([ { @@ -33,7 +34,7 @@ export const router = createBrowserRouter([ }, { path: "/rank", - element: , + element: , }, { path: "/game", @@ -57,6 +58,10 @@ export const router = createBrowserRouter([ path: "/user/mypage/updateMyPage", element: , }, + { + path: "/user/signup/finish", + element: , + }, ], }, ]);