From 86a1deb7c2191672199f99954e44f2a96448f323 Mon Sep 17 00:00:00 2001 From: hongSso Date: Tue, 27 Sep 2022 02:26:15 +0900 Subject: [PATCH] =?UTF-8?q?wip:=20rank=20CSS=20=EC=84=A4=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20API=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99=20rank=20CSS=20=EC=84=A4=EC=A0=95=20&=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20API=20=EC=97=B0=EB=8F=99=20#20?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apis/service.js | 30 ++++++++++------ pages/login/index.js | 21 ++++++++--- pages/rank/_components/Rank.jsx | 62 +++++++++++++++++++++++++++++++++ pages/rank/index.js | 8 ++--- styles/Rank.module.css | 30 ++++++++-------- 5 files changed, 117 insertions(+), 34 deletions(-) create mode 100644 pages/rank/_components/Rank.jsx diff --git a/apis/service.js b/apis/service.js index db035f0..65d9bdc 100644 --- a/apis/service.js +++ b/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 }) -} \ No newline at end of file + 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, + }); +} diff --git a/pages/login/index.js b/pages/login/index.js index e6b41e7..5d85112 100644 --- a/pages/login/index.js +++ b/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); } }; diff --git a/pages/rank/_components/Rank.jsx b/pages/rank/_components/Rank.jsx new file mode 100644 index 0000000..46fc863 --- /dev/null +++ b/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 ( +
+ {ranks.map((rank) => { + return ( +
+ {true == rank.rankId <= 3 ? ( +
{rank.rankId}
+ ) : ( +
{rank.rankId}
+ )} +
+ {rank.nickname} + {rank.phonenumber} +
+
{rank.time}
+
+ ); + })} +
+ ); +}; + +export default RankList; diff --git a/pages/rank/index.js b/pages/rank/index.js index c109878..26af279 100644 --- a/pages/rank/index.js +++ b/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 (
@@ -20,11 +22,7 @@ export default function Rank() {
NAME
TIME
-
-
1
-
규 7486
-
00:05:23
-
+
diff --git a/styles/Rank.module.css b/styles/Rank.module.css index 4eaaf5e..59cef2c 100644 --- a/styles/Rank.module.css +++ b/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; }