의류 쇼핑몰 32 | product-card 만들기

shop 컴포넌트에서 

따로 product-card를 만들어 보자. 

 

 

 

component에서 product-card.jsx, scss 파일 만들기 

 

 

 

ProductCard 내용을 채운다.

import './product-card.scss';

import Button from '../button/button'

const ProductCard = ({ product }) => {

const { name, price, imageUrl } = product;

return (

<div className='product-card-container'>

<img src={imageUrl} alt={`${name}`} />

<div className='footer'>

<span className='name'>{name}</span>

<span className='price'>{price}</span>

</div>

<Button buttonType='inverted'>ADD TO CARD</Button>

</div>

)

}

export default ProductCard;

 

 

 

Shop에서 ProductCard 쓰기.

import { useContext } from 'react';

import { ProductsContext } from '../../contexts/products.context';

import ProductCard from '../../components/product-card/product-card';

import './shop.scss';

const Shop = () => {

const { products } = useContext(ProductsContext);

return (

<div className='products-container'>

{products.map((product) => (

<ProductCard

key={product.id}

product={product} />

))}

</div>

)

}

export default Shop;

 

 

shop.scss 파일 만들어 내용 채운다

.products-container {

display: grid;

grid-template-columns: repeat(4, 1fr);

column-gap: 10px;

row-gap: 50px;

}

 

 

product-card.scss

.product-card-container {

width: 100%;

display: flex;

flex-direction: column;

height: 350px;

align-items: center;

position: relative;

img {

width: 100%;

height: 95%;

object-fit: cover;

margin-bottom: 5px;

}

button {

width: 80%;

opacity: 0.7;

position: absolute;

top: 255px;

display: none;

}

&:hover {

img {

opacity: 0.8;

}

button {

opacity: 0.85;

display: flex;

}

}

.footer {

width: 100%;

height: 5%;

display: flex;

justify-content: space-between;

font-size: 18px;

.name {

width: 90%;

margin-bottom: 15px;

}

.price {

width: 10%;

}

}

}