2020.08.09 antd

import React, { useState } from 'react';
import AppLayout from "../components/AppLayout";
import Head from "next/head";
import { Form, Input, Checkbox, Button } from 'antd';

const Signup = () => {
  const [id, setId] = useState('');
  const [nick, setNick] = useState('');
  const [password, setPassword] = useState('');
  const [passwordCheck, setPasswordCheck] = useState('');
  const [term, setTerm] = useState(false);
  const [passwordError, setPasswordError] = useState(false);
  const [termError, setTermError] = useState(false);

  const onFinish= () => {
    if (password !== passwordCheck) {
      return setPasswordError(true);
    }
    if (!term) {
      return setTermError(true);
    }
    console.log({
      id,
      nick,
      password,
      passwordCheck,
      term,
    });
  };

  const onChangeId = (e) => {
    setId(e.target.value);
  };

  const onChangeNick = (e) => {
    setNick(e.target.value);
  };

  const onChangePassword = (e) => {
    setPassword(e.target.value);
  };

  const onChangePasswordChk = (e) => {
    setPasswordError(e.target.value !== password);
    setPasswordCheck(e.target.value);
  };

  const onChangeTerm = (e) => {
    setTermError(false);
    setTerm(e.target.checked);
  };

  return (
    <>
      <Head>
        <title>NodeBird</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.16.2/antd.css" />
      </Head>
      <AppLayout>
        <Form onFinish={onFinish} style={{ padding: 10 }}>
          <Form.Item
            label={"아이디"}
            name={"user-id"}
            rules={[{ required: true, message: "Please input your user ID!"}]}
          >
            <Input name="user-id" value={id} required onChange={onChangeId} />
          </Form.Item>
          <Form.Item
            label={"닉네임"}
            name={"user-nick"}
            rules={[{ required: true, message: "Please input your nickname!"}]}
          >
            <Input name="user-nick" value={nick} required onChange={onChangeNick} />
          </Form.Item>
          <Form.Item
            label={"비밀번호"}
            name={"user-password"}
            rules={[{ required: true, message: "Please input your password!"}]}
          >
            <Input name="user-password" type={"password"} value={password} required onChange={onChangePassword} />
          </Form.Item>
          <Form.Item
            label={"비밀번호 체크"}
            name={"user-password-check"}
          >
            <Input name="user-password-check" type={"password"} value={passwordCheck} required onChange={onChangePasswordChk} />
            {passwordError && <div style={{ color: 'red' }}>비밀번호가 일치하지 않습니다.</div>}
          </Form.Item>
          <Form.Item name={"user-term"}>
            <Checkbox name={"user-term"} checked={term} onChange={onChangeTerm}>서비스 이용 동의</Checkbox>
            {termError && <div style={{ color: 'red' }}>약관에 동의하셔야 합니다.</div>}
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">가입하기</Button>
          </Form.Item>
        </Form>
      </AppLayout>
    </>
  );
};

export default Signup;
인프런 커뮤니티 질문&답변
