[TIL/React] 2023/09/13

쇼핑하기 페이지 추가 🟢

import React, { useState } from "react";
import styled from "@emotion/styled";

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

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

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

const ProductInfoTitle = styled.p`
  font-weight: bolder;
  font-size: 25px;
  color: ${(props) => (props.antibioFree ? "green" : "none")};
`;

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

const ModalOverlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
`;

const ModalContent = styled.div`
  width: 1000px;
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
`;

const PurchaseButton = styled.button`
  background-color: black;
  color: white;
  cursor: pointer;
  font-size: 20px;
  border-radius: 10px;
  padding: 10px 20px;
  transition: background-color 0.3s, color 0.3s, border 0.3s;
  border: 2px solid black;
  &:hover {
    background-color: white;
    color: black;
  }
`;

const CommonCard = ({ data = {}, type = "A" }) => {
  const antibioFree = data?.subtitle?.includes("무항생제");

  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <ProductWrapper key={data?.id}>
      {/* image */}
      <ProductImgWrapper onClick={() => openModal()}>
        <ProductImage src={data?.image} />
      </ProductImgWrapper>
      {/* title case */}
      <div>
        {type === "A" ? (
          <ProductInfoTitle antibioFree={antibioFree}>
            {data?.subtitle}
          </ProductInfoTitle>
        ) : (
          <ProductInfoTitle antibioFree={antibioFree}>
            {data?.title}
          </ProductInfoTitle>
        )}
        {/* product price & weight */}
        <ProductInfoEtc>
          {data?.price} / {data?.weight}
        </ProductInfoEtc>
      </div>
      {/* modal */}
      {isModalOpen && (
        <ModalOverlay onClick={() => closeModal()}>
          <ModalContent>
            <h2>상품 정보</h2>

            <div>
              <p>{data?.subtitle}</p>
              <p>
                {data?.price} / {data?.weight}
              </p>
            </div>

            <PurchaseButton onClick={() => closeModal()}>
              {data?.subtitle}을 구매하시겠습니까?
            </PurchaseButton>
          </ModalContent>
        </ModalOverlay>
      )}
    </ProductWrapper>
  );
};

export default CommonCard;

antibioFree를 통해 subtitle에 '무항생제'가 포함된 경우, 해당 제품명의 색을 green으로 변경하는 로직을 추가했다.

이미지에 마우스를 갖다 대면 호버를 통해 이미지 배경이 검정색으로 변한다. 고기가 상당히 고급져보이는 효과가 생겼다.

isModalOpen이라는 상태와 해당 상태에 필요한 toggle 함수를 만들었다. modal을 띄우는 것이 목적이었다. 지금은 구매 버튼을 클릭하면 modal이 꺼진다.

modal까지 공용 카드의 요소로 봐야하는가에 대한 의문이 생겼다. 고민을 좀 해야겠다.

진행 🟢

호버

모달

모달 호버

회고는 아니고 대충 내일 계획 🟢

1. 선형대수 관련, 대충 정성을 다해 듣기
2. R 관련, 대충 정성을 다해 듣기
3. ANOVA 관련, 대충 정성을 다해 공부
4. Auth data 활용, 로그인 이후 AppBar UI 변경