2023.11.20+ 로그인 유무에 따른 장바구니 페이지 이동

const Product = () => {
  const { pid } = useParams();
  const { isPending, error, data } = useQuery({
    queryKey: ["items"],
    queryFn: () => axios.get("http://127.0.0.1:8080/").then((res) => res.data),
  });
  const [product, setProducts] = useRecoilState(productsState);
  const [cart, setCart] = useRecoilState(cartState);
  const detailData = product && product.find((v) => v.pid == pid);
  const [size, setSize] = useState("");
  const User = getUser();
  const navigate = useNavigate();
  const handleClick = () => {
    if (User) {
      let addItem = {
        pid: detailData.pid,
        name: detailData.name,
        size: size,
        price: detailData.price,
      };

      let update = [...cart, addItem];
      setCart(update);
      navigate("/cart");
    } else {
      alert("로그인 후 이용이 가능합니다");
    }
  };
  return (
    <>
      <Container>
        {isPending && <p>로딩중입니다</p>}
        <DetailContainer>
          <OrderContainer>
            <img
              src={detailData?.image && `/images/image/${detailData.image}`}
              alt=""
            />
          </OrderContainer>
          <OrderContainer>
            <Title>
              <h1>{detailData?.name && detailData?.name}</h1>
              <p>\{detailData?.price && detailData?.price}</p>
            </Title>
            <Detail>
              <span>{detailData && detailData?.description}</span>
            </Detail>
            <div style={{ display: "flex", alignItems: "center" }}>
              <span style={{ marginRight: "5px" }}>옵션 :</span>
              <select
                onChange={(e) => setSize(e.currentTarget.value)}
                style={{ width: "80%" }}>
                <option value="default">선택해주세요</option>
                <option value="S">S</option>
                <option value="M">M</option>
                <option value="L">L</option>
              </select>
            </div>
            <div style={{ display: "flex" }}>
              <button
                onClick={() => handleClick()}
                style={{
                  flex: 1,
                  background: "linear-gradient(#e66465, #9198e5)",
                  borderRadius: "5px",
                }}>
                장바구니에 추가
              </button>
            </div>
          </OrderContainer>
        </DetailContainer>
      </Container>
    </>
  );
};

export default Product;