컴포넌트 유효성 검사를 포함한 JoinForm (Card 사용)

[주인장]

import { useState } from "react";

import { Form, Button, Container, Row, Col, Card } from "react-bootstrap";

import { PersonPlusFill } from "react-bootstrap-icons"; // 아이콘

const JoinForm = ({ join }) => {

  const [username, setUsername] = useState("");

  const [password, setPassword] = useState("");

  const [name, setName] = useState("");

  const [email, setEmail] = useState("");

  const [errors, setErrors] = useState({

    username: "",

    password: "",

    name: "",

    email: "",

  });

  const onJoin = (e) => {

    e.preventDefault();

    // 유효성 검사

    if (validateForm()) {

      join({ username, password, name, email });

    }

  };

  //==============================================================

  // 유효성 검사

  //==============================================================

  const validateForm = () => {

    let isValid = true;

    const newErrors = { ...errors }; // 기존 에러 상태 복사

    if (!username) {

      newErrors.username = "아이디를 입력하세요.";

      isValid = false;

    } else if (username.length < 3) {

      newErrors.username = "아이디는 최소 3자 이상이어야 합니다.";

      isValid = false;

    }

    if (!password) {

      newErrors.password = "비밀번호를 입력하세요.";

      isValid = false;

    } else if (password.length < 4) {

      newErrors.password = "비밀번호는 최소 4자 이상이어야 합니다.";

      isValid = false;

    }

    if (!name) {

      newErrors.name = "이름을 입력하세요.";

      isValid = false;

    }

    if (!email) {

      newErrors.email = "이메일을 입력하세요.";

      isValid = false;

    } else if (!/\S+@\S+\.\S+/.test(email)) {

      newErrors.email = "유효한 이메일 주소를 입력하세요.";

      isValid = false;

    }

    setErrors(newErrors);

    return isValid;

  }

  return (

    <Container className="mt-5">

      <Row className="justify-content-center">

        <Col xs={12} md={6}>

          <Card className="shadow">

            {/* 카드 헤더 */}

            <Card.Header className="bg-dark text-white d-flex align-items-center">

              <PersonPlusFill className="me-2" />

              <strong>회원가입</strong>

            </Card.Header>

            {/* 카드 바디 */}

            <Card.Body>

              <Form xxxxonSubmit={onJoin}>

                <Form.Group className="mb-3" controlId="username">

                  <Form.Label>회원 아이디</Form.Label>

                  <Form.Control

                    type="text"

                    name="username"

                    placeholder="사용할 아이디를 입력하세요."

                    required

                    autoComplete="username"                    

                    xxxxonChange={(e) => setUsername(e.target.value)}

                    isInvalid={!!errors.username}

                  />

                  <Form.Control.Feedback type="invalid">

                    {errors.username}

                  </Form.Control.Feedback>

                </Form.Group>

                <Form.Group className="mb-3" controlId="password">

                  <Form.Label>비밀번호</Form.Label>

                  <Form.Control

                    type="password"

                    name="password"

                    placeholder="사용할 비밀번호를 입력하세요."

                    required

                    autoComplete="password"

                    xxxxonChange={(e) => setPassword(e.target.value)}

                    isInvalid={!!errors.password}

                  />

                  <Form.Control.Feedback type="invalid">

                    {errors.password}

                  </Form.Control.Feedback>

                </Form.Group>

                <Form.Group className="mb-3" controlId="name">

                  <Form.Label>이름</Form.Label>

                  <Form.Control

                    type="text"

                    name="name"

                    placeholder="사용할 이름을 입력하세요."                    

                    autoComplete="name"

                    xxxxonChange={(e) => setName(e.target.value)}

                    isInvalid={!!errors.name}

                  />

                  <Form.Control.Feedback type="invalid">

                    {errors.name}

                  </Form.Control.Feedback>

                </Form.Group>

                <Form.Group className="mb-3" controlId="email">

                  <Form.Label>이메일</Form.Label>

                  <Form.Control

                    type="email"

                    name="email"

                    placeholder="사용할 이메일을 입력하세요."

                    required

                    autoComplete="email"

                    xxxxonChange={(e) => setEmail(e.target.value)}

                    isInvalid={!!errors.email}

                  />

                  <Form.Control.Feedback type="invalid">

                    {errors.email}

                  </Form.Control.Feedback>

                </Form.Group>

                <div className="d-grid">

                  <Button variant="dark" type="submit">

                    가입하기

                  </Button>

                </div>

              </Form>

            </Card.Body>

          </Card>

        </Col>

      </Row>

    </Container>

  );

};

export default JoinForm;