signup.js

import axios from "axios";
import { useEffect, useState } from "react";
import { Link, Redirect } from "react-router-dom";
import PageHeader from "../component/page_header";
import { useRecoilState } from "recoil";
import { signupState } from "../state";
import { api } from "../util";

const Signup = ({ history }) => {
  const [id, setId] = useState("");
  const [idChecked, setIdChecked] = useState(false);
  const [pw1, setPw1] = useState("");
  const [pw2, setPw2] = useState("");
  const [signup, setSignup] = useRecoilState(signupState);

  const [check, setCheck] = useState({
    all: false,
    service: false,
    personal: false,
    email: false,
    sms: false,
    push: false,
  });

  const on =
    idChecked &&
    pw1.length > 3 &&
    pw1 === pw2 &&
    check.service &&
    check.personal;

  const changeAll = (value) => {
    setCheck({
      all: value,
      service: value,
      personal: value,
      email: value,
      sms: value,
      push: value,
    });
  };

  const preventSpaceBar = (value, setter) => {
    if (value.includes(" ")) {
      value = value.replace(/\s/g, "");
    }
    setter(value);
  };

  const idCheck = () => {
    const params = new FormData();
    params.append("id", id);

    api.post("/user/checkDuplicateId", params).then((res) => {
      if (!res.data.duplicate) {
        alert("사용할 수 있는 아이디 입니다");
        setIdChecked(true);
      } else {
        alert("사용할 수 없는 아이디 입니다");
        setIdChecked(false);
      }
    });
  };

  const save = () => {
    setSignup((prev) => ({
      ...prev,
      id: id,
      password: pw1,
      marketingMsgReceiveEmailYn: check.email ? "Y" : "N",
      marketingMsgReceiveSmsYn: check.sms ? "Y" : "N",
    }));
  };

  if (signup.id !== null) {
    history.push("/phoneverify");
  }

  return (
    <div className="container footer-none">
      <div className="wrapper">
        <PageHeader tit="회원가입" back={() => history.goBack()} />

        <section className="join section-first">
          <div className="inner">
            <div className="join__form">
              <div className="input-box">
                <div className="tbox with-btn with-btn-small with-btn-full">
                  <input
                    className="full"
                    placeholder="아이디를 입력해주세요."
                    onChange={(e) => {
                      setIdChecked(false);
                      preventSpaceBar(e.target.value, setId);
                    }}
                    value={id}
                  />
                  <a href="#none" className="tbox-btn" onClick={idCheck}>
                    중복 확인
                  </a>
                </div>
              </div>

              <div className="input-box">
                <div
                  className={
                    "tbox full f_main with-chk-input" +
                    (pw1.length >= 4 ? " with-chk" : "")
                  }
                >
                  <input
                    className="full"
                    type="password"
                    placeholder="비밀번호를 입력해주세요. (4자리 이상)"
                    onChange={(e) => preventSpaceBar(e.target.value, setPw1)}
                    value={pw1}
                  />
                </div>
              </div>

              <div className="input-box">
                <div className="tbox full f_main with-chk-input">
                  <input
                    className="full"
                    type="password"
                    placeholder="비밀번호를 한번 더 입력해주세요."
                    onChange={(e) => preventSpaceBar(e.target.value, setPw2)}
                    value={pw2}
                  />
                </div>
              </div>

              <div className="info-txt">
                {pw1 === pw2
                  ? "비밀번호가 일치합니다"
                  : "비밀번호가 일치하지 않습니다."}
              </div>
            </div>

            <div className="join__terms">
              <div className="all_box">
                <div className="cbox">
                  <label>
                    <input
                      name="all"
                      type="checkbox"
                      checked={check.all}
                      onChange={(e) => changeAll(e.target.checked)}
                    />
                    <i></i>
                    <span className="txt big">[전체] 약관 및 동의</span>
                  </label>
                </div>
              </div>
              <div className="terms__list">
                <div className="row">
                  <div className="cbox">
                    <label>
                      <input
                        type="checkbox"
                        checked={check.service}
                        onChange={(e) => {
                          setCheck({
                            ...check,
                            service: e.target.checked,
                            all: check.all && e.target.checked,
                          });
                        }}
                      />
                      <i></i>
                      <span className="txt">[필수] 서비스 이용약관</span>
                      <div className="service_txt_bg">
                        <div className="service_txt">
                          제 1장 총 칙 제 1조(목적) 이 약관은 주식회사 데니어가
                          운영하는 인터넷 사이트를 통하여 제공하는 전자래 관련
                          서비스(이하 “서비스”)를 이 약관은 주식회사 데니어가
                          운영하는 인터제 1장 총칙 제 1조(목적) 이 약관은
                          주식회사 데니어가 운영하는 인터넷 사이트를 통하여
                          제공하는 전자래 관련 서비스(이하 “서비스”)를 이 약관은
                          주식회사 데니어가 운영하는 인터
                        </div>
                      </div>
                    </label>
                  </div>
                </div>
                <div className="row">
                  <div className="cbox">
                    <label>
                      <input
                        type="checkbox"
                        checked={check.personal}
                        onChange={(e) => {
                          setCheck({
                            ...check,
                            personal: e.target.checked,
                            all: check.all && e.target.checked,
                          });
                        }}
                      />
                      <i></i>
                      <span className="txt">
                        [필수] 개인정보 수집 및 이용동의
                      </span>
                      <div className="service_txt_bg">
                        <div className="service_txt">
                          제 1장 총 칙 제 1조(목적) 이 약관은 주식회사 데니어가
                          운영하는 인터넷 사이트를 통하여 제공하는 전자래 관련
                          서비스(이하 “서비스”)를 이 약관은 주식회사 데니어가
                          운영하는 인터제 1장 총칙 제 1조(목적) 이 약관은
                          주식회사 데니어가 운영하는 인터넷 사이트를 통하여
                          제공하는 전자래 관련 서비스(이하 “서비스”)를 이 약관은
                          주식회사 데니어가 운영하는 인터
                        </div>
                      </div>
                    </label>
                  </div>
                </div>
                <div className="row">
                  <div className="cbox">
                    <label>
                      <input
                        type="checkbox"
                        checked={check.email && check.sms && check.push}
                        onChange={(e) => {
                          setCheck({
                            ...check,
                            email: e.target.checked,
                            sms: e.target.checked,
                            push: e.target.checked,
                          });
                        }}
                      />
                      <i></i>
                      <span className="txt">
                        [선택] 마케팅 메시지 수신 동의
                      </span>
                    </label>
                  </div>

                  <div className="in__terms">
                    <div className="row">
                      <div className="cbox">
                        <label>
                          <input
                            type="checkbox"
                            checked={check.email}
                            onChange={(e) =>
                              setCheck({ ...check, email: e.target.checked })
                            }
                          />
                          <i></i>
                          <span className="txt">이메일 수신동의</span>
                        </label>
                      </div>
                    </div>
                    <div className="row">
                      <div className="cbox">
                        <label>
                          <input
                            type="checkbox"
                            checked={check.sms}
                            onChange={(e) =>
                              setCheck({ ...check, sms: e.target.checked })
                            }
                          />
                          <i></i>
                          <span className="txt">SMS 수신동의</span>
                        </label>
                      </div>
                    </div>
                    <div className="row">
                      <div className="cbox">
                        <label>
                          <input
                            type="checkbox"
                            checked={check.push}
                            onChange={(e) =>
                              setCheck({ ...check, push: e.target.checked })
                            }
                          />
                          <i></i>
                          <span className="txt">푸시알림 동의</span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="terms__info">
                {(!check.service || !check.personal) &&
                  "약관을 동의하지 않으시면 서비스 이용이 불가능합니다."}
              </div>
            </div>

            <div className="join__menu">
              <a
                href="#none"
                className={"btn full big" + (on ? " col__main" : "")}
                onClick={() => on && save()}
              >
                휴대폰 인증하기
              </a>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
};

export default Signup;