wip: rank CSS 설정 및 로그인 API 연동

rank CSS 설정 & 로그인 API 연동
#20

apis/service.js

@@ -1,21 +1,29 @@
 import axios from "axios";
 
-// export const getToken = () => localStorage.getItem('access_token') ?? null
+// export const getToken = () => windows.localStorage.getItem("jwt");
 
 export const statDustAPI = axios.create({
-    baseURL: '',
-    headers: {
-      accept: "application/json",
-      "Content-Type": "application/json",
-      "Access-Control-Allow-Origin": "*",
-    //   "ACCESS-TOKEN": getToken() ?? ''
-    },
+  baseURL: "https://star-dust.shop",
+  headers: {
+    accept: "application/json",
+    "Content-Type": "application/json",
+    "Access-Control-Allow-Origin": "*",
+    "X-ACCESS-TOKEN": "",
+  },
 });
 
 export async function getDusts(university) {
-  return await statDustAPI.get(`/map/${university}`)
+  return await statDustAPI.get(`/map/${university}`);
 }
 
 export async function sendDustLocation(latitude, longitude) {
-  return await statDustAPI.post('/dust/location', { latitude, longitude })
-}
+  return await statDustAPI.post("/dust/location", { latitude, longitude });
+}
+
+export async function postuserLogin(nickname, phoneNum, univCode) {
+  return await statDustAPI.post("/users/login", {
+    nickname: nickname,
+    phoneNum: phoneNum,
+    univCode: univCode,
+  });
+}

pages/login/index.js

@@ -1,9 +1,10 @@
 import Link from "next/link";
 import { func } from "prop-types";
 import { useEffect, useRef, useState } from "react";
-import { login } from "../../apis";
+import { login, starDustAPI } from "../../apis";
 import styles from "../../styles/Login.module.css";
 import { useRouter } from "next/router";
+import { postuserLogin } from "../../apis/service";
 
 export default function Login() {
   const router = useRouter();
@@ -69,9 +70,21 @@ export default function Login() {
     // if (nicknameError.length > 0 || phoneNumberError.length > 0) return;
 
     if (isValidate) {
-      // const response = await login(codeNumber, phoneNumber)
-      setIsLoginSuccess((prev) => !prev);
-    } else {
+      const response = await postuserLogin(nickname, phoneNumber, "SSU");
+      console.log(response);
+      if (response.status == 200 && response.data.code == 200) {
+        localStorage.setItem("jwt", response.data.result.userJwt);
+        starDustAPI.defaults.headers["X-ACCESS-TOKEN"] =
+          response.data.result.userJwt;
+        if (response.data.result.user) {
+          router.push("/../map");
+        } else {
+          router.push("/../staff-map");
+        }
+      } else {
+        alert("로그인에 실패했어요,,,");
+      }
+      // setIsLoginSuccess((prev) => !prev);
     }
   };
 

pages/rank/_components/Rank.jsx

@@ -0,0 +1,62 @@
+import { useState, useRef, useEffect } from "react";
+import { Map, CustomOverlayMap, MapMarker } from "react-kakao-maps-sdk";
+import Image from "next/image";
+import styles from "../../../styles/Rank.module.css";
+
+const ranks = [
+  {
+    rankId: 1,
+    nickname: "듀크",
+    phonenumber: 7486,
+    time: "00:00:30",
+  },
+  {
+    rankId: 2,
+    nickname: "쏘는사라있따야호",
+    phonenumber: 7486,
+    time: "00:00:40",
+  },
+  {
+    rankId: 3,
+    nickname: "미누스",
+    phonenumber: 7486,
+    time: "00:00:50",
+  },
+  {
+    rankId: 4,
+    nickname: "벨라",
+    phonenumber: 7486,
+    time: "00:01:00",
+  },
+  {
+    rankId: 5,
+    nickname: "타미",
+    phonenumber: 7486,
+    time: "00:01:30",
+  },
+];
+
+export const RankList = () => {
+  return (
+    <div>
+      {ranks.map((rank) => {
+        return (
+          <div className={styles.ranking}>
+            {true == rank.rankId <= 3 ? (
+              <div className={styles.li_1_1}>{rank.rankId}</div>
+            ) : (
+              <div className={styles.li_1_2}>{rank.rankId}</div>
+            )}
+            <div className={styles.li_2}>
+              {rank.nickname}
+              {rank.phonenumber}
+            </div>
+            <div className={styles.li_3}>{rank.time}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default RankList;

pages/rank/index.js

@@ -2,9 +2,11 @@ import { useEffect, useRef, useState } from "react";
 import styles from "../../styles/Rank.module.css";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import RankList from "./_components/Rank.jsx";
 
 export default function Rank() {
   const router = useRouter();
+
   return (
     <div className={styles.background}>
       <div>
@@ -20,11 +22,7 @@ export default function Rank() {
             <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>
+          <RankList />
         </div>
       </div>
     </div>

styles/Rank.module.css

@@ -1,5 +1,4 @@
 .background {
-  /* display: center; */
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -37,7 +36,7 @@
   margin: auto;
   margin-top: 38px;
   text-align: left;
-  width: 282px;
+  width: 330px;
 }
 
 .ranking {
@@ -46,13 +45,11 @@
   font-size: 18px;
   color: #ffffff;
   margin: auto;
-  width: 326px;
+  width: 350px;
 }
 
 .float1 {
   flex-grow: 2;
-  /* text-align: left; */
-  /* margin-left: 40px; */
 }
 
 .float2 {
@@ -62,34 +59,39 @@
 .float3 {
   flex-grow: 6;
   text-align: right;
-
-  padding-right: 15px;
-  /* margin-right: 68px; */
+  padding-right: 28px;
 }
 
-.li_1 {
+.li_1_1 {
+  text-align: left;
   font-size: 32px;
-  flex-grow: 2;
+  flex-grow: 1;
   padding: 18px 0;
   color: yellow;
   padding-left: 15px;
 }
+.li_1_2 {
+  text-align: left;
+  font-size: 32px;
+  flex-grow: 1;
+  padding: 18px 0;
+  color: #ffffff;
+  padding-left: 15px;
+}
 
 .li_2 {
   font-size: 20px;
-  flex-grow: 2;
+  flex-grow: 5;
   padding: 18px 0;
-
   line-height: 30px;
 }
 
 .li_3 {
   font-size: 20px;
-  flex-grow: 6;
+  flex-grow: 10;
   text-align: right;
   padding: 18px 0;
   line-height: 30px;
-
   padding-right: 15px;
 }