[TIL/React] 2023/08/31

쇼핑하기 페이지 구현 🟠

1. iamge

정육각 홈페이지에서 이미지를 추출해 옴!, 객체 형태로 각 이미지를 구성한 다음, shoppingMainImg라는 이름으로 export

2. data

import { shoppingMainImg } from "../images";

export const shoppingCategoryList = [
  {
    id: "1",
    title: "돼지",
    mainImage: shoppingMainImg.shoppingMainImg1,
  },
  {
    id: "2",
    title: "소",
    mainImage: shoppingMainImg.shoppingMainImg2,
  },
  {
    id: "3",
    title: "닭",
    mainImage: shoppingMainImg.shoppingMainImg3,
  },
  {
    id: "4",
    title: "수산",
    mainImage: shoppingMainImg.shoppingMainImg4,
  },
  {
    id: "5",
    title: "밀키트",
    mainImage: shoppingMainImg.shoppingMainImg5,
  },
  {
    id: "6",
    title: "우유",
    mainImage: shoppingMainImg.shoppingMainImg6,
  },
  {
    id: "7",
    title: "달걀",
    mainImage: shoppingMainImg.shoppingMainImg7,
  },
  {
    id: "8",
    title: "이유식",
    mainImage: shoppingMainImg.shoppingMainImg8,
  },
];

카테고리 리스트에서는 id, title, image를 객체로 담아 배열화 함!

3. shopping page

import React, { useState } from "react";
import styled from "@emotion/styled";
import ComponentWrapper from "../components/common/ComponentWrapper";
import { shoppingCategoryList } from "../data/ShoppingCategoryList";

const ShoppingMainImgWrapper = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const ShoppingMainImg = styled.img`
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
`;

const ShoppingCategoryButton = styled.button`
  background-color: ${(props) => (props.isSelected ? "black" : "#f2f2f2")};
  border: none;
  color: ${(props) => (props.isSelected ? "white" : "black")};
  font-weight: bolder;
  width: 100%;
  height: 60px;
  &:hover {
    background-color: black;
    color: white;
  }
`;

const ShoppingPage = () => {
  const [selectedCategory, setSelectedCategory] = useState(null);

  const handleShoppingPageViewClick = (category) => {
    setSelectedCategory(category);
  };

  return (
    <div>
      <ShoppingMainImgWrapper>
        {shoppingCategoryList?.map((elem) => (
          <ShoppingMainImg
            key={elem.id}
            src={elem.mainImage}
            alt={elem.title}
            style={{
              display: selectedCategory === elem.id ? "flex" : "none",
            }}
          />
        ))}
      </ShoppingMainImgWrapper>

      <ComponentWrapper>
        <div
          style={{
            display: "flex",
            justifyContent: "space-around",
            width: "100%",
            marginTop: "100px",
            columnGap: "10px",
          }}
        >
          {shoppingCategoryList?.map((elem) => (
            <div style={{ width: "100%" }}>
              <ShoppingCategoryButton
                key={elem.id}
                isSelected={selectedCategory === elem.id}
                onClick={() => handleShoppingPageViewClick(elem.id)}
              >
                {elem.title}
              </ShoppingCategoryButton>
            </div>
          ))}
        </div>
      </ComponentWrapper>
    </div>
  );
};

export default ShoppingPage;

구현하는데 집중해서 코드가 많이 조잡하다!

4. 현재 모습

회고 🔵

만학도의 개강은 너무도 두렵다...! 근데 어쩔건데? 원민관 너가 뭘 할 수 있는데? 8월도 고생 많았다!