[TIL/React] 2023/08/18

CardComponent 🟠

1. src/components/common/ProductCard.js

import React from "react";
import { styled } from "styled-components";
import ComponentWrapper from "./ComponentWrapper";
import { products } from "../../data/ProductList";

const ProductWrapper = styled.div`
  width: calc(33.3% - 40px);
  margin: 10px;
`;

const ProductImgWrapper = styled.div`
  background-color: rgb(249, 247, 248);
  width: 100%;
  height: 400px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  box-shadow: 0px 10px 8px #999;
`;

const ProductImage = styled.img`
  width: 100%;
  height: auto;
`;

const ProductInfoTitle = styled.p`
  font-weight: bolder;
  font-size: 25px;
`;

const ProductInfoEtc = styled.p`
  color: #9b9b9b;
  font-weight: bolder;
`;

const ProductCard = () => {
  return (
    <ComponentWrapper style={{ display: "flex", flexWrap: "wrap" }}>
      {products?.map((product) => (
        <ProductWrapper key={product?.id}>
          <ProductImgWrapper>
            <ProductImage src={product?.image} />
          </ProductImgWrapper>
          <div>
            <ProductInfoTitle>{product?.title}</ProductInfoTitle>
            <ProductInfoEtc>
              {product?.price} / {product?.weight}
            </ProductInfoEtc>
          </div>
        </ProductWrapper>
      ))}
    </ComponentWrapper>
  );
};

export default ProductCard;

2. src/data/ProductList.js

import {
  porkImg,
  chickenImg,
  porkcutletImg,
  eggImg,
  milkImg,
  hanuroundImg,
  carthegardenImg,
} from "../images";

export const products = [
  {
    id: "1",
    image: porkImg,
    title: "초신선 돼지 삼겹살 구이용",
    price: "기준가 19,800원",
    weight: "600g",
  },
  {
    id: "2",
    image: chickenImg,
    title: "초신선 닭볶음탕",
    price: "기준가 7,800원",
    weight: "950g",
  },
  {
    id: "3",
    image: porkcutletImg,
    title: "초신선 등심 돈까스",
    price: "기준가 12,500원",
    weight: "770g",
  },
  {
    id: "4",
    image: eggImg,
    title: "초신선 동물복지 무항생제 유정란",
    price: "기준가 6,900원",
    weight: "12구",
  },
  {
    id: "5",
    image: milkImg,
    title: "초신선 무항생제 우유",
    price: "기준가 3,600원",
    weight: "900ml",
  },
  {
    id: "6",
    image: hanuroundImg,
    title: "초신선 이유식용 한우 우둔 다짐육",
    price: "기준가 17,100원",
    weight: "180g",
  },
  {
    id: "7",
    image: carthegardenImg,
    title: "나가거든 님",
    price: "기준가 39,800원",
    weight: "980g",
  },
];

3. src/pages/Home.js

import React from "react";
import { backgroundImg } from "../images";
import ComponentWrapper from "../components/common/ComponentWrapper";
import TestComponent from "../components/common/TestComponent";
import ProductCard from "../components/common/ProductCard";
const Home = () => {
  return (
    <>
      <div style={{ backgroundColor: "white", height: "1000px" }}>
        <img src={backgroundImg} style={{ width: "100%", height: "100%" }} />
      </div>
      <div
        style={{
          backgroundColor: "white",
          height: "1000px",
          overflowX: "auto",
        }}
      >
        <ProductCard />
      </div>

      <div style={{ backgroundColor: "gray", height: "1000px" }}></div>
      <div style={{ backgroundColor: "white", height: "1000px" }}></div>
    </>
  );
};

export default Home;

product list에 대한 데이터 구조를 잡고, 카드 컴포넌트에 map을 통해 적용한 뒤, home page에서 해당 컴포넌트를 렌더링하는 구조이다.

4. 현재

코드는 조잡하나 디자인은 마음에 든다.