[2주차 심화과제]JS로 야리무의 쇼핑몰

week2/cart.css

@@ -11,22 +11,38 @@ header {
 }
 
 /* 모달 css */
-.modal {
+
+.modal-section  {
+  position: fixed;
+  top: 0;
+  right: 0;
   display: flex;
-  justify-content: end;
-  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  gap: 3rem;
+
+  width: 20rem;
   height: 100vh;
+
+  padding: 2rem 1.5rem;
+  background-color: wheat;
+
+  z-index: 2;
+
+  transition: right 0.3s ease-in-out;
 }
 
-.side_bar {
-  position: fixed;
-  top: 0;
-  width: 250px;
-  height: 100%;
-  background: wheat;
-  transition: all 0.3s ease;
+.hide-modal {
+  right: -40rem;
+}
+
+.show-modal {
+  right: 0;
 }
 
+
 .modal button {
   display: inline-block;
   border: 1px solid beige;

week2/cart.html

@@ -19,23 +19,22 @@ <h1>장바구니 페이지</h1>
     </header>
     <!--오른쪽 모달영역-->
     <aside>
-      <div class="modal hidden">
-        <section class="side_bar">
-          <button class="modal_closeBtn">X</button>
-          <ul>
-            <li class="wishList">관심상품목록</li>
-            <li class="page">야리무페이지</li>
-            <li class="cart">장바구니</li>
-          </ul>
-        </section>
+      <section class="modal-section hide-modal">
+        <button class="modal_closeBtn">X</button>
+        <ul>
+          <li class="wishList"><a href="slideBar">관심상품목록</a></li>
+          <li class="page"><a href="slideBar">야리무페이지</a></li>
+          <li class="cart"><a href="cart.html">장바구니</a></li>
+        </ul>
+      </section>
       </div>
     </aside>
     <main id="table_container" class="table_style">
       <div class="table_box">
         <table class="cart_table">
           <thead>
             <tr>
-              <td><input type="checkbox" /></td>
+              <td><input type="checkbox" class="all"/></td>
               <th>상품정보</th>
               <th>상품금액</th>
               <th>카테고리</th>
@@ -63,6 +62,7 @@ <h1>장바구니 페이지</h1>
             <button>close</button>
           </form>
           <p><상품목록></p>
+          <!-- <p class="modal-total"></p> -->
         </div>
       </dialog>
     </div>

week2/cartPage.js

@@ -8,7 +8,7 @@ function renderCartList() {
   let showCartList = cartList.map((item) => {
     return `
         <tr id=${item.id} class="detail_cart_list">
-        <td><input type="checkbox"></td>
+        <td><input type="checkbox" class="checkbox"></td>
         <td><img id=${item.id} class="cartlist_img" src="${item.Image}"></td>
         <td>${item.name}</td>
         <td>${item.price.toLocaleString()}</td>
@@ -38,13 +38,65 @@ const handleDeleteBtn = (event) => {
   });
 
   localStorage.setItem("cartList", JSON.stringify(filterCart));
-  location.href = location.reload();
+  location.href = location.href;
 };
 
 deleteBtn.forEach((item) => {
   item.addEventListener("click", handleDeleteBtn);
 });
 
+
+
+
+
+//선택된 상품 
+const checkboxAll = document.querySelector('.all')
+const checkboxs = document.querySelectorAll('.checkbox');
+
+//체크박스 맨 위에거 누르면 -> 전체선택
+checkboxAll.addEventListener('click', ()=>{
+  checkboxs.forEach(checkbox => {
+      checkbox.checked = checkboxAll.checked;
+  });
+});
+
+//구매하기를 위한 변수 선언, 구매할 상품 'checkedProduct'
+const buyBtn = document.querySelector('.purchase_btn');
+// const modal = document.querySelector('.modal');
+const productModal = document.querySelector('.modal-product');
+let checkedProduct = [];
+let totalPrice = 0;
+
+
+//체크박스 전체 선택시 구매할 상품 선택 
+checkboxAll.addEventListener('change', (event) => {
+  if (event.target.checked){
+      checkedProduct = cartList.slice();
+
+  } else {
+      checkedProduct = [];
+      totalPrice = 0;
+  };
+});
+
+
+//체크박스 개별 선택시 구매할 상품 선택 
+checkboxs.forEach((checkbox, index) => {
+  checkbox.addEventListener('change', () => {
+      if (checkbox.checked) {
+          checkedProduct.push(cartList[index]);
+
+      } else {
+          const removedIndex = checkedProduct.indexOf(cartList[index]);
+          if (removedIndex !== -1) {
+
+              checkedProduct.splice(removedIndex, 1);
+          }
+      }
+  });
+});
+
+
 //여기서부터 모달!
 
 function openModal() {
@@ -53,28 +105,31 @@ function openModal() {
   //모달에 장바구니 리스트 뿌려주기
   const showCart = document.querySelector(".modal_product_list_wrapper");
 
-  let showCartList = cartList.map((item) => {
+  let showCartList = checkedProduct.map((item) => {
     return `
        <img id=${item.id} class="modal_img" src="${item.Image}" alt="${item.name
       }">
        <p>${item.name}</p>
        <p>${item.price.toLocaleString()}원</p>
       `;
   });
+
   //여기서 총 금액 추가
   let totalPrice = 0;
 
-  let modalCartList = JSON.parse(localStorage.getItem("cartList")) || [];
+  // let modalCartList = JSON.parse(localStorage.getItem("cartList")) || [];
+  let modalCartList = checkedProduct
   modalCartList.forEach((item) => {
     totalPrice += item.price;
   });
 
   showCart.innerHTML += showCartList.join("");
-  //모달에 구매금액 추가하기
+  // 모달에 구매금액 추가하기
   const modal_totalPrice = document.createElement("p");
   modal_totalPrice.textContent = "구매금액:" + totalPrice.toLocaleString();
   const modal_box = document.querySelector(".modal_product_list_wrapper");
   modal_box.appendChild(modal_totalPrice);
+
 }
 
 const purchaseBtn = document.querySelector(".purchase_btn");
@@ -87,10 +142,14 @@ modal_purchaseBtn.textContent = "구매하기";
 const modal_page = document.querySelector(".purchase_modal");
 modal_page.appendChild(modal_purchaseBtn);
 
-//구매하기 버튼 클릭 시 장바구니 페이지로 돌아가기
+//구매하기 버튼 클릭 시 (구매완료 모달을 띄운 뒤, 해당 상품은 삭제후) 장바구니 페이지로 돌아가기
 const checkoutModal = document.querySelector(".purchase_button");
-const modalBtnClickHandler = () => {
-  alert("구매가 완료되었습니다.");
-  window.location.href = "cart.html";
-};
-checkoutModal.addEventListener("click", modalBtnClickHandler);
+checkoutModal.addEventListener("click", () => {
+  cartList = cartList.filter(product => !checkedProduct.includes(product));
+  localStorage.setItem('cartList', JSON.stringify(cartList));
+  alert('구매가 완료되었습니다.');
+  location.href = location.href;
+})
+
+
+

week2/index.css

@@ -60,22 +60,47 @@ nav {
 }
 
 /* 모달 css */
-.modal {
-  display: flex;
-  justify-content: end;
-  width: 100%;
-  height: 100vh;
-}
 
-.side_bar {
+.modal-section  {
   position: fixed;
   top: 0;
-  width: 250px;
-  height: 100%;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  gap: 3rem;
+
+  width: 20rem;
+  height: 100vh;
+
+  padding: 2rem 1.5rem;
   background-color: wheat;
-  transition: all 0.3s ease;
+
+  z-index: 2;
+
+  transition: right 0.3s ease-in-out;
+}
+
+.hide-modal {
+  right: -40rem;
 }
 
+.show-modal {
+  right: 0;
+}
+
+/* .hidden {
+  display: none;
+  transition: right 0.3s ease-in-out;
+} */
+
+
+
+
+
+
 .modal button {
   display: inline-block;
   border: 1px solid beige;
@@ -86,13 +111,6 @@ nav {
   margin: 0 5px;
 }
 
-.side_bar {
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: start;
-}
-
 .side_bar ul {
   display: flex;
   flex-direction: column;
@@ -122,6 +140,4 @@ nav {
   background-color: white;
 }
 
-.hidden {
-  display: none;
-}
+

week2/index.html

@@ -26,16 +26,16 @@ <h1>야리무의 쇼핑몰</h1>
     </nav>
     <!--오른쪽 모달영역-->
     <aside>
-      <div class="modal hidden">
-        <section class="side_bar">
+
+        <section class="modal-section hide-modal">
           <button class="modal_closeBtn">X</button>
           <ul>
             <li class="wishList"><a href="slideBar">관심상품목록</a></li>
             <li class="page"><a href="slideBar">야리무페이지</a></li>
             <li class="cart"><a href="cart.html">장바구니</a></li>
           </ul>
         </section>
-      </div>
+
     </aside>
     <!--아이템리스트 영역-->
     <ul class="item_list"></ul>

week2/sidebar.js

@@ -1,15 +1,18 @@
 //햄버거바 클릭시 모달을 뜨게 함, x버튼 누르면 닫힘.
 const open = document.querySelector(".fa-bars");
 const close = document.querySelector(".modal_closeBtn");
-const modal = document.querySelector(".modal");
-
-function init() {
-  open.addEventListener("click", function () {
-    modal.classList.remove("hidden");
-  });
-  close.addEventListener("click", function () {
-    modal.classList.add("hidden");
-  });
+const modal = document.querySelector(".modal-section");
+
+
+const showModal = () => {
+  modal.classList.remove("hide-modal");
+  modal.classList.add("show-modal");
+}
+
+const hideModal = () => {
+  modal.classList.remove("show-modal");
+  modal.classList.add("hide-modal");
 }
+open.addEventListener('click', showModal);
 
-init();
+close.addEventListener('click', hideModal);