💎 React

장바구니 창 조절

ji-hyun 2021. 12. 3. 13:34

 

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