장바구니 - 푸터가 너무 올라옴

[csm009177]

"use client";

import { useEffect, useState } from "react"; import base64, { decode } from "js-base64"; import { useRouter } from "next/navigation";

const getUsernameSomehow = () => { const token = localStorage.getItem("token");

if (token) { try { const payload = token.split(".")[1]; const decodedPayload = decode(payload); const payloadObject = JSON.parse(decodedPayload); return payloadObject.username; } catch (error) { console.error("Error parsing token:", error); } }

return null; };

interface CartItem { productName: string; price: number; adddate: string; cartItemId: number; cartKey: number; productKey: number; quantity: number; }

export default function CartPage() { const [cartItems, setCartItems] = useState<CartItem[]>([]); const [selectedCartItems, setSelectedCartItems] = useState<number[]>([]); const [canPurchase, setCanPurchase] = useState(true); const router = useRouter();

useEffect(() => { const username = getUsernameSomehow();

if (!username) {
  console.error("사용자명을 찾을 수 없습니다.");
  return;
}

fetch(`/userCart?username=${username}`)
  .then((response) => {
    if (!response.ok) {
      throw new Error("장바구니 데이터를 가져오는데 실패했습니다.");
    }
    return response.json();
  })
  .then((data) => {
    setCartItems(data);
  })
  .catch((error) => {
    console.error("Error fetching user cart:", error);
  });

}, []);

const handleCheckboxChange = (index: number) => { const selectedIndex = selectedCartItems.indexOf(index); if (selectedIndex === -1) { setSelectedCartItems([...selectedCartItems, index]); } else { const updatedSelected = selectedCartItems.filter( (item) => item !== index ); setSelectedCartItems(updatedSelected); } };

const handleDelete = async () => { try { const deleteRequests = selectedCartItems.map((index) => { const cartItemId = cartItems[index].cartKey; console.log("DELETE 요청 URL:", /deleteCartItem/${cartItemId}); console.log("DELETE 요청 데이터:", { cartItemId }); // 데이터 확인을 위해 출력 return fetch(/deleteCartItem/${cartItemId}, { method: "DELETE", }).then((response) => { if (!response.ok) { throw new Error("장바구니 항목 삭제에 실패했습니다."); } return response.json(); }); });

  const deleteResults = await Promise.all(deleteRequests);

  const isDeleteSuccess = deleteResults.every(
    (result) =>
      result.message === "장바구니 항목이 성공적으로 삭제되었습니다."
  );

  if (isDeleteSuccess) {
    const updatedCartItems = cartItems.filter(
      (_, index) => !selectedCartItems.includes(index)
    );
    setCartItems(updatedCartItems);
    setSelectedCartItems([]);
  } else {
    throw new Error("일부 장바구니 항목이 삭제되지 않았습니다.");
  }
} catch (error) {
  console.error("Error deleting cart items:", error);
}

};

const handlePurchase = () => { const selectedItems = cartItems.filter((_, index) => selectedCartItems.includes(index) ); const productPrice = selectedItems.map((item) => item.price); const productNames = selectedItems.map((item) => item.productName); const productKeys = selectedItems.map((item) => item.productKey); const quantities = selectedItems.map((item) => item.quantity); const totalPrice = selectedItems.reduce((acc, curr) => acc + curr.price, 0);

router.push(
  `/productDetail/purchase?productName=${productNames.join(
    ","
  )}&price=${productPrice.join(",")}&quantity=${quantities.join(
    ","
  )}&totalPrice=${totalPrice}&productKey=${productKeys.join(",")}`
);

};

const getTotalPrice = (): number => { const selectedItems = cartItems.filter((_, index) => selectedCartItems.includes(index) ); return selectedItems.reduce((acc, curr) => acc + curr.price, 0); };

return (

{/* 장바구니 카테고리 */}

장바구니

{/* 장바구니 아이템 목록 */}

{/* 체크박스 너비 조정 */}

이미지

상품정보

수량

합계

상품관리

{cartItems.map((item, index) => (
{/* 체크박스와 이미지 */}
handleCheckboxChange(index)} className="mr-2 w-1/" /> {/* 상품 정보 */}
{item.productName}
{item.quantity} 개
{item.price} 원
상품 삭제
))}

{/* 총 결제금액 */}

총 결제금액: {getTotalPrice()} 원

{/* 상품 구매 버튼 */} { if (canPurchase) { handlePurchase(); } }} className="bg-blue-500 text-white px-4 py-2 rounded-md mt-4 self-end" > 선택 상품 구매

); }