장바구니 페이지 / 상품 1개 이상 미 선택 시 결제 페이지 이동 제한 조작 필요.

[JungYoungSick]

현재 장바구니에서 데이터를 선택하지 않은 채 결제하기 버튼으로 넘어간다면 결제창으로 넘어가며, 금액은 0원으로 표기된다. 해당 오류를 수정 할 필요가 있다

[JungYoungSick]

return (
    <div className="flex flex-col justify-center items-center w-2/3 mx-auto mt-10 p-8 bg-gray-100 rounded-md">
      <h1 className="text-3xl font-bold mb-4">주문하기</h1>
      <p className="text-lg mb-2">배송정보</p>
      <form onSubmit={handleSubmit} className="w-full">
        <div className="flex justify-between">
          <div className="w-1/2 pr-4">
            <div className="w-full h-full bg-white px-3 py-4 text-lg rounded-md ">
              <ul>
                {productsInfo.map((product, index) => (
                  <div
                    key={index}
                    className="flex justify-around border mb-2 rounded-md"
                  >
                    <div>
                      <img
                        src={`/${product.name}.png`}
                        width={100}
                        height={100}
                      />
                    </div>
                    <div className="flex-col w-44">
                      <p className="font">상품명: {product.name}</p>
                      <div className="flex ">
                        <p className="mr-6">수량: {product.quantity}</p>
                        <div className="flex items-end">
                          <button
                            onClick={(e) => {
                              e.preventDefault();
                              handleIncrement(index);
                            }}
                            className="mr-2 bg-gray-300 rounded-md w-5"
                          >
                            +
                          </button>
                          <button
                            onClick={(e) => {
                              e.preventDefault();
                              handleDecrement(index);
                            }}
                            disabled={product.quantity <= 1}
                            className="mr-2 bg-gray-300 rounded-md w-5"
                          >
                            -
                          </button>
                        </div>
                      </div>
                      <p>금액: {product.price * product.quantity}원</p>
                      <div className="flex items-center"></div>
                    </div>
                  </div>
                ))}
              </ul>
            </div>
          </div>
          <div className="w-1/2">
            <div className="mb-4">
              <label htmlFor="customer" className="text-sm">
                주문고객
              </label>
              <input
                className="border border-gray-300 px-3 py-2 text-base rounded-md w-full"
                type="text"
                name="customer"
                id="customer"
                required
              />
            </div>
            <div className="mb-4">
              <label htmlFor="receiver" className="text-sm">
                받는 분
              </label>
              <input
                className="border border-gray-300 px-3 py-2 text-base rounded-md w-full"
                type="text"
                name="receiver"
                id="receiver"
                required
              />
            </div>
            <div className="mb-4">
              <label htmlFor="phone" className="text-sm">
                휴대폰번호
              </label>
              <input
                className="border border-gray-300 px-3 py-2 text-base rounded-md w-full"
                type="text"
                name="phoneNumber"
                id="phone"
                required
              />
            </div>
            <div className="mb-4">
              <div className="flex justify-between">
                <label htmlFor="address" className="text-sm">
                  배송주소
                </label>
                <Addr onAddressSelect={handleAddressSelect} />
              </div>
              <div className="flex items-center w-full">
                <input
                  className="border border-gray-300 px-3 py-2 text-base rounded-md w-full"
                  type="text"
                  name="address"
                  id="address"
                  value={selectedAddress.address}
                  required
                  readOnly
                />
              </div>
            </div>
            <div className="mb-4">
              <label htmlFor="addressDetail" className="text-sm">
                상세주소
              </label>
              <input
                className="border border-gray-300 px-3 py-2 text-base rounded-md w-full"
                type="text"
                name="addressDetail"
                id="addressDetail"
                onChange={handleDetailedAddressChange}
                required
              />
            </div>
          </div>
        </div>
        <div className="flex justify-end mt-4">
          <div className="w-1/2 border border-gray-300 px-3 py-2 text-base rounded-md">
            <div className="flex justify-end items-center mb-4">
              <p className="text-xl mb-2 mr-auto">총 가격 : {totalPrice}원</p>
              <button
                className="bg-blue-500 text-white px-4 py-2 rounded-md"
                type="submit"
              >
                결제하기
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  );
}