import React, { useState } from 'react';
import './Cart.scss';
import CartItem from '../CartItem/CartItem.js';
import '../CartItem/CartItem.scss';
const a = [{ item: 'egg' }, { item: 'egg' }, { item: 'egg' }, { item: 'egg' }]; // 불러올 데이터
function Cart({ closeCartMenu }) {
const [userCart, setUserCart] = useState([]);
const addUserCart = () => {
setUserCart(a);
};
return (
<div className="cart" onMouseLeave={closeCartMenu}>
<h2 className="cartListTitle" onClick={addUserCart}>
Cart List
</h2>
<ul className="cartListDetail">
<li className="itemPhoto">photo</li>
<li className="itemNum">num</li>
<li className="itemPrice">price</li>
<li className="itemDelete">delete</li>
</ul>
<div
class="cartItems"
style={userCart.length > 3 ? { overflowY: 'scroll' } : null}
>
{null ? ( // 임의로 null 설정
<CartItem />
) : (
<div className="noCartItem">장바구니에 담긴 상품이 없습니다</div>
)}
'💎 React' 카테고리의 다른 글
리액트 토큰 유무에 따른 UI 변경 (0) | 2021.12.09 |
---|---|
리액트 204 에러 (0) | 2021.12.08 |
상수데이터, 목데이터 (0) | 2021.12.01 |
리액트 훅, useEffect (0) | 2021.11.25 |
리액트 댓글 달기 (0) | 2021.11.24 |