user / 장바구니 css 작업완료. (데이터베이스와 추가 데이터 연결 필요)

[JungYoungSick]

[JungYoungSick]

1차 : 가운데로 데이터 몰아두기.

[JungYoungSick]

2차 : 양끝으로 데이터 벌려두기.

[JungYoungSick]

양끝이 허전해서 데이터가 너무 없어보인다. 그리하여 텍스트 내용이 양끝으로 갈지 가운데로 몰지 정하지를 못했다.

커밋은 두가지 다 작성해두었지만, 내가 보았을 때 1번이 나아보여서 1번으로 진행중이다.

[JungYoungSick]

현재 연결해야 하는 url부분과 임시로 합계금액을 볼 수 있는 창을 추가해두었다. DB와 연결하여 합계금액을 볼 수 있도록 수정이 필요하다.

[JungYoungSick]

return (
    <div className="w-70vw mx-auto h-full flex flex-col items-center">
      {/* 장바구니 카테고리 */}
      <div className="flex justify-around items-center w-full p-4">
        <h1 className="text-4xl font-bold">장바구니</h1>
        <button
          className="bg-red-500 text-white px-4 py-2 rounded-md"
          onClick={handleDelete}
        >
          선택 상품 삭제
        </button>
      </div>

      {/* 장바구니 아이템 목록 */}
      <ul className="w-full">
        {cartItems.map((item, index) => (
          <li className="flex justify-around mb-4 border p-4" key={index}>
            {/* 체크박스와 이미지 */}
            <div className="flex items-center">
              <input
                type="checkbox"
                checked={selectedCartItems.includes(index)}
                onChange={() => handleCheckboxChange(index)}
              />
              {/* 이미지 데이터를 표시하는 부분 */}
              <img
                src={item.imageUrl}
                alt={item.productName}
                className="w-10 h-10 object-cover ml-4"
              />
            </div>

            {/* 상품 정보 */}
            <div className="ml-4 flex items-center">
              <div className="flex flex-col text-right">
                <p className="font-bold w-60%">{item.productName}</p>
                <p className="w-60%">{item.adddate}</p>
                <p className="w-60%">{item.price} 원</p>
                <p className="w-60%">{item.quantity} 개</p>
              </div>
            </div>
          </li>
        ))}
      </ul>

      {/* 총 결제금액 */}
      <div className="w-60% text-right mt-4">
        <p className="font-bold">총 결제금액: XXXX 원</p>
      </div>

      {/* 상품 구매 버튼 */}
      <button
        onClick={handlePurchase}
        className="bg-blue-500 text-white px-4 py-2 rounded-md mt-4"
      >
        선택 상품 구매
      </button>
    </div>
  );
}

[JungYoungSick]

이미지 불러오는 곳과 총 결제금액 연결필요.

[JungYoungSick]

[JungYoungSick]

return (
    <div className="w-70vw mx-auto h-full flex flex-col items-start ml-36 mr-36">
      {/* 장바구니 카테고리 */}
      <div className="flex justify-center w-full p-4"></div>
      <h1 className="text-5xl font-bold">장바구니</h1>
      <br />
      {/* 장바구니 아이템 목록 */}
      <div className="border-2 w-full flex justify-around px-0 py-4  bg-gray-300">
        <input type="checkbox" className="w-1/8" /> {/* 체크박스 너비 조정 */}
        <div className="p-2 text-2xl font-bold text-center">이미지</div>
        <div className="p-2 text-2xl font-bold text-center">상품정보</div>
        <div className="p-2 text-2xl font-bold text-center">수량</div>
        <div className="p-2 text-2xl font-bold text-center">합계</div>
        <div className="p-2 text-2xl font-bold text-center">상품관리</div>
      </div>
      <ul className="w-full">
        {cartItems.map((item, index) => (
          <div className="w-full border" key={index}>
            {/* 체크박스와 이미지 */}
            <div className="w-full flex justify-around items-center text-center px-8 py-4">
              <input
                type="checkbox"
                checked={selectedCartItems.includes(index)}
                onChange={() => handleCheckboxChange(index)}
                className="mr-2 w-1/"
              />
              <img
                src={`/${item.productName}.png`}
                alt={item.productName}
                className="w-1/6 h-20 object-cover"
              />
              {/* 상품 정보 */}
              <p className="font-bold w-1/6">{item.productName}</p>
              <p className="w-1/6">{item.quantity} 개</p>
              <p className="w-1/6">{item.price} 원</p>
              <button
                className="bg-red-500 text-white px-4 py-2 rounded-md w-1/8"
                onClick={handleDelete}
              >
                상품 삭제
              </button>
            </div>
          </div>
        ))}
      </ul>
      {/* 총 결제금액 */}
      <div className="w-full text-right mt-4">
        <p className="font-bold">총 결제금액: {getTotalPrice()} 원</p>
      </div>
      {/* 상품 구매 버튼 */}
      <button
        onClick={handlePurchase}
        className="bg-blue-500 text-white px-4 py-2 rounded-md mt-4 self-end"
      >
        선택 상품 구매
      </button>
    </div>
  );
}

[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 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()} 원

{/* 상품 구매 버튼 */} 선택 상품 구매

); }