From 7890396924526ba1fa100180e85e4f6ddfe2697b Mon Sep 17 00:00:00 2001
From: jingeon27 <jingeon27@gmail.com>
Date: Tue, 15 Nov 2022 12:55:36 +0900
Subject: [PATCH] =?UTF-8?q?=ED=94=84=EB=A6=AC=ED=8E=98=EC=B9=AD=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EC=BA=90=EC=8B=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                                    |  22 +-
 .../api/company/requesrResistration/index.js  |  12 +-
 src/components/api/reisue/index.js            |  23 ++
 src/components/api/teacher/index.js           |  80 +++--
 src/components/common/nav/index.jsx           |  25 ++
 .../companyPage/recruitmentList/index.jsx     |  10 +-
 .../companyPage/requestResistration/index.jsx |  13 +-
 .../requestResistration/modal/index.jsx       |  34 +-
 .../pages/teacherPage/company/list/index.jsx  | 301 ++++++++++++++++++
 .../teacherPage/company/search/index.jsx      | 190 +++++++++++
 .../pages/teacherPage/list/index.jsx          |  16 +
 .../pages/teacherPage/list/wait/index.jsx     |  40 ++-
 .../pages/teacherPage/manage/index.jsx        |  24 +-
 .../pages/teacherPage/manage/style.js         |   9 +-
 src/export/data.js                            |  33 +-
 src/images/Arrow back.svg                     |  10 +
 src/images/index.js                           |   1 +
 src/style/theme.js                            |  12 +
 18 files changed, 776 insertions(+), 79 deletions(-)
 create mode 100644 src/components/api/reisue/index.js
 create mode 100644 src/components/common/nav/index.jsx
 create mode 100644 src/components/pages/teacherPage/company/list/index.jsx
 create mode 100644 src/components/pages/teacherPage/company/search/index.jsx
 create mode 100644 src/images/Arrow back.svg

diff --git a/src/App.js b/src/App.js
index 870c483..441cdae 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,6 +11,14 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import RecruitmentList from "./components/pages/companyPage/recruitmentList";
 import RequstManage from "./components/pages/teacherPage/manage";
 import TeacherList from "./components/pages/teacherPage/list";
+import CompanySignIn from "./components/pages/companyPage/auth/signIn";
+import CompanySignUp from "./components/pages/companyPage/auth/signUp";
+import StudentSignIn from "./components/pages/studentPage/auth/signIn";
+import StudentSignUp from "./components/pages/studentPage/auth/signUp";
+import TeacherSignUp from "./components/pages/teacherPage/auth/signUp";
+import TeacherSignIn from "./components/pages/teacherPage/auth/signIn";
+import ShowCompany from "./components/pages/teacherPage/company/list";
+import SearchProps from "./components/pages/teacherPage/company/search";
 function App() {
   const queryClient = new QueryClient();
   return (
@@ -21,12 +29,24 @@ function App() {
           <BrowserRouter>
             <GlobalStyle />
             <Routes>
+              <Route path="/company/login" element={<CompanySignIn />} />
+              <Route path="/company/signup" element={<CompanySignUp />} />
+              <Route path="/student/login" element={<StudentSignIn />} />
+              <Route path="/student/signup" element={<StudentSignUp />} />
+              <Route path="/teacher/login" element={<TeacherSignIn />} />
+              <Route path="/teacher/signup" element={<TeacherSignUp />} />
               <Route path="/company/list" element={<RecruitmentList />} />
+
               <Route
                 path="/company/list/write"
                 element={<RequstResistration />}
               />
-              <Route path="/teacher/list/item" element={<RequstManage />} />
+              <Route path="/teacher" element={<ShowCompany />} />
+              <Route path="/teacher/:companyId" element={<SearchProps />} />
+              <Route
+                path="/teacher/list/:noticeId"
+                element={<RequstManage />}
+              />
               <Route path="/teacher/list" element={<TeacherList />} />
             </Routes>
             <Footer />
diff --git a/src/components/api/company/requesrResistration/index.js b/src/components/api/company/requesrResistration/index.js
index ec9f767..dc96960 100644
--- a/src/components/api/company/requesrResistration/index.js
+++ b/src/components/api/company/requesrResistration/index.js
@@ -1,8 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { BaseUrl } from "../../../../export/base";
+import { Notice } from "../../../common/notice";
+import { useNavigate } from "react-router-dom";
 const token =
-  "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsInR5cGUiOiJhY2Nlc3MiLCJpYXQiOjE2NjgzMTI4MTksImV4cCI6MTY2ODM5OTIxOX0.Xa8JlV2OyvwTvjV35kKCZrmfWI7mxN89UifM4UX_GYM";
+  "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNiIsInR5cGUiOiJhY2Nlc3MiLCJpYXQiOjE2Njg0NTMwNzgsImV4cCI6MTY2ODUzOTQ3OH0.Px0CiC-ZakXX0axx85c19fil7K4zJeoCTPAxmlqumDI";
 export const getListProps = () => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   return useQuery(["datas"], async () => {
@@ -50,8 +52,6 @@ export const getListProps = () => {
   });
 };
 export const postNotice = (arr, ad) => {
-  console.log(arr);
-  console.log(ad);
   let formData = new FormData();
   for (let i in arr) {
     formData.append("attachment", arr[i]);
@@ -71,7 +71,11 @@ export const postNotice = (arr, ad) => {
       "Access-Control-Allow-Origin": "*",
     },
     data: formData,
-  });
+  })
+    .then((res) => {
+      Notice({ state: "success", message: "정상적으로 처리되었습니다." });
+    })
+    .catch((err) => Notice({ state: "error", message: err.message }));
 };
 export const getMyList = () => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
diff --git a/src/components/api/reisue/index.js b/src/components/api/reisue/index.js
new file mode 100644
index 0000000..48ca2f9
--- /dev/null
+++ b/src/components/api/reisue/index.js
@@ -0,0 +1,23 @@
+import axios from "axios";
+import { BaseUrl } from "../../../export/base";
+import { useQuery } from "@tanstack/react-query";
+export const Reissue = async () => {
+  const refresh = localStorage.getItem("refreshToken");
+  const token = localStorage.getItem("accessToken");
+  await axios({
+    url: BaseUrl + "/auth/reissue",
+    method: "post",
+    body: {
+      accessToken: token,
+      refreshToken: refresh,
+    },
+  }).then(({ accessToken, refreshToken }) => {
+    localStorage.setItem("accessToken", accessToken);
+    localStorage.setItem("refreshToken", refreshToken);
+  });
+};
+export const PostReissue = () => {
+  useQuery(["reissue"], async () => Reissue(), {
+    staleTime: 171800000,
+  });
+};
diff --git a/src/components/api/teacher/index.js b/src/components/api/teacher/index.js
index 59ae9c8..03d690b 100644
--- a/src/components/api/teacher/index.js
+++ b/src/components/api/teacher/index.js
@@ -1,33 +1,39 @@
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { BaseUrl } from "../../../export/base";
+import { Notice } from "../../common/notice";
 const token =
-  "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIyNSIsInR5cGUiOiJhY2Nlc3MiLCJpYXQiOjE2NjgzODEzNzUsImV4cCI6MTY2ODQ2Nzc3NX0.5BpCYYQQ_slpXRWtm3wdSjW-_VrKOnKK1KJ4R-MdY58";
-export const getBoardList = () => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return useQuery(["getBoardList"], async () => {
-    const { data } = await axios({
-      method: "get",
-      url: BaseUrl + "/notice",
-      params: { id: 134953727 },
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
-    console.log(data);
-    return data;
+  "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIyNSIsInR5cGUiOiJhY2Nlc3MiLCJpYXQiOjE2Njg0Njg1NDgsImV4cCI6MTY2ODU1NDk0OH0.6G9f1-8wdnEGCDn0ABzT-e4LUVsRhSnxXsNvZrxBqOk";
+export const getBoardList = async (id) => {
+  const { data } = await axios({
+    method: "get",
+    url: BaseUrl + "/notice",
+    params: { id: id },
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
   });
+  return data;
 };
-export const noticeRequest = async (method, path, query) => {
-  const { data } = await axios({
+export const getNoticeItem = (id) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useQuery(["noticeItem", id], () => getBoardList(id));
+};
+export const noticeRequest = async (method, path, query, message) => {
+  await axios({
     method: method,
     url: BaseUrl + path,
     params: { noticeId: query },
     headers: {
       Authorization: `Bearer ${token}`,
     },
-  });
-  console.log(data);
+  })
+    .then((res) => {
+      Notice({ state: "seccess", message: message });
+    })
+    .catch((err) => {
+      Notice({ state: "error", message: err.message });
+    });
 };
 export const postNoticeRequest = async (idx, path) => {
   let res;
@@ -115,3 +121,41 @@ export const postNotice = (idx, path) => {
     }
   );
 };
+export const getCompanyRequest = async (idx) => {
+  let data;
+  await axios({
+    method: "get",
+    url: BaseUrl + "/company/list",
+    params: {
+      idx: idx,
+      size: 8,
+    },
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  }).then((res) => {
+    data = res.data;
+  });
+  console.log(data);
+  return data;
+};
+export const getCompany = (idx) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useQuery(["list", idx], async () => getCompanyRequest(idx), {
+    keepPreviousData: true,
+  });
+};
+export const getCompanyName = (id) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useQuery(["list", id], async () => {
+    const { data } = await axios({
+      method: "get",
+      url: BaseUrl + "/company/search",
+      params: { query: id },
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    return data;
+  });
+};
diff --git a/src/components/common/nav/index.jsx b/src/components/common/nav/index.jsx
new file mode 100644
index 0000000..cd8a256
--- /dev/null
+++ b/src/components/common/nav/index.jsx
@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import { StyledLink } from "../../../style/theme";
+const NavProps = ({ props, idx }) => {
+  return (
+    <>
+      <Table>
+        {props.map((user, i) => (
+          <>
+            <StyledLink>{user}</StyledLink>
+          </>
+        ))}
+      </Table>
+    </>
+  );
+};
+export default NavProps;
+const Table = styled.div`
+  position: relative;
+  width: 100vw;
+  height: 100px;
+  color: ${(props) => props.theme.colors.black};
+`;
+const Ul = styled.ul`
+  position: relative;
+`;
diff --git a/src/components/pages/companyPage/recruitmentList/index.jsx b/src/components/pages/companyPage/recruitmentList/index.jsx
index 15d82f4..eba7520 100644
--- a/src/components/pages/companyPage/recruitmentList/index.jsx
+++ b/src/components/pages/companyPage/recruitmentList/index.jsx
@@ -5,6 +5,7 @@ import ResistrationList from "./list";
 import LoadingPage from "../../../common/loading";
 import ErrorPage from "../../../common/error";
 import { getMyList } from "../../../api/company/requesrResistration";
+import { StyledLink } from "../../../../style/theme";
 const RecruitmentList = () => {
   const { status, data } = getMyList();
   return (
@@ -21,9 +22,12 @@ const RecruitmentList = () => {
           />
           <MainDiv>
             <List>
-              <AddBtn>
-                <button>+</button>
-              </AddBtn>
+              <StyledLink to="/company/list/write">
+                <AddBtn>
+                  <button>+</button>
+                </AddBtn>
+              </StyledLink>
+
               <ResistrationList data={data} />
             </List>
           </MainDiv>
diff --git a/src/components/pages/companyPage/requestResistration/index.jsx b/src/components/pages/companyPage/requestResistration/index.jsx
index 994f983..f3f8925 100644
--- a/src/components/pages/companyPage/requestResistration/index.jsx
+++ b/src/components/pages/companyPage/requestResistration/index.jsx
@@ -17,6 +17,7 @@ import { value } from "../../../../redux/store/selectValue";
 import * as s from "./style";
 import { postNotice } from "../../../api/company/requesrResistration";
 import { open } from "../../../common/addresshook";
+import { useNavigate } from "react-router-dom";
 const RequstResistration = () => {
   const modal = useSelector((state) => state.modal.state.modalrequest);
   const Data = useSelector((stack) => stack.selectValue.recruitmentRequest);
@@ -34,6 +35,7 @@ const RequstResistration = () => {
   const InputRef = useRef([]);
   const WorkRef = useRef([]);
   const WelfareRef = useRef();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const handleComplete = (data) => {
     let fullAddress = data.address;
@@ -81,7 +83,6 @@ const RequstResistration = () => {
     (e) => {
       const ad = [...file, ...e.target.files];
       setFile(ad);
-      console.log(file);
     },
     [file]
   );
@@ -108,11 +109,7 @@ const RequstResistration = () => {
     dispatch(value(ad));
   };
   const submit = () => {
-    console.log(MealRef.current[0].checked);
-    console.log(BokRef.current[0].checked);
-    console.log(BokRef.current[0].value);
     let arr = [];
-    console.log(InputRef.current[0].id);
     for (let i = 0; i < InputRef.current.length; i++) {
       console.log(InputRef.current[i].id);
       const find = (e) => {
@@ -163,7 +160,7 @@ const RequstResistration = () => {
       as = {
         ...ad,
         workPlace: {
-          isSameWithCompanyAddress: true,
+          isSameWithCompanyAddress: false,
           otherPlace: locate.text,
         },
         isPersonalContact: state,
@@ -172,13 +169,13 @@ const RequstResistration = () => {
       as = {
         ...ad,
         workPlace: {
-          isSameWithCompanyAddress: false,
+          isSameWithCompanyAddress: true,
         },
         isPersonalContact: state,
       };
     }
-    console.log(as);
     postNotice(file, as);
+    navigate("/company/list");
   };
   return (
     <>
diff --git a/src/components/pages/companyPage/requestResistration/modal/index.jsx b/src/components/pages/companyPage/requestResistration/modal/index.jsx
index db400ab..84d66da 100644
--- a/src/components/pages/companyPage/requestResistration/modal/index.jsx
+++ b/src/components/pages/companyPage/requestResistration/modal/index.jsx
@@ -5,10 +5,10 @@ import { useState, useCallback, useEffect, useRef } from "react";
 import * as s from "./style";
 import { value } from "../../../../../redux/store/selectValue";
 import AutoComplete from "../../../../common/autocomplete";
-import Swal from "sweetalert2";
 import { getListProps } from "../../../../api/company/requesrResistration";
 import LoadingPage from "../../../../common/loading";
 import ErrorPage from "../../../../common/error";
+import { Notice } from "../../../../common/notice";
 const SelectModal = () => {
   const { status, data } = getListProps();
   const dispatch = useDispatch();
@@ -167,38 +167,19 @@ const SelectModal = () => {
       };
       console.log(arr3);
       if (radio.id === "") {
-        Swal.fire({
-          title: "버튼을 체크해주세요..",
-          icon: "error",
-          confirmButtonText: "Ok",
-        });
+        Notice({ state: "error", message: "버튼을 체크해주세요..." });
       } else if (NumRef.current.value === "" || NumRef.current.value === "0") {
-        Swal.fire({
-          title: "명 수를 입력해주세요..",
-          icon: "error",
-          confirmButtonText: "Ok",
-        });
+        Notice({ state: "error", message: "명 수를 입력해주세요..." });
       } else if (TextRef.current.value === "") {
-        Swal.fire({
-          title: "상세직무를 입력해주세요..",
-          icon: "error",
-          confirmButtonText: "Ok",
-        });
+        Notice({ state: "error", message: "상세직무를 입력해주세요..." });
       } else if (arr1.length === 0) {
-        Swal.fire({
-          title: "사용언어를 입력해주세요..",
-          icon: "error",
-          confirmButtonText: "Ok",
-        });
+        Notice({ state: "error", message: "사용언어를 입력해주세요..." });
       } else if (arr2.length === 0) {
-        Swal.fire({
-          title: "사용스킬을 입력해주세요..",
-          icon: "error",
-          confirmButtonText: "Ok",
-        });
+        Notice({ state: "error", message: "사용스킬을 입력해주세요..." });
       } else if (ArrStateData.length === ArrStateCountData) {
         dispatch(value([...ArrStateData, props]));
         dispatch(stateModal(false));
+        Notice({ state: "success", message: "정상적으로 처리되었습니다." });
       } else {
         const ad = ArrStateData.map((el, i) => {
           if (i === ArrStateCountData) {
@@ -209,6 +190,7 @@ const SelectModal = () => {
             return el;
           }
         });
+        Notice({ state: "success", message: "정상적으로 처리되었습니다." });
         dispatch(value(ad));
         dispatch(stateModal(false));
       }
diff --git a/src/components/pages/teacherPage/company/list/index.jsx b/src/components/pages/teacherPage/company/list/index.jsx
new file mode 100644
index 0000000..da6c85c
--- /dev/null
+++ b/src/components/pages/teacherPage/company/list/index.jsx
@@ -0,0 +1,301 @@
+/* eslint-disable react/jsx-no-undef */
+import styled from "styled-components";
+import { Notice } from "../../../../common/notice";
+import { useState, useCallback, useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { getCompany, getCompanyRequest } from "../../../../api/teacher";
+import LoadingPage from "../../../../common/loading";
+import ErrorPage from "../../../../common/error";
+import Header from "../../../../common/header";
+import { Link } from "react-router-dom";
+const ShowCompany = () => {
+  const [count, setCount] = useState(0);
+  const [arr, setArr] = useState([]);
+  const queryClient = useQueryClient();
+  const { status, data } = getCompany(count);
+  const [input, setInput] = useState("");
+  useEffect(() => {
+    console.log("1", data);
+    if (data?.totalPages > 5) {
+      if (data.totalPages % 5 !== 0) {
+        if (parseInt(count / 5) === parseInt(data.totalPages / 5)) {
+          const asd = parseInt(data.totalPages % 5);
+          let aq = new Array(asd).fill(0);
+          for (let i = 0; i < asd; i++) {
+            aq[i] = 5 * (asd + 1) + 1 + i;
+          }
+          setArr(aq);
+        }
+      }
+      if (count % 5 === 0 && count / 5 < data.totalPages / 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]);
+      }
+    } else if (data?.totalPages) {
+      console.log(data.totalPages);
+      let ad = new Array(data?.totalPages).fill(0);
+      for (let i = 0; i < data.totalPages; i++) {
+        ad[i] = i + 1;
+      }
+      setArr(ad);
+    }
+  }, [count, data]);
+  useEffect(() => {
+    if (data?.last && data.totalPages - 1 > count) {
+      queryClient.prefetchQuery(["list", count + 1], () =>
+        getCompanyRequest(count + 1)
+      );
+    }
+  }, [data, count, queryClient]);
+  const Click = useCallback((e) => {
+    setCount(e);
+  }, []);
+  return (
+    <>
+      {status === "loading" ? (
+        <LoadingPage />
+      ) : status === "error" ? (
+        <ErrorPage />
+      ) : (
+        <>
+          <Header
+            title={"기업관리"}
+            description={"손쉽게 기업들을 관리해보세요."}
+          />
+          <SearchDiv>
+            <Search
+              placeholder="회사이름"
+              onInput={(e) => setInput(e.target.value)}
+            />
+            <Link to={`/teacher/${input}`}>
+              <SearchButton>검색</SearchButton>
+            </Link>
+          </SearchDiv>
+
+          <Table>
+            <Ulbox>
+              {data.content.map((user, i) => (
+                <Libox>
+                  <Box>
+                    <Title>{user.companyId}</Title>
+                    <ImgDiv>
+                      <Img
+                        src={
+                          user.companyIntroductionResponse.companyLogo.fileUrl
+                        }
+                        alt="잉기모링"
+                        style={{ width: "50px", height: "50px" }}
+                      />
+                    </ImgDiv>
+
+                    <Category>
+                      <div>{user.companyName}</div>
+                      <div>회사명</div>
+                    </Category>
+                    <Category>
+                      <div>email</div>
+                      <div>{user.contactorEmail}</div>
+                    </Category>
+                    <ButtonProps>자세히보기</ButtonProps>
+                  </Box>
+                </Libox>
+              ))}
+            </Ulbox>
+            <Ul top={100 * (8 - data.content.length) + 50}>
+              <Li>
+                <Button onClick={() => setCount(0)}>First Page</Button>
+              </Li>
+              <Li>
+                <Text
+                  onClick={() => {
+                    if (count > 4) {
+                      setCount((parseInt(count / 5) - 1) * 5 + 4);
+                    }
+                  }}
+                >
+                  &lt;
+                </Text>
+              </Li>
+              {arr.map((item) => (
+                <Li id={item} onClick={() => Click(item - 1)}>
+                  <Text state={item === count + 1}>{item}</Text>
+                </Li>
+              ))}
+              <Li>
+                <Text
+                  onClick={() => {
+                    if (
+                      data.totalPages % 5 === 0
+                        ? data.totalPages / 5 + 1 !== parseInt(count / 5) + 1
+                        : parseInt(data.totalPages / 5) + 1 !==
+                          parseInt(count / 5) + 1
+                    ) {
+                      setCount((parseInt(count / 5) + 1) * 5);
+                    }
+                  }}
+                >
+                  &gt;
+                </Text>
+              </Li>
+              <Li>
+                <Button onClick={() => setCount(data.totalPages - 1)}>
+                  Last Page
+                </Button>
+              </Li>
+            </Ul>
+          </Table>
+        </>
+      )}
+    </>
+  );
+};
+export default ShowCompany;
+const Search = styled.input`
+  width: 870px;
+  top: 0px;
+  height: 50px;
+  border: none;
+  border-radius: 100px;
+  padding-left: 15px;
+  font: 400 normal 20px "NanumGothic", sans-serif;
+`;
+const ImgDiv = styled.div`
+  display: inline-flex;
+  width: 60px;
+  height: 60px;
+  margin-right: 40px;
+`;
+const Img = styled.img`
+  width: 60px;
+  height: 60px;
+`;
+const SearchDiv = styled.div`
+  position: relative;
+  top: 100px;
+  width: 1003px;
+  height: 60px;
+  border: 5px solid ${(props) => props.theme.colors.blue};
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  border-radius: 100px;
+`;
+const SearchButton = styled.div`
+  position: relative;
+  top: -55px;
+  left: 870px;
+  width: 125px;
+  height: 60px;
+  text-align: center;
+  padding-top: 14px;
+  font: 700 normal 20px "NanumGothic", sans-serif;
+  background-color: ${(props) => props.theme.colors.blue};
+  color: ${(props) => props.theme.colors.white};
+  border-radius: 100px;
+`;
+const Table = styled.div`
+  margin: 120px auto;
+  width: 1190px;
+  height: 913px;
+  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;
+  background-color: ${(props) =>
+    props.state ? props.theme.colors.blue : props.theme.colors.white};
+  cursor: pointer;
+  border-radius: 100%;
+  :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: 0px 20px 0px 45px;
+  background-color: ${(props) => props.theme.colors.mediumGray};
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  vertical-align: center;
+`;
+const Title = styled.div`
+  font: 700 normal 24px "NanumGothic", sans-serif;
+  color: ${(props) => props.theme.colors.blue};
+  display: inline-flex;
+  margin-right: 45px;
+`;
+const Category = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 20px;
+  margin-right: 50px;
+  div {
+    width: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font: 700 normal 24px "NanumGothic", sans-serif;
+    color: ${(props) => props.theme.colors.blue};
+    + div {
+      overflow: visible;
+      font: 400 normal 20px "NanumGothic", sans-serif;
+      color: ${(props) => props.theme.colors.black};
+    }
+  }
+`;
+const ButtonProps = styled.div`
+  position: relative;
+  border-radius: 100px;
+  left: 300px;
+  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};
+`;
diff --git a/src/components/pages/teacherPage/company/search/index.jsx b/src/components/pages/teacherPage/company/search/index.jsx
new file mode 100644
index 0000000..7db596e
--- /dev/null
+++ b/src/components/pages/teacherPage/company/search/index.jsx
@@ -0,0 +1,190 @@
+import { useParams } from "react-router-dom";
+import { getCompanyName } from "../../../../api/teacher";
+import ErrorPage from "../../../../common/error";
+import LoadingPage from "../../../../common/loading";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import { useState, useRef, useCallback } from "react";
+import Header from "../../../../common/header";
+import { ArrowBack } from "../../../../../images";
+const SearchProps = () => {
+  const { companyId } = useParams();
+  const [state, setState] = useState(companyId);
+  const InputRef = useRef();
+  const { status, data } = getCompanyName(state);
+  const GetCompany = useCallback(() => {
+    setState(InputRef.current.value);
+  }, []);
+  return (
+    <>
+      {status === "loading" ? (
+        <LoadingPage />
+      ) : status === "error" ? (
+        <ErrorPage />
+      ) : (
+        <>
+          <Header
+            title={"기업관리"}
+            description={"손쉽게 기업들을 관리해보세요."}
+          />
+          <Link to="/teacher">
+            <ArrowImg src={ArrowBack} />
+          </Link>
+
+          <SearchDiv>
+            <Search placeholder="회사이름" ref={InputRef} />
+            <SearchButton onClick={() => GetCompany()}>검색</SearchButton>
+          </SearchDiv>
+
+          <Ulbox>
+            <Libox>
+              <DivText>
+                <span>{state}</span>의 검색결과입니다.
+              </DivText>
+            </Libox>
+            {data.content.map((user, i) => (
+              <Libox>
+                <Box>
+                  <Title>{user.companyId}</Title>
+                  <ImgDiv>
+                    <Img
+                      src={user.companyIntroductionResponse.companyLogo.fileUrl}
+                      alt="잉기모링"
+                      style={{ width: "50px", height: "50px" }}
+                    />
+                  </ImgDiv>
+
+                  <Category>
+                    <div>{user.companyName}</div>
+                    <div>회사명</div>
+                  </Category>
+                  <Category>
+                    <div>email</div>
+                    <div>{user.contactorEmail}</div>
+                  </Category>
+                  <ButtonProps>자세히보기</ButtonProps>
+                </Box>
+              </Libox>
+            ))}
+          </Ulbox>
+        </>
+      )}
+    </>
+  );
+};
+export default SearchProps;
+const ImgDiv = styled.div`
+  display: inline-flex;
+  width: 60px;
+  height: 60px;
+  margin-right: 40px;
+`;
+const Img = styled.img`
+  width: 60px;
+  height: 60px;
+`;
+const Ulbox = styled.ul`
+  position: relative;
+  list-style-type: none;
+  width: 1136px;
+  top: 20px;
+  margin: 150px auto;
+`;
+const Libox = styled.li`
+  margin-top: 20px;
+  margin-left: -40px;
+`;
+const Box = styled.div`
+  width: 1136px;
+  height: 80px;
+  padding: 0px 20px 0px 45px;
+  background-color: ${(props) => props.theme.colors.mediumGray};
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  vertical-align: center;
+`;
+const Title = styled.div`
+  font: 700 normal 24px "NanumGothic", sans-serif;
+  color: ${(props) => props.theme.colors.blue};
+  display: inline-flex;
+  margin-right: 45px;
+`;
+const Category = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 20px;
+  margin-right: 50px;
+  div {
+    width: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font: 700 normal 24px "NanumGothic", sans-serif;
+    color: ${(props) => props.theme.colors.blue};
+    + div {
+      overflow: visible;
+      font: 400 normal 20px "NanumGothic", sans-serif;
+      color: ${(props) => props.theme.colors.black};
+    }
+  }
+`;
+const ButtonProps = styled.div`
+  position: relative;
+  border-radius: 100px;
+  left: 300px;
+  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};
+`;
+const Search = styled.input`
+  width: 870px;
+  top: 0px;
+  height: 50px;
+  border: none;
+  border-radius: 100px;
+  padding-left: 15px;
+  font: 400 normal 20px "NanumGothic", sans-serif;
+`;
+const SearchDiv = styled.div`
+  position: relative;
+  top: 100px;
+  width: 1003px;
+  height: 60px;
+  border: 5px solid ${(props) => props.theme.colors.blue};
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  border-radius: 100px;
+`;
+const SearchButton = styled.div`
+  position: relative;
+  top: -55px;
+  left: 870px;
+  width: 125px;
+  height: 60px;
+  text-align: center;
+  padding-top: 14px;
+  font: 700 normal 20px "NanumGothic", sans-serif;
+  background-color: ${(props) => props.theme.colors.blue};
+  color: ${(props) => props.theme.colors.white};
+  border-radius: 100px;
+`;
+const DivText = styled.div`
+  font: 700 normal 20px "NanumGothic", sans-serif;
+  span {
+    color: ${(props) => props.theme.colors.blue};
+  }
+`;
+const ArrowImg = styled.img`
+  position: relative;
+  top: 30px;
+  left: 30px;
+  width: 40px;
+  height: 40px;
+`;
diff --git a/src/components/pages/teacherPage/list/index.jsx b/src/components/pages/teacherPage/list/index.jsx
index cf4295b..0dcc283 100644
--- a/src/components/pages/teacherPage/list/index.jsx
+++ b/src/components/pages/teacherPage/list/index.jsx
@@ -1,10 +1,26 @@
 import Wait from "./wait";
+import styled from "styled-components";
+import Header from "../../../common/header";
 const TeacherList = () => {
   return (
     <>
+      <Header
+        title="모집의뢰 관리"
+        description="회사들이 등록한 모집 의뢰서를 관리합니다."
+      />
+      <Title>대기중인 모집 공고</Title>
       <Wait path="/notice/waiting-notice/list" />
+      <Title>모집 공고</Title>
       <Wait path="/notice/list" />
     </>
   );
 };
 export default TeacherList;
+const Title = styled.div`
+  position: relative;
+  width: 1100px;
+  margin: 0 auto;
+  text-align: left;
+  font: 700 normal 40px "NanumGothic";
+  color: ${(props) => props.theme.colors.black};
+`;
diff --git a/src/components/pages/teacherPage/list/wait/index.jsx b/src/components/pages/teacherPage/list/wait/index.jsx
index 4f84449..61d569d 100644
--- a/src/components/pages/teacherPage/list/wait/index.jsx
+++ b/src/components/pages/teacherPage/list/wait/index.jsx
@@ -1,19 +1,22 @@
 /* eslint-disable react/jsx-no-undef */
 import styled from "styled-components";
 import { Notice } from "../../../../common/notice";
-import { useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { useEffect } from "react";
-import { useCallback } from "react";
-import { postNotice, postNoticeRequest } from "../../../../api/teacher";
+import {
+  getBoardList,
+  postNotice,
+  postNoticeRequest,
+} from "../../../../api/teacher";
 import LoadingPage from "../../../../common/loading";
 import ErrorPage from "../../../../common/error";
+import { useNavigate } from "react-router-dom";
 const Wait = ({ path }) => {
   const [count, setCount] = useState(0);
   const [arr, setArr] = useState([]);
   const queryClient = useQueryClient();
   const { status, data } = postNotice(count, path);
-
+  const navigate = useNavigate();
   useEffect(() => {
     if (data?.totalPage > 5) {
       if (data.totalPage % 5 !== 0) {
@@ -22,7 +25,7 @@ const Wait = ({ path }) => {
           let aq = new Array(asd).fill(0);
           for (let i = 0; i < 5; i++) {
             if (i < asd) {
-              aq[i] = 5 * asd + 1 + i;
+              aq[i] = 5 * (asd + 1) + 1 + i;
             } else {
               break;
             }
@@ -35,10 +38,16 @@ const Wait = ({ path }) => {
       } else if (count % 5 === 4) {
         setArr([count - 3, count - 2, count - 1, count, count + 1]);
       }
+    } else if (data?.totalPage) {
+      let ad = new Array(data?.totalPage).fill(0);
+      for (let i = 0; i < data.totalPage; i++) {
+        ad[i] = i + 1;
+      }
+      setArr(ad);
     }
   }, [count, data?.totalPage]);
   useEffect(() => {
-    if (data?.last && data.totalPage > count) {
+    if (data?.last && data.totalPage - 1 > count) {
       queryClient.prefetchQuery(["pagin", count + 1, path], () =>
         postNoticeRequest(count + 1, path)
       );
@@ -47,6 +56,9 @@ const Wait = ({ path }) => {
   const Click = useCallback((e) => {
     setCount(e);
   }, []);
+  const PreFetching = async (id) => {
+    queryClient.prefetchQuery(["noticeitem", id], () => getBoardList(id));
+  };
   return (
     <>
       {status === "loading" ? (
@@ -70,7 +82,12 @@ const Wait = ({ path }) => {
                       <div>{user.total}명</div>
                     </Category>
                     <ButtonProps>
-                      <div>자세히 보기</div>
+                      <div
+                        onClick={() => navigate(`/teacher/list/${user.id}`)}
+                        onMouseEnter={() => PreFetching(user.id)}
+                      >
+                        자세히 보기
+                      </div>
                       <div>지원자 리스트</div>
                     </ButtonProps>
                   </Box>
@@ -127,7 +144,8 @@ const Wait = ({ path }) => {
 };
 export default Wait;
 const Table = styled.div`
-  margin: 200px auto;
+  margin: 0px auto;
+  margin-bottom: 200px;
   width: 1190px;
   height: 813px;
   background-color: ${(props) => props.theme.colors.mediumPurple};
@@ -139,7 +157,8 @@ const Li = styled.li`
 const Text = styled.div`
   position: relative;
   font: 700 normal 23px "Roboto";
-  color: ${(props) => props.theme.colors.black};
+  color: ${(props) =>
+    props.state ? props.theme.colors.white : props.theme.colors.black};
   width: 60px;
   height: 60px;
   padding-top: 15px;
@@ -151,6 +170,7 @@ const Text = styled.div`
   :hover {
     background-color: ${(props) => props.theme.colors.blue};
     border-radius: 100%;
+    color: ${(props) => props.theme.colors.white};
   }
 `;
 const Button = styled.div`
diff --git a/src/components/pages/teacherPage/manage/index.jsx b/src/components/pages/teacherPage/manage/index.jsx
index 86d29ec..f8ad8a6 100644
--- a/src/components/pages/teacherPage/manage/index.jsx
+++ b/src/components/pages/teacherPage/manage/index.jsx
@@ -6,7 +6,7 @@ import Header from "../../../common/header";
 import { useState } from "react";
 import * as s from "./style";
 import ModalManage from "./modal";
-import { getBoardList, noticeRequest } from "../../../api/teacher";
+import { getNoticeItem, noticeRequest } from "../../../api/teacher";
 import { SubmitData } from "../../../../export/data";
 import BokLi from "./Bokli";
 import ErrorPage from "../../../common/error";
@@ -15,11 +15,16 @@ import ClockWork from "./clockTime";
 import BokliAfter from "./Bokli/bok";
 import GeunMu from "./geunmu";
 import { DownLoadImg } from "../../../../images";
+import { useParams } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { ArrowBack } from "../../../../images";
 const RequstManage = () => {
-  const { status, data } = getBoardList();
+  const { noticeId } = useParams();
+  const { status, data } = getNoticeItem(noticeId);
   const modal = useSelector((state) => state.modal.state.modalmanage);
   const count = useSelector((count) => count.count.count.manageCount);
   const [file] = useState([]);
+
   const dispatch = useDispatch();
   const ShowModal = () => {
     dispatch(stateModalManage(true));
@@ -32,7 +37,13 @@ const RequstManage = () => {
         <ErrorPage />
       ) : (
         <>
-          <Header title="모집의뢰 등록" description="모집공고를 등록해보세요" />
+          <Header
+            title="모집의뢰 관리"
+            description="회사정보를 볼 수 있습니다."
+          />
+          <Link to="/teacher/list">
+            <s.ArrowImg src={ArrowBack} />
+          </Link>
           <s.Table>
             <s.Title>채용직무</s.Title>
             <s.Button onClick={() => ShowModal()}>선택</s.Button>
@@ -278,7 +289,12 @@ const RequstManage = () => {
                 <s.LiProps>
                   <s.SubmitButton
                     onClick={() =>
-                      noticeRequest(item.method, item.path, data.noticeId)
+                      noticeRequest(
+                        item.method,
+                        item.path,
+                        data.noticeId,
+                        item.message
+                      )
                     }
                   >
                     {item.text}
diff --git a/src/components/pages/teacherPage/manage/style.js b/src/components/pages/teacherPage/manage/style.js
index b71ba7e..fa64389 100644
--- a/src/components/pages/teacherPage/manage/style.js
+++ b/src/components/pages/teacherPage/manage/style.js
@@ -3,7 +3,7 @@ export const Table = styled.div`
   position: relative;
   width: 1136px;
   height: auto;
-  top: 100px;
+  top: 50px;
   left: 0;
   right: 0;
   margin: 0 auto;
@@ -577,3 +577,10 @@ export const ImgDown = styled.img`
   top: 3px;
   left: 5px;
 `;
+export const ArrowImg = styled.img`
+  position: relative;
+  top: 40px;
+  left: 40px;
+  width: 40px;
+  height: 40px;
+`;
diff --git a/src/export/data.js b/src/export/data.js
index aa50e84..6f8faf0 100644
--- a/src/export/data.js
+++ b/src/export/data.js
@@ -60,8 +60,33 @@ export const interviewData = [
   { skill: "신체 검사", request: "PHYSICAL_TEST" },
 ];
 export const SubmitData = [
-  { text: "모집의뢰 승인", path: "/notice/approve", method: "put" },
-  { text: "모집의뢰 거부", path: "/notice/approve", method: "delete" },
-  { text: "모집의뢰 삭제", path: "/notice", method: "delete" },
-  { text: "모집의뢰 출력", path: "/notice/out", method: "post" },
+  {
+    text: "모집의뢰 승인",
+    path: "/notice/approve",
+    method: "put",
+    message: "승인되었습니다.",
+  },
+  {
+    text: "모집의뢰 거부",
+    path: "/notice/approve",
+    method: "delete",
+    message: "거부되었습니다.",
+  },
+  {
+    text: "모집의뢰 삭제",
+    path: "/notice",
+    method: "delete",
+    message: "삭제되었습니다.",
+  },
+  {
+    text: "모집의뢰 출력",
+    path: "/notice/out",
+    method: "post",
+    message: "출력페이지로 이동합니다.",
+  },
+];
+export const TeacherData = [
+  {
+    path: "/teacher/list",
+  },
 ];
diff --git a/src/images/Arrow back.svg b/src/images/Arrow back.svg
new file mode 100644
index 0000000..c16fbcc
--- /dev/null
+++ b/src/images/Arrow back.svg	
@@ -0,0 +1,10 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2387_20)">
+<path d="M80 44H31.32L53.68 21.64L48 16L16 48L48 80L53.64 74.36L31.32 52H80V44Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_2387_20">
+<rect width="96" height="96" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/index.js b/src/images/index.js
index 0a39e9d..efe4819 100644
--- a/src/images/index.js
+++ b/src/images/index.js
@@ -3,3 +3,4 @@ export { default as SuccessImg } from "./checked.png";
 export { default as FailImg } from "./failed.png";
 export { default as WaitImg } from "./wait.png";
 export { default as DownLoadImg } from "./Vector.svg";
+export { default as ArrowBack } from "./Arrow back.svg";
diff --git a/src/style/theme.js b/src/style/theme.js
index ebe2e3d..1671ff7 100644
--- a/src/style/theme.js
+++ b/src/style/theme.js
@@ -1,3 +1,5 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
 export const theme = {
   colors: {
     black: "#000000",
@@ -17,3 +19,13 @@ export const theme = {
     lightGray: "#BDBDBD",
   },
 };
+export const StyledLink = styled(Link)`
+  text-decoration: none;
+  &:focus,
+  &:hover,
+  &:visited,
+  &:link,
+  &:active {
+    text-decoration: none;
+  }
+`;