From 29ea1292bcbf038c04578a8bfd6d38d1fe397699 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=EA=B0=80=EC=9D=80?=
 <eunii@NUTELLA-MacBookPro.local>
Date: Mon, 17 Jun 2024 22:04:06 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=EC=9E=A5=EB=B0=94=EA=B5=AC=EB=8B=88=20?=
 =?UTF-8?q?=EB=B0=B1=EC=97=94=EB=93=9C=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Cart/Cart.jsx | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/Cart/Cart.jsx b/src/Cart/Cart.jsx
index 1b5475d..f1f2a4a 100644
--- a/src/Cart/Cart.jsx
+++ b/src/Cart/Cart.jsx
@@ -6,11 +6,20 @@ import './Cart.css';
 
 function Cart({ isLoggedIn }) {
   const [items, setItems] = useState([]);
+  const [total, setTotal] = useState(0);
 
   useEffect(() => {
-    fetch('/data.json')
-      .then(response => response.json())
-      .then(data => setItems(data))
+    fetch('http://localhost:8080/api/cart/1')  // 백엔드 API 엔드포인트로 변경
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .then(data => {
+        setItems(data.items);  // 백엔드 응답에서 items만 설정
+        setTotal(data.total);  // 백엔드 응답에서 total 설정
+      })
       .catch(error => console.error('Error fetching data:', error));
   }, []);
 
@@ -29,22 +38,20 @@ function Cart({ isLoggedIn }) {
           <p style={{textAlign:"center",fontSize:'25px',borderRadius:'20px',padding:'10px'}}>Your cart is empty.</p>
         ) : (
           <>
-            {items.map(item => (
-              <div key={item.id} className='cart-item'>
-                <img className='cart-item-img' src={item.src} alt="사진" />
+            {items.map((item, index) => (
+              <div key={index} className='cart-item'>
+                <img className='cart-item-img' src={item.img_url} alt={item.name} />
                 <span className='cart-item-name'>{item.name}</span>
                 <span className='cart-item-price'>{item.price.toLocaleString()}$</span>
                 <span className='cart-item-amount'>Amount: {item.amount}</span>
               </div>
             ))}
-            
           </>
         )}
-       
       </div>
       <div className="cart-total">
-              Total Price: {items.reduce((acc, item) => acc + item.price * item.amount, 0).toLocaleString()}$
-            </div>
+        Total Price: {total.toLocaleString()}$
+      </div>
     </div>
   );
 }

From 8fbf982e13ed999a86b196e4c654ce067fdf0d11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=EA=B0=80=EC=9D=80?=
 <eunii@NUTELLA-MacBookPro.local>
Date: Mon, 17 Jun 2024 22:19:27 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=EC=9E=A5=EB=B0=94=EA=B5=AC=EB=8B=88=20?=
 =?UTF-8?q?=EB=B0=B1=EC=97=94=EB=93=9C=20=EC=97=B0=EA=B2=B0=20=EC=A4=91=20?=
 =?UTF-8?q?</div>=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Cart/Cart.jsx | 47 ++++++++++++++++++++++-------------------------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/Cart/Cart.jsx b/src/Cart/Cart.jsx
index f1a92d4..d073c7f 100644
--- a/src/Cart/Cart.jsx
+++ b/src/Cart/Cart.jsx
@@ -30,32 +30,29 @@ function Cart({ isLoggedIn }) {
         {isLoggedIn ? <AfterNavigation /> : <BeforeNavigation />}
       </div>
       <div className='cart-body'>
-      <h1 id='title'>C A R T</h1>
-      <h2 id='itemlist'>ITEM LIST</h2>
-      <div className="cart-item-list">
-        {items.length === 0 ? (
-          <p style={{textAlign:"center",fontSize:'25px',borderRadius:'20px',padding:'10px',opacity:'0.5'}}>Your cart is empty.</p>
-        ) : (
-          <>
-            {items.map((item, index) => (
-              <div key={index} className='cart-item'>
-                <img className='cart-item-img' src={item.img_url} alt={item.name} />
-                <span className='cart-item-name'>{item.name}</span>
-                <span className='cart-item-price'>{item.price.toLocaleString()}$</span>
-                <span className='cart-item-amount'>Amount: {item.amount}</span>
-              </div>
-            ))}
-          </>
-        )}
+        <h1 id='title'>C A R T</h1>
+        <h2 id='itemlist'>ITEM LIST</h2>
+        <div className="cart-item-list">
+          {items.length === 0 ? (
+            <p style={{textAlign:"center",fontSize:'25px',borderRadius:'20px',padding:'10px',opacity:'0.5'}}>Your cart is empty.</p>
+          ) : (
+            <>
+              {items.map((item, index) => (
+                <div key={index} className='cart-item'>
+                  <img className='cart-item-img' src={item.img_url} alt={item.name} />
+                  <span className='cart-item-name'>{item.name}</span>
+                  <span className='cart-item-price'>{item.price.toLocaleString()}$</span>
+                  <span className='cart-item-amount'>Amount: {item.amount}</span>
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+        <h2 id='itemlist'>TOTAL</h2>
+        <div className="cart-total">
+          Total Price: {total.toLocaleString()}$
+        </div>
       </div>
-      <h2 id='itemlist'>TOTAL</h2>
-      <div className="cart-total">
-        Total Price: {total.toLocaleString()}$
-      </div>
-              Total Price: {items.reduce((acc, item) => acc + item.price * item.amount, 0).toLocaleString()}$
-            </div>
-      </div>
-
     </div>
   );
 }