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; + } +`; 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; 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; +`; 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; + } +`; 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", + }, +]; 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; 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%; -`; 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; 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%; +`; 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}; + } +`; 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) => ( )) ) : ( 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}; +`; 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? + 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? 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); 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`