From b0eb191ea4604e7962435a9e04ce35171e44bc66 Mon Sep 17 00:00:00 2001 From: shinel98 Date: Mon, 7 Nov 2022 20:02:03 +0900 Subject: [PATCH 01/13] =?UTF-8?q?[#41]=20:=20=EB=A7=88=EC=9D=BC=EB=A6=AC?= =?UTF-8?q?=EC=A7=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mileageStudent/Activity.js | 2 +- src/components/mileageStudent/TagMenu.js | 29 +- .../mileageStudent/mileageActivity.js | 462 +++++++++++++----- .../mileageStudent/semesterSelect.js | 19 +- src/components/mileageStudent/tab.js | 8 +- src/store/atom.js | 5 + 6 files changed, 389 insertions(+), 136 deletions(-) diff --git a/src/components/mileageStudent/Activity.js b/src/components/mileageStudent/Activity.js index ce4faad..1533636 100644 --- a/src/components/mileageStudent/Activity.js +++ b/src/components/mileageStudent/Activity.js @@ -70,7 +70,7 @@ export default function BasicTable(props) { - {props.semesters === "whole" ? ( + {props.semesters === "ALL" ? ( <> {activities.map((activity) => activity.personal === true ? ( diff --git a/src/components/mileageStudent/TagMenu.js b/src/components/mileageStudent/TagMenu.js index 919c86c..f104f85 100644 --- a/src/components/mileageStudent/TagMenu.js +++ b/src/components/mileageStudent/TagMenu.js @@ -11,21 +11,33 @@ import TagIcon from "@mui/icons-material/Tag"; import { getActivities, getActivitiesBySec } from "../../api/activity"; import { activityState } from "../../store/atom"; import { useSetRecoilState } from "recoil"; +import { useRecoilValue } from "recoil"; +import axios from "axios"; +import { semesterState } from "../../store/atom"; const drawerWidth = 240; const style = { - // color: "#004dc2", fontWeight: "bold", }; export default function TagMenu() { const setActivities = useSetRecoilState(activityState); + const semester = useRecoilValue(semesterState); - const changeSections = (value) => { - if (!value) { + const getActivitiesBySemCate = async (semester, category) => { + const response = await axios.get( + `http://localhost:8080/api/student-mactivities/1?semester=${category}&category=${semester}` + ); + return response.data; + }; + + const changeSections = (cate) => { + if (!cate) { getActivities().then((data) => setActivities(data)); } else { - getActivitiesBySec(value).then((data) => setActivities(data)); + getActivitiesBySemCate(cate, semester).then((data) => + setActivities(data) + ); } }; return ( @@ -72,6 +84,13 @@ export default function TagMenu() { {[ ["참여여부", "add/tech"], + ["전공마일리지", "add/tech"], + ["산학마일리지", "add/tech"], + ["비교과-연구활동", "add/tech"], + ["비교과-특강참여", "add/tech"], + ["비교과-행사참여", "add/tech"], + ["비교과-학회활동", "add/tech"], + ["기타", "add/tech"], // ["링크", "add/blog"], // ["인턴", "add/intern"], @@ -89,7 +108,7 @@ export default function TagMenu() { primary={text[0]} /> - {text[2]} + {/* */} diff --git a/src/components/mileageStudent/mileageActivity.js b/src/components/mileageStudent/mileageActivity.js index e3ce2ea..ce30faf 100644 --- a/src/components/mileageStudent/mileageActivity.js +++ b/src/components/mileageStudent/mileageActivity.js @@ -1,3 +1,218 @@ +// import { Fab } from "@mui/material"; +// import Link from "@mui/material/Link"; +// import SemesterSelect from "./semesterSelect"; + +// import Tags from "./Tag"; + +// import * as React from "react"; +// import Table from "@mui/material/Table"; +// import TableBody from "@mui/material/TableBody"; +// import TableCell from "@mui/material/TableCell"; +// import TableContainer from "@mui/material/TableContainer"; +// import TableHead from "@mui/material/TableHead"; +// import TableRow from "@mui/material/TableRow"; +// import Paper from "@mui/material/Paper"; +// import { Typography } from "@mui/material"; +// import NavigatorToTop from "./NavigatorToTop"; +// import axios from "axios"; +// import { useEffect } from "react"; +// import { LocalActivityOutlined } from "@mui/icons-material"; +// import { Box } from "@mui/system"; +// import { Padding } from "@mui/icons-material"; +// import { useRecoilValue } from "recoil"; +// import { semesterState } from "../../store/atom"; + +// const lightColor = "rgba(255, 255, 255, 0.7)"; +// export default function MileageTables() { +// const [activities, setActivities] = React.useState([]); +// const [categories, setCategories] = React.useState([]); +// const [allActivity, setAllActivities] = React.useState([]); +// const semester = useRecoilValue(semesterState); + +// const getCategories = async () => { +// const category = await axios.get("http://localhost:8080/api/categories"); +// setCategories(category.data); +// }; + +// const getAllActivities = async () => { +// const activities = await axios.get( +// "http://localhost:8080/api/mileage/semester?semester=" + semester +// ); +// setAllActivities(activities.data); +// }; + +// const getActivities = async () => { +// const activity = await axios.get( +// "http://localhost:8080/api/studentmileage/1" +// ); +// setActivities(activity.data.activities); +// }; + +// useEffect(() => { +// getActivities(); +// getCategories(); +// getAllActivities(); +// }, []); + +// useEffect(() => { +// getAllActivities(); +// }, [semester]); + +// return ( +//
+// + +// {/* {categories.map((m) => ( */} +//
+// +// +// +// +// 카테고리 +// 학기 +// 항목명 +// 참여여부 +// 비고 +// +// +// +// {semester === "ALL" ? ( +// <> +// {categories.map((m) => ( +//
+// +// {/* {m.name} */} +// +//
+ +// {activities.map((activity) => +// activity.categoryDto.name === m.name && +// activity.personal === false ? ( +// +// +// {activity.categoryDto.name} +// +// +// {activity.semester} +// +// +// {activity.name} +// +// +// {} +// +// {activity.remark} +// +// ) : ( +// "" +// ) +// )} +// ))} +// +// ) : ( +// <> +// {activities.map((activity) => +// activity.categoryDto.name === m.name && +// activity.personal === false && +// activity.semester === semester ? ( +// +// +// {activity.categoryDto.name} +// +// +// {activity.semester} +// +// +// {activity.name} +// +// +// {} +// +// {activity.remark} +// +// ) : ( +// "" +// ) +// )} +// +// )} +// +//
+// +//
+// {/* ))} */} +// +// +// +// 장학금 신청 +// +// +//
+// ); +// } + import { Fab } from "@mui/material"; import Link from "@mui/material/Link"; import SemesterSelect from "./semesterSelect"; @@ -19,13 +234,17 @@ import { useEffect } from "react"; import { LocalActivityOutlined } from "@mui/icons-material"; import { Box } from "@mui/system"; import { Padding } from "@mui/icons-material"; +import { useRecoilValue } from "recoil"; +import { semesterState } from "../../store/atom"; +import { activityState } from "../../store/atom"; const lightColor = "rgba(255, 255, 255, 0.7)"; -export default function MileageTables(props) { +export default function MileageTables() { const [activities, setActivities] = React.useState([]); const [categories, setCategories] = React.useState([]); - const [semester, setSemesters] = React.useState([]); const [allActivity, setAllActivities] = React.useState([]); + const semester = useRecoilValue(semesterState); + const mileageActivities = useRecoilValue(activityState); const getCategories = async () => { const category = await axios.get("http://localhost:8080/api/categories"); @@ -60,127 +279,138 @@ export default function MileageTables(props) {
- {categories.map((m) => ( -
-
- - {/* {m.name} */} - -
- ( */} +
+ + -
- - - 카테고리 - 학기 - 항목명 - 참여여부 - 비고 - - - - {props.semester === "whole" ? ( - <> - {activities.map((activity) => - activity.categoryDto.name === m.name && - activity.personal === false ? ( - - - {activity.categoryDto.name} - - - {activity.semester} - - + + 카테고리 + 학기 + 항목명 + 참여여부 + 비고 + + + + {semester === "ALL" ? ( + <> + {categories.map((m) => ( + //
+ <> + {/* + {/* {m.name} */} + {/* */} + {mileageActivities.map((activity) => + activity.categoryDto.name === m.name && + activity.personal === false ? ( + - {activity.name} - - - {} - - {activity.remark} - - ) : ( - "" - ) - )} - - ) : ( - <> - {activities.map((activity) => - activity.categoryDto.name === m.name && - activity.personal === false && - activity.semester === props.semester ? ( - - - {activity.categoryDto.name} - - - {activity.semester} - - + {activity.categoryDto.name} + + + {activity.semester} + + + {activity.name} + + + {} + + {activity.remark} + + ) : ( + "" + ) + )} + + ))} + + ) : ( + <> + {categories.map((m) => ( +
+ + {/* {m.name} */} + + {activities.map((activity) => + activity.categoryDto.name === m.name && + activity.personal === false && + activity.semester === semester ? ( + - {activity.name} - - - {} - - {activity.remark} - - ) : ( - "" - ) - )} - - )} - -
- -
- ))} + + {activity.categoryDto.name} + + + {activity.semester} + + + {activity.name} + + + {} + + {activity.remark} + + ) : ( + "" + ) + )} +
+ ))} + + )} + + + +
+ {/* ))} */} { @@ -16,17 +19,18 @@ export default function SemesterSelect(props) { }; const handleChange = (event) => { setSemester(event.target.value); - props.setSemesters(event.target.value); + // props.setSemesters(event.target.value); + setSemesters(event.target.value); }; useEffect(() => { getSemesters(); - props.setSemesters("2022-2"); + // props.setSemesters("2022-2"); + setSemesters("2022-2"); }, []); return ( - + 전기간 {test.map((m) => ( {m.semester} ))} - {/* 2020-1 - 2020-2 - 2021-1 - 2021-2 - 2022-1 */} ); diff --git a/src/components/mileageStudent/tab.js b/src/components/mileageStudent/tab.js index 555e2b6..a581ce8 100644 --- a/src/components/mileageStudent/tab.js +++ b/src/components/mileageStudent/tab.js @@ -53,7 +53,7 @@ function a11yProps(index) { export default function BasicTabs() { const [value, setValue] = React.useState(0); - const [semester, setSemesters] = React.useState([]); + // const [semester, setSemesters] = React.useState([]); const handleChange = (event, newValue) => { setValue(newValue); @@ -90,7 +90,7 @@ export default function BasicTabs() { */} - + - + diff --git a/src/store/atom.js b/src/store/atom.js index ea5e244..78c2b29 100644 --- a/src/store/atom.js +++ b/src/store/atom.js @@ -4,3 +4,8 @@ export const activityState = atom({ key: "activity", default: [], }); + +export const semesterState = atom({ + key: "semester", + default: [], +}); From 592222dc0a50471604e44006f0fcd64489ffb578 Mon Sep 17 00:00:00 2001 From: shinel98 Date: Tue, 8 Nov 2022 19:33:50 +0900 Subject: [PATCH 02/13] =?UTF-8?q?[#41]=20:=20=EB=A7=88=EC=9D=BC=EB=A6=AC?= =?UTF-8?q?=EC=A7=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 195 ++++++++++++ package.json | 2 + src/components/mileageStudent/Activity.js | 10 +- src/components/mileageStudent/Chart.js | 61 ++++ src/components/mileageStudent/TagMenu.js | 93 ++---- .../mileageStudent/mileageActivity.js | 296 ++++-------------- .../mileageStudent/semesterSelect.js | 2 +- src/components/mileageStudent/tab.js | 8 +- src/store/atom.js | 2 +- 9 files changed, 350 insertions(+), 319 deletions(-) create mode 100644 src/components/mileageStudent/Chart.js diff --git a/package-lock.json b/package-lock.json index d2d357a..0157cf9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "apexcharts": "^3.36.3", "aws-sdk": "^2.1243.0", "axios": "^1.1.2", "chart.js": "^3.9.1", @@ -24,6 +25,7 @@ "morris-js-module": "^1.2.1", "notistack": "^2.0.8", "react": "^18.2.0", + "react-apexcharts": "^1.4.0", "react-beautiful-dnd": "^13.1.1", "react-chartjs-2": "^4.3.1", "react-dom": "^18.2.0", @@ -5899,6 +5901,19 @@ "node": ">= 8" } }, + "node_modules/apexcharts": { + "version": "3.36.3", + "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.36.3.tgz", + "integrity": "sha512-8/FXEs0ohXMff07Gv28XjhPwEJphIUdq2/wii/pcvi54Tw6z1mjrV8ydN8rlWi/ve8BAPBefJkLmRWv7UOBsLw==", + "dependencies": { + "svg.draggable.js": "^2.2.2", + "svg.easing.js": "^2.0.0", + "svg.filter.js": "^2.0.2", + "svg.pathmorphing.js": "^0.1.3", + "svg.resize.js": "^1.4.3", + "svg.select.js": "^3.0.1" + } + }, "node_modules/arg": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", @@ -17567,6 +17582,18 @@ "node": ">=0.10.0" } }, + "node_modules/react-apexcharts": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.0.tgz", + "integrity": "sha512-DrcMV4aAMrUG+n6412yzyATWEyCDWlpPBBhVbpzBC4PDeuYU6iF84SmExbck+jx5MUm4U5PM3/T307Mc3kzc9Q==", + "dependencies": { + "prop-types": "^15.5.7" + }, + "peerDependencies": { + "apexcharts": "^3.18.0", + "react": ">=0.13" + } + }, "node_modules/react-app-polyfill": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz", @@ -19320,6 +19347,89 @@ "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, + "node_modules/svg.draggable.js": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz", + "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==", + "dependencies": { + "svg.js": "^2.0.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.easing.js": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz", + "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==", + "dependencies": { + "svg.js": ">=2.3.x" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.filter.js": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz", + "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==", + "dependencies": { + "svg.js": "^2.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.js": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz", + "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==" + }, + "node_modules/svg.pathmorphing.js": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz", + "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==", + "dependencies": { + "svg.js": "^2.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.resize.js": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz", + "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==", + "dependencies": { + "svg.js": "^2.6.5", + "svg.select.js": "^2.1.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.resize.js/node_modules/svg.select.js": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz", + "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==", + "dependencies": { + "svg.js": "^2.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.select.js": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz", + "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==", + "dependencies": { + "svg.js": "^2.6.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", @@ -25225,6 +25335,19 @@ "picomatch": "^2.0.4" } }, + "apexcharts": { + "version": "3.36.3", + "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.36.3.tgz", + "integrity": "sha512-8/FXEs0ohXMff07Gv28XjhPwEJphIUdq2/wii/pcvi54Tw6z1mjrV8ydN8rlWi/ve8BAPBefJkLmRWv7UOBsLw==", + "requires": { + "svg.draggable.js": "^2.2.2", + "svg.easing.js": "^2.0.0", + "svg.filter.js": "^2.0.2", + "svg.pathmorphing.js": "^0.1.3", + "svg.resize.js": "^1.4.3", + "svg.select.js": "^3.0.1" + } + }, "arg": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", @@ -33470,6 +33593,14 @@ "loose-envify": "^1.1.0" } }, + "react-apexcharts": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.0.tgz", + "integrity": "sha512-DrcMV4aAMrUG+n6412yzyATWEyCDWlpPBBhVbpzBC4PDeuYU6iF84SmExbck+jx5MUm4U5PM3/T307Mc3kzc9Q==", + "requires": { + "prop-types": "^15.5.7" + } + }, "react-app-polyfill": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz", @@ -34765,6 +34896,70 @@ "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, + "svg.draggable.js": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz", + "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==", + "requires": { + "svg.js": "^2.0.1" + } + }, + "svg.easing.js": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz", + "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==", + "requires": { + "svg.js": ">=2.3.x" + } + }, + "svg.filter.js": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz", + "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==", + "requires": { + "svg.js": "^2.2.5" + } + }, + "svg.js": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz", + "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==" + }, + "svg.pathmorphing.js": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz", + "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==", + "requires": { + "svg.js": "^2.4.0" + } + }, + "svg.resize.js": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz", + "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==", + "requires": { + "svg.js": "^2.6.5", + "svg.select.js": "^2.1.2" + }, + "dependencies": { + "svg.select.js": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz", + "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==", + "requires": { + "svg.js": "^2.2.5" + } + } + } + }, + "svg.select.js": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz", + "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==", + "requires": { + "svg.js": "^2.6.5" + } + }, "svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", diff --git a/package.json b/package.json index 3ff948c..174880b 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "apexcharts": "^3.36.3", "aws-sdk": "^2.1243.0", "axios": "^1.1.2", "chart.js": "^3.9.1", @@ -19,6 +20,7 @@ "morris-js-module": "^1.2.1", "notistack": "^2.0.8", "react": "^18.2.0", + "react-apexcharts": "^1.4.0", "react-beautiful-dnd": "^13.1.1", "react-chartjs-2": "^4.3.1", "react-dom": "^18.2.0", diff --git a/src/components/mileageStudent/Activity.js b/src/components/mileageStudent/Activity.js index 1533636..2c19ad0 100644 --- a/src/components/mileageStudent/Activity.js +++ b/src/components/mileageStudent/Activity.js @@ -15,11 +15,17 @@ import { Typography } from "@mui/material"; import NavigatorToTop from "./NavigatorToTop"; import axios from "axios"; import { useEffect } from "react"; +import { useRecoilValue } from "recoil"; +import { semesterState } from "../../store/atom"; +import TagMenu from "../Activity/TagMenu"; export default function BasicTable(props) { const [activities, setActivities] = React.useState([]); const [categories, setCategories] = React.useState([]); const [semesters, setSemesters] = React.useState([]); + const semester = useRecoilValue(semesterState); + + // const [mileageActivities, setActivities] = useRecoilState(activityState); const getCategories = async () => { const category = await axios.get("http://localhost:8080/api/categories"); @@ -43,7 +49,7 @@ export default function BasicTable(props) { return (
{/* */} -

내 활동들

+ {/*

내 활동들

*/} {/* {categories.map((m) => ( */}
{/*
@@ -100,7 +106,7 @@ export default function BasicTable(props) { {activities.map((activity) => // activity.categoryDto.name === m.name && activity.personal === true && - activity.semester === props.semester ? ( + activity.semester === semester ? ( { + const response = await axios.get( + `http://localhost:8080/api/student-allmactivities/18?semester=${semester}&category=${category}` + ); + + return response.data; +}; + export default function TagMenu() { const setActivities = useSetRecoilState(activityState); const semester = useRecoilValue(semesterState); - const getActivitiesBySemCate = async (semester, category) => { - const response = await axios.get( - `http://localhost:8080/api/student-mactivities/1?semester=${category}&category=${semester}` - ); - return response.data; - }; - - const changeSections = (cate) => { - if (!cate) { + const changeSections = (category) => { + if (!category) { getActivities().then((data) => setActivities(data)); } else { - getActivitiesBySemCate(cate, semester).then((data) => - setActivities(data) - ); + getActivitiesBySemCate(category, semester).then((data) => { + setActivities(data); + }); } }; + + // useEffect(() => { + // getActivitiesBySemCate("ALL", "2022-2"); + // }, []); + return ( - - {/* changeSections()}> - - - - */} - {/* - - - - - - */} + @@ -91,12 +77,6 @@ export default function TagMenu() { ["비교과-행사참여", "add/tech"], ["비교과-학회활동", "add/tech"], ["기타", "add/tech"], - - // ["링크", "add/blog"], - // ["인턴", "add/intern"], - // ["자격증", "add/cert"], - // ["언어", "add/lang"], - // ["기타", "add"], ].map((text) => ( changeSections(text[0])}> @@ -108,40 +88,9 @@ export default function TagMenu() { primary={text[0]} /> - - {/* - - */} ))} - {/* - {[ - "# 마일리지", - "# 수상", - "# 기술", - "# 교육과정", - "# 블로그", - "# 인턴", - "# 자격증", - "# 어학사항", - "# 기타", - ].map((text, index) => ( - - - - - - - - - ))} - */} ); diff --git a/src/components/mileageStudent/mileageActivity.js b/src/components/mileageStudent/mileageActivity.js index ce30faf..f278b33 100644 --- a/src/components/mileageStudent/mileageActivity.js +++ b/src/components/mileageStudent/mileageActivity.js @@ -1,218 +1,3 @@ -// import { Fab } from "@mui/material"; -// import Link from "@mui/material/Link"; -// import SemesterSelect from "./semesterSelect"; - -// import Tags from "./Tag"; - -// import * as React from "react"; -// import Table from "@mui/material/Table"; -// import TableBody from "@mui/material/TableBody"; -// import TableCell from "@mui/material/TableCell"; -// import TableContainer from "@mui/material/TableContainer"; -// import TableHead from "@mui/material/TableHead"; -// import TableRow from "@mui/material/TableRow"; -// import Paper from "@mui/material/Paper"; -// import { Typography } from "@mui/material"; -// import NavigatorToTop from "./NavigatorToTop"; -// import axios from "axios"; -// import { useEffect } from "react"; -// import { LocalActivityOutlined } from "@mui/icons-material"; -// import { Box } from "@mui/system"; -// import { Padding } from "@mui/icons-material"; -// import { useRecoilValue } from "recoil"; -// import { semesterState } from "../../store/atom"; - -// const lightColor = "rgba(255, 255, 255, 0.7)"; -// export default function MileageTables() { -// const [activities, setActivities] = React.useState([]); -// const [categories, setCategories] = React.useState([]); -// const [allActivity, setAllActivities] = React.useState([]); -// const semester = useRecoilValue(semesterState); - -// const getCategories = async () => { -// const category = await axios.get("http://localhost:8080/api/categories"); -// setCategories(category.data); -// }; - -// const getAllActivities = async () => { -// const activities = await axios.get( -// "http://localhost:8080/api/mileage/semester?semester=" + semester -// ); -// setAllActivities(activities.data); -// }; - -// const getActivities = async () => { -// const activity = await axios.get( -// "http://localhost:8080/api/studentmileage/1" -// ); -// setActivities(activity.data.activities); -// }; - -// useEffect(() => { -// getActivities(); -// getCategories(); -// getAllActivities(); -// }, []); - -// useEffect(() => { -// getAllActivities(); -// }, [semester]); - -// return ( -//
-// - -// {/* {categories.map((m) => ( */} -//
-// -// -// -// -// 카테고리 -// 학기 -// 항목명 -// 참여여부 -// 비고 -// -// -// -// {semester === "ALL" ? ( -// <> -// {categories.map((m) => ( -//
-// -// {/* {m.name} */} -// -//
- -// {activities.map((activity) => -// activity.categoryDto.name === m.name && -// activity.personal === false ? ( -// -// -// {activity.categoryDto.name} -// -// -// {activity.semester} -// -// -// {activity.name} -// -// -// {} -// -// {activity.remark} -// -// ) : ( -// "" -// ) -// )} -// ))} -// -// ) : ( -// <> -// {activities.map((activity) => -// activity.categoryDto.name === m.name && -// activity.personal === false && -// activity.semester === semester ? ( -// -// -// {activity.categoryDto.name} -// -// -// {activity.semester} -// -// -// {activity.name} -// -// -// {} -// -// {activity.remark} -// -// ) : ( -// "" -// ) -// )} -// -// )} -// -//
-// -//
-// {/* ))} */} -// -// -// -// 장학금 신청 -// -// -//
-// ); -// } - import { Fab } from "@mui/material"; import Link from "@mui/material/Link"; import SemesterSelect from "./semesterSelect"; @@ -237,15 +22,19 @@ import { Padding } from "@mui/icons-material"; import { useRecoilValue } from "recoil"; import { semesterState } from "../../store/atom"; import { activityState } from "../../store/atom"; +import { getActivitiesBySemCate } from "./TagMenu"; +import { useRecoilState } from "recoil"; +import { Chip } from "@mui/material"; +import DoneIcon from "@mui/icons-material/Done"; const lightColor = "rgba(255, 255, 255, 0.7)"; export default function MileageTables() { - const [activities, setActivities] = React.useState([]); const [categories, setCategories] = React.useState([]); const [allActivity, setAllActivities] = React.useState([]); const semester = useRecoilValue(semesterState); - const mileageActivities = useRecoilValue(activityState); + const [mileageActivities, setActivities] = useRecoilState(activityState); + // console.log(mileageActivities); const getCategories = async () => { const category = await axios.get("http://localhost:8080/api/categories"); setCategories(category.data); @@ -265,19 +54,32 @@ export default function MileageTables() { setActivities(activity.data.activities); }; + const changeSections = (category) => { + if (!category) { + getActivities().then((data) => setActivities(data)); + } else { + getActivitiesBySemCate(category, semester).then((data) => { + setActivities(data); + console.log(category); + console.log(semester); + console.log(data); + }); + } + }; useEffect(() => { getActivities(); getCategories(); getAllActivities(); + changeSections("ALL"); }, []); useEffect(() => { getAllActivities(); }, [semester]); - + console.log(categories); return (
- + {/* */} {/* {categories.map((m) => ( */}
@@ -288,7 +90,7 @@ export default function MileageTables() { > 카테고리학기항목명 - 참여여부 + + 참여여부 + 비고 @@ -313,8 +117,7 @@ export default function MileageTables() { {/* {m.name} */} {/* */} {mileageActivities.map((activity) => - activity.categoryDto.name === m.name && - activity.personal === false ? ( + activity.category === m.name ? ( - {activity.categoryDto.name} + {activity.category} {activity.semester} + + {activity.name} + - {activity.name} - - - {} + {activity.participated && } {activity.remark} @@ -358,14 +166,15 @@ export default function MileageTables() { ) : ( <> {categories.map((m) => ( -
- - {/* {m.name} */} - - {activities.map((activity) => - activity.categoryDto.name === m.name && - activity.personal === false && - activity.semester === semester ? ( + //
+ // + // {/* {m.name} */} + // + <> + {mileageActivities.map((activity) => { + console.log(m, activity, semester); + return activity.category === m.name && + activity.semester === semester ? ( - {activity.categoryDto.name} + {activity.category} {activity.name} - - {} + + {activity.participated && } {activity.remark} ) : ( "" - ) - )} -
+ ); + })} + ))} )} diff --git a/src/components/mileageStudent/semesterSelect.js b/src/components/mileageStudent/semesterSelect.js index 7ca69f9..491c89c 100644 --- a/src/components/mileageStudent/semesterSelect.js +++ b/src/components/mileageStudent/semesterSelect.js @@ -25,7 +25,7 @@ export default function SemesterSelect() { useEffect(() => { getSemesters(); // props.setSemesters("2022-2"); - setSemesters("2022-2"); + // setSemesters("2022-2"); }, []); return ( diff --git a/src/components/mileageStudent/tab.js b/src/components/mileageStudent/tab.js index a581ce8..9f66530 100644 --- a/src/components/mileageStudent/tab.js +++ b/src/components/mileageStudent/tab.js @@ -77,7 +77,13 @@ export default function BasicTabs() { label="내 마일리지" {...a11yProps(0)} /> - + } + iconPosition="start" + label="내 활동" + {...a11yProps(1)} + /> } diff --git a/src/store/atom.js b/src/store/atom.js index 78c2b29..4857791 100644 --- a/src/store/atom.js +++ b/src/store/atom.js @@ -7,5 +7,5 @@ export const activityState = atom({ export const semesterState = atom({ key: "semester", - default: [], + default: "2022-1", }); From 05f5bfe841ed8aa935d6efb826806a7275ab568f Mon Sep 17 00:00:00 2001 From: shinel98 <75024473+shinel98@users.noreply.github.com> Date: Mon, 14 Nov 2022 00:10:22 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat[#64]=20:=20=EB=82=B4=20=ED=99=9C?= =?UTF-8?q?=EB=8F=99=20=EC=8B=A0=EC=B2=AD=20API=20=EC=97=B0=EA=B2=B0,=20UI?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD,=20=EC=B0=A8=ED=8A=B8=20Carousel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mileageStudent/ATagMenu.js | 101 ++++++ src/components/mileageStudent/Activity.js | 76 +++-- src/components/mileageStudent/ApplyButton.js | 36 +- src/components/mileageStudent/MileageChart.js | 310 +++++++++++------- src/components/mileageStudent/TagMenu.js | 6 +- .../mileageStudent/mileageActivity.js | 29 +- .../mileageStudent/semesterSelect.js | 8 +- src/components/mileageStudent/tab.js | 33 +- src/pages/MileageStudent.js | 2 - src/store/atom.js | 5 + src/style/mileage.css | 9 +- 11 files changed, 420 insertions(+), 195 deletions(-) create mode 100644 src/components/mileageStudent/ATagMenu.js diff --git a/src/components/mileageStudent/ATagMenu.js b/src/components/mileageStudent/ATagMenu.js new file mode 100644 index 0000000..c81841d --- /dev/null +++ b/src/components/mileageStudent/ATagMenu.js @@ -0,0 +1,101 @@ +import * as React from "react"; +import Box from "@mui/material/Box"; +import Drawer from "@mui/material/Drawer"; +import List from "@mui/material/List"; +import ListItem from "@mui/material/ListItem"; +import ListItemButton from "@mui/material/ListItemButton"; +import ListItemText from "@mui/material/ListItemText"; +import AddIcon from "@mui/icons-material/Add"; +import { Link } from "react-router-dom"; +import TagIcon from "@mui/icons-material/Tag"; +import { getActivities, getActivitiesBySec } from "../../api/activity"; +import { myActivityState } from "../../store/atom"; +import { useSetRecoilState } from "recoil"; +import { useRecoilValue } from "recoil"; +import axios from "axios"; +import { semesterState } from "../../store/atom"; +import { CategoryRounded } from "@mui/icons-material"; +import { useEffect } from "react"; + +const drawerWidth = 240; +const style = { + fontWeight: "bold", +}; + +export const getMyActivitiesBySemCate = async (section, semester) => { + const response = await axios.get( + `http://localhost:8080/api/student-activities/status?semester=${semester}§ion=${section}` + ); + + return response.data; +}; + +export default function ATagMenu() { + const setActivities = useSetRecoilState(myActivityState); + const semester = useRecoilValue(semesterState); + + const changeSections = (section) => { + if (!section) { + getActivities().then((data) => setActivities(data)); + } else { + getMyActivitiesBySemCate(section, semester).then((data) => { + setActivities(data); + // console.log("section : " + section); + // console.log("semester : " + semester); + }); + } + }; + + useEffect(() => { + // getActivities(); + + // getAllActivities(); + changeSections("ALL"); + }, []); + return ( + + + + + + + + {[ + ["수상", "add/tech"], + ["기술", "add/tech"], + ["학력", "add/tech"], + ["링크", "add/tech"], + ["경력", "add/tech"], + ["자격증", "add/tech"], + ["외국어", "add/tech"], + ["기타", "add/tech"], + ].map((text) => ( + changeSections(text[0])}> + + + + + + ))} + + + + ); +} diff --git a/src/components/mileageStudent/Activity.js b/src/components/mileageStudent/Activity.js index 2c19ad0..43f6756 100644 --- a/src/components/mileageStudent/Activity.js +++ b/src/components/mileageStudent/Activity.js @@ -2,7 +2,6 @@ import ApplyButton from "./ApplyButton"; import SemesterSelect from "./semesterSelect"; -import * as React from "react"; import Table from "@mui/material/Table"; import TableBody from "@mui/material/TableBody"; import TableCell from "@mui/material/TableCell"; @@ -10,41 +9,42 @@ import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import Paper from "@mui/material/Paper"; -import Tags from "./Tag"; import { Typography } from "@mui/material"; import NavigatorToTop from "./NavigatorToTop"; -import axios from "axios"; import { useEffect } from "react"; import { useRecoilValue } from "recoil"; import { semesterState } from "../../store/atom"; -import TagMenu from "../Activity/TagMenu"; +import { useRecoilState } from "recoil"; +import { myActivityState } from "../../store/atom"; +import { getActivities } from "../../api/activity"; +import { getMyActivitiesBySemCate } from "./ATagMenu"; +import { useState } from "react"; -export default function BasicTable(props) { - const [activities, setActivities] = React.useState([]); - const [categories, setCategories] = React.useState([]); - const [semesters, setSemesters] = React.useState([]); - const semester = useRecoilValue(semesterState); +export default function BasicTable() { + // const [categories, setCategories] = React.useState([]); + // const [semesters, setSemesters] = React.useState([]); + const semesters = useRecoilValue(semesterState); + const [activities, setActivities] = useRecoilState(myActivityState); + const [activityId, setActivityId] = useState(); + const [rq, setRq] = useState(); + const [apply, setApply] = useState(); - // const [mileageActivities, setActivities] = useRecoilState(activityState); - - const getCategories = async () => { - const category = await axios.get("http://localhost:8080/api/categories"); - setCategories(category.data); - }; - - const getActivities = async () => { - const activity = await axios.get( - "http://localhost:8080/api/studentmileage/1" - ); - setActivities(activity.data.activities); + const changeSections = (section) => { + if (!section) { + getActivities().then((data) => setActivities(data)); + } else { + getMyActivitiesBySemCate(section, semesters).then((data) => { + setActivities(data); + console.log(semesters); + }); + } }; useEffect(() => { - getActivities(); - getCategories(); + changeSections("ALL"); }, []); useEffect(() => { - console.log(activities); + changeSections("ALL"); }, [semesters]); return (
@@ -56,11 +56,10 @@ export default function BasicTable(props) { {m.period}
*/} -
- {props.semesters === "ALL" ? ( + {semesters === "ALL" ? ( <> {activities.map((activity) => - activity.personal === true ? ( + activity.requestStatus !== 1 ? ( {activity.name} {activity.remark} - + {activity.requestStatus !== 3 + ? (apply = true) + : (apply = false)} + ) : ( - // "" - <>{semesters} + "" ) )} ) : ( <> {activities.map((activity) => - // activity.categoryDto.name === m.name && - activity.personal === true && - activity.semester === semester ? ( + activity.requestStatus !== 1 && + semesters === activity.semester ? ( {activity.name} {activity.remark} - + ) : ( diff --git a/src/components/mileageStudent/ApplyButton.js b/src/components/mileageStudent/ApplyButton.js index e332ae3..81db0f8 100644 --- a/src/components/mileageStudent/ApplyButton.js +++ b/src/components/mileageStudent/ApplyButton.js @@ -6,10 +6,32 @@ import DialogContent from "@mui/material/DialogContent"; import DialogContentText from "@mui/material/DialogContentText"; import DialogTitle from "@mui/material/DialogTitle"; import { blue, red } from "@mui/material/colors"; +import axios from "axios"; +import { useEffect } from "react"; -export default function ApplyButton() { +export default function ApplyButton(props) { const [open, setOpen] = React.useState(false); - const [apply, setApply] = React.useState(false); + + const applyMyActivity = async (id) => { + const category = await axios.put( + `http://localhost:8080/api/activity/apply/${id}` + ); + + window.location.replace("./mileage"); + }; + + // useEffect(() => { + // applyMyActivity(props.id); + // }, []); + + // prop에는 activity id 랑 requestStatus가 들어와야 함. + // console.log("id : " + props.id); + // console.log("requestStatus : " + props.requestStatus); + // 산청 버튼을 눌었을 때 DB가 반영되는 함수 실행 + // refresh + // requestStatus 값에 따라서 버튼 UI 다르게 + + let cond; const handleClickOpen = () => { setOpen(true); @@ -19,13 +41,15 @@ export default function ApplyButton() { setOpen(false); }; - const clickApply = () => { - setApply(true); + const clickApply = (id) => { + // props.setApply(true); + applyMyActivity(id); }; + // console.log("props : " + props.test); return (
- {apply ? ( + {props.requestStatus !== 3 ? ( @@ -57,7 +81,7 @@ export default function ApplyButton() {
{activity.category} {activity.semester} {activity.name} @@ -172,7 +169,7 @@ export default function MileageTables() { // <> {mileageActivities.map((activity) => { - console.log(m, activity, semester); + // console.log(m, activity, semester); return activity.category === m.name && activity.semester === semester ? ( { - const sem = await axios.get("http://localhost:8080/api/semester/1"); + const sem = await axios.get("http://localhost:8080/api/semester/18"); setTest(sem.data); }; const handleChange = (event) => { - setSemester(event.target.value); - // props.setSemesters(event.target.value); + // setSemester(event.target.value); setSemesters(event.target.value); }; useEffect(() => { getSemesters(); - // props.setSemesters("2022-2"); - // setSemesters("2022-2"); }, []); return ( @@ -53,6 +50,7 @@ export default function SemesterSelect() { value={semester} label="2022-1학기" onChange={handleChange} + sx={{ minWidth: 100 }} > 전기간 diff --git a/src/components/mileageStudent/tab.js b/src/components/mileageStudent/tab.js index 9f66530..b22e14b 100644 --- a/src/components/mileageStudent/tab.js +++ b/src/components/mileageStudent/tab.js @@ -8,13 +8,13 @@ import MileageChart from "./MileageChart"; import Box from "@mui/material/Box"; import MileageTables from "./mileageActivity"; -// import Button from "@mui/material/Button"; import ActivityTables from "./Activity"; import SemesterSelect from "./semesterSelect"; import ListAltIcon from "@mui/icons-material/ListAlt"; import BarChartIcon from "@mui/icons-material/BarChart"; -// import { Fab } from "@mui/material"; -// import { Link } from "react-router-dom"; +import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined"; +import TagMenu from "./TagMenu"; +import ATagMenu from "./ATagMenu"; const lightColor = "rgba(255, 255, 255, 0.7)"; @@ -30,7 +30,7 @@ function TabPanel(props) { {...other} > {value === index && ( - + {children} )} @@ -53,17 +53,21 @@ function a11yProps(index) { export default function BasicTabs() { const [value, setValue] = React.useState(0); - // const [semester, setSemesters] = React.useState([]); const handleChange = (event, newValue) => { setValue(newValue); }; return ( -
+ - + } + icon={} iconPosition="start" label="내 활동" {...a11yProps(1)} @@ -110,11 +114,18 @@ export default function BasicTabs() { + - + + + + - + + + + @@ -144,6 +155,6 @@ export default function BasicTabs() { 장학금 신청 */} -
+ ); } diff --git a/src/pages/MileageStudent.js b/src/pages/MileageStudent.js index e03e59f..c8f12f5 100644 --- a/src/pages/MileageStudent.js +++ b/src/pages/MileageStudent.js @@ -5,7 +5,6 @@ import Header from "../components/mileageStudent/header"; import Tab from "../components/mileageStudent/tab"; import { Box } from "@mui/material"; -import TagMenu from "../components/mileageStudent/TagMenu"; // function MileageStudent() { // return ( @@ -30,7 +29,6 @@ function MileageStudent() { // // - ); diff --git a/src/store/atom.js b/src/store/atom.js index 4857791..dd0e667 100644 --- a/src/store/atom.js +++ b/src/store/atom.js @@ -5,6 +5,11 @@ export const activityState = atom({ default: [], }); +export const myActivityState = atom({ + key: "myactivity", + default: [], +}); + export const semesterState = atom({ key: "semester", default: "2022-1", diff --git a/src/style/mileage.css b/src/style/mileage.css index a41544c..ae9aa16 100644 --- a/src/style/mileage.css +++ b/src/style/mileage.css @@ -9,10 +9,11 @@ } .outline { - width: 97%; + width: 100%; margin: 0 auto; background-color: white; - box-shadow: 0 2px 6px rgb(100 100 100 / 30%); + flex-direction: column; + /* box-shadow: 0 2px 6px rgb(100 100 100 / 30%); */ } .header { @@ -51,9 +52,13 @@ } .paper { + width: 100%; margin-bottom: 50px; margin-top: 50px; } .root { + width: 100%; padding-bottom: 100px; + display: flex; + justify-content: center; } From de296a318c8fa992f94b36b25b53e0c6179e705f Mon Sep 17 00:00:00 2001 From: shinel98 <75024473+shinel98@users.noreply.github.com> Date: Mon, 14 Nov 2022 00:36:28 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat[#64]=20:=20=EB=82=B4=20=ED=99=9C?= =?UTF-8?q?=EB=8F=99=20=EC=8B=A0=EC=B2=AD=20API=20=EC=97=B0=EA=B2=B0,=20UI?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD,=20=EC=B0=A8=ED=8A=B8=20Carousel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mileageStudent/ATagMenu.js | 2 +- src/components/mileageStudent/Activity.js | 2 + src/components/mileageStudent/ApplyButton.js | 25 +--- src/components/mileageStudent/Chart.js | 120 +++++++++--------- src/components/mileageStudent/Tag.js | 4 +- src/components/mileageStudent/TagMenu.js | 2 +- .../mileageStudent/mileageActivity.js | 8 +- .../mileageStudent/semesterSelect.js | 2 +- 8 files changed, 80 insertions(+), 85 deletions(-) diff --git a/src/components/mileageStudent/ATagMenu.js b/src/components/mileageStudent/ATagMenu.js index c81841d..f67b704 100644 --- a/src/components/mileageStudent/ATagMenu.js +++ b/src/components/mileageStudent/ATagMenu.js @@ -24,7 +24,7 @@ const style = { export const getMyActivitiesBySemCate = async (section, semester) => { const response = await axios.get( - `http://localhost:8080/api/student-activities/status?semester=${semester}§ion=${section}` + `${process.env.REACT_APP_SERVER}/student-activities/status?semester=${semester}§ion=${section}` ); return response.data; diff --git a/src/components/mileageStudent/Activity.js b/src/components/mileageStudent/Activity.js index 43f6756..416e325 100644 --- a/src/components/mileageStudent/Activity.js +++ b/src/components/mileageStudent/Activity.js @@ -97,6 +97,7 @@ export default function BasicTable() { @@ -125,6 +126,7 @@ export default function BasicTable() { diff --git a/src/components/mileageStudent/ApplyButton.js b/src/components/mileageStudent/ApplyButton.js index 81db0f8..edcf8b1 100644 --- a/src/components/mileageStudent/ApplyButton.js +++ b/src/components/mileageStudent/ApplyButton.js @@ -9,28 +9,17 @@ import { blue, red } from "@mui/material/colors"; import axios from "axios"; import { useEffect } from "react"; -export default function ApplyButton(props) { +export default function ApplyButton({ requestStatus, id, changeSections }) { const [open, setOpen] = React.useState(false); const applyMyActivity = async (id) => { const category = await axios.put( - `http://localhost:8080/api/activity/apply/${id}` + `${process.env.REACT_APP_SERVER}/activity/apply/${id}` ); - window.location.replace("./mileage"); + changeSections("ALL"); }; - // useEffect(() => { - // applyMyActivity(props.id); - // }, []); - - // prop에는 activity id 랑 requestStatus가 들어와야 함. - // console.log("id : " + props.id); - // console.log("requestStatus : " + props.requestStatus); - // 산청 버튼을 눌었을 때 DB가 반영되는 함수 실행 - // refresh - // requestStatus 값에 따라서 버튼 UI 다르게 - let cond; const handleClickOpen = () => { @@ -42,14 +31,14 @@ export default function ApplyButton(props) { }; const clickApply = (id) => { - // props.setApply(true); + // setApply(true); applyMyActivity(id); }; - // console.log("props : " + props.test); + // console.log("props : " + test); return (
- {props.requestStatus !== 3 ? ( + {requestStatus !== 3 ? ( @@ -81,7 +70,7 @@ export default function ApplyButton(props) {
- - - 학기 - 항목명 - 비고 - 마일리지 신청 - - - - {semesters === "ALL" ? ( - <> - {activities.map((activity) => - activity.requestStatus !== 1 ? ( - - - {activity.semester} - - {activity.name} - {activity.remark} - - {activity.requestStatus !== 3 - ? (apply = true) - : (apply = false)} - - - - ) : ( - "" - ) - )} - - ) : ( - <> - {activities.map((activity) => - activity.requestStatus !== 1 && - semesters === activity.semester ? ( - - - {activity.semester} - - {activity.name} - {activity.remark} - - - - - ) : ( - "" - ) - )} - - )} - -
- + + + + 학기 + 항목명 + 비고 + 마일리지 신청 + + + + {semesters === "ALL" ? ( + <> + {activities.map((activity) => + activity.requestStatus !== 1 ? ( + + + {activity.semester} + + {activity.name} + {activity.remark} + + {activity.requestStatus !== 3 + ? (apply = true) + : (apply = false)} + + + + ) : ( + "" + ) + )} + + ) : ( + <> + {activities.map((activity) => + activity.requestStatus !== 1 && + semesters === activity.semester ? ( + + + {activity.semester} + + {activity.name} + {activity.remark} + + + + + ) : ( + "" + ) + )} + + )} + +
+ +
+ {/* ))} */} +
- {/* ))} */} - -
+ ); } diff --git a/src/components/mileageStudent/MileageChart.js b/src/components/mileageStudent/MileageChart.js index 3c86d74..6d24107 100644 --- a/src/components/mileageStudent/MileageChart.js +++ b/src/components/mileageStudent/MileageChart.js @@ -21,7 +21,7 @@ import { export default function MileageChart() { return ( <> - + diff --git a/src/components/mileageStudent/mileageActivity.js b/src/components/mileageStudent/mileageActivity.js index f0911ac..1bfc949 100644 --- a/src/components/mileageStudent/mileageActivity.js +++ b/src/components/mileageStudent/mileageActivity.js @@ -31,6 +31,7 @@ import { getCategories, getActivitiesBySemCate, } from "../../api/mileage"; +import { Container } from "@mui/material"; const lightColor = "rgba(255, 255, 255, 0.7)"; export default function MileageTables() { @@ -89,170 +90,176 @@ export default function MileageTables() { }, [semester]); return ( -
-
- - +
+
+ - - - 카테고리 - 학기 - 항목명 - - 참여여부 - - 비고 - - - - {semester === "ALL" ? ( - <> - {categories.map((m) => ( - //
- <> - {/* +
+ + + 카테고리 + 학기 + 항목명 + + 참여여부 + + 비고 + + + + {semester === "ALL" ? ( + <> + {categories.map((m) => ( + //
+ <> + {/* {/* {m.name} */} - {/* */} - {mileageActivities.map((activity) => - activity.category === m.name ? ( - - - {activity.category} - - - {activity.semester} - - - {activity.name} - - */} + {mileageActivities.map((activity) => + activity.category === m.name ? ( + - {activity.participated && } - - {activity.remark} - - ) : ( - "" - ) - )} - - ))} - - ) : ( - <> - {categories.map((m) => ( - //
- // - // {/* {m.name} */} - // - <> - {mileageActivities.map((activity) => { - // console.log(m, activity, semester); - return activity.category === m.name && - activity.semester === semester ? ( - - - {activity.category} - - - {activity.semester} - - + {activity.category} + + + {activity.semester} + + + {activity.name} + + + {activity.participated && } + + {activity.remark} + + ) : ( + "" + ) + )} + + ))} + + ) : ( + <> + {categories.map((m) => ( + //
+ // + // {/* {m.name} */} + // + <> + {mileageActivities.map((activity) => { + // console.log(m, activity, semester); + return activity.category === m.name && + activity.semester === semester ? ( + - {activity.name} - - - {activity.participated && } - - {activity.remark} - - ) : ( - "" - ); - })} - - ))} - - )} - -
- -
- {/* ))} */} - - - + {activity.category} + + + {activity.semester} + + + {activity.name} + + + {activity.participated && } + + {activity.remark} + + ) : ( + "" + ); + })} + + ))} + + )} + + + +
+ {/* ))} */} + + - 장학금 신청 - - -
+ + 장학금 신청 + + +
+ ); } diff --git a/src/components/mileageStudent/tab.js b/src/components/mileageStudent/tab.js index 93d03aa..c822eef 100644 --- a/src/components/mileageStudent/tab.js +++ b/src/components/mileageStudent/tab.js @@ -16,6 +16,7 @@ import TagMenu from "./TagMenu"; import ATagMenu from "./ATagMenu"; import InvoiceListPage from "./mileageActivity"; import MileageChart from "./MileageChart"; +import { Container } from "@mui/material"; const lightColor = "rgba(255, 255, 255, 0.7)"; @@ -60,80 +61,81 @@ export default function BasicTabs() { }; return ( - - - - - + + + + - } - iconPosition="start" - label="내 마일리지" - {...a11yProps(0)} - /> - } - iconPosition="start" - label="내 활동" - {...a11yProps(1)} - /> - } - iconPosition="start" - label="차트" - {...a11yProps(2)} - /> - {/* + + } + iconPosition="start" + label="내 마일리지" + {...a11yProps(0)} + /> + } + iconPosition="start" + label="내 활동" + {...a11yProps(1)} + /> + } + iconPosition="start" + label="차트" + {...a11yProps(2)} + /> + {/* {value ? "" : "장학금 신청 완료"} */} - - + + + - - - - - {/* */} - - - - - - - - - - - - + + + + {/* */} + + + + + + + + + + + + - {/* */} - + + ); } From e5d22263784276d1b087e4054d23d3012a571a9d Mon Sep 17 00:00:00 2001 From: shinel98 <75024473+shinel98@users.noreply.github.com> Date: Tue, 22 Nov 2022 19:21:42 +0900 Subject: [PATCH 12/13] =?UTF-8?q?[#113]=20:=20=EB=B0=B0=ED=8F=AC=20?= =?UTF-8?q?=ED=9B=84=20=EB=B2=84=ED=8A=BC=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/charts/ChartMixed.js | 12 ++++++++---- src/components/mileageStudent/Activity.js | 2 -- src/components/mileageStudent/NavigatorToTop.js | 4 ++-- src/components/mileageStudent/mileageActivity.js | 3 ++- src/pages/MileageStudent.js | 2 +- src/style/{mileage.css => mileage.module.css} | 0 6 files changed, 13 insertions(+), 10 deletions(-) rename src/style/{mileage.css => mileage.module.css} (100%) diff --git a/src/components/charts/ChartMixed.js b/src/components/charts/ChartMixed.js index 347b443..9ca4c02 100644 --- a/src/components/charts/ChartMixed.js +++ b/src/components/charts/ChartMixed.js @@ -22,16 +22,20 @@ export default function ChartMixed() { const getTotalAveragePerCate = () => { setTotalAverage( - datas.map((item) => (item.averageCnt / item.totalCategoryCnt) * 100) + datas.map((item) => + Math.floor((item.averageCnt / item.totalCategoryCnt) * 100) + ) ); - // console.log(totalAverage); + console.log(totalAverage); }; const getStuAveragePerCate = () => { setStudentAverage( - datas.map((item) => (item.myCnt / item.totalCategoryCnt) * 100) + datas.map((item) => + Math.floor((item.myCnt / item.totalCategoryCnt) * 100) + ) ); - // console.log(studentAverage); + console.log(studentAverage); }; useEffect(() => { diff --git a/src/components/mileageStudent/Activity.js b/src/components/mileageStudent/Activity.js index 029f9b1..1a6297c 100644 --- a/src/components/mileageStudent/Activity.js +++ b/src/components/mileageStudent/Activity.js @@ -23,8 +23,6 @@ import { getMyActivitiesBySemCate } from "../../api/mileage"; import { Container } from "@mui/material"; export default function BasicTable() { - // const [categories, setCategories] = React.useState([]); - // const [semesters, setSemesters] = React.useState([]); const semesters = useRecoilValue(semesterState); const [activities, setActivities] = useRecoilState(myActivityState); const [activityId, setActivityId] = useState(); diff --git a/src/components/mileageStudent/NavigatorToTop.js b/src/components/mileageStudent/NavigatorToTop.js index 401934a..b07baba 100644 --- a/src/components/mileageStudent/NavigatorToTop.js +++ b/src/components/mileageStudent/NavigatorToTop.js @@ -1,7 +1,7 @@ import * as React from "react"; import Box from "@mui/material/Box"; import Fab from "@mui/material/Fab"; - +import styles from "../../style/mileage.module.css"; import NavigationIcon from "@mui/icons-material/Navigation"; // const MoveToTop = () => { @@ -21,7 +21,7 @@ export default function NavigatorToTop() { }; return ( Date: Wed, 23 Nov 2022 18:17:55 +0900 Subject: [PATCH 13/13] =?UTF-8?q?=EB=A7=88=EC=9D=BC=EB=A6=AC=EC=A7=80=20?= =?UTF-8?q?=EC=B2=98=EC=9D=8C=20=EB=9C=A8=EB=8A=94=20=ED=95=99=EA=B8=B0=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/atom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/atom.js b/src/store/atom.js index dd0e667..856fab8 100644 --- a/src/store/atom.js +++ b/src/store/atom.js @@ -12,5 +12,5 @@ export const myActivityState = atom({ export const semesterState = atom({ key: "semester", - default: "2022-1", + default: "2022-2", });