wishlist.js

wishlist.js

import React, { Component } from 'react';
import './Wishlist.scss';
import WishlistItem from './WishlistItem';
import product1 from './product1.JPG';

class Wishlist extends Component {
state = {
wishlistItems: [],
seletedWishlistItems: {},
};

handleDelete = () => {
this.setState({
wishlistItems: this.state.wishlistItems.filter(
item => !this.state.seletedWishlistItems[item.id]
),
});

const selectedwishlistItems = Object.entries(
  this.state.seletedWishlistItems
).reduce((acc, { key, value }) => {
  if (value) {
    return acc;
  }

  return {
    ...acc,
    [key]: value,
  };
}, {});

};

handleClickCheck = id => {
this.setState({
seletedWishlistItems: {
...this.state.seletedWishlistItems,
[id]: !this.state.seletedWishlistItems[id],
},
});
};

componentDidMount() {
fetch('http://10.58.4.112:8000/order/wishlist')
.then(res => res.json())
.then(res => {
console.log('페치', res.result);
this.setState({
wishlistItems: res.result,
});
});
}

render() {
console.log('상위컴포넌트 렌더', this.state);
console.log(this.state.wishlistItems[1]?.point);
return (

  <div className="wishlistComponent">
    <div className="orderWrap">
      <div className="orderTitle">
        <h2>푸핫 반가워요, 찜💘리스트</h2>
        <p>
          적립금 : 무려{' '}
          <strong>{this.state.wishlistItems[1]?.point}</strong>원
        </p>
        {/* <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 style={{ width: '60%' }}></col>
                <col style={{ width: '20%' }}></col>
                <col style={{ width: '17%' }}></col>
                {/* <col style={{ width: '13%' }}></col> */}
                {/* <col style={{ width: '20%' }}></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> */}
                </tr>
              </thead>
              <tbody>
                {this.state.wishlistItems ? (
                  this.state.wishlistItems.map(wishlistItem => {
                    return (
                      <WishlistItem
                        WishlistItems={this.state.WishlistItems}
                        // rowspan={
                        //   index === 0
                        //     ? this.state.wishlistItems.length
                        //     : null
                        // }
                        point={wishlistItem.point}
                        count={wishlistItem.quantity}
                        price={wishlistItem.price}
                        name={wishlistItem.product}
                        thumnail={wishlistItem.product_thumnail}
                        // id={wishlistItem.id}
                        onClickCheck={this.handleClickCheck}
                      />
                    );
                  })
                ) : (
                  <p>장바구니가 비었습니다. 텅~</p>
                )}
              </tbody>
            </div>
          </div>
        </form>
        {/* <div className="btnContinue">
          <a>
            <em> &lt; 쇼핑 계속하기</em>
          </a>
        </div> */}
        {/* <div className="priceSum">
          <div className="priceSumContent">
            <dl className="dl1">
              <dt>
                총<strong>100 </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>

        {/* <div className="checkPoint"> 
        <em>
            ❕ 주문서 작성단계에서 할인/적립금 적용을 하실 수 있습니다.
          </em>
        </div>  */}
      </div>
    </div>
  </div>
);

}
}

export default Wishlist;

wishlistItem

import React, { Component } from 'react';
import product1 from './product1.JPG';

class WishlistItem extends Component {
render() {
console.log('모야모야', this.props.price);
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.price}원 /{this.props.count}개
        </strong>
        <div className="orderNumberChange">
          <a>
            <span>옵션/수량변경</span>
          </a>
        </div>
      </div>
    </td>
    <td className="btnOrderBox">
      <button className="btnRightOrder">장바구니</button>
      <button className="btnLeftOrder">삭제하기</button>
    </td>
  </tr>
);

}
}

export default WishlistItem;

3. wish.scss

.wishlistComponent {
.orderWrap {
width: 700px;
margin: 0 auto;
padding: 40px 0 50px 0;
.orderTitle {
// border-bottom: 1px solid #dbdbdb;

  margin-bottom: 20px;
  padding-bottom: 20px;

  h2 {
    display: block;
    font-size: 28px;
    font-weight: bold;
  }
  p {
    margin-top: 10px;
    color: orangered;
    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 {
              height: 100px;
              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 {
                  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 {
                    }
                  }
                }
              }
            }
            .btnOrderBox {
              // padding-top: 30px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              // display: block;
              // width: 100%;
              // margin: 0 auto;
              // padding: 30px;

              .btnLeftOrder {
                display: block;
                font-size: 12px;
                width: 68px;
                border: 1px solid #a3a3a3;
                padding: 3px;

                color: #626262;
                background: white;
              }
              .btnRightOrder {
                display: block;
                font-size: 14px;

                width: 68px;

                padding: 3px;
                color: white;
                font-size: 12px;
                background: black;
                border: 1px solid #000;
                cursor: pointer;
                margin-bottom: 5px;
              }
            }
            .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;
  }
}

}
}