diff --git a/src/components/pages/companyPage/auth/signIn/index.jsx b/src/components/pages/companyPage/auth/signIn/index.jsx index 81533bc..430627b 100644 --- a/src/components/pages/companyPage/auth/signIn/index.jsx +++ b/src/components/pages/companyPage/auth/signIn/index.jsx @@ -20,7 +20,7 @@ const CompanySignIn = () => { { name: "사업자번호", additionalElm: "기업 조회", - placeholder: "ex) 00-000-00000", + placeholder: "ex) 000-00-00000", check: "inquiry", func: () => { getPasswordHint(); @@ -196,7 +196,7 @@ const CompanySignIn = () => { -
SignUp
+ 기업 등록 diff --git a/src/components/pages/companyPage/auth/signUp/index.jsx b/src/components/pages/companyPage/auth/signUp/index.jsx index 5dce03b..a98738c 100644 --- a/src/components/pages/companyPage/auth/signUp/index.jsx +++ b/src/components/pages/companyPage/auth/signUp/index.jsx @@ -1,19 +1,16 @@ -import { useCallback, useEffect, useRef, useState } from "react"; +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 AutoComplete from "../../../../common/autocomplete"; import axios from "axios"; -import { CompanyData, skillData } from "../../../../../export/data"; 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"; const CompanySignUp = () => { - const [skill, setSkill] = useState([1]); - const SkillRef = useRef([]); + const [business, setBusiness] = useState(""); const formData = new FormData(); const [showFile, setShowFile] = useState({ businessRegisteredCertificate: [], @@ -28,19 +25,6 @@ const CompanySignUp = () => { { name: "companyPhotoList", kr: "회사 사진 목록" }, ]; - const AddSkillText = useCallback(() => { - setSkill([...skill, 1]); - }, [skill]); - const DeleteSkill = useCallback( - (index) => { - const ad = skill.filter((e, i) => { - return i !== index; - }); - setSkill(ad); - }, - [skill] - ); - const [companyInfomation, setCompanyInfomation] = useState({ companyNumber: "", companyName: "", @@ -61,7 +45,7 @@ const CompanySignUp = () => { introduction: "", password: "", passwordHint: "", - leading: false, + isLeading: false, }); const data = [ @@ -105,6 +89,17 @@ const CompanySignUp = () => { passwordSuccess: "", }); + const [businessAreaList, setBusinessAreaList] = useState([ + { name: "사업체수", checked: false }, + { name: "전기‧가스/수도/건설업", checked: false }, + { name: "운수 및 창고업", checked: false }, + { name: "정보통신업", checked: false }, + { name: "금융 및 보험업", checked: false }, + { name: "부동산업", checked: false }, + { name: "전문과학 기술 서비스업", checked: false }, + { name: "사업시설 관리, 사업지원 및 임대 서비스업", checked: false }, + ]); + useEffect(() => { if ( companyInfomation.password === passwordCheck && @@ -151,7 +146,7 @@ const CompanySignUp = () => { email, introduction, password, - leading, + isLeading, emailCheckCode, passwordHint, } = companyInfomation; @@ -181,10 +176,12 @@ const CompanySignUp = () => { contactorPhone: contactorPhone, email: email, }, - businessAreaList: SkillRef.current.map((item) => item.value), + businessAreaList: businessAreaList + .map((item) => (item.checked ? item.name : undefined)) + .filter((element) => element !== undefined), introduction: introduction, password: password, - isLeading: leading, + isLeading: isLeading, passwordHint: passwordHint, }; @@ -352,29 +349,29 @@ const CompanySignUp = () => { return ( <>
- + {/* */} <h2>회사 명</h2> <CheckInput type="checkbox" - checked={companyInfomation.leading} + checked={companyInfomation.isLeading} onChange={(e) => { setCompanyInfomation({ ...companyInfomation, - leading: e.target.checked, + isLeading: e.target.checked, }); }} ></CheckInput> <span>선도 기업</span> - + 회사 명 onChangeState("companyName", e)} @@ -387,7 +384,7 @@ const CompanySignUp = () => { onChangeState("companyNumber", e)} - placeholder="ex) 00-000-00000" + placeholder="ex) 000-00-00000" /> 대표자 { - <h2>Contect</h2> + <h2>상세 설명</h2> + + + onChangeState("introduction", e)} /> +
+ + + + <h2>사업 분야</h2> - + + {businessAreaList.map((item) => ( + <> + { + setBusinessAreaList( + businessAreaList.map((business) => + business.name === item.name + ? { ...business, checked: e.target.checked } + : business + ) + ); + }} + > + {item.name} + + ))} + + + + setBusiness(e.target.value)} + /> +
{ + if (business.length !== 0) { + setBusinessAreaList([ + ...businessAreaList, + { + name: business, + checked: true, + }, + ]); + setBusiness(""); + } else + Notice({ + state: "error", + message: "사업 분야를 적어주세요.", + }); + }} + > + + +
+ + +
+ + + + <h2>Contact</h2> + + + 대표자 onChangeState("contactorName", e)} @@ -542,95 +603,99 @@ const CompanySignUp = () => { 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)} + /> + + ))} + -
- - - - <h2>사업 분야</h2> - - - {skill.map((user, i) => ( - - - (SkillRef.current[i] = el)} - > - DeleteSkill(i)}>X - - - ))} - - - AddSkillText(1)}> - - -
- - - - <h2>Contect</h2> - - - onChangeState("introduction", e)} /> + onSignUp()}>기업 등록 - - {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()}>회원가입 - ); }; 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; + 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; - margin-bottom: 150px; - margin-top: 139px; h2 { margin: 0; @@ -744,9 +809,9 @@ const Category = styled.span` `; const GridDiv = styled.div` - width: 800px; + width: ${(props) => props.width}px; display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(${(props) => props.column}, 1fr); margin-right: 80px; grid-row-gap: 43px; place-items: center end; @@ -755,6 +820,10 @@ const GridDiv = styled.div` div { font-size: 20px; } + + span { + word-break: break-all; + } `; const Address = styled.div` @@ -837,7 +906,7 @@ const SubmitBtn = styled.button` width: 600px; height: 50px; border-radius: 24px; - margin-top: 33px; + margin: 150px; background: linear-gradient(to right, #ab91f8, #7243ff); border: none; color: #fff; @@ -845,66 +914,6 @@ const SubmitBtn = styled.button` cursor: pointer; font-weight: 700; `; - -export const InputUl = styled.ul` - display: flex; - flex-wrap: wrap; - width: 1036px; - align-content: space-between; -`; -export const InputLi = styled.li` - position: relative; - margin-right: 60px; - list-style: none; - margin-left: -40px; - height: 60px; -`; - -export const Delelte = styled.div` - width: 270px; - height: 50px; - background-color: ${(props) => props.theme.colors.mediumGray}; - border-radius: 20px; -`; -export const DeleteButton = styled.button` - cursor: pointer; - position: relative; - top: -190px; - left: 200px; - width: 30px; - height: 30px; - border-radius: 50%; - background-color: ${(props) => props.theme.colors.white}; - font-family: "Roboto"; - font-style: normal; - font-weight: 400; - font-size: 20px; - line-height: 0px; - color: ${(props) => props.theme.colors.black}; - border: none; - margin-left: 20px; - margin-bottom: 10px; -`; -export const PlusBtn = styled.div` - width: 40px; - height: 40px; - border: none; - border-radius: 50%; - background-color: ${(props) => props.theme.colors.mediumGray}; - margin-top: 5px; - cursor: pointer; - :after { - content: "+"; - margin-left: 12px; - margin-top: 50px; - font-family: "NanumGothic", sans-serif; - font-weight: 700; - font-size: 24px; - font-style: normal; - color: ${(props) => props.theme.colors.blcak}; - } -`; - export const CheckInput = styled.input` margin-top: 5px; margin-right: 15px; @@ -912,7 +921,6 @@ export const CheckInput = styled.input` appearance: none; width: 30px; height: 30px; - margin-left: ${(props) => props.left}px; background-color: ${(props) => props.theme.colors.mediumGray}; :checked { border: 5px solid ${(props) => props.theme.colors.mediumGray};