From 34cb95742cacb0345e5036134c85d66e19df9a1d Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:09:56 +0900 Subject: [PATCH 01/16] CREATE: Create Address --- .../pages/companyPage/auth/signUp/address.jsx | 117 ++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 src/components/pages/companyPage/auth/signUp/address.jsx diff --git a/src/components/pages/companyPage/auth/signUp/address.jsx b/src/components/pages/companyPage/auth/signUp/address.jsx new file mode 100644 index 0000000..7bc2a33 --- /dev/null +++ b/src/components/pages/companyPage/auth/signUp/address.jsx @@ -0,0 +1,117 @@ +import styled from "styled-components"; +import { open } from "../../../../common/addresshook"; +import { Category, InputForm } from "./styles"; + +const CompanyAddress = ({ info, setInfo }) => { + const arr = [ + { + title: "본사", + str: "home", + }, + { + title: "연구소/지점", + str: "agent", + }, + ]; + + const getAddress = (data, str) => { + let fullAddress = data.address; + let extraAddress = ""; + + if (data.addressType === "R") { + if (data.bname !== "") { + extraAddress += data.bname; + } + if (data.buildingName !== "") { + extraAddress += + extraAddress !== "" ? `, ${data.buildingName}` : data.buildingName; + } + fullAddress += extraAddress !== "" ? ` (${extraAddress})` : ""; + } + + setInfo({ + ...info, + [str + "FullAddress"]: fullAddress, + [str + "AddressNumber"]: data.zonecode, + }); + document.body.removeChild(document.getElementById("daum_postcode_script")); + }; + + return ( + <> +
+ 주소 +
+ {arr.map((item) => ( +
+ {item.title} + + open({ + onComplete: (data) => getAddress(data, item.str), + width: 700, + height: 700, + left: 200, + animation: true, + }) + } + placeholder="ex) 대전광역시 유성구 가정북로 76" + /> + + open({ + onComplete: (data) => getAddress(data, item.str), + width: 700, + height: 700, + left: 200, + animation: true, + }) + } + style={{ width: "100px" }} + placeholder="ex) 34111" + /> +
+ ))} +
+
+ + ); +}; + +export default CompanyAddress; + +const Address = styled.div` + width: 100%; + display: flex; + justify-content: flex-end; + > div { + margin-left: 35px; + > div { + width: 630px; + display: flex; + align-items: center; + display: grid; + grid-template-columns: repeat(3, 1fr); + margin-bottom: 20px; + span { + width: 120px; + display: flex; + justify-content: flex-end; + margin-right: 22px; + } + } + } + + input { + width: 389px; + height: 40px; + border-radius: 18px; + + background-color: #f3eeff; + border: none; + padding-left: 24px; + margin-right: 20px; + } +`; From 0a23be3649c33511075afd05fd289d698c426a98 Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:10:09 +0900 Subject: [PATCH 02/16] CREATE: Create BusinessAreaList --- .../auth/signUp/businessAreaList.jsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/components/pages/companyPage/auth/signUp/businessAreaList.jsx diff --git a/src/components/pages/companyPage/auth/signUp/businessAreaList.jsx b/src/components/pages/companyPage/auth/signUp/businessAreaList.jsx new file mode 100644 index 0000000..25ffd04 --- /dev/null +++ b/src/components/pages/companyPage/auth/signUp/businessAreaList.jsx @@ -0,0 +1,28 @@ +import { CheckInput } from "./styles"; + +const BusinessAreaList = ({ state, setState }) => { + return ( + <> + {state.map((item) => ( + <> + { + setState( + state.map((business) => + business.name === item.name + ? { ...business, checked: e.target.checked } + : business + ) + ); + }} + > + {item.name} + + ))} + + ); +}; + +export default BusinessAreaList; From abb46b38f7d7e56896328eab65f9f802098ff6bc Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:10:25 +0900 Subject: [PATCH 03/16] CREATE: Create CompanySuccessCheck --- .../pages/companyPage/auth/signUp/check.jsx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/components/pages/companyPage/auth/signUp/check.jsx diff --git a/src/components/pages/companyPage/auth/signUp/check.jsx b/src/components/pages/companyPage/auth/signUp/check.jsx new file mode 100644 index 0000000..b40bf87 --- /dev/null +++ b/src/components/pages/companyPage/auth/signUp/check.jsx @@ -0,0 +1,34 @@ +import checkImg from "../../../../../images/checked.png"; +import styled from "styled-components"; +import failImg from "../../../../../images/failed.png"; +const CompanySuccessCheck = ({ elm, success, info }) => { + return ( + <> + {elm.key === "email" && success.sendEmail !== "" ? ( + + ) : ( + <> + )} + {elm.key === "emailCheckCode" && success.checkSuccess !== "" ? ( + + ) : ( + <> + )} + {elm.title === "비밀번호 확인" && + success.passwordSuccess !== "" && + info.password !== "" ? ( + + ) : ( + <> + )} + + ); +}; + +export default CompanySuccessCheck; + +const Success = styled.img` + width: 20px; + height: 20px; + object-fit: cover; +`; From bef23f7269719bd7ec4b4c989a2035d3d10f9245 Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:10:39 +0900 Subject: [PATCH 04/16] CREATE: Create CompanyAuth --- .../companyPage/auth/signUp/companyAuth.jsx | 166 ++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 src/components/pages/companyPage/auth/signUp/companyAuth.jsx diff --git a/src/components/pages/companyPage/auth/signUp/companyAuth.jsx b/src/components/pages/companyPage/auth/signUp/companyAuth.jsx new file mode 100644 index 0000000..9a85f89 --- /dev/null +++ b/src/components/pages/companyPage/auth/signUp/companyAuth.jsx @@ -0,0 +1,166 @@ +import axios from "axios"; +import styled from "styled-components"; +import { BaseUrl } from "../../../../../export/base"; +import { Notice } from "../../../../common/notice"; +import CompanySuccessCheck from "./check"; +import { InputForm } from "./styles"; + +const CompanyAuth = ({ success, info, setSuccess, onChangeState }) => { + const data = [ + { + title: "이메일", + additionalElm: "인증번호 전송", + placeholder: "이메일을 입력해주세요..", + key: "email", + }, + { + title: "인증번호", + additionalElm: "인증번호 확인", + placeholder: "인증번호를 입력해주세요..", + key: "emailCheckCode", + }, + { + title: "비밀번호", + additionalElm: "", + placeholder: "비밀번호를 입력해주세요..", + key: "password", + }, + { + title: "비밀번호 확인", + additionalElm: "", + placeholder: "비밀번호를 입력해주세요..", + key: "", + }, + { + title: "비밀번호 힌트", + additionalElm: "", + placeholder: "비밀번호 힌트를 입력해주세요..", + key: "passwordHint", + }, + ]; + const onCheck = (str) => { + if (str === "인증번호 전송" && info.email !== "") { + axios({ + url: BaseUrl + "/auth/code", + method: "PUT", + params: { + email: info.email, + }, + }) + .then((res) => { + setSuccess({ ...success, sendEmail: true }); + Notice({ + state: "success", + message: "인증번호 발송!", + }); + }) + .catch((err) => { + console.log(err); + setSuccess({ ...success, sendEmail: false }); + Notice({ + state: "error", + message: "존재하지 않거나 이미 가입된 이메일입니다.", + }); + }); + } else if (str === "인증번호 확인" && info.emailCheckCode !== "") { + axios({ + url: BaseUrl + "/auth/code", + method: "post", + data: { + email: info.email, + data: info.emailCheckCode, + type: "SIGNUP_EMAIL", + }, + }) + .then((res) => { + setSuccess({ ...success, checkSuccess: true }); + Notice({ + state: "success", + message: "인증번호가 성공적으로 확인되었습니다.", + }); + }) + .catch((err) => { + setSuccess({ ...success, checkSuccess: false }); + Notice({ + state: "error", + message: "인증번호가 올바르지 않습니다.", + }); + }); + } + }; + + return ( + <> + + {data.map((elm, i) => ( + +
+ {elm.title} + + onCheck(elm.additionalElm)}> + {elm.additionalElm === "" ? "" : `${elm.additionalElm} >`} + +
+ onChangeState(elm.key, e)} + /> + + ))} + + + ); +}; + +export default CompanyAuth; + +const AuthDiv = styled.div` + width: 99vw; + display: flex; + flex-direction: column; + align-items: center; + + h2 { + margin: 0; + font-size: 32px; + margin-bottom: 104px; + font-weight: 700; + } +`; + +const Check = styled.div` + color: #4000ff; + font-size: 16px; + font-weight: 400; + cursor: pointer; +`; + +const InputDiv = styled.div` + width: 600px; + margin-bottom: 30px; + span { + margin-left: 25px; + font-size: 20px; + font-weight: 700; + } + + div { + display: inline-flex; + align-items: center; + gap: 10px; + } + + input { + margin-top: 13px; + width: 100%; + height: 50px; + border: none; + border-radius: 24px; + background-color: #f0f0f0; + padding-left: 24px; + color: #000; + font-size: 20px; + font-weight: 700; + } +`; From 11c5db83a4fc8a444cf74eb0d1711478fcf9f90f Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:10:56 +0900 Subject: [PATCH 05/16] ADD: Add Data --- .../pages/companyPage/auth/signUp/data.js | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 src/components/pages/companyPage/auth/signUp/data.js diff --git a/src/components/pages/companyPage/auth/signUp/data.js b/src/components/pages/companyPage/auth/signUp/data.js new file mode 100644 index 0000000..bdd7e8d --- /dev/null +++ b/src/components/pages/companyPage/auth/signUp/data.js @@ -0,0 +1,72 @@ +export const fileName = [ + { name: "businessRegisteredCertificate", kr: "사업자 등록증" }, + { name: "companyIntroductionFile", kr: "회사 소개 파일" }, + { name: "companyLogo", kr: "회사 로고" }, + { name: "companyPhotoList", kr: "회사 사진 목록" }, +]; + +export const contactorArr = [ + { + title: "대표자", + state: "contactorName", + placeholder: "대표자를 입력해주세요", + type: "text", + }, + { + title: "소속 부서", + state: "contactorRank", + placeholder: "소속 부서를 입력해주세요", + type: "text", + }, + { + title: "전화번호", + state: "phoneNumber", + placeholder: "ex) 02 or 0xx-xxxx-xxxx", + type: "text", + }, + { + title: "휴대전화", + state: "contactorPhone", + placeholder: "ex) 02 or 0xx-xxxx-xxxx", + type: "text", + }, +]; + +export const companyArr = [ + { + title: "회사 명", + state: "companyName", + placeholder: "회사 명을 입력해주세요", + type: "text", + }, + { + title: "사업자\n등록번호", + state: "companyNumber", + placeholder: "ex) 000-00-00000", + type: "text", + }, + { + title: "대표자", + state: "representative", + placeholder: "대표자를 입력해주세요", + type: "text", + }, + { + title: "근로자 수", + state: "workerCount", + placeholder: "근로자 수를 입력해주세요", + type: "number", + }, + { + title: "설립연도", + state: "establishedAt", + placeholder: "설립연도를 입력해주세요", + type: "number", + }, + { + title: "연매출액", + state: "annualSales", + placeholder: "연매출액을 입력해주세요", + type: "number", + }, +]; From 573e2b2f58a56f8dbd547565bf4023a180c6753d Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:11:19 +0900 Subject: [PATCH 06/16] CREATE: Create CompanyFormData --- .../companyPage/auth/signUp/formdata.jsx | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/components/pages/companyPage/auth/signUp/formdata.jsx diff --git a/src/components/pages/companyPage/auth/signUp/formdata.jsx b/src/components/pages/companyPage/auth/signUp/formdata.jsx new file mode 100644 index 0000000..5dd94d4 --- /dev/null +++ b/src/components/pages/companyPage/auth/signUp/formdata.jsx @@ -0,0 +1,59 @@ +import { Notice } from "../../../../common/notice"; +import { fileName } from "./data"; +import * as S from "./styles"; + +const CompanyFormData = ({ state, setState }) => { + const AddFileProps = (e, props) => { + let arr = []; + for (let i = 0; i < e.target.files.length; i++) { + if (e.target.files[i].size <= 1000000) { + arr.push(e.target.files[i].name); + } else { + Notice({ + state: "error", + message: "파일 크기가 너무 큽니다.", + }); + arr = []; + break; + } + } + setState({ ...state, [props]: arr }); + }; + return ( + + {fileName.map((item, i) => ( + <> + + {item.kr} + AddFileProps(e, item.name)} + > + + {state[item.name].map((files) => ( + <> + + + {files} + + + + ))} + + + ))} + + ); +}; +export default CompanyFormData; From f9f2db192e04acc3ebad78774989bb9a76a6c5d6 Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:11:47 +0900 Subject: [PATCH 07/16] UPDATE: Update CompanySignup --- .../pages/companyPage/auth/signUp/index.jsx | 888 +++--------------- 1 file changed, 105 insertions(+), 783 deletions(-) diff --git a/src/components/pages/companyPage/auth/signUp/index.jsx b/src/components/pages/companyPage/auth/signUp/index.jsx index b9a6209..a1b1093 100644 --- a/src/components/pages/companyPage/auth/signUp/index.jsx +++ b/src/components/pages/companyPage/auth/signUp/index.jsx @@ -1,29 +1,27 @@ import { useEffect, useState } from "react"; -import styled from "styled-components"; import Header from "../../../../common/header"; -import checkImg from "../../../../../images/checked.png"; -import failImg from "../../../../../images/failed.png"; import axios from "axios"; import { BaseUrl } from "../../../../../export/base"; import { Notice } from "../../../../common/notice"; import { Alert } from "../../../../common/alert"; import NavProps from "../../../../common/nav"; -import { open } from "../../../../common/addresshook"; +import { useRef } from "react"; +import BusinessAreaList from "./businessAreaList"; +import CompanyAddress from "./address"; +import CompanyAuth from "./companyAuth"; +import InputCompany from "./input"; +import * as S from "./styles"; +import { contactorArr, companyArr } from "./data"; +import CompanyFormData from "./formdata"; const CompanySignUp = () => { const [business, setBusiness] = useState(""); - const formData = new FormData(); + const form = useRef(null); const [showFile, setShowFile] = useState({ businessRegisteredCertificate: [], companyIntroductionFile: [], companyLogo: [], companyPhotoList: [], }); - const fileName = [ - { name: "businessRegisteredCertificate", kr: "사업자 등록증" }, - { name: "companyIntroductionFile", kr: "회사 소개 파일" }, - { name: "companyLogo", kr: "회사 로고" }, - { name: "companyPhotoList", kr: "회사 사진 목록" }, - ]; const [companyInfomation, setCompanyInfomation] = useState({ companyNumber: "", @@ -48,39 +46,6 @@ const CompanySignUp = () => { isLeading: false, }); - const data = [ - { - title: "이메일", - additionalElm: "인증번호 전송", - placeholder: "이메일을 입력해주세요..", - key: "email", - }, - { - title: "인증번호", - additionalElm: "인증번호 확인", - placeholder: "인증번호를 입력해주세요..", - key: "emailCheckCode", - }, - { - title: "비밀번호", - additionalElm: "", - placeholder: "비밀번호를 입력해주세요..", - key: "password", - }, - { - title: "비밀번호 확인", - additionalElm: "", - placeholder: "비밀번호를 입력해주세요..", - key: "", - }, - { - title: "비밀번호 힌트", - additionalElm: "", - placeholder: "비밀번호 힌트를 입력해주세요..", - key: "passwordHint", - }, - ]; - const [passwordCheck, setPasswordCheck] = useState(""); const [success, setSuccess] = useState({ @@ -109,23 +74,21 @@ const CompanySignUp = () => { } else setSuccess({ ...success, passwordSuccess: false }); }, [passwordCheck, companyInfomation.password]); - const AddFileProps = (e, props) => { - let arr = []; - for (let i = 0; i < e.target.files.length; i++) { - if (e.target.files[i].size <= 1000000) { - settingFormData(props, e.target.files[i]); - arr.push(e.target.files[i].name); - } else { - Notice({ - state: "error", - message: "파일 크기가 너무 큽니다.", - }); - arr = []; - break; - } - } - setShowFile({ ...showFile, [props]: arr }); - }; + useEffect(() => { + axios({ + url: BaseUrl + "/company/business-area", + method: "GET", + }).then((res) => { + setBusinessAreaList( + Array.from({ length: res.data.length }, (t, i) => { + return { + name: res.data[i].id, + checked: false, + }; + }) + ); + }); + }, []); const onSignUp = () => { const { @@ -151,8 +114,8 @@ const CompanySignUp = () => { passwordHint, } = companyInfomation; const body = { + companyNumber: companyNumber, companyNameRequest: { - companyNumber: companyNumber, companyName: companyName, }, companyInformation: { @@ -164,41 +127,58 @@ const CompanySignUp = () => { fullAddress: agentFullAddress, addressNumber: parseInt(agentAddressNumber), }, - representative: representative, + representativeName: representative, establishedAt: parseInt(establishedAt), workerCount: parseInt(workerCount), annualSales: parseInt(annualSales), + companyPhone: phoneNumber, }, companyContact: { contactorName: contactorName, contactorRank: contactorRank, - phoneNumber: phoneNumber, contactorPhone: contactorPhone, email: email, + password: password, + passwordHint: passwordHint, }, businessAreaList: businessAreaList .map((item) => (item.checked ? item.name : undefined)) .filter((element) => element !== undefined), introduction: introduction, - password: password, - isLeading: isLeading, - passwordHint: passwordHint, }; + console.log( + businessAreaList + .map((item) => (item.checked ? item.name : undefined)) + .filter((element) => element !== undefined) + ); + let len = 1; for (let i in Object.values(showFile)) { len *= Object.values(showFile)[i].length; } + console.log(body); + if ( success.checkSuccess && success.passwordSuccess && len >= 1 && !Object.values(companyInfomation).includes("") ) { - settingFormData("request", body); + const formData = new FormData(form.current); + formData.set( + "request", + new Blob([JSON.stringify(body)], { + type: "application/json", + }) + ); + + for (let key of formData.keys()) { + console.log(key, ":", formData.get(key)); + } axios({ - url: BaseUrl + "/company", + url: BaseUrl + "/company/signup", method: "POST", headers: { "Content-Type": "multipart/form-data" }, data: formData, @@ -228,124 +208,12 @@ const CompanySignUp = () => { } }; - const settingFormData = (props, body) => { - if (body.constructor === File) { - if (props === "companyPhotoList") { - formData.append(props, body); - } else { - formData.set(props, body); - } - } - if (body.constructor === Object) { - formData.set( - props, - new Blob([JSON.stringify(body)], { - type: "application/json", - }) - ); - } - }; - const onChangeState = (props, e) => { if (props.length) setCompanyInfomation({ ...companyInfomation, [props]: e.target.value }); else setPasswordCheck(e.target.value); }; - const onCheck = (str) => { - if (str === "인증번호 전송" && companyInfomation.email !== "") { - axios({ - url: BaseUrl + "/company/email", - method: "POST", - params: { - email: companyInfomation.email, - }, - }) - .then((res) => { - setSuccess({ ...success, sendEmail: true }); - Notice({ - state: "success", - message: "인증번호 발송!", - }); - }) - .catch((err) => { - setSuccess({ ...success, sendEmail: false }); - Notice({ - state: "error", - message: "존재하지 않거나 이미 가입된 이메일입니다.", - }); - }); - } else if ( - str === "인증번호 확인" && - companyInfomation.emailCheckCode !== "" - ) { - axios({ - url: BaseUrl + "/company/email/code/check", - method: "GET", - params: { - email: companyInfomation.email, - code: companyInfomation.emailCheckCode, - }, - }) - .then((res) => { - setSuccess({ ...success, checkSuccess: true }); - Notice({ - state: "error", - message: "인증번호가 성공적으로 확인되었습니다.", - }); - }) - .catch((err) => { - setSuccess({ ...success, checkSuccess: false }); - Notice({ - state: "error", - message: "인증번호가 올바르지 않습니다.", - }); - }); - } - }; - const handleComplete = (data) => { - let fullAddress = data.address; - let extraAddress = ""; - - if (data.addressType === "R") { - if (data.bname !== "") { - extraAddress += data.bname; - } - if (data.buildingName !== "") { - extraAddress += - extraAddress !== "" ? `, ${data.buildingName}` : data.buildingName; - } - fullAddress += extraAddress !== "" ? ` (${extraAddress})` : ""; - } - setCompanyInfomation({ - ...companyInfomation, - homeFullAddress: fullAddress, - homeAddressNumber: data.zonecode, - }); - document.body.removeChild(document.getElementById("daum_postcode_script")); - }; - const subhandleComplete = (data) => { - let fullAddress = data.address; - let extraAddress = ""; - - if (data.addressType === "R") { - if (data.bname !== "") { - extraAddress += data.bname; - } - if (data.buildingName !== "") { - extraAddress += - extraAddress !== "" ? `, ${data.buildingName}` : data.buildingName; - } - fullAddress += extraAddress !== "" ? ` (${extraAddress})` : ""; - } - - setCompanyInfomation({ - ...companyInfomation, - agentFullAddress: fullAddress, - agentAddressNumber: data.zonecode, - }); - document.body.removeChild(document.getElementById("daum_postcode_script")); - }; return ( <>
{ /> {/* */} - - - + <S.MainDiv> + <S.ContainerDiv> + <S.Title> <h2>회사 명</h2> - <CheckInput + <S.CheckInput type="checkbox" checked={companyInfomation.isLeading} onChange={(e) => { @@ -367,186 +235,44 @@ const CompanySignUp = () => { isLeading: e.target.checked, }); }} - ></CheckInput> + ></S.CheckInput> <span>선도 기업</span> - - - - 회사 명 - onChangeState("companyName", e)} - placeholder="회사 명을 입력해주세요" - /> - - 사업자 -
- 등록번호 - - onChangeState("companyNumber", e)} - placeholder="ex) 000-00-00000" - /> - 대표자 - onChangeState("representative", e)} - placeholder="대표자를 입력해주세요" - /> - 근로자 수 - onChangeState("workerCount", e)} - placeholder="근로자 수를 입력해주세요" - /> - 설립연도 - onChangeState("establishedAt", e)} - placeholder="설립연도를 입력해주세요" - /> - 연매출액 - onChangeState("annualSales", e)} - placeholder="연매출액을 입력해주세요" - /> - -
- 주소 -
-
- 본사 - - open({ - onComplete: handleComplete, - width: 700, - height: 700, - left: 200, - animation: true, - }) - } - placeholder="ex) 대전광역시 유성구 가정북로 76" - /> - - open({ - onComplete: handleComplete, - width: 700, - height: 700, - left: 200, - animation: true, - }) - } - style={{ width: "100px" }} - placeholder="ex) 34111" - /> -
-
- 연구소/지점 - - open({ - onComplete: subhandleComplete, - width: 700, - height: 700, - left: 200, - animation: true, - }) - } - placeholder="ex) 대전광역시 유성구 가정북로 76" - /> - - open({ - onComplete: subhandleComplete, - width: 700, - height: 700, - left: 200, - animation: true, - }) - } - style={{ width: "100px" }} - placeholder="ex) 34111" - /> -
-
-
- - {fileName.map((item, i) => ( - <> - - {item.kr} - AddFileProps(e, item.name)} - > - - {showFile[item.name].map((files) => ( - <> - - {files} - - - ))} - - - ))} - - + + + + + + +
+ + +
- - - + </S.ContainerDiv> + <S.ContainerDiv> + <S.Title> <h2>상세 설명</h2> - - - onChangeState("introduction", e)} /> + + + onChangeState("introduction", e)} />
- - - + </S.ContainerDiv> + <S.ContainerDiv> + <S.Title> <h2>사업 분야</h2> - - - - {businessAreaList.map((item) => ( - <> - { - setBusinessAreaList( - businessAreaList.map((business) => - business.name === item.name - ? { ...business, checked: e.target.checked } - : business - ) - ); - }} - > - {item.name} - - ))} - + + + + + - + { > + - - + +
- - - + </S.ContainerDiv> + <S.ContainerDiv> + <S.Title> <h2>Contact</h2> - - - - 대표자 - onChangeState("contactorName", e)} - placeholder="대표자를 입력해주세요" - /> - 소속 부서 - onChangeState("contactorRank", e)} - placeholder="소속 부서를 입력해주세요" - /> - 전화번호 - onChangeState("phoneNumber", e)} - placeholder="ex) 02 or 0xx-xxxx-xxxx" - /> - 휴대전화 - onChangeState("contactorPhone", e)} - placeholder="ex) 02 or 0xx-xxxx-xxxx" - /> - - - - {data.map((elm, i) => ( - -
- {elm.title} - - {elm.key === "email" && success.sendEmail !== "" ? ( - - ) : ( - <> - )} - {elm.key === "emailCheckCode" && - success.checkSuccess !== "" ? ( - - ) : ( - <> - )} - {elm.title === "비밀번호 확인" && - success.passwordSuccess !== "" && - companyInfomation.password !== "" ? ( - - ) : ( - <> - )} - onCheck(elm.additionalElm)}> - {elm.additionalElm === "" ? "" : `${elm.additionalElm} >`} - -
- onChangeState(elm.key, e)} - /> - - ))} - - - - onSignUp()}>기업 등록 - + + + + + + + + + onSignUp()}>기업 등록 + ); }; export default CompanySignUp; - -const PlusButton = styled.div` - display: inline-flex; - align-items: center; - width: 88%; - gap: 10px; - - input { - font-size: 16px; - background-color: #f0f0f0; - outline: none; - border: none; - padding: 10px 10px 10px 20px; - border-radius: 12px; - left: -45px; - width: 250px; - } - div { - cursor: pointer; - font-size: 18px; - right: 0; - - width: 30px; - height: 30px; - display: flex; - justify-content: center; - background-color: ${(props) => props.theme.colors.mediumGray}; - border-radius: 50%; - } -`; - -const AuthDiv = styled.div` - width: 99vw; - display: flex; - flex-direction: column; - align-items: center; - - h2 { - margin: 0; - font-size: 32px; - margin-bottom: 104px; - font-weight: 700; - } -`; - -const Nav = styled.div` - width: 100vw; - height: 100px; - background-color: #000; - padding-left: 350px; - gap: 40px; - display: inline-flex; - align-items: center; - - button { - padding: 0px 30px; - border: none; - height: 50px; - border-radius: 24px; - font-size: 24px; - } -`; - -const MainDiv = styled.div` - margin-top: 242px; - width: 100vw; - display: flex; - align-items: center; - flex-direction: column; -`; - -const ContentDiv = styled.div` - display: flex; - justify-content: flex-end; - flex-wrap: wrap; - width: 1136px; -`; - -const Description = styled.textarea` - width: 1136px; - height: 257px; - background-color: #f0f0f0; - border: none; - resize: none; - border-radius: 12px; - font-size: 20px; - padding: 20px; - font-weight: 700; -`; - -const ContainerDiv = styled.div` - width: 1100px; - - h2 { - margin: 0; - } - - hr { - width: 1236px; - height: 4px; - border-radius: 4px; - border: none; - margin: 146px 0 65px -70px; - background-color: #f0f0f0; - } - - > span { - font-weight: 400; - font-size: 20px; - } -`; - -const Title = styled.div` - display: inline-flex; - align-items: center; - margin-bottom: 60px; - h2 { - margin-right: 53px; - font-size: 40px; - font-weight: 700; - } - span { - font-size: 24px; - } -`; - -const InputForm = styled.input` - border: none; - width: 220px; - height: 50px; - border-radius: 18px; - background-color: #f0f0f0; - font-size: 17px; - margin-right: 30px; - padding-left: 24px; - font-weight: 700; - &::placeholder { - font-size: 13px; - } -`; - -const Category = styled.span` - font-size: 24px; - font-weight: 700; - color: #4000ff; - margin-right: 20px; -`; - -const GridDiv = styled.div` - width: ${(props) => props.width}px; - display: grid; - grid-template-columns: repeat(${(props) => props.column}, 1fr); - margin-right: 80px; - grid-row-gap: 43px; - place-items: center end; - margin-bottom: 86px; - - div { - font-size: 20px; - } - - span { - word-break: break-all; - } -`; - -const Address = styled.div` - width: 100%; - display: flex; - justify-content: flex-end; - > div { - margin-left: 35px; - > div { - width: 630px; - display: flex; - align-items: center; - display: grid; - grid-template-columns: repeat(3, 1fr); - margin-bottom: 20px; - span { - width: 120px; - display: flex; - justify-content: flex-end; - margin-right: 22px; - } - } - } - - input { - width: 389px; - height: 40px; - border-radius: 18px; - - background-color: #f3eeff; - border: none; - padding-left: 24px; - margin-right: 20px; - } -`; - -const Success = styled.img` - width: 20px; - height: 20px; - object-fit: cover; -`; - -const Check = styled.div` - color: #4000ff; - font-size: 16px; - font-weight: 400; - cursor: pointer; -`; - -const InputDiv = styled.div` - width: 600px; - margin-bottom: 30px; - span { - margin-left: 25px; - font-size: 20px; - font-weight: 700; - } - - div { - display: inline-flex; - align-items: center; - gap: 10px; - } - - input { - margin-top: 13px; - width: 100%; - height: 50px; - border: none; - border-radius: 24px; - background-color: #f0f0f0; - padding-left: 24px; - color: #000; - font-size: 20px; - font-weight: 700; - } -`; - -const SubmitBtn = styled.button` - width: 600px; - height: 50px; - border-radius: 24px; - margin: 150px; - background: linear-gradient(to right, #ab91f8, #7243ff); - border: none; - color: #fff; - font-size: 20px; - cursor: pointer; - font-weight: 700; -`; -export const CheckInput = styled.input` - margin-top: 5px; - margin-right: 15px; - cursor: pointer; - appearance: none; - width: 30px; - height: 30px; - background-color: ${(props) => props.theme.colors.mediumGray}; - :checked { - border: 5px solid ${(props) => props.theme.colors.mediumGray}; - background-color: ${(props) => props.theme.colors.blue}; - } -`; - -export const UlSubmitted = styled.ul` - width: 850px; - margin: 50px 0; - display: flex; - height: auto; - top: 40px; - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-row-gap: 30px; -`; -export const LabelFile = styled.label` - display: inline-block; - padding: 10px 30px; - background-color: ${(props) => props.theme.colors.blue}; - font-weight: 700; - font-size: 20px; - line-height: 20px; - border-radius: 20px; - color: ${(props) => props.theme.colors.white}; - cursor: pointer; - margin-bottom: 10px; -`; -export const FileHidden = styled.input` - position: absolute; - width: 1px; - height: 1px; - padding: 0; - border: 0; -`; -export const RemoveBtn = styled.button` - margin-left: 15px; - width: 30px; - height: 30px; - font-family: "NanumGothic", sans-serif; - font-weight: 700; - font-size: 16px; - line-height: 16px; - background: ${(props) => props.theme.colors.blue}; - color: ${(props) => props.theme.colors.white}; - border: none; - border-radius: 50%; - padding-bottom: 6px; - padding-right: 6.5px; -`; - -export const FileTextDiv = styled.div` - margin-left: -20px; - width: 130px; - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - word-break: break-all; - overflow: hidden; - text-overflow: ellipsis; - height: 24px; - font-family: "NanumGothic"; - font-style: normal; - font-weight: 700; - font-size: 24px; - line-height: 24px; - color: ${(props) => props.theme.colors.blue}; -`; -export const UlTable = styled.ul` - position: relative; - top: 5px; - width: auto; - height: 40px; - display: flex; -`; - -export const LiProps = styled.div` - position: relative; - list-style: none; - height: 100%; -`; From ad0915775a1295308450a405ff0341bce61e6a93 Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:12:15 +0900 Subject: [PATCH 08/16] CREATE: Create InputCompany --- .../pages/companyPage/auth/signUp/input.jsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/components/pages/companyPage/auth/signUp/input.jsx diff --git a/src/components/pages/companyPage/auth/signUp/input.jsx b/src/components/pages/companyPage/auth/signUp/input.jsx new file mode 100644 index 0000000..124af35 --- /dev/null +++ b/src/components/pages/companyPage/auth/signUp/input.jsx @@ -0,0 +1,20 @@ +import * as S from "./styles"; + +const InputCompany = ({ arr, onChangeState }) => { + return ( + <> + {arr.map((item) => ( + <> + {item.title} + onChangeState(item.state, e)} + placeholder={item.placeholder} + /> + + ))} + + ); +}; + +export default InputCompany; From 09c868ef317613d0169c78ce883006cc5d408840 Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:12:35 +0900 Subject: [PATCH 09/16] ADD: Add companysignup Design --- .../pages/companyPage/auth/signUp/styles.js | 239 ++++++++++++++++++ 1 file changed, 239 insertions(+) create mode 100644 src/components/pages/companyPage/auth/signUp/styles.js diff --git a/src/components/pages/companyPage/auth/signUp/styles.js b/src/components/pages/companyPage/auth/signUp/styles.js new file mode 100644 index 0000000..6061676 --- /dev/null +++ b/src/components/pages/companyPage/auth/signUp/styles.js @@ -0,0 +1,239 @@ +import styled from "styled-components"; + +export const Category = styled.span` + font-size: 24px; + font-weight: 700; + color: #4000ff; + margin-right: 20px; +`; + +export const InputForm = styled.input` + border: none; + width: 220px; + height: 50px; + border-radius: 18px; + background-color: #f0f0f0; + font-size: 17px; + margin-right: 30px; + padding-left: 24px; + font-weight: 700; + &::placeholder { + font-size: 13px; + } +`; + +export const PlusButton = styled.div` + display: inline-flex; + align-items: center; + width: 88%; + gap: 10px; + + input { + font-size: 16px; + background-color: #f0f0f0; + outline: none; + border: none; + padding: 10px 10px 10px 20px; + border-radius: 12px; + left: -45px; + width: 250px; + } + div { + cursor: pointer; + font-size: 18px; + right: 0; + + width: 30px; + height: 30px; + display: flex; + justify-content: center; + background-color: ${(props) => props.theme.colors.mediumGray}; + border-radius: 50%; + } +`; + +export const Nav = styled.div` + width: 100vw; + height: 100px; + background-color: #000; + padding-left: 350px; + gap: 40px; + display: inline-flex; + align-items: center; + + button { + padding: 0px 30px; + border: none; + height: 50px; + border-radius: 24px; + font-size: 24px; + } +`; + +export const MainDiv = styled.div` + margin-top: 242px; + width: 100vw; + display: flex; + align-items: center; + flex-direction: column; +`; + +export const ContentDiv = styled.div` + display: flex; + justify-content: flex-end; + flex-wrap: wrap; + width: 1136px; +`; + +export const Description = styled.textarea` + width: 1136px; + height: 257px; + background-color: #f0f0f0; + border: none; + resize: none; + border-radius: 12px; + font-size: 20px; + padding: 20px; + font-weight: 700; +`; + +export const ContainerDiv = styled.div` + width: 1100px; + + h2 { + margin: 0; + } + + hr { + width: 1236px; + height: 4px; + border-radius: 4px; + border: none; + margin: 146px 0 65px -70px; + background-color: #f0f0f0; + } + + > span { + font-weight: 400; + font-size: 20px; + } +`; + +export const Title = styled.div` + display: inline-flex; + align-items: center; + margin-bottom: 60px; + h2 { + margin-right: 53px; + font-size: 40px; + font-weight: 700; + } + span { + font-size: 24px; + } +`; + +export const GridDiv = styled.div` + width: ${(props) => props.width}px; + display: grid; + grid-template-columns: repeat(${(props) => props.column}, 1fr); + margin-right: 80px; + grid-row-gap: 43px; + place-items: center end; + margin-bottom: 86px; + + div { + font-size: 20px; + } + + span { + word-break: break-all; + } +`; +export const SubmitBtn = styled.button` + width: 600px; + height: 50px; + border-radius: 24px; + margin: 150px; + background: linear-gradient(to right, #ab91f8, #7243ff); + border: none; + color: #fff; + font-size: 20px; + cursor: pointer; + font-weight: 700; +`; +export const CheckInput = styled.input` + margin-top: 5px; + margin-right: 15px; + cursor: pointer; + appearance: none; + width: 30px; + height: 30px; + background-color: ${(props) => props.theme.colors.mediumGray}; + :checked { + border: 5px solid ${(props) => props.theme.colors.mediumGray}; + background-color: ${(props) => props.theme.colors.blue}; + } +`; + +export const UlSubmitted = styled.ul` + width: 850px; + margin: 50px 0; + display: flex; + height: auto; + top: 40px; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-row-gap: 30px; +`; +export const LabelFile = styled.label` + display: inline-block; + padding: 10px 30px; + background-color: ${(props) => props.theme.colors.blue}; + font-weight: 700; + font-size: 20px; + line-height: 20px; + border-radius: 20px; + color: ${(props) => props.theme.colors.white}; + cursor: pointer; + margin-bottom: 10px; +`; +export const FileHidden = styled.input` + position: absolute; + width: 1px; + height: 1px; + padding: 0; + border: 0; +`; + +export const FileTextDiv = styled.div` + margin-left: -20px; + width: 200px; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + word-break: break-all; + overflow: hidden; + text-overflow: ellipsis; + height: 30px; + font-family: "NanumGothic"; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 24px; + color: ${(props) => props.theme.colors.blue}; +`; +export const UlTable = styled.ul` + position: relative; + top: 5px; + width: auto; + height: 40px; + height: 100px; + display: flex; +`; + +export const LiProps = styled.div` + position: relative; + list-style: none; + height: 100%; +`; From 92520f26a362b75b3a85a2e9c62065b6db0eba25 Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:13:06 +0900 Subject: [PATCH 10/16] UPDATE: Update IC_View --- .../pages/studentPage/Introduce_company.jsx | 347 ++++++++++-------- 1 file changed, 184 insertions(+), 163 deletions(-) diff --git a/src/components/pages/studentPage/Introduce_company.jsx b/src/components/pages/studentPage/Introduce_company.jsx index 598afda..74f9354 100644 --- a/src/components/pages/studentPage/Introduce_company.jsx +++ b/src/components/pages/studentPage/Introduce_company.jsx @@ -5,188 +5,209 @@ import { useQueryClient } from "@tanstack/react-query"; import { useNavigate } from "react-router-dom"; const IC_View = ({ IC_data }) => { - const queryClient = useQueryClient(); - const navigate = useNavigate(); - let Data = { - id: '', - title: '회사가 이상하네요.', - number: '000-00-00000', - year: '아직 모집공고를 올리지 않았네요.', - isLeading: false, - isAssociated: false, - src: undefined, - text: '회사 설명에 문제가 생긴 것 같아요!', - table: [ - { title: 'E-mail', data: 'Error@error.com'}, - { title: '근로자 수', data: '0명'}, - { title: '연 매출액', data: '0,000,000 원'}, - { title: '사업 분야', data: '오류 만들기'}, - { title: '주소', data: '우리은하 태양계 지구행성 어딘가'} - ] - } - - if(IC_data !== undefined) { - Data = { - ...Data, - id: IC_data.companyId, - title: IC_data.companyName, - number: IC_data.companyNumber, - year: IC_data.latestNoticeYear || '아직 모집공고를 올리지 않았네요.', - isLeading: IC_data.isLeading, - isAssociated: IC_data.isAssociated, - src: IC_data.companyIntroductionResponse.companyPhotoList[0].fileUrl, - text: IC_data.companyIntroductionResponse.introduction, - table: [ - { title: 'E-mail', data: IC_data.contactorEmail }, - { title: '근로자 수', data: `${IC_data.workerCount}명`}, - { title: '연 매출액', data: `${IC_data.annualSales}원`}, - { title: '사업 분야', data: IC_data.businessTagged[0].tagName}, - { title: '주소', data: IC_data.homeAddressInfo.fullAddress } - ] - } - } - - return ( - <> - - { Data.title } - - { Data.number } - { Data.year } - - - { Data.isLeading && } - { Data.isAssociated && } - - 회사 이미지 - { Data.text } - - - { Data.table.map((data, key) => ( - - - - - ))} - -
{data.title}{data.data}
- navigate('/student/company/' + Data.id)}>자세히 보기 - - - ); -} + console.log(IC_data); + const queryClient = useQueryClient(); + const navigate = useNavigate(); + let Data = { + id: "", + title: "회사가 이상하네요.", + number: "000-00-00000", + year: "아직 모집공고를 올리지 않았네요.", + isLeading: false, + isAssociated: false, + src: undefined, + text: "회사 설명에 문제가 생긴 것 같아요!", + table: [ + { title: "E-mail", data: "Error@error.com" }, + { title: "근로자 수", data: "0명" }, + { title: "연 매출액", data: "0,000,000 원" }, + { title: "사업 분야", data: "오류 만들기" }, + { title: "주소", data: "우리은하 태양계 지구행성 어딘가" }, + ], + }; + + if (IC_data !== undefined) { + Data = { + ...Data, + id: IC_data.companyId, + title: IC_data.companyName, + number: IC_data.companyNumber, + year: IC_data.latestNoticeYear || "아직 모집공고를 올리지 않았네요.", + isLeading: IC_data.isLeading, + isAssociated: IC_data.isAssociated, + src: IC_data.companyIntroductionResponse.companyPhotoList[0].fileUrl, + text: IC_data.companyIntroductionResponse.introduction, + table: [ + { title: "E-mail", data: IC_data.contactorEmail }, + { title: "근로자 수", data: `${IC_data.workerCount}명` }, + { title: "연 매출액", data: `${IC_data.annualSales}원` }, + { title: "사업 분야", data: IC_data.businessTagged }, + { title: "주소", data: IC_data.homeAddressInfo.fullAddress }, + ], + }; + } + + return ( + <> + + {Data.title} + + {Data.number} + {Data.year} + + + {Data.isLeading && } + {Data.isAssociated && } + + 회사 이미지 + {Data.text} + + + {Data.table.map((data, key) => ( + + + {typeof data.data == "string" ? ( + + ) : ( + <> + {data.data.map((str) => ( + + ))} + + )} + + ))} + +
{data.title}{data.data}{str.name}
+ navigate("/student/company/" + Data.title)} + > + 자세히 보기 + + + + ); +}; export default IC_View; -const IC_company_point = ({text}) => { - return ( - <> - - 체크 이미지 - {text} - - - ) -} +const IC_company_point = ({ text }) => { + return ( + <> + + 체크 이미지 + {text} + + + ); +}; const IC_box = styled.div` - width: 500px; - height: auto; - background: linear-gradient(180deg, ${(props) => props.theme.colors.white} 0%, ${(props) => props.theme.colors.whiteGray} 100%); - box-shadow: 0 0 18px rgba(47, 54, 62, 0.14); - border-radius: 20px; - border: none; - font-family: 'Roboto'; - font-style: normal; - display: flex; - flex-direction: column; - padding: 50px; - margin: 0 25px 100px 25px; + width: 500px; + height: auto; + background: linear-gradient( + 180deg, + ${(props) => props.theme.colors.white} 0%, + ${(props) => props.theme.colors.whiteGray} 100% + ); + box-shadow: 0 0 18px rgba(47, 54, 62, 0.14); + border-radius: 20px; + border: none; + font-family: "Roboto"; + font-style: normal; + display: flex; + flex-direction: column; + padding: 50px; + margin: 0 25px 100px 25px; `; const IC_title = styled.span` - font-weight: 900; - font-size: 40px; - line-height: 47px; - margin-bottom: 10px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -` + font-weight: 900; + font-size: 40px; + line-height: 47px; + margin-bottom: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +`; const Flex_box = styled.div` - display: flex; - justify-content: ${(props) => props.justify || 'none'}; - margin-top: ${(props) => props.margin || '0px'}; - margin-bottom: ${(props) => props.margin || '0px'}; - height: ${(props) => props.height || 'auto'}; -` + display: flex; + justify-content: ${(props) => props.justify || "none"}; + margin-top: ${(props) => props.margin || "0px"}; + margin-bottom: ${(props) => props.margin || "0px"}; + height: ${(props) => props.height || "auto"}; +`; const IC_sub_title = styled.span` - font-family: 'NanumGothic'; - font-weight: 400; - font-size: 16px; - line-height: 18px; - color: ${(props) => props.color || '#000000'} -` + font-family: "NanumGothic"; + font-weight: 400; + font-size: 16px; + line-height: 18px; + color: ${(props) => props.color || "#000000"}; +`; const Introduce_box = styled.span` - width: 400px; - height: 52px; - font-weight: 400; - font-size: 16px; - line-height: 160%; - word-wrap: break-word; - margin: 40px 0 40px 0; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -` + width: 400px; + height: 52px; + font-weight: 400; + font-size: 16px; + line-height: 160%; + word-wrap: break-word; + margin: 40px 0 40px 0; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +`; const Table = styled.table` + width: 400px; + height: 210px; + margin-bottom: 40px; + display: flex; + + tr { width: 400px; - height: 210px; - margin-bottom: 40px; - - td{ - - font-family: 'NanumGothic'; - font-style: normal; - text-align: left; - vertical-align: top; - - &:first-child { - width: 110px; - font-weight: 600; - font-size: 16px; - line-height: 160%; - color: ${(props) => props.theme.colors.blue}; - } - - &:last-child { - width: 290px; - font-weight: 400; - font-size: 14px; - line-height: 16px; - color: ${(props) => props.theme.colors.black}; - } + display: flex; + flex-wrap: wrap; + } + + td { + font-family: "NanumGothic"; + font-style: normal; + text-align: left; + + &:first-child { + width: 110px; + font-weight: 600; + font-size: 16px; + line-height: 160%; + color: ${(props) => props.theme.colors.blue}; } -` + + width: 50px; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: ${(props) => props.theme.colors.black}; + } +`; const Point_box = styled.div` - width: 80px; - margin-right: 52px; - display: flex; - justify-content: space-between; - align-items: center; -` + width: 80px; + margin-right: 52px; + display: flex; + justify-content: space-between; + align-items: center; +`; const Point_text = styled.span` - font-family: 'NanumGothic'; - font-weight: 700; - font-size: 14px; - lineheight: 160%; - color: ${(props) => props.theme.colors.green}; -` \ No newline at end of file + font-family: "NanumGothic"; + font-weight: 700; + font-size: 14px; + lineheight: 160%; + color: ${(props) => props.theme.colors.green}; +`; From 2d921d5a6effc682222b8d156d105bb10b358dbd Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:13:29 +0900 Subject: [PATCH 11/16] UPDATE: Update Page_moving_btn Design --- src/components/pages/studentPage/styled.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/pages/studentPage/styled.jsx b/src/components/pages/studentPage/styled.jsx index fecba54..47b0c74 100644 --- a/src/components/pages/studentPage/styled.jsx +++ b/src/components/pages/studentPage/styled.jsx @@ -11,6 +11,8 @@ export const Page_moving_btn = styled.button` border-radius: 10px; color: #fff; cursor: pointer; + position: absolute; + bottom: 20px; transition: 0.3s; &:hover { transform: scale(1.03); From 1301697cb963ab58607629953835c25383b95e3e Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:13:54 +0900 Subject: [PATCH 12/16] UPDATE: Update StudentSignIn --- src/components/pages/studentPage/auth/signIn/index.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/pages/studentPage/auth/signIn/index.jsx b/src/components/pages/studentPage/auth/signIn/index.jsx index 5d23b69..8ad1734 100644 --- a/src/components/pages/studentPage/auth/signIn/index.jsx +++ b/src/components/pages/studentPage/auth/signIn/index.jsx @@ -117,10 +117,12 @@ const StudentSignIn = () => { - Forgot + Are you - Password? + + Teacher? + From c8b8167126fee81033837ef6dc4cb6fc6c88cd17 Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:14:05 +0900 Subject: [PATCH 13/16] UPDATE: Update StudentSignUp --- .../pages/studentPage/auth/signUp/index.jsx | 77 ++++++------------- 1 file changed, 24 insertions(+), 53 deletions(-) diff --git a/src/components/pages/studentPage/auth/signUp/index.jsx b/src/components/pages/studentPage/auth/signUp/index.jsx index 40d02eb..69d570e 100644 --- a/src/components/pages/studentPage/auth/signUp/index.jsx +++ b/src/components/pages/studentPage/auth/signUp/index.jsx @@ -40,12 +40,10 @@ const StudentSignUp = () => { }, { name: "학번", - additionalElm: "학번 중복 확인", + additionalElm: "", placeholder: "학번을 입력해주세요", - check: "studentKeyCheck", - func: () => { - studentKeyCheck(); - }, + check: "", + func: () => {}, key: "studentKey", }, { @@ -78,7 +76,6 @@ const StudentSignUp = () => { const [success, setSuccess] = useState({ certifiedSend: "", certifiedCheck: "", - studentKeyCheck: "", }); function changeInput(e, props) { @@ -88,6 +85,7 @@ const StudentSignUp = () => { const submit = () => { const { studentKey, email, emailCheckCode, password, name, githubLink } = data; + console.log(data); if (Object.values(success).includes(true)) { if (!Object.values(data).includes("")) { axios({ @@ -96,11 +94,13 @@ const StudentSignUp = () => { data: { studentKey: studentKey, email: email, - emailCheckCode: emailCheckCode, password: password, name: name, githubLink: githubLink, }, + params: { + emailCode: emailCheckCode, + }, }).then((res) => { Alert({ state: "success", @@ -117,32 +117,33 @@ const StudentSignUp = () => { } else Notice({ state: "error", - message: "인증번호나 학번 중복을 확인해주세요.", + message: "인증번호를 확인해주세요.", }); }; const certified = () => { if (data.email !== "") { axios({ - url: BaseUrl + "/auth/email/school", - method: "POST", + url: BaseUrl + "/auth/code", + method: "PUT", params: { email: data.email, }, }) .then((res) => { + setSuccess({ ...success, certifiedSend: true }); Notice({ state: "success", - message: "인증번호가 발송되었습니다.", + message: "인증번호 발송!", }); - setSuccess({ ...success, certifiedSend: true }); }) .catch((err) => { + console.log(err); + setSuccess({ ...success, certifiedSend: false }); Notice({ state: "error", message: "존재하지 않거나 이미 가입된 이메일입니다.", }); - setSuccess({ ...success, certifiedSend: false }); }); } else { Notice({ @@ -155,62 +156,32 @@ const StudentSignUp = () => { const certifiedCheck = () => { if (data.emailCheckCode !== "") { axios({ - url: BaseUrl + "/auth/email/code/check", - method: "GET", - params: { + url: BaseUrl + "/auth/code", + method: "post", + data: { email: data.email, - code: data.emailCheckCode, + data: data.emailCheckCode, + type: "SIGNUP_EMAIL", }, }) .then((res) => { - Notice({ - state: "success", - message: "이메일이 인증되었습니다.", - }); setSuccess({ ...success, certifiedCheck: true }); - }) - .catch((err) => { - Notice({ - state: "error", - message: "인증번호가 틀렸습니다.", - }); - setSuccess({ ...success, certifiedCheck: false }); - }); - } else { - Notice({ - state: "error", - message: "인증번호를 입력해주세요.", - }); - } - }; - - const studentKeyCheck = () => { - if (data.studentKey !== "") { - axios({ - url: BaseUrl + "/auth/student/check", - method: "GET", - params: { - studentKey: data.studentKey, - }, - }) - .then((res) => { Notice({ state: "success", - message: "학번 중복이 확인되었습니다.", + message: "인증번호가 성공적으로 확인되었습니다.", }); - setSuccess({ ...success, studentKeyCheck: true }); }) .catch((err) => { + setSuccess({ ...success, certifiedCheck: false }); Notice({ state: "error", - message: "이미 가입된 학번입니다.", + message: "인증번호가 올바르지 않습니다.", }); - setSuccess({ ...success, studentKeyCheck: false }); }); } else { Notice({ state: "error", - message: "내용을 입력해주세요", + message: "인증번호를 입력해주세요.", }); } }; @@ -261,7 +232,7 @@ const StudentSignUp = () => { Are you a - + Teacher? From 97402f62b7dd4fd7a418a59443d6826f08745b06 Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:14:22 +0900 Subject: [PATCH 14/16] UPDATE: Update CompanyDetailView --- .../pages/studentPage/Company/detail.jsx | 769 +++++++++++------- 1 file changed, 488 insertions(+), 281 deletions(-) diff --git a/src/components/pages/studentPage/Company/detail.jsx b/src/components/pages/studentPage/Company/detail.jsx index 6902b3d..e64f542 100644 --- a/src/components/pages/studentPage/Company/detail.jsx +++ b/src/components/pages/studentPage/Company/detail.jsx @@ -7,344 +7,551 @@ import { Page_moving_btn, Image, Search_bar } from "../styled.jsx"; import { useNavigate, useParams } from "react-router-dom"; import Header from "../../../common/header/index.jsx"; import LoadingPage from "../../../common/loading/index.jsx"; -import { useRef } from "react"; const CompanyDetailView = () => { - const { id } = useParams(); - const [Img_Count, set_Img_Count] = useState([0, 0]); - const ImgPage = useRef(0); - let accessToken = sessionStorage.getItem("accessToken"); - const [data, setData] = useState(undefined); - const [IC_data, set_IC_data] = useState([ - { title: '사업자 번호', data: '000-00-00000' }, - { title: '설립 일자', data: '0000년 00월 00일' }, - { title: 'E-mail', data: 'Error@error.com' }, - { title: '근로자 수', data: '0명' }, - { title: '연 매출액', data: '0,000,000 원' }, - { title: '사업 분야', data: '오류 만들기' }, - { title: '본사 주소', data: '우리은하 태양계 지구행성 어딘가' }, - { title: '지점 주소', data: '우리은하 태양계 지구행성 어딘가' } - ]) - const navigate = useNavigate(); + const { id } = useParams(); + const [data, setData] = useState({ + companyNumber: "string", + companyName: "string", + contactor: { + name: "string", + email: "string", + rank: "string", + phoneNumber: "string?", + passwordHint: "string?", + companyNumber: "string", + }, + companyInformation: { + homeAddressInfo: { + fullAddress: "string", + addressNumber: "string", + }, + agentAddress: { + fullAddress: "string", + addressNumber: "string", + }, + representativeName: "string", + establishedAt: 0, + workerCount: 0, + annualSales: 0, + companyPhone: "string", + }, + businessTagged: [ + { + name: "string", + }, + ], + isLeading: true, + isAssociated: true, + latestNoticeYear: 0, + totalEmployedCount: 0, + companyIntroductionResponse: { + introduction: "stringㅓㅁㄴ이ㅏㅗ하ㅗㅓㅐ;ㅗㅕ효ㅑ료혀ㅗㅑㅐ", + businessCertificate: { + fileId: "string", + fileUrl: "string", + fileType: "FileType", + extension: "string", + fileName: "string", + companyNumber: "string", + companyFileClassificationType: "CompanyFileClassificationType", + }, + companyIntroductionFile: [ + { + fileId: "string", + fileUrl: "string", + fileType: "FileType", + extension: "string", + fileName: "string", + companyNumber: "string", + companyFileClassificationType: "CompanyFileClassificationType", + }, + ], + companyLogo: { + fileId: "string", + fileUrl: "string", + fileType: "FileType", + extension: "string", + fileName: "string", + companyNumber: "string", + companyFileClassificationType: "CompanyFileClassificationType", + }, + companyPhotoList: [ + { + fileId: "string", + fileUrl: "string", + fileType: "FileType", + extension: "string", + fileName: "string", + companyNumber: "string", + companyFileClassificationType: "CompanyFileClassificationType", + }, + ], + }, + }); + const [IC_data, set_IC_data] = useState([ + { title: "사업자 번호", data: "000-00-00000" }, + { title: "설립 일자", data: "0000년 00월 00일" }, + { title: "E-mail", data: "Error@error.com" }, + { title: "근로자 수", data: "0명" }, + { title: "연 매출액", data: "0,000,000 원" }, + { title: "사업 분야", data: ["오류 만들기", "react", "asd"] }, + { title: "본사 주소", data: "우리은하 태양계 지구행성 어딘가" }, + { title: "지점 주소", data: "우리은하 태양계 지구행성 어딘가" }, + ]); + const [imgArr, setImgArr] = useState([]); + const navigate = useNavigate(); - const load_companys = () => { - axios({ - method: 'get', - url: BaseUrl + '/company/', - headers: { - Authorization: `Bearer ${accessToken}`, - }, - params: { - id: id - }, - }) - .then((res) => { - console.log('companys sccess!'); - console.log(res.data); - setData(res.data); - set_IC_data([ - { title: '사업자 번호', data: res.data.companyNumber }, - { title: '설립 일자', data: res.data.companyInformation.establishedAt + '년' }, - { title: 'E-mail', data: res.data.companyContact.email }, - { title: '근로자 수', data: res.data.companyInformation.workerCount + '명' }, - { title: '연 매출액', data: res.data.companyInformation.annualSales + ' 원' }, - { title: '사업 분야', data: res.data.businessAreaResponseList[0].tagName }, - { title: '본사 주소', data: res.data.companyInformation.homeAddress.fullAddress }, - { title: '지점 주소', data: res.data.companyInformation.agentAddress.fullAddress } - ]); - set_Img_Count([0, res.data.companyIntroduction.companyPhotoList.length]); - }) - .catch(() => { - navigate(-1); - }); - }; + const load_companys = () => { + // axios({ + // method: "get", + // url: BaseUrl + `/company/${id}`, + // headers: { + // Authorization: `Bearer ${sessionStorage.getItem("accessToken")}`, + // }, + // }) + // .then((res) => { + // console.log("companys sccess!"); + // setData(res.data); + // setImgArr(res.data.companyIntroduction.companyPhotoList); + // set_IC_data([ + // { title: "사업자 번호", data: res.data.companyNumber }, + // { + // title: "설립 일자", + // data: res.data.companyInformation.establishedAt + "년", + // }, + // { title: "E-mail", data: res.data.companyContact.email }, + // { + // title: "근로자 수", + // data: res.data.companyInformation.workerCount + "명", + // }, + // { + // title: "연 매출액", + // data: res.data.companyInformation.annualSales + " 원", + // }, + // { + // title: "사업 분야", + // data: res.data.businessAreaResponseList[0].tagName, + // }, + // { + // title: "본사 주소", + // data: res.data.companyInformation.homeAddress.fullAddress, + // }, + // { + // title: "지점 주소", + // data: res.data.companyInformation.agentAddress.fullAddress, + // }, + // ]); + // }) + // .catch(() => { + // navigate(-1); + // }); + }; - useEffect(() => { - load_companys(); - }, []); + useEffect(() => { + // load_companys(); + }, []); - return ( + return ( + <> + {data ? ( <> - {data ? - <> -
- - - 회사 이미지 - - - 로고 이미지 - - {data.companyName} - ... - - - - {data.isLeading && } - {data.isAssociated && } - - {data.companyIntroduction.introduction} - - - - - - -
- 해당 사업체를 거쳐간 학생 수 - {data.totalHiredStudentList.length}명 -
- - - - {IC_data.map((data, key) => ( - - - - - ))} - -
{data.title}{data.data}
- - 모집공고 - - 마지막 모집공고 - 2022년 - - - - - - 더 알아보기 - - - 면접 후기 - - - - - - - : - - } +
+ + + 회사 이미지 + + + 로고 이미지 + + {data.companyName} + {data.companyNumber} + + + + {data.isLeading && } + {data.isAssociated && } + + + {data.companyIntroductionResponse.introduction} + + + + + + {imgArr.map((item, i) => ( + <> + + + ))} +
{ + setImgArr([ + ...imgArr.filter((item, i) => i !== 0), + imgArr[0], + ]); + console.log(imgArr); + }} + > +
+
+ + + + + {IC_data.map((data, key) => ( + + + {typeof data.data == "string" ? ( + + ) : ( + <> + {data.data.map((str) => ( + + ))} + + )} + + ))} + +
{data.title}{data.data}{str}
+ + 모집공고 + + 마지막 모집공고 + 2022년 + + + +
+ +
+ 특기사항 + + ㅓㅗ머ㅗ나ㅓ롸ㅣㅓㅁㄴ오ㅓㅏㅣㄻ놔ㅣㅓㅇㅁㄴ롸ㅣㄴㅁㅇ뢀ㅇ노ㅓㅏ나ㅓ롸ㅣㅓㅁㄴ오ㅓㅏㅣㄻ놔ㅣㅓㅇㅁㄴ롸ㅣㄴㅁㅇ뢀ㅇ노ㅓㅏ + +
+ + 인원 수 + 10명 + + +
+ 더 알아보기 + + + 면접 후기 + + +
+ +
+ 특기사항 + + ㅓㅗ머ㅗ나ㅓ롸ㅣㅓㅁㄴ오ㅓㅏㅣㄻ놔ㅣㅓㅇㅁㄴ롸ㅣㄴㅁㅇ뢀ㅇ노ㅓㅏ나ㅓ롸ㅣㅓㅁㄴ오ㅓㅏㅣㄻ놔ㅣㅓㅇㅁㄴ롸ㅣㄴㅁㅇ뢀ㅇ노ㅓㅏ + +
+ + 인원 수 + 10명 + + +
+ + - ); -} + ) : ( + + )} + + ); +}; export default CompanyDetailView; const Out_box = styled.div` - display: flex; - width: 100%; - height: auto; - flex-direction: column; - align-items: center; - margin: 150px 0 150px 0; -` + display: flex; + width: 100%; + height: auto; + flex-direction: column; + align-items: center; + margin: 150px 0 150px 0; +`; const Flex_box = styled.div` - display: flex; - justify-content: ${(props) => props.justify || 'none'}; - align-items: ${(props) => props.align || 'none'}; - margin-top: ${(props) => props.margin || '0px'}; - margin-bottom: ${(props) => props.margin || '0px'}; - width: ${(props) => props.width || 'auto'}; - height: ${(props) => props.height || 'auto'}; -` + display: flex; + justify-content: ${(props) => props.justify || "none"}; + align-items: ${(props) => props.align || "none"}; + margin-top: ${(props) => props.margin || "0px"}; + margin-bottom: ${(props) => props.margin || "0px"}; + width: ${(props) => props.width || "auto"}; + height: ${(props) => props.height || "auto"}; + img { + object-fit: cover; + } +`; const Explanation = styled.div` - display: flex; - flex-direction: column; - margin-left: 40px; -` + display: flex; + flex-direction: column; + margin-left: 40px; +`; const Header_out_box = styled.div` - width: auto; - height: 85px; - display: flex; -` + width: auto; + height: 85px; + display: flex; +`; const Header_Title_box = styled.div` - width: auto; - height: 85px; - display: flex; - flex-direction: column; - justify-content: space-between; - margin-left: 19px; - font-family: 'Roboto'; - font-style: normal; -` + width: auto; + height: 85px; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-left: 19px; + font-family: "Roboto"; + font-style: normal; +`; const Header_title = styled.span` - font-weight: 900; - font-size: 40px; - line-height: 47px; - margin-bottom: 10px; -` + font-weight: 900; + font-size: 40px; + line-height: 47px; + margin-bottom: 10px; +`; const Header_sub_title = styled.span` - font-weight: 700; - font-size: 24px; - line-height: 28px; -` + font-weight: 700; + font-size: 24px; + line-height: 28px; +`; const IC_company_point = ({ text }) => { - return ( - <> - - 체크 이미지 - {text} - - - ) -} + return ( + <> + + 체크 이미지 + {text} + + + ); +}; const Point_box = styled.div` - width: 80px; - margin: 20px 40px 20px 0; - display: flex; - justify-content: space-between; - align-items: center; -` + width: 80px; + margin: 20px 40px 20px 0; + display: flex; + justify-content: space-between; + align-items: center; +`; const Point_text = styled.span` - font-family: 'NanumGothic'; - font-weight: 700; - font-size: 14px; - lineheight: 160%; - color: ${(props) => props.theme.colors.green}; -` + font-family: "NanumGothic"; + font-weight: 700; + font-size: 14px; + lineheight: 160%; + color: ${(props) => props.theme.colors.green}; +`; const Introduce_box = styled.span` - width: 400px; - font-weight: 400; - font-size: 16px; - line-height: 160%; - word-wrap: break-word; -` + width: 400px; + font-weight: 400; + font-size: 16px; + line-height: 160%; + word-wrap: break-word; +`; const Img_list_out_box = styled.div` - width: 936px; - font-family: 'NanumGothic'; - font-style: normal; - font-weight: 600; - font-size: 24px; - line-height: 160%; - color: ${(props) => props.theme.colors.black}; + width: 936px; + font-family: "NanumGothic"; + font-style: normal; + font-weight: 600; + font-size: 24px; + line-height: 160%; + color: ${(props) => props.theme.colors.black}; + display: flex; + margin: 40px 0 80px -120px; + & > div:last-child { display: flex; - margin: 40px 0 80px 0; - & > div:last-child { - display: flex; - flex-direction: column; - margin-left: 40px; - & > span:last-child { - font-weight: 700; - font-size: 32px; - color: ${(props) => props.theme.colors.blue}; - } + flex-direction: column; + margin-left: 40px; + & > span:last-child { + font-weight: 700; + font-size: 32px; + color: ${(props) => props.theme.colors.blue}; } -` + } +`; const Img_list_box = styled.div` width: 500px; height: 100px; display: flex; + gap: 20px; + img { + border-radius: 12px; + border: 1px solid #ddd; + width: 100px; + height: 100px; + object-fit: cover; + } + div { + width: 100px; + height: 100px; + display: flex; + align-items: center; + cursor: pointer; + div { + width: 30px; + height: 50px; + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%3Csvg width='26' height='46' viewBox='0 0 26 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.1213 25.1213C26.2929 23.9497 26.2929 22.0503 25.1213 20.8787L6.02944 1.7868C4.85786 0.615224 2.95837 0.615224 1.78679 1.7868C0.615221 2.95837 0.615221 4.85787 1.7868 6.02944L18.7574 23L1.7868 39.9706C0.615225 41.1421 0.615225 43.0416 1.7868 44.2132C2.95837 45.3848 4.85787 45.3848 6.02944 44.2132L25.1213 25.1213ZM18 26L23 26L23 20L18 20L18 26Z' fill='black'/%3E%3C/svg%3E%0A"); + } + } `; const Table = styled.table` - width: 936px; - height: 389px; - margin-bottom: 20px; - td{ - - font-family: 'NanumGothic'; - font-style: normal; - text-align: left; - vertical-align: top; - - &:first-child { - width: 160px; - font-weight: 600; - font-size: 16px; - line-height: 160%; - color: ${(props) => props.theme.colors.blue}; - } + width: 936px; + height: 389px; + margin-bottom: 20px; + tr { + width: 776px; + display: flex; + flex-wrap: wrap; + } + td { + font-weight: 700; + font-family: "NanumGothic"; + font-style: normal; + text-align: left; + vertical-align: top; - &:last-child { - width: 776px; - font-weight: 400; - font-size: 14px; - line-height: 16px; - color: ${(props) => props.theme.colors.black}; - } + &:first-child { + width: 160px; + font-weight: 600; + font-size: 16px; + line-height: 160%; + color: ${(props) => props.theme.colors.blue}; } -` + + font-weight: 400; + font-size: 14px; + line-height: 16px; + margin-right: 10px; + color: ${(props) => props.theme.colors.black}; + } +`; const Sub_title = styled.span` - font-family: 'NanumGothic'; - font-style: normal; - font-weight: 700; - font-size: 24px; - line-height: 160%; + font-family: "NanumGothic"; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 160%; - color: ${(props) => props.theme.colors.blue}; - margin-top: 60px; -` + color: ${(props) => props.theme.colors.blue}; + margin-top: 60px; +`; const Sub_text = styled.div` - width: 176px; - display: flex; - justify-content: space-between; - align-items: center; - - font-family: 'NanumGothic'; - font-style: normal; - font-weight: 600; - font-size: 16px; - line-height: 160%; - - span { - &:last-child { - color: ${(props) => props.theme.colors.blue}; - } + width: 176px; + display: flex; + justify-content: space-between; + align-items: center; + + font-family: "NanumGothic"; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 160%; + + span { + &:last-child { + color: ${(props) => props.theme.colors.blue}; } -` + } +`; const App_out_box = styled.div` - width: 936px; - height: ${(props) => props.height || '450px'}; - padding: 20px; - border-radius: 20px; - margin-top: 15px; - background: #F8F6FF; + width: 936px; + height: ${(props) => props.height || "450px"}; + padding: 20px; + border-radius: 20px; + margin-top: 15px; + background: #f8f6ff; + position: relative; + > div { + height: 350px; + width: 100%; display: flex; flex-direction: column; - justify-content: space-between; -` - -const App_box = styled.div` - width: 896px; - height: 350px; - - background: #F8F6FF; - overflow-y: scroll; + overflow: hidden; + overflow: scroll; overflow-x: hidden; - &::-webkit-scrollbar{ - width: 14px; - border-radius: 100px; - } - &::-webkit-scrollbar-track { - background: ${(props) => props.theme.colors.white}; - border-radius: 100px; + + &::-webkit-scrollbar { + background-color: #fff; + border-radius: 100px; + width: 14px; } - &::-webkit-scrollbar-thumb{ - border-radius: 100px; - background: ${(props) => props.theme.colors.blue}; + &::-webkit-scrollbar-thumb { + background-color: ${(props) => props.theme.colors.blue}; + border-radius: 3px; + width: 14px; } -` \ No newline at end of file + } +`; + +const App_box = styled.div` + width: 866px; + height: 60px; + margin-bottom: 20px; + margin-right: 30px; + border-radius: 8px; + display: inline-flex; + align-items: center; + justify-content: space-between; + font-size: 16px; + padding: 20px; + background-color: #fff; + > div { + display: inline-flex; + align-items: center; + } + > div :first-child { + font-weight: 700; + margin-right: 20px; + } + > div :last-child { + width: 590px; + margin-right: 20px; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } + > span :first-child { + font-weight: 700; + margin-right: 20px; + } + > span :last-child { + width: 50px; + display: inline-flex; + color: ${(props) => props.theme.colors.blue}; + } +`; From 0fc4c86b057398e151744f3ae82435ca4d89bc32 Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:15:08 +0900 Subject: [PATCH 15/16] UPDATE: Update CompanyView --- .../pages/studentPage/Company/index.jsx | 176 ++++++++++++++---- 1 file changed, 135 insertions(+), 41 deletions(-) diff --git a/src/components/pages/studentPage/Company/index.jsx b/src/components/pages/studentPage/Company/index.jsx index 5a24b49..7bbb2e5 100644 --- a/src/components/pages/studentPage/Company/index.jsx +++ b/src/components/pages/studentPage/Company/index.jsx @@ -9,51 +9,145 @@ import { useNavigate } from "react-router-dom"; const CompanyView = () => { const [page, setPage] = useState(1); const [maxPage, setMaxPage] = useState(1); - const [IC_data, set_IC] = useState(undefined); + const [IC_data, set_IC] = useState({ + totalPages: 0, + totalElements: 0, + size: 0, + content: [ + { + companyNumber: "string", + contactorEmail: "string", + companyName: "string", + homeAddressInfo: { + fullAddress: "string", + addressNumber: "string", + }, + businessTagged: [ + { + name: "string", + }, + { + name: "react", + }, + ], + workerCount: 0, + annualSales: 0, + isLeading: true, + isAssociated: true, + latestNoticeYear: 0, + totalEmployedCount: 0, + companyIntroductionResponse: { + introduction: "string", + businessCertificate: { + fileId: "string", + fileUrl: "string", + fileType: "FileType", + extension: "string", + fileName: "string", + companyNumber: "string", + companyFileClassificationType: "CompanyFileClassificationType", + }, + companyIntroductionFile: [ + { + fileId: "string", + fileUrl: "string", + fileType: "FileType", + extension: "string", + fileName: "string", + companyNumber: "string", + companyFileClassificationType: "CompanyFileClassificationType", + }, + ], + companyLogo: { + fileId: "string", + fileUrl: "string", + fileType: "FileType", + extension: "string", + fileName: "string", + companyNumber: "string", + companyFileClassificationType: "CompanyFileClassificationType", + }, + companyPhotoList: [ + { + fileId: "string", + fileUrl: "string", + fileType: "FileType", + extension: "string", + fileName: "string", + companyNumber: "string", + companyFileClassificationType: "CompanyFileClassificationType", + }, + ], + }, + }, + ], + number: 0, + sort: { + empty: true, + sorted: true, + unsorted: true, + }, + numberOfElements: 0, + pageable: { + offset: 0, + sort: { + empty: true, + sorted: true, + unsorted: true, + }, + paged: true, + pageNumber: 0, + pageSize: 0, + unpaged: true, + }, + first: true, + last: true, + empty: true, + }); const [search_string, set_search] = useState(""); const navigate = useNavigate(); let accessToken = sessionStorage.getItem("accessToken"); const load_companys = () => { - if (search_string === "") { - axios({ - method: "get", - url: BaseUrl + "/company/list", - headers: { - Authorization: `Bearer ${accessToken}`, - }, - params: { - size: 4, - idx: page - 1, - }, - }) - .then((res) => { - console.log("companys sccess!"); - set_IC(res.data.content); - setMaxPage(res.data.totalPages); - }) - .catch(() => { - console.log("companys error..."); - }); - } else { - axios({ - method: "get", - url: BaseUrl + "/company/search", - headers: { - Authorization: `Bearer ${accessToken}`, - }, - params: { - query: search_string, - }, - }) - .then((res) => { - set_IC(res.data.content); - setMaxPage(res.data.totalPages); - }) - .catch(() => { - navigate(-1); - }); - } + // if (search_string === "") { + // axios({ + // method: "get", + // url: BaseUrl + "/company/list", + // headers: { + // Authorization: `Bearer ${accessToken}`, + // }, + // params: { + // size: 4, + // idx: page - 1, + // }, + // }) + // .then((res) => { + // console.log("companys sccess!"); + // set_IC(res.data.content); + // setMaxPage(res.data.totalPages); + // }) + // .catch(() => { + // console.log("companys error..."); + // }); + // } else { + // axios({ + // method: "get", + // url: BaseUrl + "/company/search", + // headers: { + // Authorization: `Bearer ${accessToken}`, + // }, + // params: { + // query: search_string, + // }, + // }) + // .then((res) => { + // set_IC(res.data.content); + // setMaxPage(res.data.totalPages); + // }) + // .catch(() => { + // navigate(-1); + // }); + // } }; useEffect(() => { @@ -106,7 +200,7 @@ const CompanyView = () => { )} {IC_data ? ( - IC_data.map((Data) => ( + IC_data.content.map((Data) => ( )) ) : ( From bf848528a4b2214119e123a1bb9d0e3cea6dc3ab Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Thu, 1 Dec 2022 00:15:24 +0900 Subject: [PATCH 16/16] UPDATE: Update TeacherSignUp --- .../pages/teacherPage/auth/signUp/index.jsx | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/pages/teacherPage/auth/signUp/index.jsx b/src/components/pages/teacherPage/auth/signUp/index.jsx index 5652172..ede7b59 100644 --- a/src/components/pages/teacherPage/auth/signUp/index.jsx +++ b/src/components/pages/teacherPage/auth/signUp/index.jsx @@ -45,7 +45,7 @@ const TeacherSignUp = () => { placeholder: "선생님 인증번호를 입력해주세요", check: "", func: () => {}, - key: "studentKey", + key: "teacherCheckCode", }, { name: "비밀번호", @@ -76,18 +76,21 @@ const TeacherSignUp = () => { const submit = () => { const { email, emailCheckCode, password, teacherCheckCode, name } = data; + console.log(data); if (Object.values(success).includes(true)) { if (!Object.values(data).includes("")) { axios({ url: BaseUrl + "/auth/signup/teacher", method: "post", data: { - teacherCheckCode: teacherCheckCode, email: email, - emailCheckCode: emailCheckCode, password: password, name: name, }, + params: { + emailCode: emailCheckCode, + teacherCode: teacherCheckCode, + }, }) .then((res) => { Alert({ @@ -118,25 +121,26 @@ const TeacherSignUp = () => { const certified = () => { if (data.email !== "") { axios({ - url: BaseUrl + "/auth/email/school", - method: "POST", + url: BaseUrl + "/auth/code", + method: "PUT", params: { email: data.email, }, }) .then((res) => { + setSuccess({ ...success, certifiedSend: true }); Notice({ state: "success", - message: "인증번호가 발송되었습니다.", + message: "인증번호 발송!", }); - setSuccess({ ...success, certifiedSend: true }); }) .catch((err) => { + console.log(err); + setSuccess({ ...success, certifiedSend: false }); Notice({ state: "error", - message: "존재하지 않거나 이미 가입된 이메일이", + message: "존재하지 않거나 이미 가입된 이메일입니다.", }); - setSuccess({ ...success, certifiedSend: false }); }); } else { Notice({ @@ -149,26 +153,27 @@ const TeacherSignUp = () => { const certifiedCheck = () => { if (data.emailCheckCode !== "") { axios({ - url: BaseUrl + "/auth/email/code/check", - method: "GET", - params: { + url: BaseUrl + "/auth/code", + method: "post", + data: { email: data.email, - code: data.emailCheckCode, + data: data.emailCheckCode, + type: "SIGNUP_EMAIL", }, }) .then((res) => { + setSuccess({ ...success, certifiedCheck: true }); Notice({ state: "success", - message: "인증번호가 확인되었습니다.", + message: "인증번호가 성공적으로 확인되었습니다.", }); - setSuccess({ ...success, certifiedCheck: true }); }) .catch((err) => { + setSuccess({ ...success, certifiedCheck: false }); Notice({ state: "error", message: "인증번호가 올바르지 않습니다.", }); - setSuccess({ ...success, certifiedCheck: false }); }); } else { Notice({ @@ -227,7 +232,7 @@ const TeacherSignUp = () => { -
Login
+ Login @@ -340,16 +345,11 @@ const HighlightText = styled.span` cursor: ${(props) => props.cursor}; margin-left: 10px; - div { + a { text-decoration: none; color: #7243ff; } -`; - -const HighlightDiv = styled.span` - display: flex; - width: 100%; - justify-content: flex-end; + `; const Submit = styled.div`