user/mypage/orderList CSS 작업 이미지 및 코드

[JungYoungSick]

[JungYoungSick]

return (
    <div className="container mx-auto px-4 py-2">
      <h1 className="text-2xl font-bold text-gray-800 my-4">Order List</h1>
      <div className="overflow-x-auto">
        <table className="min-w-full bg-white">
          <thead>
            <tr className="w-full h-12 text-left text-gray-600">
              <th className="px-6 py-3 border-b-2 border-gray-200">Username</th>
              <th className="px-6 py-3 border-b-2 border-gray-200">
                ProductName
              </th>
              <th className="px-6 py-3 border-b-2 border-gray-200">Customer</th>
              <th className="px-6 py-3 border-b-2 border-gray-200">Receiver</th>
              <th className="px-6 py-3 border-b-2 border-gray-200">
                Phone Number
              </th>
              <th className="px-6 py-3 border-b-2 border-gray-200">Address</th>
              <th className="px-6 py-3 border-b-2 border-gray-200">Price</th>
              <th className="px-6 py-3 border-b-2 border-gray-200">Quantity</th>
              <th className="px-6 py-3 border-b-2 border-gray-200">AddDate</th>
              <th className="px-6 py-3 border-b-2 border-gray-200">Actions</th>
            </tr>
          </thead>
          <tbody className="text-gray-700">
            {orders.map((order) => (
              <tr key={order.orderKey} className="hover:bg-gray-100">
                <td className="px-6 py-4 border-b border-gray-200">
                  {order.username}
                </td>
                <td className="px-6 py-4 border-b border-gray-200">
                  {order.productName}
                </td>
                <td className="px-6 py-4 border-b border-gray-200">
                  {order.customer}
                </td>
                <td className="px-6 py-4 border-b border-gray-200">
                  {order.receiver}
                </td>
                <td className="px-6 py-4 border-b border-gray-200">
                  {order.phoneNumber}
                </td>
                <td className="px-6 py-4 border-b border-gray-200">
                  {order.address}
                </td>
                <td className="px-6 py-4 border-b border-gray-200">
                  {order.price}
                </td>
                <td className="px-6 py-4 border-b border-gray-200">
                  {order.quantity}
                </td>
                <td className="px-6 py-4 border-b border-gray-200">
                  {order.adddate}
                </td>
                <td className="px-6 py-4 border-b border-gray-200">
                  <button
                    onClick={() => moveOrderDetail(order)}
                    className="text-white bg-blue-500 hover:bg-blue-700 font-medium py-1 px-3 rounded"
                  >
                    상세정보
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default OrderList;

[JungYoungSick]

[JungYoungSick]

return (
    <div className="container mx-auto p-4 w-full max-w-2xl">
      <h1 className="text-2xl font-bold text-center mb-6">Order Detail</h1>
      <input type="hidden" name="orderKey" value={orderKey} />
      <div className="mb-4">
        <label className="block text-gray-700 text-sm font-bold mb-2">
          Product Name
        </label>
        <p className="p-2 bg-gray-100 rounded">{productName}</p>
      </div>
      <div className="mb-4">
        <label className="block text-gray-700 text-sm font-bold mb-2">
          Customer
        </label>
        <p className="p-2 bg-gray-100 rounded">{customer}</p>
      </div>
      <div className="mb-4">
        <label className="block text-gray-700 text-sm font-bold mb-2">
          Receiver
        </label>
        <input
          type="text"
          value={receiver}
          onChange={(e) => setReceiver(e.target.value)}
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        />
      </div>
      <div className="mb-4">
        <label className="block text-gray-700 text-sm font-bold mb-2">
          Phone Number
        </label>
        <input
          type="text"
          value={phoneNumber}
          onChange={(e) => setPhoneNumber(e.target.value)}
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        />
      </div>
      <div className="mb-6">
        <label className="block text-gray-700 text-sm font-bold mb-2">
          Address
        </label>
        <input
          type="text"
          value={address}
          onChange={(e) => setAddress(e.target.value)}
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        />
      </div>
      <div className="mb-4">
        <label className="block text-gray-700 text-sm font-bold mb-2">
          Price
        </label>
        <p className="p-2 bg-gray-100 rounded">{price}</p>
      </div>
      <div className="mb-4">
        <label className="block text-gray-700 text-sm font-bold mb-2">
          Quantity
        </label>
        <p className="p-2 bg-gray-100 rounded">{quantity}</p>
      </div>
      <button
        onClick={updateOrderTable}
        className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full"
      >
        수정하기
      </button>
    </div>
  );
}

[csm009177]

work 머지 및 병합완료