GO-SOPT-WEB · gunom · Apr 17, 2023 · Apr 17, 2023 · Apr 17, 2023 · Apr 17, 2023
diff --git a/week2/backery/backery.js b/week2/backery/backery.js
@@ -0,0 +1,40 @@
+const data = [
+    {
+        name: '케이크인 소금빵',
+        category: 'cake',
+        tag: ['#맛있어', '#내가 좋아해', '#진짜야'],
+        image: "./salt-bread.jpg"
+    },
+    {
+        name: '다쿠아즈인 소금빵',
+        category: 'dacquoise',
+        tag: ['#맛있어', '#내가 좋아해', '#진짜야'],
+        image: "./salt-bread.jpg"
+    },
+    {
+        name: '소금빵',
+        category: 'backery',
+        tag: ['#맛있어', '#내가 좋아해', '#진짜야'],
+        image: "./salt-bread.jpg"
+    },
+    {
+        name: '소금빵',
+        category: 'backery',
+        tag: ['#맛있어', '#내가 좋아해', '#진짜야'],
+        image: "./salt-bread.jpg"
+    },
+    {
+        name: '소금빵',
+        category: 'backery',
+        tag: ['#맛있어', '#내가 좋아해', '#진짜야'],
+        image: "./salt-bread.jpg"
+    },
+    {
+        name: '소금빵',
+        category: 'backery',
+        tag: ['#맛있어', '#내가 좋아해', '#진짜야'],
+        image: "./salt-bread.jpg"
+    },
+]
+
+export default data;
diff --git a/week2/backery/bakery.html b/week2/backery/bakery.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>backery</title>
+    <link rel="stylesheet" href="./style.css" />
+    <script
+      src="https://kit.fontawesome.com/fdaeef652b.js"
+      crossorigin="anonymous"
+    ></script>
+    <script async src="./index.js" type="module"></script>
+  </head>
+
+  <body>
+    <header>
+      <h1 class="title">Goo's Backery</h1>
+      <button class="menu-btn">
+        <i class="fa-solid fa-bars"></i>
+      </button>
+    </header>
+    <main>
+      <nav>
+        <span class="nav-title">종류</span>
+        <ul class="nav-box">
+          <li class="nav-item">
+            <label for="all-filter">
+              <input type="checkbox" data-category="all" />
+              전체</label
+            >
+          </li>
+          <li class="nav-item">
+            <label for="backery-filter">
+              <input type="checkbox" data-category="backery" />
+              베이커리</label
+            >
+          </li>
+          <li class="nav-item">
+            <label for="cake-filter">
+              <input type="checkbox" data-category="cake" />
+              케이크</label
+            >
+          </li>
+          <li class="nav-item">
+            <label for="dacquoise-filter">
+              <input type="checkbox" data-category="dacquoise" />
+              다쿠아즈</label
+            >
+          </li>
+        </ul>
+      </nav>
+      <section class="product-section">
+        <section class="select-filter"></section>
+        <section class="grid-container"></section>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/week2/backery/cake-slice.png b/week2/backery/cake-slice.png
diff --git a/week2/backery/heart.png b/week2/backery/heart.png
diff --git a/week2/backery/index.js b/week2/backery/index.js
@@ -0,0 +1,185 @@
+import data from "./backery.js";
+
+const products = data
+console.log(data)
+const categoryList = [];
+
+const categoryButton = document.querySelectorAll('.nav-item > label > input');
+
+products.forEach((product) => {
+    const productsContainer = document.querySelector('.grid-container');
+    const productElement = document.createElement('article');
+    productElement.classList.add('card');
+    productElement.innerHTML = `
+    <h2 class="card-title">${product.name}</h2>
+    <div class="card-tagwrapper">
+        <ul class="card-tags">
+        </ul>
+        <button class="card-tags-add">+</button>
+        <div class="modal">
+        <div class="modal-content">
+            <span class="close-btn">&times;</span>
+            <ul class="modal-tags">
+            </ul>
+        </div>
+        </div>
+    </div>
+    </div>
+    <img src="${product.image}" alt="상품이미지" />
+    <button class="card-like">
+        <i class="fa fa-heart"></i>
+    </button>
+    `;
+    product.tag.forEach((tag) => {
+        const tagElement = document.createElement('li');
+        tagElement.classList.add('card-tag');
+        tagElement.textContent = tag;
+        productElement.querySelector('.card-tags').appendChild(tagElement);
+    });
+    product.tag.forEach((tag) => {
+        const tagElement = document.createElement('li');
+        tagElement.classList.add('modal-tag');
+        tagElement.textContent = tag;
+        productElement.querySelector('.modal-tags').appendChild(tagElement);
+    });
+    productsContainer.addEventListener('click', (event) => {
+        const addButton = event.target.closest('.card-tags-add');
+        if (addButton) {
+            const productElement = addButton.closest('.card');
+            const modal = productElement.querySelector('.modal');
+            modal.style.display = "block";
+            const buttonRect = addButton.getBoundingClientRect();
+            const modalTop = buttonRect.top - modal.offsetHeight;
+            const modalLeft = buttonRect.right - (modal.offsetWidth / 2);
+            modal.style.top = `${modalTop}px`;
+            modal.style.left = `${modalLeft}px`;
+            modal.classList.add('show');
+        }
+    });
+    productsContainer.addEventListener('click', (event) => {
+        const closeButton = event.target.closest('.close-btn');
+        if (closeButton) {
+            const modal = closeButton.closest('.modal');
+            modal.style.display = "none";
+            modal.classList.remove('show');
+        }
+    });
+    productsContainer.appendChild(productElement);
+});
+
+categoryButton.forEach((button) => {
+    button.addEventListener('click', (event) => {
+        const category = event.target.dataset.category;
+        if (button.checked) {
+            categoryList.push(category);
+        } else {
+            const index = categoryList.indexOf(category);
+            categoryList.splice(index, 1);
+        }
+        displaySelectFilter();
+        displayProducts();
+    });
+});
+
+const displaySelectFilter = () => {
+    const selectFilter = document.querySelector('.select-filter');
+    const selectFilterElements = categoryList.map((category) => {
+        return `
+        <div class="select-filter-item">
+          <span>${category}</span>
+          <button class="select-filter-item-delete">
+            <i class="fa fa-times"></i>
+          </button>
+        </div>
+      `;
+    });
+    selectFilter.innerHTML = selectFilterElements.join("");
+    const deleteButtons = selectFilter.querySelectorAll('.select-filter-item-delete');
+    deleteButtons.forEach((button) => {
+        button.addEventListener('click', (event) => {
+            const parent = event.target.closest('.select-filter-item');
+            const category = parent.querySelector('span').textContent;
+            const index = categoryList.indexOf(category);
+            categoryList.splice(index, 1);
+            categoryButton.forEach((categoryBtn) => {
+                if (categoryBtn.dataset.category === category) {
+                    categoryBtn.checked = false;
+                }
+            })
+            displaySelectFilter();
+            displayProducts();
+        });
+    });
+};
+
+const displayProducts = () => {
+    let categoryProducts = [];
+    if (categoryList.length === 0) {
+        categoryProducts = products;
+    } else if (categoryList.indexOf('all') > -1) {
+        categoryProducts = products;
+    } else {
+        categoryProducts = products.filter((product) => categoryList.indexOf(product.category) !== -1);
+    }
+    const productsContainer = document.querySelector('.grid-container');
+    productsContainer.innerHTML = '';
+    categoryProducts.forEach((product) => {
+        const productElement = document.createElement('article');
+        productElement.classList.add('card');
+        productElement.innerHTML = `
+        <h2 class="card-title">${product.name}</h2>
+        <div class="card-tagwrapper">
+            <ul class="card-tags">
+            </ul>
+            <button class="card-tags-add">+</button>
+            <div class="modal">
+            <div class="modal-content">
+                <span class="close-btn">&times;</span>
+                <ul class="modal-tags">
+                </ul>
+            </div>
+            </div>
+        </div>
+        </div>
+        <img src="${product.image}" alt="상품이미지" />
+        <button class="card-like">
+            <i class="fa fa-heart"></i>
+        </button>
+        `;
+        product.tag.forEach((tag) => {
+            const tagElement = document.createElement('li');
+            tagElement.classList.add('card-tag');
+            tagElement.textContent = tag;
+            productElement.querySelector('.card-tags').appendChild(tagElement);
+        });
+        product.tag.forEach((tag) => {
+            const tagElement = document.createElement('li');
+            tagElement.classList.add('modal-tag');
+            tagElement.textContent = tag;
+            productElement.querySelector('.modal-tags').appendChild(tagElement);
+        });
+        productsContainer.addEventListener('click', (event) => {
+            const addButton = event.target.closest('.card-tags-add');
+            if (addButton) {
+                const productElement = addButton.closest('.card');
+                const modal = productElement.querySelector('.modal');
+                modal.style.display = "block";
+                const buttonRect = addButton.getBoundingClientRect();
+                const modalTop = buttonRect.top - modal.offsetHeight;
+                const modalLeft = buttonRect.right - (modal.offsetWidth / 2);
+                modal.style.top = `${modalTop}px`;
+                modal.style.left = `${modalLeft}px`;
+                modal.classList.add('show');
+            }
+        });
+        productsContainer.addEventListener('click', (event) => {
+            const closeButton = event.target.closest('.close-btn');
+            if (closeButton) {
+                const modal = closeButton.closest('.modal');
+                modal.style.display = "none";
+                modal.classList.remove('show');
+            }
+        });
+        productsContainer.appendChild(productElement);
+    });
+}
diff --git a/week2/backery/salt-bread.jpg b/week2/backery/salt-bread.jpg