Merge pull request #6 from 42organization/Feat/랭크컴포넌트만들기#3

[Feat] 랭크 컴포넌트 만들기 #3

components/RankItem.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import styles from "../styles/RankList.module.css";
+import { Rank } from "../types/types";
+
+type RankType = {
+    user: Rank;
+};
+
+export default function RankItem({ user }: RankType) {
+    return (
+        <div className={styles.person}>
+            <div className={styles.rank}>{user.rank}</div>
+            <div className={styles.userId}>{user.userId}</div>
+            <div className={styles.ppp}>{user.ppp}</div>
+        </div>
+    );
+}

components/RankList.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import styles from "../styles/RankList.module.css";
+import { Rank } from "../types/types";
+import RankItem from "./RankItem";
+
+type RankType = {
+    ranking: Rank;
+};
+
+export default function RankList() {
+    const test = {
+        rank: 1,
+        userId: "daekim",
+        ppp: 42,
+        statusMessage: "연습 중",
+        winRate: 1,
+    };
+
+    return (
+        <div>
+            <div className={styles.title}>Ranking</div>
+            <div className={styles.container}>
+                <div className={styles.division}>
+                    <div className={styles.rank}>랭킹</div>
+                    <div className={styles.userId}>유저</div>
+                    <div className={styles.ppp}>점수</div>
+                </div>
+                <RankItem user={test} />
+            </div>
+        </div>
+    );
+}

pages/rank.tsx

@@ -0,0 +1,7 @@
+import RankList from "../components/RankList"
+
+export default function Rank() {
+    return (
+        <RankList />
+    );
+}

styles/RankList.module.css

@@ -0,0 +1,58 @@
+.container {
+    width: 50vh;
+    height: 50vh;
+    padding: 5px;
+    align-items: center;
+    background-color: #ffffff;
+  }
+
+  .title {
+    width: 45vh;
+    font-size: 30px;
+    margin-top: 10px;
+    text-align: center;
+  }
+
+  .division {
+    display: flex;
+    background-color: #a4d1dd;
+    width: 90%;
+    height: 45px;
+    margin-top: 10px;
+    padding: 5px;
+    border-radius: 10px;
+  }
+
+  .person {
+    display: flex;
+    background-color: #d3f2f8;
+    width: 90%;
+    height: 45px;
+    padding: 5px;
+    border-radius: 10px;
+  }
+
+  .rank {
+    width: 20%;
+    display: flex;
+    height: 50px;
+    margin: 10px;
+    float: left;
+  }
+
+  .userId {
+    width: 60%;
+    display: flex;
+    height: 50px;
+    margin: 10px;
+    float: center;
+  }
+
+  .ppp {
+    width: 20%;
+    display: flex;
+    height: 50px;
+    margin: 10px;
+    float: right;
+  }
+

types/types.ts

@@ -0,0 +1,7 @@
+export interface Rank {
+    rank: number;
+    userId: string;
+    ppp: number;
+    statusMessage: string;
+    winRate: number;
+}