wip: rank 화면 컴포넌트 생성

랭크 컴포넌트 생성
#20

pages/rank/index.js

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from "react";
+import styles from "../../styles/Rank.module.css";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+export default function Rank() {
+  const router = useRouter();
+  return (
+    <div className={styles.background}>
+      <div>
+        <input
+          type="button"
+          className={styles.X_button}
+          onClick={() => router.push("/../map")}
+        ></input>
+        <div className={styles.title}>
+          <span style={{ color: "#F9E219" }}>SSU</span> 최강우주전사
+          <div className={styles.element}>
+            <div className={styles.float1}>RANK</div>
+            <div className={styles.float2}>NAME</div>
+            <div className={styles.float3}>TIME</div>
+          </div>
+          <div className={styles.ranking}>
+            <div className={styles.li_1}>1</div>
+            <div className={styles.li_2}>규 7486</div>
+            <div className={styles.li_3}>00:05:23</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

styles/Rank.module.css

@@ -0,0 +1,102 @@
+.background {
+  /* display: center; */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: url(../public/img-bg-universe.png);
+  min-height: 100vh;
+  background-repeat: repeat-y;
+  background-size: 100%;
+  overflow: scroll;
+  text-align: center;
+}
+
+.X_button {
+  background: url(../public/img_X_button.png);
+  border: none;
+  width: 45px;
+  height: 45px;
+  cursor: pointer;
+  top: 25px;
+  right: 32px;
+  position: fixed;
+}
+
+.title {
+  font-family: "NeoDunggeunmo";
+  font-size: 30px;
+  color: #ffffff;
+  margin-top: 90px;
+}
+
+.element {
+  display: flex;
+  font-family: "NeoDunggeunmo";
+  font-size: 18px;
+  color: red;
+  margin: auto;
+  margin-top: 38px;
+  text-align: left;
+  width: 282px;
+}
+
+.ranking {
+  display: flex;
+  font-family: "NeoDunggeunmo";
+  font-size: 18px;
+  color: #ffffff;
+  margin: auto;
+  width: 326px;
+}
+
+.float1 {
+  flex-grow: 2;
+  /* text-align: left; */
+  /* margin-left: 40px; */
+}
+
+.float2 {
+  flex-grow: 2;
+}
+
+.float3 {
+  flex-grow: 6;
+  text-align: right;
+
+  padding-right: 15px;
+  /* margin-right: 68px; */
+}
+
+.li_1 {
+  font-size: 32px;
+  flex-grow: 2;
+  padding: 18px 0;
+  color: yellow;
+  padding-left: 15px;
+}
+
+.li_2 {
+  font-size: 20px;
+  flex-grow: 2;
+  padding: 18px 0;
+
+  line-height: 30px;
+}
+
+.li_3 {
+  font-size: 20px;
+  flex-grow: 6;
+  text-align: right;
+  padding: 18px 0;
+  line-height: 30px;
+
+  padding-right: 15px;
+}
+
+@font-face {
+  font-family: "NeoDunggeunmo";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/NeoDunggeunmo.woff")
+    format("woff");
+  font-weight: normal;
+  font-style: normal;
+}