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

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 (
+    <>
+      <Address>
+        <Category>주소</Category>
+        <div>
+          {arr.map((item) => (
+            <div>
+              <span>{item.title}</span>
+              <InputForm
+                value={info[item.str + "FullAddress"]}
+                onClick={() =>
+                  open({
+                    onComplete: (data) => getAddress(data, item.str),
+                    width: 700,
+                    height: 700,
+                    left: 200,
+                    animation: true,
+                  })
+                }
+                placeholder="ex) 대전광역시 유성구 가정북로 76"
+              />
+              <InputForm
+                value={info[item.str + "AddressNumber"]}
+                onClick={() =>
+                  open({
+                    onComplete: (data) => getAddress(data, item.str),
+                    width: 700,
+                    height: 700,
+                    left: 200,
+                    animation: true,
+                  })
+                }
+                style={{ width: "100px" }}
+                placeholder="ex) 34111"
+              />
+            </div>
+          ))}
+        </div>
+      </Address>
+    </>
+  );
+};
+
+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;
+  }
+`;

src/components/pages/companyPage/auth/signUp/businessAreaList.jsx

@@ -0,0 +1,28 @@
+import { CheckInput } from "./styles";
+
+const BusinessAreaList = ({ state, setState }) => {
+  return (
+    <>
+      {state.map((item) => (
+        <>
+          <CheckInput
+            type="checkbox"
+            checked={item.checked}
+            onChange={(e) => {
+              setState(
+                state.map((business) =>
+                  business.name === item.name
+                    ? { ...business, checked: e.target.checked }
+                    : business
+                )
+              );
+            }}
+          ></CheckInput>
+          <span>{item.name}</span>
+        </>
+      ))}
+    </>
+  );
+};
+
+export default BusinessAreaList;

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 !== "" ? (
+        <Success src={success.sendEmail ? checkImg : failImg} alt="" />
+      ) : (
+        <></>
+      )}
+      {elm.key === "emailCheckCode" && success.checkSuccess !== "" ? (
+        <Success src={success.checkSuccess ? checkImg : failImg} alt="" />
+      ) : (
+        <></>
+      )}
+      {elm.title === "비밀번호 확인" &&
+      success.passwordSuccess !== "" &&
+      info.password !== "" ? (
+        <Success src={success.passwordSuccess ? checkImg : failImg} alt="" />
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default CompanySuccessCheck;
+
+const Success = styled.img`
+  width: 20px;
+  height: 20px;
+  object-fit: cover;
+`;

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 (
+    <>
+      <AuthDiv>
+        {data.map((elm, i) => (
+          <InputDiv style={{ marginBottom: `${20 + (i % 2) * 40}px` }}>
+            <div>
+              <span>{elm.title}</span>
+              <CompanySuccessCheck elm={elm} success={success} info={info} />
+              <Check onClick={() => onCheck(elm.additionalElm)}>
+                {elm.additionalElm === "" ? "" : `${elm.additionalElm} >`}
+              </Check>
+            </div>
+            <InputForm
+              type={elm.title.slice(0, 4) === "비밀번호" ? "password" : "text"}
+              placeholder={elm.placeholder}
+              onChange={(e) => onChangeState(elm.key, e)}
+            />
+          </InputDiv>
+        ))}
+      </AuthDiv>
+    </>
+  );
+};
+
+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;
+  }
+`;