Merge pull request #5 from KDT5TeamWink/KimHaEun

[230615]2차PR-김하은
KDT1-FE · Jun 14, 2023 · f16074d · f16074d
2 parents b086e45 + 5766416
commit f16074d
Show file tree

Hide file tree

Showing 5 changed files with 384 additions and 278 deletions.
diff --git a/src/Components/Views/CartPage/CartItems/CartItems.scss b/src/Components/Views/CartPage/CartItems/CartItems.scss
@@ -28,12 +28,12 @@
   .ProductNameBox {
     @include CartNameStyle;
     width: 60px;
-    left: 300px;
+    left: 400px;
   }
 
   .PriceNameBox{
     @include CartNameStyle;
-    right: 450px;
+    right: 400px;
   }
 
   .NumberBox{
@@ -43,7 +43,7 @@
 
   .DeleteNameBox{
     @include CartNameStyle;
-    right: 100px;
+    right: 120px;
   }
 
 
@@ -56,8 +56,8 @@
     overflow-y: auto; /* 세로 스크롤 생성 */  
 
     .ItemContainer {
-      width: 1180px;
-      height: 90px;
+      width: 1182px;
+      padding-bottom: 5px;
       position: relative;
       margin-top: 20px;
       border-bottom: 2px solid rgb(208, 203, 185);
@@ -66,34 +66,34 @@
         width: 60px;
         height: 40px;
         position: absolute;
-        top: 12px;
+        top: 40px;
         left: 30px;  
       }
 
       .ImageBox{
         width: 100px;
-        height: 100px;
-        margin-left: 150px;
+        //height: 100px;
+        position: relative;
+        bottom: 10px;
+        margin-left: 120px;
+        background-color: rebeccapurple;
 
         img{
-          position: absolute;
+          //position: absolute;
           width: inherit;
-          height: 80px;
+          background-color: orange;
+          height: auto;
         }
       }
 
       .TextInner {
-        width: 400px;
-        height: 100px;
+        width: 450px;
+        padding-bottom: 30px;
         position: absolute;
-        top: 1px;
+        top: 50px;
         left: 260px;
-        font-size: 20px;
-
+
         span:nth-child(1) {
-          width: 400px;
-          height: 20px;
-          position: absolute;
           font-size: 20px;
         }
 
@@ -107,57 +107,29 @@
       }
 
       .PriceInner{
-        width: 150px;
-        height: 90px;
+        width: auto;
+        padding-bottom: 10px;
+        top: 50px;
         position: absolute;
-        top: -10px;
-        right: 350px;
-        //background-color: olivedrab;
-        display: table-column;
+        right: 370px;
+        background-color: olivedrab;
         font-size: 15px;
 
-
-        span:nth-child(1){
-          width: 100px;
-          height: 20px;
-          position: absolute;
-        }
-
-        span:nth-child(2){
-          height: 30px;
-          position: absolute;
-          margin-top: 30px;
-        }
-
-        span:nth-child(3){
-          height: 30px;
-          position: absolute;
-          margin-top: 60px;
-        }
-    }
-
-    .ChooseNumber{
-      width: 90px;
-      height: 50px;
-      //background-color: brown;
-      position: absolute;
-      right: 220px;
-      top: 15px;
+
     }
 
     .CartButtonBox{
       width: 60px;
-      height: 60px;
       position: absolute;
-      top: 15px;
+      top: 30px;
       right: 100px;
       //background-color: burlywood;
 
       button{
         display: block;
         width: 50px;
         height: 30px;
-        margin-top: 5px;
+        margin-top: 10px;
       }
     }
   }

diff --git a/src/Components/Views/CartPage/CartItems/CartItems.tsx b/src/Components/Views/CartPage/CartItems/CartItems.tsx
@@ -1,104 +1,81 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useState } from 'react';
 import Box from '@mui/material/Box';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import YearBox from 'Common/section/number';
 import './CartItems.scss';
 
-function CartItems() {
-  interface Item {
-    id: number;
-    // image:string;
-    name: string;
-    text: string;
-    price: string;
-    sale: string;
-    malize: string;
-  }
+interface BuyItem {
+  id: number;
+  product_name: string;
+  price: number;
+  detail_image: string;
+}
+
+interface CartItemsProps {
+  check: number[];
+  pitem: any;
+  setItems:any;
+
+}
 
+const CartItems = ({ check, pitem, setItems }: CartItemsProps) => {
   const [info, setInfo] = useState([]);
-  const [checked, setChecked] = useState([true, false]);
-  const [items, setItems] = useState<Item[]>([
-    {
-      id: 1,
-      name: '[국내도서]시작하세요! C# 10프로그래밍',
-      text: '*밤 11시 잠들기전 배송',
-      price: '정가: 36000',
-      sale: '판매가:32,400',
-      malize: '마일리지: 1,800원',
-    },
-    {
-      id: 2,
-      name: '도서명2',
-      text: '*밤 11시 잠들기전 배송',
-      price: '정가: 36000',
-      sale: '판매가:32,400',
-      malize: '마일리지: 1,800원',
-    },
-    {
-      id: 3,
-      name: '도서명3',
-      text: '*밤 11시 잠들기전 배송',
-      price: '정가: 36000',
-      sale: '판매가:32,400',
-      malize: '마일리지: 1,800원',
-    },
-    {
-      id: 4,
-      name: '도서명3',
-      text: '*밤 11시 잠들기전 배송',
-      price: '정가: 36000',
-      sale: '판매가:32,400',
-      malize: '마일리지: 1,800원',
-    },
-    {
-      id: 5,
-      name: '도서명3',
-      text: '*밤 11시 잠들기전 배송',
-      price: '정가: 36000',
-      sale: '판매가:32,400',
-      malize: '마일리지: 1,800원',
-    },
-  ]);
-  const [checkedItems, setCheckedItems] = useState<number[]>([]);
+  const [buyItem, setbuyItem] = useState<BuyItem[]>([]);
+  const [checkedItems, setCheckedItems] = useState<number[]>(check);
+
+
+  useEffect(() => {
+    BuyCart();
+  }, []);
+
+  const BuyCart = () => {
+    const BuyItems = JSON.parse(localStorage.getItem("cart")) || [];
+    setbuyItem(BuyItems);
+    console.log(BuyItems)
+  }
 
   const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
     const checkedValue = event.target.checked;
     const updatedCheckedItems = checkedValue
-      ? items.map((item) => item.id)
+      ? buyItem.map((item) => item.id)
       : [];
-    setCheckedItems(updatedCheckedItems);
+    setCheckedItems(updatedCheckedItems);  
   };
 
-  const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange2 = (el: any) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(el);
     const itemId = parseInt(event.target.name);
     let updatedCheckedItems: number[] = [];
-
+    let updatedItems: any[] = [];
     if (event.target.checked) {
       updatedCheckedItems = [...checkedItems, itemId];
+      updatedItems = [...pitem , el];
     } else {
       updatedCheckedItems = checkedItems.filter((id) => id !== itemId);
-    }
+      updatedItems = pitem.filter((key) => key.product_no !== el.product_no);
+    } 
+    setItems(updatedItems);
     setCheckedItems(updatedCheckedItems);
+    setCheck(updatedCheckedItems);
   };
 
-  const children = (itemId: number) => (
+  const children = (el:any ,index:number) => (
     <Box
       sx={{
         display: 'flex',
         flexDirection: 'column',
         ml: 3,
         fontSize: 'large',
-      }}
-    >
+      }}>
       <FormControlLabel
         label=""
         control={
           <Checkbox
-            checked={checkedItems.includes(itemId)}
-            onChange={handleChange2}
-            name={itemId.toString()}
+            checked={checkedItems.includes(index)}
+            onChange={handleChange2(el)}
+            name={index}
           />
         }
       />
@@ -113,6 +90,26 @@ function CartItems() {
     });
   };
 
+  const RemoveBuyItem = (index: number, key:any) => {
+    console.log(key);
+    const confirmation = window.confirm('삭제하시겠습니까?');
+    if (confirmation) {
+
+      const updatedCartData = JSON.parse(localStorage.getItem('cart'));
+      localStorage.setItem('cart', JSON.stringify(updatedCartData.filter((item) => item.product_no !== key)));
+
+      const updatedBuyItem = [...buyItem];
+      //선택한 index 1개를 buyItem 배열에서 제거.
+      updatedBuyItem.splice(index, 1);
+      // 제거한후의 값 setState 갑에 담아줌.
+      setbuyItem(updatedBuyItem);
+      // cart 키 값으로 로컬에서 데이터 찾아옴
+      alert('삭제되었습니다.');
+    } else {
+      alert('취소되었습니다.');
+    }
+  };
+
   return (
     <>
       <div className="CartPageTable__Buy">
@@ -122,20 +119,16 @@ function CartItems() {
             <div className="LableBox">
               <Checkbox
                 size="large"
-                checked={checkedItems.length === items.length}
+                checked={checkedItems.length === buyItem.length}
                 indeterminate={
-                  checkedItems.length > 0 && checkedItems.length < items.length
+                  checkedItems.length > 0 && checkedItems.length < buyItem.length
                 }
                 onChange={handleChange1}
               />
             </div>
           }
         />
 
-        {/* <div className="Product-Buy">
-        <span>구매</span>
-      </div> */}
-
         <div className="ProductNameBox">
           <span>상품명</span>
         </div>
@@ -150,25 +143,23 @@ function CartItems() {
       </div>
 
       <div className="ItemsContainer">
-        {items.map((item) => (
-          <div className="ItemContainer">
-            <div className="CheckContainer">{children(item.id)}</div>
-            <div key={item.id} className="ImageBox">
-              <img src="/images/cartbookimage.jpg" alt="cartbookimage" />
+        {buyItem.map((el, index) => (
+          <div className="ItemContainer" key={index}>
+            {/* 아이템 체크 하는 부분 */}
+            <div className="CheckContainer">{children(el, index)}</div>
+            <div key={el.id} className="ImageBox">
+              <img src={el.detail_image} alt="cartbookimage" />
             </div>
             <div className="TextInner">
-              <span>{item.name}</span>
-              <span>{item.text}</span>
+              <span>{el.product_name}</span>
             </div>
 
             <div className="PriceInner">
-              <span>{item.price}</span>
-              <span>{item.sale}</span>
-              <span>{item.malize}</span>
+              <span>{Number(el.price).toFixed(0)}원</span>
             </div>
 
             <div className="CartButtonBox">
-              <button>삭제</button>
+              <button onClick={() => RemoveBuyItem(index, el.product_no)}>삭제</button>
             </div>
           </div>
         ))}