✨ feat: 랭킹,회원가입 마무리 페이지 구현

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 (
+    <Wrapper>
+      <HeartImage src={heartImg} alt="가입완료 하트 이미지" />
+      <Welcome>
+        <p>환영합니다, 닉네임 님.</p>
+        <p>가입이 완료되었습니다.</p>
+      </Welcome>
+      <Message>로그인 후 게임을 플레이 해 보세요!</Message>
+    </Wrapper>
+  );
+}

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;
+`;

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 (
+    <div>
+      <p>
+        {index === 0 ? (
+          <GoldImage src={gold} alt="금메달" />
+        ) : index === 1 ? (
+          <SilverImage src={silver} alt="은메달" />
+        ) : index === 2 ? (
+          <BronzeImage src={bronze} alt="동메달" />
+        ) : (
+          ""
+        )}
+      </p>
+      <p>{nickname}</p>
+      <p>{index + 1}</p>
+    </div>
+  );
+}

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``;

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 (
+    <FullBox>
+      <TrophyBox>
+        <TrophyImage src={trophy} alt="랭킹 트로피 이미지" />
+        <H1>전체 랭킹</H1>
+      </TrophyBox>
+      <MainTextBox>
+        <div>닉네임</div>
+        <div>순위</div>
+      </MainTextBox>
+      <Hr />
+      {/* {data?.ranking.map((user, index) => (
+        <RankingList nickname={user.userNickname} index={index} />
+      ))} */}
+    </FullBox>
+  );
+}

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;
+`;

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 (
+//     <div>
+//       <RankingList nickname={undefined} index={undefined} />
+//     </div>
+//   );
+// }
 
 export default function TestPage() {
   return (
     <div>
-      <Rangking />
+      <Finish />
     </div>
   );
 }

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 (
+    <Wrapper>
+      <HeartImage src={heartImg} alt="가입완료 하트 이미지" />
+      <Welcome>
+        <p>환영합니다, 닉네임 님.</p>
+        <p>가입이 완료되었습니다.</p>
+      </Welcome>
+      <Message>로그인 후 게임을 플레이 해 보세요!</Message>
+      <Button
+        type="submit"
+        size="sm"
+        bgcolor="green"
+        textcolor="black"
+        width="190px"
+      >
+        로그인 하러가기
+      </Button>
+    </Wrapper>
+  );
+}

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;
+`;

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: <Ranking />,
+        element: <RangkingPage />,
       },
       {
         path: "/game",
@@ -57,6 +58,10 @@ export const router = createBrowserRouter([
         path: "/user/mypage/updateMyPage",
         element: <UpdateMyPage />,
       },
+      {
+        path: "/user/signup/finish",
+        element: <Finish />,
+      },
     ],
   },
 ]);