From 02e6a207a1b494ccc7efad34f4a4b6daa4d3c67e Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Wed, 2 Nov 2022 15:26:06 +0900 Subject: [PATCH 1/3] ADD :: add onLogin --- .../pages/companyPage/auth/signIn/index.jsx | 29 +++++++++++++++---- 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/src/components/pages/companyPage/auth/signIn/index.jsx b/src/components/pages/companyPage/auth/signIn/index.jsx index b8f33cb..d1a3401 100644 --- a/src/components/pages/companyPage/auth/signIn/index.jsx +++ b/src/components/pages/companyPage/auth/signIn/index.jsx @@ -1,10 +1,11 @@ +import axios from "axios"; import React, { useState } from "react"; import styled from "styled-components"; import Header from "../../../../common/header"; const CompanySignIn = () => { const [state, setState] = useState({ - email: "", + companyNumber: "", password: "", }); @@ -12,6 +13,21 @@ const CompanySignIn = () => { setState({ ...state, [props]: e.target.value }); }; + const onLogin = () => { + console.log(state); + axios({ + url: "https://info-dsm.cf/api/info/v1" + "/company/login", + method: "POST", + body: state, + }) + .then((res) => { + console.log(res.data); + }) + .catch((err) => { + console.log(err); + }); + }; + return ( <>
{

사업자 로그인

- 이메일 - 인증번호 전송{">"} + 사업자 번호 changeInput(e, "email")} + value={state.companyNumber} + onChange={(e) => changeInput(e, "companyNumber")} placeholder="이메일을 입력해주세요.." /> @@ -37,9 +52,10 @@ const CompanySignIn = () => { value={state.password} onChange={(e) => changeInput(e, "password")} placeholder="비밀번호를 입력해주세요.." + type={"password"} /> - 로그인 + onLogin()}>로그인 ); @@ -100,4 +116,5 @@ const SubmitBtn = styled.button` color: #fff; font-size: 20px; font-weight: 700; + cursor: pointer; `; From 8156f29e34fd3b3c0b6cac2e8135a939b84742a3 Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Wed, 2 Nov 2022 15:26:52 +0900 Subject: [PATCH 2/3] ADD :: add onSignUp --- .../pages/companyPage/auth/signUp/index.jsx | 736 ++++++++++++++---- 1 file changed, 569 insertions(+), 167 deletions(-) diff --git a/src/components/pages/companyPage/auth/signUp/index.jsx b/src/components/pages/companyPage/auth/signUp/index.jsx index d666b08..cbba22a 100644 --- a/src/components/pages/companyPage/auth/signUp/index.jsx +++ b/src/components/pages/companyPage/auth/signUp/index.jsx @@ -1,19 +1,64 @@ -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useRef, 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 { BASE_URL, skillData } from "../../../../../export/data"; const CompanySignUp = () => { - const optionData = [ - "ㄴㅇㅁㄹ", - "ㄴㅇㅁㄹ", - "ㄴㅇㅁㄹ", - "ㄴㅇㅁㄹ", - "ㄴㅇㅁㄹ", - "ㄴㅇㅁㄹ", - "ㄴㅇㅁㄹ", + const [skill, setSkill] = useState([1]); + const SkillRef = useRef([]); + const [formData, setFormData] = useState(new FormData()); + const [showFile, setShowFile] = useState({ + businessRegisteredCertificate: [], + companyIntroductionFile: [], + companyLogo: [], + companyPhotoList: [], + }); + const fileName = [ + { name: "businessRegisteredCertificate", kr: "사업자 등록증" }, + { name: "companyIntroductionFile", kr: "회사 소개 파일" }, + { name: "companyLogo", kr: "회사 로고" }, + { name: "companyPhotoList", kr: "회사 사진 목록" }, ]; - const [selectData, setSelectData] = useState(""); + + 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: "", + homeFullAddress: "", + homeAddressNumber: 0, + agentFullAddress: "", + agentAddressNumber: 0, + representative: "", + establishedAt: 0, + workerCount: 0, + annualSales: 0, + contactorName: "", + contactorRank: "", + phoneNumber: "", + contactorPhone: "", + email: "", + emailCheckCode: "", + introduction: "", + password: "", + passwordHint: "", + leading: false, + }); const data = [ { @@ -44,35 +89,192 @@ const CompanySignUp = () => { title: "비밀번호 힌트", additionalElm: "", placeholder: "비밀번호 힌트를 입력해주세요..", - key: "", + key: "passwordHint", }, ]; - const [state, setState] = useState({ - email: "", - emailCheckCode: "", - password: "", - teacherCheckCode: "", - name: "", - }); - const [passwordCheck, setPasswordCheck] = useState(""); const [success, setSuccess] = useState({ - checkSuccess: false, - passwordSuccess: false, + sendEmail: "", + checkSuccess: "", + passwordSuccess: "", }); - function changeInput(e, props) { - if (props.length) setState({ ...state, [props]: e.target.value }); - else setPasswordCheck(e.target.value); - } - useEffect(() => { - if (state.password === passwordCheck && state.password.length !== 0) { + if ( + companyInfomation.password === passwordCheck && + companyInfomation.password.length !== 0 + ) { setSuccess({ ...success, passwordSuccess: true }); } else setSuccess({ ...success, passwordSuccess: false }); - }, [passwordCheck, state.password]); + }, [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 { + console.log("파일이 아름다워요!"); + arr = []; + break; + } + } + setShowFile({ ...showFile, [props]: arr }); + }; + + const onSignUp = () => { + const { + companyNumber, + companyName, + homeFullAddress, + homeAddressNumber, + agentFullAddress, + agentAddressNumber, + representative, + establishedAt, + workerCount, + annualSales, + contactorName, + contactorRank, + phoneNumber, + contactorPhone, + email, + introduction, + password, + leading, + emailCheckCode, + passwordHint, + } = companyInfomation; + const body = { + companyNameRequest: { + companyNumber: companyNumber, + companyName: companyName, + }, + companyInformation: { + homeAddress: { + fullAddress: homeFullAddress, + addressNumber: parseInt(homeAddressNumber), + }, + agentAddress: { + fullAddress: agentFullAddress, + addressNumber: parseInt(agentAddressNumber), + }, + representative: representative, + establishedAt: parseInt(establishedAt), + workerCount: parseInt(workerCount), + annualSales: parseInt(annualSales), + }, + companyContact: { + contactorName: contactorName, + contactorRank: contactorRank, + phoneNumber: phoneNumber, + contactorPhone: contactorPhone, + email: email, + }, + businessAreaList: SkillRef.current.map((item) => item.value), + introduction: introduction, + password: password, + leading: leading, + }; + + 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); + axios({ + url: BASE_URL + "/company", + method: "POST", + headers: { "Contest-Type": "multipart/form-data" }, + data: formData, + params: { + emailCheckCode: emailCheckCode, + passwordHint: passwordHint, + }, + }) + .then((res) => { + console.log(res); + }) + .catch((err) => { + console.log(formData.get("companyIntroductionFile")); + console.log(formData.get("businessRegisteredCertificate")); + console.log(formData.get("companyPhotoList")); + console.log(formData.get("companyLogo")); + console.log(formData.get("request")); + console.log(err); + }); + } else { + console.log("내용을 전부 기재해주세요"); + } + }; + + const settingFormData = (props, body) => { + if (body.constructor === File) { + formData.append(props, body); + } + if (body.constructor === Object) { + formData.append( + 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: BASE_URL + "/company/email", + method: "POST", + params: { + email: companyInfomation.email, + }, + }) + .then((res) => { + setSuccess({ ...success, sendEmail: true }); + }) + .catch((err) => { + setSuccess({ ...success, sendEmail: false }); + }); + } else if ( + str === "인증번호 확인" && + companyInfomation.emailCheckCode !== "" + ) { + axios({ + url: BASE_URL + "/company/email/code/check", + method: "GET", + params: { + email: companyInfomation.email, + code: companyInfomation.emailCheckCode, + }, + }) + .then((res) => { + setSuccess({ ...success, checkSuccess: true }); + }) + .catch((err) => { + setSuccess({ ...success, checkSuccess: false }); + }); + } + }; return ( <> @@ -88,41 +290,124 @@ const CompanySignUp = () => { <h2>회사 명</h2> - <input type={"radio"} /> + <CheckInput + type="checkbox" + checked={companyInfomation.leading} + onChange={(e) => { + setCompanyInfomation({ + ...companyInfomation, + leading: e.target.checked, + }); + }} + ></CheckInput> <span>선도 기업</span> - - 사업자등록번호 -
000-00-00000
- + 회사 명 + onChangeState("companyName", e)} + placeholder="회사 명을 입력해주세요" + /> + + 사업자 +
+ 등록번호 + + onChangeState("companyNumber", e)} + placeholder="ex) 00-000-00000" + /> 대표자 -
안진우
- 대표자 -
안진우
- 대표자 -
안진우
- 대표자 -
안진우
+ onChangeState("representative", e)} + placeholder="대표자를 입력해주세요" + /> + 근로자 수 + onChangeState("workerCount", e)} + placeholder="근로자 수를 입력해주세요" + /> + 설립연도 + onChangeState("establishedAt", e)} + placeholder="설립연도를 입력해주세요" + /> + 연매출액 + onChangeState("annualSales", e)} + placeholder="연매출액을 입력해주세요" + />
주소
본사 -
- 경상남도 함안군 가야읍 도항2길 -55 (동신아파트 102동 1305호) -
+ onChangeState("homeFullAddress", e)} + placeholder="ex) 대전광역시 유성구 가정북로 76" + /> + onChangeState("homeAddressNumber", e)} + style={{ width: "100px" }} + placeholder="ex) 34111" + />
연구소/지점 -
- 경상남도 함안군 가야읍 도항2길 -55 (동신아파트 102동 1305호) -
+ onChangeState("agentFullAddress", e)} + placeholder="ex) 대전광역시 유성구 가정북로 76" + /> + onChangeState("agentAddressNumber", e)} + style={{ width: "100px" }} + placeholder="ex) 34111" + />
+ + {fileName.map((item, i) => ( + <> + + {item.kr} + AddFileProps(e, item.name)} + > + + {showFile[item.name].map((files) => ( + <> + + {files} + + x + + + + ))} + + + ))} +
@@ -131,16 +416,27 @@ const CompanySignUp = () => {

Contect

-
대표자 - + 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" + />
@@ -149,18 +445,23 @@ const CompanySignUp = () => { <h2>사업 분야</h2> - - - 핀테크 - ▼ - - - + + {skill.map((user, i) => ( + + + (SkillRef.current[i] = el)} + > + DeleteSkill(i)}>X + + + ))} + + + AddSkillText(1)}> + +
@@ -168,7 +469,7 @@ const CompanySignUp = () => {

Contect

- + onChangeState("introduction", e)} /> @@ -176,28 +477,42 @@ const CompanySignUp = () => {
{elm.title} - {elm.key === "emailCheckCode" && success.checkSuccess ? ( - + + {elm.key === "email" && success.sendEmail !== "" ? ( + ) : ( <> )} - {elm.title === "비밀번호 확인" && success.passwordSuccess ? ( - + {elm.key === "emailCheckCode" && success.checkSuccess !== "" ? ( + ) : ( <> )} - + {elm.title === "비밀번호 확인" && + success.passwordSuccess !== "" && + companyInfomation.password !== "" ? ( + + ) : ( + <> + )} + onCheck(elm.additionalElm)}> {elm.additionalElm === "" ? "" : `${elm.additionalElm} >`}
- changeInput(e, elm.key)} + onChange={(e) => onChangeState(elm.key, e)} /> ))} - 회원가입 + onSignUp()}>회원가입 ); @@ -249,7 +564,7 @@ const MainDiv = styled.div` const ContentDiv = styled.div` display: flex; - justify-content: space-between; + justify-content: flex-end; flex-wrap: wrap; width: 1136px; `; @@ -261,6 +576,9 @@ const Description = styled.textarea` border: none; resize: none; border-radius: 12px; + font-size: 20px; + padding: 20px; + font-weight: 700; `; const ContainerDiv = styled.div` @@ -285,66 +603,6 @@ const ContainerDiv = styled.div` } `; -const SelectDiv = styled.div` - width: 356px; - height: 50px; - border-radius: 24px; - background-color: #f0f0f0; -`; - -const Pinned = styled.div` - width: 264px; - height: 50px; - border-radius: 24px; - font-size: 24px; - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 24px; - background-color: #f9f9f9; - z-index: 1; - border-radius: 24px 24px 0 0; - - box-shadow: 0px -2px 5px 1px rgba(0, 0, 0, 0.15); -`; - -const Option = styled.div` - width: 264px; - height: 120px; - overflow: hidden; - overflow-y: scroll; - display: flex; - flex-direction: column; - border-radius: 0 0 24px 24px; - box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.15); - padding-right: 11px; - z-index: -1; - background-color: #fff; - span, - input { - border: none; - color: #bdbdbd; - font-size: 24px; - padding-left: 24px; - &::placeholder { - color: #bdbdbd; - } - } - span:hover { - background-color: #f9f9f9; - cursor: pointer; - } - ::-webkit-scrollbar { - width: 22px; - } - ::-webkit-scrollbar-thumb { - background-clip: padding-box; - border: 8px solid transparent; - background-color: #4000ff; - border-radius: 24px; - } -`; - const Title = styled.div` display: inline-flex; align-items: center; @@ -354,22 +612,35 @@ const Title = styled.div` font-size: 40px; font-weight: 700; } - input { - margin-right: 20px; - } span { font-size: 24px; } `; +const InputForm = styled.input` + border: none; + width: 220px; + height: 50px; + border-radius: 18px; + background-color: #f0f0f0; + font-size: 20px; + 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: 700px; + width: 800px; display: grid; grid-template-columns: repeat(4, 1fr); margin-right: 80px; @@ -377,17 +648,6 @@ const GridDiv = styled.div` place-items: center end; margin-bottom: 86px; - input { - border: none; - width: 200px; - height: 50px; - border-radius: 24px; - background-color: #f0f0f0; - font-size: 20px; - margin-right: 30px; - padding-left: 24px; - font-weight: 700; - } div { font-size: 20px; } @@ -404,7 +664,7 @@ const Address = styled.div` display: flex; align-items: center; display: grid; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; span { width: 120px; @@ -412,27 +672,18 @@ const Address = styled.div` justify-content: flex-end; margin-right: 22px; } - div { - width: 509px; - height: 40px; - border-radius: 24px; - background-color: #f3eeff; - border: none; - text-align: center; - padding: 10px 0; - } } } -`; -const Registration = styled.div` - width: 200px; - flex-wrap: wrap; - display: flex; - justify-content: flex-start; - height: 80px; - div { - font-size: 20px; + input { + width: 389px; + height: 40px; + border-radius: 18px; + + background-color: #f3eeff; + border: none; + padding-left: 24px; + margin-right: 20px; } `; @@ -446,6 +697,7 @@ const Check = styled.div` color: #4000ff; font-size: 16px; font-weight: 400; + cursor: pointer; `; const InputDiv = styled.div` @@ -489,3 +741,153 @@ 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; + cursor: pointer; + 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}; + 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 378daf4699a910ab16165b99b9da011ceb0936fb Mon Sep 17 00:00:00 2001 From: LeeDongHyeon Date: Wed, 2 Nov 2022 15:26:58 +0900 Subject: [PATCH 3/3] ADD :: add BASE_URL --- src/export/data.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/export/data.js b/src/export/data.js index 9438427..ee4bb5b 100644 --- a/src/export/data.js +++ b/src/export/data.js @@ -46,3 +46,4 @@ export const workData = [ { clock: "퇴근시간", si: "시" }, { clock: "근무시간 (주)", si: "시간" }, ]; +export const BASE_URL = "https://info-dsm.cf/api/info/v1";