1주차 과제 장바구니(3) - 장바구니 비우기, 금액초과 경고, 입력값 검사

[1주차 과제 장바구니 사이트] (2023-01-13 ~ 2023-01-18 약 일주일)

React App

• 1주차 과제 장바구니(1) - css 구현하기
• 1주차 과제 장바구니(2) - 장바구니에 추가, 삭제, 수량 조절, 전체가격 표시
• 1주차 과제 장바구니(3) - 장바구니 비우기, 금액초과 경고, 입력값 검사
• 1주차 과제 장바구니(완료) - 모달창 다음 단계로, 드래그 기능

 

---

장바구니 비우기

장바구니에 상품이 없으면 버튼이 나타나지 않고,

장바구니에 상품이 있으면 장바구니 비우기 버튼이 나타난다.

                  {cartList.length ? (
                    <Button className="clearCart" variant="danger" onClick={() => clearCartList()}>
                      장바구니 비우기
                    </Button>
                  ) : null}

 

장바구니 비우기 버튼을 클릭하면 cartList를 비운다

  // ----- 장바구니 비우기 -----
  const clearCartList = () => {
    cartList.forEach((cartItem) => (cartItem.amount = 0));
    setCartList([]);
  };
  // ----- 장바구니 비우기 -----

---

금액초과 경고하기

상품 가격이 500,000원을 넘어서면 상품을 제외하라는 경고 문구 출력하기.

 

  useEffect(() => {
    if (priceTotal > 500000) {
      window.alert("상품가격이 500,000원을 초과했습니다. 상품을 제외해주세요.");
    }
  }, [priceTotal]);

=> priceTotal이 500000을 넘게 되면 alert를 실행한다.

 

  const openBuyModal = () => {
    if (priceTotal > 500000) {
      return window.alert("상품 가격을 500,000원 이하로 맞춰주세요.");
    }
    if (priceTotal === 0) {
      return window.alert("장바구니에 담긴 상품이 없습니다.");
    }
    setIsModalVisible(true);
  };

=> 500,000을 넘어서는 금액이거나 0원일 경우 구매하기 버튼을 눌렀을 때 모달창이 나타나지 않도록 하기

 

=> 500,000원 초과한 상태로 구매하기 버튼 클릭 시 출력

 

=> 0원인 상태로 구매하기 버튼 클릭 시 출력

---

개인정보 입력 폼 구현

  <Form.Control type="text" placeholder="이름" maxLength={4} onChange={(e) => setName(checkName(e.target.value))} value={name} />
  <Form.Control type="tel" placeholder="000-0000-0000" maxLength={11} onChange={(e) => setPhoneNumber(checkPhoneNumber(e.target.value))} value={phoneNumber} />

 

maxLength={4}

=> 최대 입력 가능한 글자 수를 input의 속성으로 지정합니다.

 

onChange={(e) => setName(checkName(e.target.value))}

=> 입력 값을 setName으로 state를 변경해주기 전에 checkName() 함수로 입력 유효성 검사를 합니다.

 

  // ----- 개인정보입력 -----
  const [name, setName] = useState("");

  const checkName = (name) => {
    // ^:첫문자부터 $:끝문자까지 *:공백을 포함하여 1회 이상
    const checkKorean = /^[ㄱ-ㅎ|가-힣]*$/;
    if (!checkKorean.test(name)) {
      window.alert(`잘못된 입력입니다. "${name.slice(-1)}"`);
      return name.slice(0, name.length - 1);
    }

    return name;
  };
  // ----- 개인정보입력 -----

    const checkKorean = /^[ㄱ-ㅎ|가-힣]*$/;

=> 정규식을 이용해 한글의 입력을 검사합니다.

=>^:첫문자부터 $:끝문자까지 *:공백을 포함하여 1회 이상

 

    if (!checkKorean.test(name)) {

      window.alert(`잘못된 입력입니다. "${name.slice(-1)}"`);

=> 한글 입력이 아닐 경우 해당 문자열을 alert에 출력합니다.

      return name.slice(0, name.length - 1);

=> 해당 문자열을 삭제합니다.