user/order css 작업 완료(배경 div 색상이 들어간 점이 추후 수정사항이다)

[JungYoungSick]

결제에 대한 정보는 가운데로 배치, css를 작업 할 예정이다.

[JungYoungSick]

css 작업은 하였으나, 현재 페이지에 회색div배경이 들어가 있는 것은 주문내역 창만 되어있다. 회원가입 느낌으로 작업하였으나 통일감이 깨지는 것이 있어, 추후 작업이 필요해보인다.

[JungYoungSick]

return (
    <div className="flex flex-col justify-center items-center w-96 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="mb-4">
          <label htmlFor="customer" className="text-sm">
            주문고객
          </label>
          <input
            className="w-full border border-gray-300 px-3 py-2 text-base rounded-md"
            type="text"
            name="customer"
            id="customer"
            required
          />
        </div>
        <div className="mb-4">
          <label htmlFor="receiver" className="text-sm">
            받는 분
          </label>
          <input
            className="w-full border border-gray-300 px-3 py-2 text-base rounded-md"
            type="text"
            name="receiver"
            id="receiver"
            required
          />
        </div>
        <div className="mb-4">
          <label htmlFor="phone" className="text-sm">
            휴대폰번호
          </label>
          <input
            className="w-full border border-gray-300 px-3 py-2 text-base rounded-md"
            type="text"
            name="phoneNumber"
            id="phone"
            required
          />
        </div>
        <div className="mb-4">
          <label htmlFor="address" className="text-sm">
            배송주소
          </label>
          <input
            className="w-full border border-gray-300 px-3 py-2 text-base rounded-md"
            type="text"
            name="address"
            id="address"
            required
          />
        </div>
        <div className="mb-4 bg-white p-4 rounded-md">
          <input type="hidden" name="price" value={totalPrice} />
          <input type="hidden" name="username" value={username} />
          <input type="hidden" name="productName" value={ProductNames} />
          <input
            type="hidden"
            name="productKey"
            value={productsInfo.map((product) => product.productKey).join(",")}
          />
          <p className="text-base font-bold mb-2">선택한 상품 목록 :</p>
          <div className="list-disc pl-6 mb-2">
            {productsInfo.map((product, index) => (
              <div key={index} className="flex justify-between">
                <span>{product.name}</span>
                <span>{product.price}원</span>
              </div>
            ))}
          </div>
        </div>
        <div className="flex justify-between items-center">
          <p className="text-xl mb-2">총 가격 : {totalPrice}원</p>
          <button
            className="bg-blue-500 text-white px-4 py-2 rounded-md"
            type="submit"
          >
            결제하기
          </button>
        </div>
      </form>
    </div>
  );
}