Cart.js
import React, { Component } from 'react';
import './Cart.scss';
import CartItem from './CartItem';
import product1 from './product1.JPG';
class Cart extends Component {
state = {
cartItems: null,
seletedCartItems: {},
};
handleDelete = () => {
this.setState({
cartItems: this.state.cartItems.filter(
item => !this.state.seletedCartItems[item.id]
),
});
const selectedCartItems = Object.entries(
this.state.seletedCartItems
).reduce((acc, { key, value }) => {
if (value) {
return acc;
}
return {
...acc,
[key]: value,
};
}, {});
};
handleClickCheck = id => {
this.setState({
seletedCartItems: {
...this.state.seletedCartItems,
[id]: !this.state.seletedCartItems[id],
},
});
};
componentDidMount() {
fetch('http://localhost:3000/data/cartItems.json')
.then(res => res.json())
.then(res => {
console.log(res);
this.setState({
cartItems: res.cartItems,
});
});
}
render() {
return (
<div className="cartComponent">
<div className="orderWrap">
<div className="orderTitle">
<h2>장바구니</h2>
<ol>
<li className="pageOn">
<span>01</span>
장바구니
<span>
▶
<img src="" />
</span>
</li>
<li>
<span>02</span>
주문서작성/결제
<span>
▶
<img src="" />
</span>
</li>
<li className="pageOn">
<span>03</span>
주문완료
<span>
<img src="" />
</span>
</li>
</ol>
</div>
<div className="cartContent">
<form id="formCart" method="POST">
<div className="cartContentList">
<div className="orderTable">
<colgroup>
<col style={{ width: '3%' }}></col>
<col></col>
<col style={{ width: '5%' }}></col>
<col style={{ width: '10%' }}></col>
<col style={{ width: '13%' }}></col>
<col style={{ width: '10%' }}></col>
<col style={{ width: '10%' }}></col>
</colgroup>
<thead>
<tr>
<th>
<div className="formElement">
<input type="checkbox" />
<label></label>
</div>
</th>
<th>상품/옵션 정보</th>
<th>수량</th>
<th>상품 금액</th>
{/* <th class="dn">할인/적립</th>
<th class="dn">합계금액</th> */}
<th>배송비</th>
</tr>
</thead>
<tbody>
{this.state.cartItems ? (
this.state.cartItems.map((cartItem, index) => {
return (
<CartItem
rowspan={
index === 0 ? this.state.cartItems.length : null
}
count={cartItem.count}
price={cartItem.price}
name={cartItem.name}
id={cartItem.id}
onClickCheck={this.handleClickCheck}
/>
);
})
) : (
<p>장바구니가 비었습니다. 텅~</p>
)}
</tbody>
</div>
</div>
</form>
<div className="btnContinue">
<a>
<em> < 쇼핑 계속하기</em>
</a>
</div>
<div className="priceSum">
<div className="priceSumContent">
<dl className="dl1">
<dt>
총<strong>2 </strong>개의 상품금액
</dt>
<dd>
<strong>34,900</strong>원
</dd>
</dl>
<span>
➕
<img />
</span>
<dl className="dl2">
<dt> 배송비</dt>
<dd>
<strong>0</strong>원
</dd>
</dl>
<span>
🔀
<img />
</span>
<dl className="dl3">
<dt>합계</dt>
<dd>
<strong className="dl3Amount">34,900</strong>원
</dd>
</dl>
</div>
</div>
<div className="btnOrderBox">
<div className="btnLeftOrder">
<button onClick={this.handleDelete}>선택상품 삭제</button>
<button>선택상품 찜</button>
</div>
<div className="btnRightOrder">
<button>선택상품 주문</button>
<button>전체상품 주문</button>
</div>
</div>
<div className="checkPoint">
<em>
❕ 주문서 작성단계에서 할인/적립금 적용을 하실 수 있습니다.
</em>
</div>
</div>
</div>
</div>
);
}
}
export default Cart;
Cart.scss
.cartComponent {
.orderWrap {
width: 1200px;
margin: 0 auto;
padding: 40px 0 150px 0;
.orderTitle {
border-bottom: 1px solid #dbdbdb;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
padding-bottom: 20px;
h2 {
font-size: 28px;
font-weight: bold;
}
ol {
display: flex;
.pageOn {
color: #d1d1d1;
}
li {
font-size: 14px;
font-weight: bold;
// color: #d1d1d1;
span {
padding: 0 7px;
img {
}
}
}
}
}
.cartContent {
form {
.cartContentList {
// margin: 50px 0 10px 0;
font-size: 12px;
font-weight: bold;
.orderTable {
text-align: center;
colgroup {
}
thead {
// padding: 10px 0;
border-collapse: collapse;
text-align: center;
tr {
th {
padding: 10px 0;
background: #f7f7f7;
border-bottom: 1px solid #dbdbdb;
border-top: 1px solid #999999;
.formElement {
input {
}
label {
}
}
}
}
}
tbody {
tr {
td {
padding: 30px 0;
vertical-align: middle;
border-bottom: 1px solid #dbdbdb;
color: #777777;
}
.tdCheck {
text-align: middle;
div {
input {
}
label {
}
}
}
.tdLeft {
.pickContent {
display: flex;
align-items: center;
.pickImage {
margin-right: 5px;
a {
img {
}
}
}
.pickInformation {
// .pickBtnCoupon {
// a {
// img {
// }
// }
// }
a {
}
}
}
}
.tdOrderAmount {
.orderNumber {
strong {
width: 100px;
display: block;
color: #333333;
font-size: 13px;
font-weight: 600;
margin-bottom: 5px;
}
.orderNumberChange {
a {
font-size: 11px;
display: block;
padding: 5px;
border: 1px solid #dbdbdb;
vertical-align: middle;
color: #333;
span {
}
}
}
}
}
.tdOrderPrice {
vertical-align: middle;
strong {
}
p {
}
}
.tdDelivery {
border-left: 1px solid #ebebeb;
br {
}
}
}
}
}
}
}
.btnContinue {
height: 20px;
font-size: 12px;
text-align: left;
a {
border-bottom: 1px solid #333333;
display: inline-block;
em {
}
}
}
.priceSum {
border: 2px solid #d6d6d6;
padding: 30px 40px;
margin-top: 30px;
font-size: 16px;
.priceSumContent {
display: flex;
justify-content: flex-end;
align-items: center;
dl {
font-size: 16px;
text-align: right;
dt {
font-size: 16px;
display: inline-block;
margin-bottom: 5px;
strong {
font-weight: bold;
}
}
dd {
strong {
font-weight: bold;
}
.dl3Amount {
color: #29c1bc !important;
font-size: 18px;
}
}
}
span {
display: inline-block;
padding: 0 20px;
img {
}
}
.priceTotal {
}
}
}
.btnOrderBox {
padding-top: 30px;
display: flex;
justify-content: space-between;
.btnLeftOrder {
font-size: 12px;
button {
font-size: 12px;
width: 120px;
border: 1px solid #a3a3a3;
line-height: 28px;
height: 30px;
color: #626262;
background: white;
margin-right: 10px;
}
}
.btnRightOrder {
font-size: 14px;
button {
width: 190px;
height: 55px;
padding: 0 20px;
color: white;
font-size: 14px;
background: black;
border: 1px solid #000;
cursor: pointer;
font-weight: bold;
margin-left: 10px;
}
}
}
em {
font-size: 12px;
margin-top: 10px;
float: right;
}
}
}
}
cartItem.js
import React, { Component } from 'react';
import product1 from './product1.JPG';
class CartItem extends Component {
render() {
return (
<tr>
<td className="tdCheck">
<div className="formElement">
<input
type="checkbox"
onChange={() => this.props.onClickCheck(this.props.id)}
/>
<label></label>
</div>
</td>
<td className="tdLeft">
<div className="pickContent">
<span className="pickImage">
<a>
<img src={product1} />
</a>
</span>
<div className="pickInformation">
{/* <div className="pickBtnCoupon">
<a>
<img />
</a>
</div> */}
<a>{this.props.name} </a>
</div>
</div>
</td>
<td className="tdOrderAmount">
<div className="orderNumber">
<strong>{this.props.count}개</strong>
<div className="orderNumberChange">
<a>
<span>옵션/수량변경</span>
</a>
</div>
</div>
</td>
<td className="tdOrderPrice">
<strong>{this.props.price}원</strong>
<p></p>
</td>
{this.props.rowspan ? (
<td className="tdDelivery" rowspan={this.props.rowspan}>
기본배송비
<br />
2,500원
<br />
(택배-선결제)
</td>
) : null}
</tr>
);
}
}
export default CartItem;
마음도 몸도 튼튼한 개발자