From eedf01ff1cc004e1bd64d96c1898c129d536d365 Mon Sep 17 00:00:00 2001 From: jingeon27 Date: Sun, 13 Nov 2022 14:57:07 +0900 Subject: [PATCH 1/4] =?UTF-8?q?ADD=20::=20pagination=20=EC=BA=90=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/company/requesrResistration/index.js | 2 +- src/components/api/teacher/index.js | 89 +++++++- .../recruitmentList/list/index.jsx | 4 +- .../pages/teacherPage/list/wait/index.jsx | 195 +++++++++++++++++- 4 files changed, 280 insertions(+), 10 deletions(-) diff --git a/src/components/api/company/requesrResistration/index.js b/src/components/api/company/requesrResistration/index.js index 2b5ee3a..74bbd60 100644 --- a/src/components/api/company/requesrResistration/index.js +++ b/src/components/api/company/requesrResistration/index.js @@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query"; import axios from "axios"; import { BaseUrl } from "../../../../export/base"; const token = - "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsInR5cGUiOiJhY2Nlc3MiLCJpYXQiOjE2NjgyMTYzODMsImV4cCI6MTY2ODMwMjc4M30.VaaCr7wVhxcbG0Mkq9m671P2JuCqpR1GcrFYT9kXrek"; + "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsInR5cGUiOiJhY2Nlc3MiLCJpYXQiOjE2NjgzMTI4MTksImV4cCI6MTY2ODM5OTIxOX0.Xa8JlV2OyvwTvjV35kKCZrmfWI7mxN89UifM4UX_GYM"; export const getListProps = () => { // eslint-disable-next-line react-hooks/rules-of-hooks return useQuery(["datas"], async () => { diff --git a/src/components/api/teacher/index.js b/src/components/api/teacher/index.js index 3d208e4..082271d 100644 --- a/src/components/api/teacher/index.js +++ b/src/components/api/teacher/index.js @@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query"; import axios from "axios"; import { BaseUrl } from "../../../export/base"; const token = - "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIyNSIsInR5cGUiOiJhY2Nlc3MiLCJpYXQiOjE2NjgyMTc4OTAsImV4cCI6MTY2ODMwNDI5MH0.MKJc3OQID5--XKcbxn045jrArILC5Sop_e5UQXV7Fcc"; + "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIyNSIsInR5cGUiOiJhY2Nlc3MiLCJpYXQiOjE2NjgyNzMxMTQsImV4cCI6MTY2ODM1OTUxNH0.ozHJmAsv1yBuwWQUfvm9ToUPvoK9H2_4jhKuGtpDLYY"; export const getBoardList = () => { // eslint-disable-next-line react-hooks/rules-of-hooks return useQuery(["getBoardList"], async () => { @@ -29,3 +29,90 @@ export const noticeRequest = async (method, path, query) => { }); console.log(data); }; +export const postNoticeRequest = async (idx, path) => { + let res; + await axios({ + method: "get", + url: BaseUrl + path, + params: { + idx: idx, + size: 7, + }, + headers: { + Authorization: `Bearer ${token}`, + }, + }).then((response) => { + const data = response.data; + console.log(data); + let arr = new Array(data.content.length) + .fill(0) + .map((e, i) => + new Array(data.content[i].recruitmentBusinessResponse.length).fill("") + ); + let arr2 = new Array(data.content.length) + .fill(0) + .map((e, i) => + new Array(data.content[i].recruitmentBusinessResponse.length).fill("") + ); + let count = []; + for (let i = 0; i < data.content.length; i++) { + let temp = 0; + for ( + let j = 0; + j < data.content[i].recruitmentBusinessResponse.length; + j++ + ) { + arr[i][j] = + data.content[i].recruitmentBusinessResponse[ + j + ].classificationResponse.bigClassification.bigClassificationName; + arr2[i][j] = + data.content[i].recruitmentBusinessResponse[ + j + ].classificationResponse.name; + temp = + temp + + data.content[i].recruitmentBusinessResponse[j].numberOfEmployee; + } + count.push({ + total: temp, + name: data.content[i].company.companyName, + id: data.content[i].noticeId, + }); + } + const ad = arr.map((item) => + item.filter((e, i, ar) => { + return ar.findIndex((el) => e === el) === i; + }) + ); + const as = arr2.map((item) => + item.filter((e, i, ar) => { + return ar.findIndex((el) => e === el) === i; + }) + ); + for (let i = 0; i < data.content.length; i++) { + as[i] = as[i].join(); + ad[i] = ad[i].join(); + } + res = { + count, + as, + ad, + last: data.last, + first: data.first, + totalPage: data.totalPages, + }; + }); + console.log(res); + return res; +}; +export const postNotice = (idx, path) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + return useQuery( + ["pagin", idx, path], + async () => postNoticeRequest(idx, path), + { + keepPreviousData: true, + } + ); +}; diff --git a/src/components/pages/companyPage/recruitmentList/list/index.jsx b/src/components/pages/companyPage/recruitmentList/list/index.jsx index 763eed9..ccd425f 100644 --- a/src/components/pages/companyPage/recruitmentList/list/index.jsx +++ b/src/components/pages/companyPage/recruitmentList/list/index.jsx @@ -15,11 +15,11 @@ const ResistrationList = ({ data }) => { {data.count[i].id}
대분류
-
{user}
+
{data.ad[i]}
소분류
- {data.ad[i]} + {user}
채용인원
diff --git a/src/components/pages/teacherPage/list/wait/index.jsx b/src/components/pages/teacherPage/list/wait/index.jsx index 64ce32e..2c867a8 100644 --- a/src/components/pages/teacherPage/list/wait/index.jsx +++ b/src/components/pages/teacherPage/list/wait/index.jsx @@ -1,15 +1,198 @@ +/* eslint-disable react/jsx-no-undef */ import styled from "styled-components"; import { Notice } from "../../../../common/notice"; +import { useState } from "react"; +import { useQueryClient } from "@tanstack/react-query"; +import { useEffect } from "react"; +import { useCallback } from "react"; +import { postNotice, postNoticeRequest } from "../../../../api/teacher"; +import LoadingPage from "../../../../common/loading"; +import ErrorPage from "../../../../common/error"; const Wait = () => { + const [count, setCount] = useState(0); + const [arr, setArr] = useState([]); + const [arr2, setArr2] = useState([1]); + const queryClient = useQueryClient(); + const { status, data } = postNotice(count, "/notice/waiting-notice/list"); + + useEffect(() => { + let asdf = []; + if (status === "success") { + for (let i = 1; i <= data.totalPage; i++) { + asdf.push(i); + } + setArr(asdf); + } + }, [data]); + useEffect(() => { + if (data?.last) { + queryClient.prefetchQuery( + ["pagin", count, "/notice/waiting-notice/list"], + () => postNoticeRequest(count, "/notice/waiting-notice/list") + ); + } + }, [data, count, queryClient]); + const Click = useCallback((e) => { + setCount(e); + }, []); return ( <> - + {status === "loading" ? ( + + ) : status === "error" ? ( + + ) : ( + <> + + + {data.count.map((user, i) => ( + + + +
{user.name}
+
{data.ad[i]}
+
{data.as[i]}
+ + +
채용인원
+
{user.total}명
+ + +
자세히 보기
+
지원자 리스트
+ + + + ))} + +
    +
  • + +
    • +
  • + < +
    • + {arr.map((item) => ( +
  • Click(item - 1)}> + {item} +
    • + ))} +
  • + > +
    • +
  • + +
    • +
+
+ + )} ); }; export default Wait; -const Table = styled.div``; +const Table = styled.div` + margin: 200px auto; + width: 1190px; + height: 813px; + background-color: ${(props) => props.theme.colors.mediumPurple}; + border-radius: 20px; +`; +const Li = styled.li` + margin-left: -40px; +`; +const Text = styled.div` + position: relative; + font: 700 normal 23px "Roboto"; + color: ${(props) => props.theme.colors.black}; + width: 60px; + height: 60px; + padding-top: 15px; + text-align: center; + cursor: pointer; + :hover { + background-color: ${(props) => props.theme.colors.blue}; + border-radius: 100%; + } +`; +const Button = styled.div` + width: 160px; + height: 60px; + border-radius: 100px; + background-color: ${(props) => props.theme.colors.blue}; + color: ${(props) => props.theme.colors.white}; + text-align: center; + padding-top: 17px; + cursor: pointer; +`; +const Ul = styled.ul` + position: relative; + top: ${(props) => props.top}px; + width: 836px; + height: 60px; + list-style-type: none; + display: flex; + margin: 0 auto; + justify-content: space-between; +`; +const Ulbox = styled.ul` + position: relative; + list-style-type: none; + width: 1136px; + top: 20px; + margin: 0 auto; +`; +const Libox = styled.li` + margin-top: 20px; + margin-left: -40px; +`; +const Box = styled.div` + width: 1136px; + height: 80px; + padding: 25px 20px 0px 65px; + background-color: ${(props) => props.theme.colors.mediumGray}; + border-radius: 20px; +`; +const Category = styled.div` + display: inline-flex; + align-items: center; + gap: 20px; + margin-right: 50px; + div { + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font: 700 normal 24px "NanumGothic", sans-serif; + color: ${(props) => props.theme.colors.blue}; + + div { + width: 130px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font: 400 normal 20px "NanumGothic", sans-serif; + color: ${(props) => props.theme.colors.black}; + } + } +`; +const ButtonProps = styled.div` + position: relative; + display: inline-flex; + align-items: center; + left: 750px; + top: -35px; + gap: 54px; + div { + border-radius: 100px; + text-align: center; + cursor: pointer; + background-color: ${(props) => props.theme.colors.blue}; + width: 120px; + height: 40px; + font: 700 normal 14px "NanumGothic", sans-serif; + padding-top: 10px; + color: ${(props) => props.theme.colors.white}; + } +`; From e839a5fddfc4b89194e051dd747152614cfa9add Mon Sep 17 00:00:00 2001 From: jingeon27 Date: Sun, 13 Nov 2022 15:00:58 +0900 Subject: [PATCH 2/4] =?UTF-8?q?hotfix=20::=20=20pagination=EC=BA=90?= =?UTF-8?q?=EC=8B=B1=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/pages/teacherPage/list/wait/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/pages/teacherPage/list/wait/index.jsx b/src/components/pages/teacherPage/list/wait/index.jsx index 2c867a8..a01afc5 100644 --- a/src/components/pages/teacherPage/list/wait/index.jsx +++ b/src/components/pages/teacherPage/list/wait/index.jsx @@ -25,10 +25,10 @@ const Wait = () => { } }, [data]); useEffect(() => { - if (data?.last) { + if (data?.last && data.totalPage > count) { queryClient.prefetchQuery( - ["pagin", count, "/notice/waiting-notice/list"], - () => postNoticeRequest(count, "/notice/waiting-notice/list") + ["pagin", count + 1, "/notice/waiting-notice/list"], + () => postNoticeRequest(count + 1, "/notice/waiting-notice/list") ); } }, [data, count, queryClient]); From f4c975ad862f8243c480896523b20519eeba8ce7 Mon Sep 17 00:00:00 2001 From: jingeon27 Date: Sun, 13 Nov 2022 23:16:46 +0900 Subject: [PATCH 3/4] =?UTF-8?q?ADD=20::=20pagination=20=EB=81=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/api/teacher/index.js | 1 - .../pages/teacherPage/list/find/index.jsx | 0 .../pages/teacherPage/list/index.jsx | 3 +- .../pages/teacherPage/list/wait/index.jsx | 66 ++++++++++++++----- .../pages/teacherPage/manage/Bokli/index.jsx | 3 +- .../pages/teacherPage/manage/index.jsx | 3 - 6 files changed, 54 insertions(+), 22 deletions(-) delete mode 100644 src/components/pages/teacherPage/list/find/index.jsx diff --git a/src/components/api/teacher/index.js b/src/components/api/teacher/index.js index 082271d..a19e5d0 100644 --- a/src/components/api/teacher/index.js +++ b/src/components/api/teacher/index.js @@ -103,7 +103,6 @@ export const postNoticeRequest = async (idx, path) => { totalPage: data.totalPages, }; }); - console.log(res); return res; }; export const postNotice = (idx, path) => { diff --git a/src/components/pages/teacherPage/list/find/index.jsx b/src/components/pages/teacherPage/list/find/index.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/pages/teacherPage/list/index.jsx b/src/components/pages/teacherPage/list/index.jsx index 345ef73..cf4295b 100644 --- a/src/components/pages/teacherPage/list/index.jsx +++ b/src/components/pages/teacherPage/list/index.jsx @@ -2,7 +2,8 @@ import Wait from "./wait"; const TeacherList = () => { return ( <> - + + ); }; diff --git a/src/components/pages/teacherPage/list/wait/index.jsx b/src/components/pages/teacherPage/list/wait/index.jsx index a01afc5..4d3cfa0 100644 --- a/src/components/pages/teacherPage/list/wait/index.jsx +++ b/src/components/pages/teacherPage/list/wait/index.jsx @@ -8,27 +8,39 @@ import { useCallback } from "react"; import { postNotice, postNoticeRequest } from "../../../../api/teacher"; import LoadingPage from "../../../../common/loading"; import ErrorPage from "../../../../common/error"; -const Wait = () => { +const Wait = ({ path }) => { const [count, setCount] = useState(0); const [arr, setArr] = useState([]); - const [arr2, setArr2] = useState([1]); const queryClient = useQueryClient(); - const { status, data } = postNotice(count, "/notice/waiting-notice/list"); + const { status, data } = postNotice(count, path); useEffect(() => { - let asdf = []; - if (status === "success") { - for (let i = 1; i <= data.totalPage; i++) { - asdf.push(i); + if (data?.totalPage > 5) { + if (data.totalPage % 5 !== 0) { + if (parseInt(count / 5) === parseInt(data.totalPage / 5)) { + const asd = parseInt(data.totalPage % 5); + let aq = new Array(5).fill(0); + for (let i = 0; i < 5; i++) { + if (i < asd) { + aq[i] = 5 * asd + 1 + i; + } else { + aq[i] = "•"; + } + } + setArr(aq); + } + } + if (count % 5 === 0 && count / 5 < data.totalPage / 5 - 1) { + setArr([count + 1, count + 2, count + 3, count + 4, count + 5]); + } else if (count % 5 === 4) { + setArr([count - 3, count - 2, count - 1, count, count + 1]); } - setArr(asdf); } - }, [data]); + }, [count, data?.totalPage]); useEffect(() => { if (data?.last && data.totalPage > count) { - queryClient.prefetchQuery( - ["pagin", count + 1, "/notice/waiting-notice/list"], - () => postNoticeRequest(count + 1, "/notice/waiting-notice/list") + queryClient.prefetchQuery(["pagin", count + 1, path], () => + postNoticeRequest(count + 1, path) ); } }, [data, count, queryClient]); @@ -70,15 +82,36 @@ const Wait = () => {
  • - < + { + if (count > 4) { + setCount((parseInt(count / 5) - 1) * 5 + 4); + } + }} + > + < +
    • {arr.map((item) => (
  • Click(item - 1)}> - {item} + {item}
    • ))}
  • - > + { + if ( + data.totalPage % 5 === 0 + ? data.totalPage / 5 + 1 !== parseInt(count / 5) + 1 + : parseInt(data.totalPage / 5) + 1 !== + parseInt(count / 5) + 1 + ) { + setCount((parseInt(count / 5) + 1) * 5); + } + }} + > + > +