[TIL/React] 2023/10/05

반응형 🟢

px(픽셀)과 같은 고정 단위를 쓰면 위와 같이 처참한 결과를 얻을 수 있다. 코드를 수정했다.

import React from "react";
import { useParams, useLocation, useNavigate } from "react-router-dom";
import styled from "@emotion/styled";
import { shoppingData } from "../data/ShoppingCategory_Pork";
import ComponentWrapper from "../components/common/ComponentWrapper";
import { useSelector } from "react-redux";

const ProductDetailPageBackgroundStyle = styled.div`
  background-color: #181818;
  width: 100%;
  /* height: 100vh; */
`;

const AllContentWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  /* flex-grow: 1; */
  /* background-color: white; */
  @media (max-width: 900px) {
    flex-wrap: wrap;
    column-gap: 20px;
  }
`;

const ProductDetailPageImgWrapper = styled.div`
  /* height: 70%;
  width: 50%; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
`;

const ProductImg = styled.img`
  width: 80%;
  height: 80%;
`;

const ProductDetailPageInfoWrapper = styled.div`
  /* width: 50%;
  height: 70%; */
  display: flex;
  flex-direction: column;
  background-color: blue;
`;

const ProductDetailPageInfoDataWrapper = styled.div`
  height: 30%;
`;

const InfoDataTitle = styled.p`
  font-size: 30px;
  color: white;
  font-weight: bolder;
`;

const InfoDataEtc = styled.p`
  font-size: 20px;
  color: white;
  font-weight: bolder;
`;

const OptionWrapper = styled.div`
  display: flex;
  align-items: center;
  column-gap: 20px;
  height: 20%;
  color: white;
`;

const AmountWrapper = styled.div`
  display: flex;
  align-items: center;
  column-gap: 20px;
  height: 20%;
  color: white;
`;

const ButtonWrapper = styled.div`
  width: 100%;
  background-color: orange;
  display: flex;
  height: 30%;
  justify-content: space-evenly;
  align-items: center;
`;

const ProductDetailPage = () => {
  const navigate = useNavigate();
  const { id } = useParams();
  const location = useLocation();
  const category = location?.state;
  const check = useSelector((state) => state.auth);
  console.log(check);

  const handleDirectClick = () => {
    if (check.isAuthenticated) {
      console.log("결제화면으로");
    } else {
      navigate("/login");
    }
  };

  const MapData = shoppingData[category];
  const DetailData = MapData.find((elem) => elem?.id === id);
  const ImgSrc = DetailData.image;

  console.log(location);
  console.log(DetailData);
  console.log(ImgSrc);

  return (
    <>
      <ProductDetailPageBackgroundStyle>
        {/*  */}
        <ComponentWrapper style={{ height: "100%" }}>
          <AllContentWrapper>
            {/* image area */}
            <ProductDetailPageImgWrapper>
              <ProductImg src={ImgSrc} />
            </ProductDetailPageImgWrapper>
            {/* info area */}
            <ProductDetailPageInfoWrapper>
              <ProductDetailPageInfoDataWrapper>
                <InfoDataTitle>{DetailData?.subtitle}</InfoDataTitle>
                <InfoDataEtc>
                  {DetailData?.price} ({DetailData?.weight})
                </InfoDataEtc>
                <p></p>
              </ProductDetailPageInfoDataWrapper>

              <OptionWrapper>
                <span style={{ color: "white", fontWeight: "bolder" }}>
                  옵션
                </span>
                <div style={{ border: "2px solid orange" }}>
                  fdsagfagfdagfdgfda
                </div>
              </OptionWrapper>
              <AmountWrapper>
                <span style={{ color: "white", fontWeight: "bolder" }}>
                  수량
                </span>
                <div style={{ border: "2px solid orange" }}>
                  fdsagfagfdagfdgfda
                </div>
              </AmountWrapper>

              <ButtonWrapper>
                <button
                  style={{
                    backgroundColor: "#7f7776",
                    color: "white",
                    width: "200px",
                    height: "60px",
                    border: "none",
                  }}
                  onClick={handleDirectClick}
                >
                  바로구매
                </button>
                <button
                  style={{
                    backgroundColor: "#c50f22",
                    color: "white",
                    width: "200px",
                    height: "60px",
                    border: "none",
                  }}
                >
                  장바구니
                </button>
              </ButtonWrapper>
            </ProductDetailPageInfoWrapper>
          </AllContentWrapper>
        </ComponentWrapper>
      </ProductDetailPageBackgroundStyle>
    </>
  );
};

export default ProductDetailPage;

수정 후 모습 🟢

코드에 대한 설명이 필요한데, 오늘은 도저히 힘이 나지 않는다. handleDirectClick 함수를 통해, 로그인이 되어 있지 않다면 login page로 이동하도록 설정했다.

회고 🟢

1) 상대적인 단위를 써야 봉변을 면할 수 있다는 점을 깨달았다.
2) 1번은 사실 이미 알고 있었는데, container 단위로 상대 단위를 써야 함을 다시금 깨달았다.
3) 문제는 2번에서 느낀 점이 맞는 것인지 의문이다.
4) 그래도 대강 구조를 잡았으니, 장바구니를 슬슬 만들도록 하자.