Skip to content

Ksh #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SeonHwan-Kim wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Ksh #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e04b9c8
add : add react-spinner
SeonHwan-Kim Dec 28, 2022
69a73ff
style : button font color
SeonHwan-Kim Dec 28, 2022
c0a6d38
feat : api post scrapping/request
SeonHwan-Kim Dec 28, 2022
c4dcd31
feat : api get ranking
SeonHwan-Kim Dec 28, 2022
c8435b1
style : remove chart
SeonHwan-Kim Dec 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions my-app/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions my-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.5.0",
"react-scripts": "5.0.1",
"react-spinners": "^0.13.7",
"styled-components": "^5.3.6",
"web-vitals": "^2.1.4"
},
Expand Down
1 change: 1 addition & 0 deletions my-app/src/css/CheckDepartment.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@
border-width: 0px;
border-radius: 10px;
font-size: 25px;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
Expand Down
5 changes: 4 additions & 1 deletion my-app/src/css/MainPage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ body {

#title {
margin: 30px;
display: flex;
justify-content: center;
}

#nickname {
Expand All @@ -20,14 +22,15 @@ body {
#main {
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: center;
/* margin: 50px; */
}

#right {
margin: 30px;
width: 90%;
height: 600px;
font-size: 40px;
}

#left {
Expand Down
42 changes: 35 additions & 7 deletions my-app/src/js/CheckDepartment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import "../css/CheckDepartment.css";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import BeatLoader from "react-spinners/BeatLoader";

import axios from "axios";

export default function CheckDepartment() {
const departmentList = ["솦", "컴"];
const departmentList = ["S", "C"];
const [clickDepartment, setClickDepartment] = useState([false, false]);
const [department, setDepartment] = useState();
const handleClickDepartment = (index) => {
Expand All @@ -14,6 +16,8 @@ export default function CheckDepartment() {
setClickDepartment(newClickDepartment);
};

const [loading, setLoading] = useState(false);

const checkDepartment = async () => {
try {
const api = axios.create({
Expand All @@ -22,21 +26,34 @@ export default function CheckDepartment() {
jwtToken: localStorage.getItem("wtw-token"),
},
});
console.log("hi");
await api.post("/login/apply", {
department: department,
});
navigate("/mainPage");
console.log("hihi");
await api
.post("/scrapping/request")
.then((res) => {
console.log(res);
setLoading(false);
navigate("/mainPage", { state: department });
})
.catch((e) => {
console.log(e);
setLoading(false);
});
console.log("hihihi");
} catch (e) {
console.log(e);
}
};

const navigate = useNavigate();

const handleClickCheckBtn = () => {
if (JSON.stringify(clickDepartment) === JSON.stringify([false, false])) {
alert("희망 전공을 선택하세요");
} else {
setLoading(true);
checkDepartment();
}
};
Expand Down Expand Up @@ -94,10 +111,21 @@ export default function CheckDepartment() {
</svg>
</button>
</div>
<button id="checkBtn" onClick={handleClickCheckBtn}>
<img id="lock" src="img/lock.png" alt="lock pic." />
설정완료
</button>
{loading ? (
<div id="checkBtn">
<BeatLoader
color={"white"}
size={15}
aria-label="Loading Spinner"
data-testid="loader"
/>
</div>
) : (
<button id="checkBtn" onClick={handleClickCheckBtn}>
<img id="lock" src="img/lock.png" alt="lock pic." />
설정완료
</button>
)}
</div>
<img className="sidePng" src="img/side.png" alt="logo pic."></img>
</div>
Expand Down
166 changes: 112 additions & 54 deletions my-app/src/js/MainPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,98 @@
import "../css/MainPage.css";
import MainBtn from "./MainBtn";
import { useState } from "react";
import { useEffect, useState } from "react";
import { ResponsiveScatterPlot } from "@nivo/scatterplot";
import { useLocation } from "react-router-dom";
import axios from "axios";

export default function MainPage() {
const scoreName = ["list.softScore", "list.comScore"];
const getData = async (department, resultControl) => {
try {
const api = axios.create({
baseURL: "http://34.64.123.6:8080",
headers: {
jwtToken: localStorage.getItem("wtw-token"),
},
});
let result;
console.log("hi");
if (resultControl < 2) {
result = await api.get(`/result/allranking/${department}`);
console.log("hihi");
} else {
result = await api.get(`/result/applyranking/${department}`);
console.log("hihi");
}
setGetList(result.data.allUsers);
// console.log(result.data.allUsers);
// result.data.allUsers.map((score, idx) => {
// // data[0].data.push({
// // x: idx + 1,
// // y: scoreName[resultControl % 2],
// // });

// });
console.log(result.data);
} catch (e) {
console.log(e);
}
};

const { state } = useLocation();
const [isPressBtn, setIsPressBtn] = useState([true, false, false, false]);
const departmentEng = ["S", "C"];
const [btnIdx, setBtnIdx] = useState();
const handlePressBtn = (index) => {
setBtnIdx(index);
const newBtnList = Array(4).fill(false);
newBtnList[index] = true;
getData(departmentEng[index % 2], index);
setIsPressBtn(newBtnList);
};

// const [nickName, setNickName] = useState();
// const handleNickName = () => {
// setNickName(localStorage.getItem("nickName"));
// };

// useEffect(() => {
// handleNickName();
// });
const [getList, setGetList] = useState([]);
const [userNumber, setUserNumber] = useState();
useEffect(() => {
getList?.map((score, idx) => {
if (score.nickname === nickName) {
setUserNumber(idx + 1);
}
});
// console.log(getList);
// getList?.map((list, idx) => {
// data[0].data.push({
// x: idx + 1,
// // y: ,
// y: list?.softScore,
// });
// });
// console.log(data[0].data);
});

const nickName = localStorage.getItem("nickName");

// 차트 데이터
const data = [
{
id: "전체성적",
data: [
{
x: 68,
y: 112,
},
{
x: 37,
y: 120,
},
],
},
{
id: "내 성적",
data: [
{
x: 95,
y: 39,
},
],
},
// let data = [
// {
// id: "전체성적",
// data: [],
// },
// {
// id: "내 성적",
// data: [
// {
// x: userNumber,
// y: getList[userNumber - 1]?.soft_score,
// },
// ],
// },
// ];

const departmentList = [
"융합특성화자유전공학부",
"소프트웨어학부 지원자",
"컴퓨터학부 지원자",
];

return (
Expand All @@ -55,11 +102,12 @@ export default function MainPage() {
<span id="titleText">님의 순위결과 조회입니다.</span>
</div>
<div id="main">
<div id="right">
<div id="right">차트 넣을 예정</div>
{/* <div id="right">
<ResponsiveScatterPlot
data={data}
margin={{ top: 60, right: 140, bottom: 70, left: 90 }}
xScale={{ type: "linear", min: 0, max: "auto" }}
xScale={{ type: "point", min: 0, max: "auto" }}
xFormat=">-.2f"
yScale={{ type: "linear", min: 0, max: "auto" }}
yFormat=">-.2f"
Expand All @@ -72,18 +120,18 @@ export default function MainPage() {
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "weight",
legend: "등수",
legendPosition: "middle",
legendOffset: 46,
legendOffset: 50,
}}
axisLeft={{
orient: "left",
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "size",
legend: "성적",
legendPosition: "middle",
legendOffset: -60,
legendOffset: -50,
}}
legends={[
{
Expand All @@ -109,7 +157,7 @@ export default function MainPage() {
},
]}
/>
</div>
</div> */}
<div id="left">
<div>
<div className="mainTitle">성적 산출 등수</div>
Expand All @@ -128,27 +176,37 @@ export default function MainPage() {
</div>
<div>
<div className="mainTitle">실지원 등수</div>
<MainBtn
btnText={"소프트웨어학부"}
index={2}
handlePress={handlePressBtn}
isSelected={isPressBtn}
/>
<MainBtn
btnText={"컴퓨터학부"}
index={3}
handlePress={handlePressBtn}
isSelected={isPressBtn}
/>
{state === "S" ? (
<MainBtn
btnText={"소프트웨어학부"}
index={2}
handlePress={handlePressBtn}
isSelected={isPressBtn}
/>
) : (
<MainBtn
btnText={"컴퓨터학부"}
index={3}
handlePress={handlePressBtn}
isSelected={isPressBtn}
/>
)}
</div>
<div id="ranking">
<span>전체 등수</span>
<span>17등 / 150명</span>
<span>
{userNumber}등 / {getList.length}명
</span>
</div>
<div id="rankingTextBox">
<span>
<span id="nicknameInBox">"{nickName}"</span>님의 순위는 전체
융합특성화자유전공학부 150명 중 17등으로 예상됩니다.
<span id="nicknameInBox">"{nickName}"</span>님의 순위는 전체{" "}
{btnIdx === 0 || btnIdx === 1
? departmentList[0]
: btnIdx === 2
? departmentList[1]
: departmentList[2]}{" "}
{getList.length}명 중 {userNumber}등으로 예상됩니다.
</span>
</div>
</div>
Expand Down