Merge pull request #51 from info-dsm/#29-CreateNotice

#50 Create Select
info-dsm · Dec 2, 2022 · 4cef9d2 · 4cef9d2
2 parents b878294 + 147204a
commit 4cef9d2
Show file tree

Hide file tree

Showing 15 changed files with 361 additions and 59 deletions.
diff --git a/src/App.js b/src/App.js
@@ -27,6 +27,7 @@ import CompanyDetailView from "./components/pages/studentPage/Company/detail";
 import NoticeView from "./components/pages/studentPage/Notice";
 import CompanyView from "./components/pages/studentPage/Company/index";
 import EmploymentStatus from "./components/pages/studentPage/employmentStatus";
+import Select from "./components/pages/studentPage/auth/Select";
 function App() {
   const queryClient = new QueryClient();
   return (
@@ -84,6 +85,10 @@ function App() {
                 path="/company/manage/user/:teacherId"
                 element={<Applicant />}
               />
+              <Route
+                path="/auth/select"
+                element={<Select/>}
+              />
             </Routes>
             <Footer />
           </BrowserRouter>

diff --git a/src/components/common/header/index.jsx b/src/components/common/header/index.jsx
@@ -5,6 +5,13 @@ import { useNavigate } from "react-router-dom";
 const Header = (props) => {
   const { title, description } = props;
   const navigate = useNavigate();
+  const menu = [
+    { menu: "메인페이지", url: "/student" },
+    { menu: "모집공고", url: "/student/notice" },
+    { menu: "기업 목록", url: "/student/company" },
+    { menu: "로그인", url: "/student/login" },
+    { menu: "회원가입", url: "/student/signup" },
+  ];
   return (
     <>
       <HeaderImg>
@@ -16,6 +23,19 @@ const Header = (props) => {
             src={LogoImage}
             alt="로고이미지입니다."
           />
+          <MenuProps>
+            {menu.map((nav) => (
+              <>
+                <Menu
+                  onClick={() => {
+                    navigate(nav.url);
+                  }}
+                >
+                  {nav.menu}
+                </Menu>
+              </>
+            ))}
+          </MenuProps>
         </Nav>
         <Title>
           <h1>{title}</h1>
@@ -37,6 +57,22 @@ const LogoImg = styled.img`
   width: 115px;
   height: 43px;
 `;
+const MenuProps = styled.ul`
+  width: 509px;
+  height: 18px;
+  display: flex;
+  justify-content: space-between;
+`;
+const Menu = styled.li`
+  font-family: "Nanum Gothic", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 16px;
+  list-style: none;
+  position: relative;
+  color: ${(props) => props.theme.colors.white};
+  filter: drop-shadow(0px 0px 25px rgba(0, 0, 0, 0.75));
+`;
 const Nav = styled.div`
   width: 100%;
   display: inline-flex;

diff --git a/src/components/pages/companyPage/auth/signIn/index.jsx b/src/components/pages/companyPage/auth/signIn/index.jsx
@@ -182,12 +182,12 @@ const CompanySignIn = () => {
               {hint.show ? <>{hint.str}</> : <>{"비밀번호 힌트 보기 >"}</>}
             </AdditionalElm>
             <HighlightDiv>
-              <HighlightText cursor={"auto"} color={"#9B9EA0"}>
+              {/* <HighlightText cursor={"auto"} color={"#9B9EA0"}>
                 Forgot
               </HighlightText>
               <HighlightText cursor={"pointer"} color={"#7243FF"}>
                 Password?
-              </HighlightText>
+              </HighlightText> */}
             </HighlightDiv>
             <Submit>
               <button onClick={() => submit()}>Login</button>
@@ -196,7 +196,7 @@ const CompanySignIn = () => {
               </HighlightText>
               <HighlightText cursor={"pointer"} color={"#7243FF"}>
                 <Link to={"/company/signup"}>
-                  <a>기업 등록</a>
+                  <a>Company Register</a>
                 </Link>
               </HighlightText>
             </Submit>
@@ -318,7 +318,7 @@ const HighlightText = styled.span`
   cursor: ${(props) => props.cursor};
   margin-left: 10px;
 
-  div {
+  a {
     text-decoration: none;
     color: #7243ff;
   }

diff --git a/src/components/pages/studentPage/Company/detail.jsx b/src/components/pages/studentPage/Company/detail.jsx
@@ -129,7 +129,7 @@ const CompanyDetailView = () => {
     <>
       {data ? (
         <>
-          <Header title={data.companyName} description={"..."} />
+          <Header title={data.companyName} description={data.companyNumber} />
           <Out_box>
             <Flex_box>
               <Image
@@ -215,12 +215,12 @@ const CompanyDetailView = () => {
                   <div>
                     <span>특기사항</span>
                     <span>
-                      ㅓㅗ머ㅗ나ㅓ롸ㅣㅓㅁㄴ오ㅓㅏㅣㄻ놔ㅣㅓㅇㅁㄴ롸ㅣㄴㅁㅇ뢀ㅇ노ㅓㅏ나ㅓ롸ㅣㅓㅁㄴ오ㅓㅏㅣㄻ놔ㅣㅓㅇㅁㄴ롸ㅣㄴㅁㅇ뢀ㅇ노ㅓㅏ
+                      프론트엔드 뽑고 있습니다.
                     </span>
                   </div>
                   <span>
                     <span>인원 수</span>
-                    <span>10명</span>
+                    <span>5명</span>
                   </span>
                 </App_box>
               </div>
@@ -233,13 +233,13 @@ const CompanyDetailView = () => {
               <div>
                 <Interview_box>
                   <div>
-                    <img src="" alt="" />
+                    <img src="https://avatars.githubusercontent.com/u/80964727?v=4" alt="" />
                     <span>
-                      ㅓㅗ머ㅗ나ㅓ롸ㅣㅓㅁㄴ오ㅓㅏㅣㄻ놔ㅣㅓㅇㅁㄴ롸ㅣㄴㅁㅇ뢀ㅇ노ㅓㅏ나ㅓ롸ㅣㅓㅁㄴ오ㅓㅏㅣㄻ놔ㅣㅓㅇㅁㄴ롸ㅣㄴㅁㅇ뢀ㅇ노ㅓㅏ
+                      면접 내내 직원들이 정말 상냥하고 편하게 대해주셔서 정말 뜻깊은 시간이었던 것 같아요!
                     </span>
                   </div>
                   <span>
-                    <span>2022-10-03</span>
+                    <span>2022-12-14</span>
                     <span>5.0</span>
                     <div />
                   </span>

diff --git a/src/components/pages/studentPage/Introduce_company.jsx b/src/components/pages/studentPage/Introduce_company.jsx
@@ -49,7 +49,7 @@ const IC_View = ({ IC_data }) => {
         <IC_title>{Data.title}</IC_title>
         <Flex_box justify="space-between">
           <IC_sub_title>{Data.number}</IC_sub_title>
-          <IC_sub_title color="#868686">{Data.year}</IC_sub_title>
+          {/* <IC_sub_title color="#868686">{Data.year}</IC_sub_title> */}
         </Flex_box>
         <Flex_box margin="19px" height="26px">
           {Data.isLeading && <IC_company_point text="선도기업" />}
@@ -142,15 +142,15 @@ const Flex_box = styled.div`
 
 const IC_sub_title = styled.span`
   font-family: "NanumGothic";
-  font-weight: 400;
-  font-size: 16px;
+  font-weight: 700;
+  font-size: 24px;
   line-height: 18px;
   color: ${(props) => props.color || "#000000"};
 `;
 
 const Introduce_box = styled.span`
   width: 400px;
-  height: 52px;
+  height:60px;
   font-weight: 400;
   font-size: 16px;
   line-height: 160%;

diff --git a/src/components/pages/studentPage/Main/index.jsx b/src/components/pages/studentPage/Main/index.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import styled from "styled-components";
 import axios from "axios";
 import CA_View from "../Announcement.jsx";
@@ -12,10 +12,8 @@ import LoadingPage from "../../../common/loading";
 import ErrorPage from "../../../common/error";
 import { useNavigate } from "react-router-dom";
 import { initialCompany, initialNotice } from "../../../../export/data.js";
-import NoticeModal from "../NoticeModal.jsx";
 const MainView = () => {
   const accessToken = sessionStorage.getItem("accessToken");
-  const [noticeID, setNoticeID] = useState("");
 
   const { status, data } = useQuery(["mainData", accessToken], async () => {
     let res = [{}, {}];
@@ -95,7 +93,7 @@ const MainView = () => {
                 }}
               >
                 <Sub_Title
-                  text="더 다양한 모집공고를 원하시나요?"
+                  text="더 다양한ㅤ모집공고를 원하시나요?"
                   button="모집공고"
                 />
               </div>

diff --git a/src/components/pages/studentPage/NoticeModal.jsx b/src/components/pages/studentPage/NoticeModal.jsx
@@ -28,8 +28,6 @@ const NoticeModal = ({ datum, setNoticeID }) => {
 
   const [data, setData] = useState(initialNoticeDetail);
 
-  console.log(datum);
-
   useEffect(() => {
     axios({
       url: BaseUrl + `/notice/${datum.id}`,
@@ -107,13 +105,15 @@ const NoticeModal = ({ datum, setNoticeID }) => {
   ];
 
   return (
-    <Background>
-      <Blur
-        onClick={() => {
+    <Background
+      onClick={(e) => {
+        if (e.target.id === "background") {
           document.querySelector("html").classList.remove("scrollban");
           setNoticeID({ id: "", company: "" });
-        }}
-      >
+        }
+      }}
+    >
+      <Blur id="background">
         <Notice>
           <DelBtn
             onClick={() => {
@@ -129,7 +129,16 @@ const NoticeModal = ({ datum, setNoticeID }) => {
             <ImageList>
               <CompanyImg
                 src={
-                  "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Picture_icon_BLACK.svg/1200px-Picture_icon_BLACK.svg.png"
+                  datum.company.companyIntroductionResponse.companyLogo !==
+                    {} &&
+                  datum.company.companyIntroductionResponse.companyLogo !==
+                    null &&
+                  datum.company.companyIntroductionResponse.companyLogo !==
+                    undefined
+                    ? datum.company.companyIntroductionResponse.companyLogo
+                        .fileUrl ||
+                      "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Picture_icon_BLACK.svg/1200px-Picture_icon_BLACK.svg.png"
+                    : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Picture_icon_BLACK.svg/1200px-Picture_icon_BLACK.svg.png"
                 }
                 alt="회사이미지입니다"
               ></CompanyImg>
@@ -290,7 +299,7 @@ const NoticeModal = ({ datum, setNoticeID }) => {
             {data.attachmentFileList.map((info) => (
               <File>
                 <FileImg src={info.fileUrl} alt="파일아이콘입니다"></FileImg>
-                <FileName href={info.fileUrl} download>
+                <FileName href={info.extension} download>
                   {info.fileName}
                 </FileName>
               </File>
@@ -312,6 +321,7 @@ const DelBtn = styled.div`
   position: absolute;
   right: 30px;
   font-size: 50px;
+  cursor: pointer;
   font-weight: 700;
 `;
 
@@ -519,6 +529,7 @@ const CompanyImg = styled.img`
   height: 100%;
   object-fit: contain;
   border-radius: 10px;
+  background-color: #fff;
 `; // 이미지
 const ImageList = styled.div`
   width: 100%;
@@ -571,6 +582,7 @@ const Notice = styled.div`
   flex-direction: column;
   align-items: center;
   margin-bottom: 100px;
+  z-index: 99;
 `; // 모달창 배경
 const Blur = styled.div`
   position: absolute;

diff --git a/src/components/pages/studentPage/auth/Select/SelectContainer/index.jsx b/src/components/pages/studentPage/auth/Select/SelectContainer/index.jsx
@@ -0,0 +1,85 @@
+import { Link, useNavigate } from "react-router-dom";
+import styled from "styled-components";
+
+const SelectContainer = ({ img, title, description, url }) => {
+  const navigate = useNavigate();
+  return (
+    <>
+      <MainDiv>
+        <Profile>
+          <img src={img} alt="" />
+        </Profile>
+        <hr />
+        <Title>{title}</Title>
+        <Description>{description}</Description>{" "}
+        <SubmitBtn>
+          <a onClick={() => navigate(`/${url}`)}>이동하기</a>{" "}
+        </SubmitBtn>
+      </MainDiv>
+    </>
+  );
+};
+
+export default SelectContainer;
+
+const MainDiv = styled.div`
+  width: 450px;
+  height: 580px;
+  background-color: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 8px;
+  hr {
+    margin: 30px 0 0 0;
+    width: 70px;
+    height: 1px;
+    border: none;
+    background-color: #d3d3d3;
+  }
+`;
+
+const SubmitBtn = styled.button`
+  width: 153px;
+  height: 42px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.plum};
+  border: none;
+  border-radius: 6px;
+  margin-top: 84px;
+  color: #fdfdfd;
+  cursor: pointer;
+  font-size: 20px;
+`;
+
+const Description = styled.div`
+  margin-top: 33px;
+  font-size: 18px;
+  color: #929292;
+  font-weight: 700;
+  text-align: center;
+`;
+
+const Title = styled.div`
+  margin-top: 26px;
+  font-size: 24px;
+  font-weight: 600;
+`;
+
+const Profile = styled.div`
+  width: 150px;
+  background-color: #fdfdfd;
+  height: 150px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 60px;
+  img {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+  }
+`;