GO-SOPT-WEB · kwonET · Apr 21, 2023 · borimong · May 4, 2023 · simeunseo
diff --git a/dummy.js b/dummy.js
@@ -0,0 +1,68 @@
+export default [
+    {
+        "menuName":"국물닭발",
+        "menuTag":["#칼칼","#닭발엔소주", "#국물","#냠냠"],
+        "menuImgUrl":"./images/chicken_foot.jpeg",
+        "category":"안주",
+    },
+    {
+        "menuName":"야채곱창",
+        "menuTag":["#돼지곱창", "#야채듬뿍","#매콤"],
+        "menuImgUrl":"./images/gopchang.jpeg",
+        "category":"안주"
+    },
+    {
+        "menuName":"오돌뼈",
+        "menuTag":["#주먹밥","#매콤", "#오독오독"],
+        "menuImgUrl":"./images/odol.jpeg",
+        "category":"안주"
+    },
+    {
+        "menuName":"어묵탕",
+        "menuTag":["#소주친구","#뜨근국물", "#탕"],
+        "menuImgUrl":"./images/odang.jpeg",
+        "category":"탕"
+    },
+    {
+        "menuName":"알탕",
+        "menuTag":["#소주친구","#알&곤이", "#탕"],
+        "menuImgUrl":"./images/altang.jpeg",
+        "category":"탕"
+    },
+    {
+        "menuName":"짬뽕탕",
+        "menuTag":["#소주친구","#해물가득", "#탕"],
+        "menuImgUrl":"./images/jjam.jpeg",
+        "category":"탕"
+    },
+    {
+        "menuName":"황도",
+        "menuTag":["#시원함","#과일가득"],
+        "menuImgUrl":"./images/hwangdo.jpeg",
+        "category":"사이드"
+    },
+    {
+        "menuName":"계란찜",
+        "menuTag":["#포슬포슬","#닭발과함께"],
+        "menuImgUrl":"./images/egg.jpeg",
+        "category":"사이드"
+    },
+    {
+        "menuName":"참이슬",
+        "menuTag":["#소주","#참이슬누가먹음"],
+        "menuImgUrl":"./images/chami.jpeg",
+        "category":"술"
+    },
+    {
+        "menuName":"처음처럼",
+        "menuTag":["#소주","#소주1위의존엄"],
+        "menuImgUrl":"./images/cheo.jpeg",
+        "category":"술"
+    },
+    {
+        "menuName":"한라산",
+        "menuTag":["#소주","#화끈하게21도"],
+        "menuImgUrl":"./images/han.jpeg",
+        "category":"술"
+    }
+]
diff --git a/index.html b/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="ko">
+<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>bomipocha</title>
+    <link rel="stylesheet" href="style.css">
+    <script async type="module" src="script.js"></script>
+    <script src="https://kit.fontawesome.com/337bf03ec9.js" crossorigin="anonymous"></script>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"></link>
+
+</head>
+<body>
+    <header>
+        <h4>
+            보미포차
+        </h4>
+        <h4>
+            <input type="checkbox" id="icon">
+            <label for="icon">
+                <span></span>
+                <span></span>
+                <span></span>
+            </label>
+            <div class="menu-container">
+                <ul>
+                    <li>메뉴</li>
+                    <li>새 상품 추가</li>
+                    <li>찜 목록</li>
+                </ul>
+            </div>
+        </h4>
+    </header>
+    <div id="nav-cards-wrap">
+        <nav>
+            <h1 class="nav-items">종류</h1>
+            <!-- <input type="checkbox" id="category">
+            <label for="category">
+                <div class="nav-container">
+                    <div class="nav-items">전체</div>
+                </div>
+            </label> -->
+            <a href="#ctgr-all" class="nav-container">
+                <div class="nav-items">전체</div>
+            </a>
+            <a href="#ctgr-dish" class="nav-container">
+                <div class="nav-items">안주</div>
+            </a>
+            <a href="#ctgr-tang" class="nav-container">
+                <div class="nav-items">탕</div>
+            </a>
+            <a href="#ctgr-side" class="nav-container">
+                <div class="nav-items">사이드</div>
+            </a>
+            <a href="#ctgr-alcohol" class="nav-container">
+                <div class="nav-items">술</div>
+            </a>
+        </nav>
+        <div id="ctg-cards-wrap">
+            <div class="selected-ctgr">
+                <div id="ctgr-all" style="display:none;">
+                    <div class="category-container">
+                        <h2> 전체</h2>
+                        <h3 class="cancel-btn">X</h3>
+                    </div>
+                </div>
+                <div id="ctgr-dish" style="display:none;">
+                    <div class="category-container">
+                        <h2> 안주</h2>
+                        <h3 class="cancel-btn">X</h3>
+                    </div>
+                </div>
+                <div id="ctgr-tang" style="display:none;">
+                    <div class="category-container">
+                        <h2> 탕</h2>
+                        <h3 class="cancel-btn">X</h3>
+                    </div>
+                </div>
+                <div id="ctgr-side" style="display:none;">
+                    <div class="category-container">
+                        <h2> 사이드</h2>
+                        <h3 class="cancel-btn">X</h3>
+                    </div>
+                </div>
+                <div id="ctgr-alcohol" style="display:none;">
+                    <div class="category-container">
+                        <h2> 술</h2>
+                        <h3 class="cancel-btn">X</h3>
+                    </div>
+                </div>
+            </div>  
+            <div id="card-wrap">
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,144 @@
+import data from './dummy.js';
+/**
+ * nav에서 선택된 카테고리에 따라 카드, 태그 생성/삭제함
+ */
+var target=document.querySelectorAll('.nav-container');
+var btnClose=document.querySelectorAll('.selected-ctgr .cancel-btn')
+var targetID, targetClass;
+const selectedCtgr=[];
+var ctgrAllList=[".ctgr-dish",".ctgr-tang",".ctgr-side",".ctgr-alcohol"]
+var nonSelectedCtgr=[];
+// 생성
+for(var i=0;i<target.length;i++){
+    target[i].addEventListener('click',function(){
+        targetID=this.getAttribute('href');
+        document.querySelector(targetID).style.display='block';
+        if (targetID==="#ctgr-all"){
+            for (var t=0;t<ctgrAllList.length;t++){
+                for (var j=0;j<document.querySelectorAll(ctgrAllList[t]).length;j++){
+                    document.querySelectorAll(ctgrAllList[t])[j].style.display='block';
+                }
+            }
+        }
+        else{
+            targetClass=targetID.replace('#','.');
+            for (var j=0;j<document.querySelectorAll(targetClass).length;j++){
+                document.querySelectorAll(targetClass)[j].style.display='block';
+            }
+            selectedCtgr.push(targetClass);
+        }
+    });
+}
+
+for(var j=0;j<target.length;j++){
+    btnClose[j].addEventListener('click',function(){
+        this.parentNode.parentNode.style.display='none'
+        targetClass="."+this.parentNode.parentNode.getAttribute('id');
+        if (targetClass===".ctgr-all"){
+            nonSelectedCtgr = ctgrAllList.filter(x=> !selectedCtgr.includes(x));
+            for (var t=0;t<nonSelectedCtgr.length;t++){
+                for (var j=0;j<document.querySelectorAll(nonSelectedCtgr[t]).length;j++){
+                    var clsList=document.querySelectorAll(nonSelectedCtgr[t])[0].classList;
+                    document.querySelectorAll(nonSelectedCtgr[t])[j].style.display='none';
+                }
+            }
+        }
+        else{
+            for (var j=0;j<document.querySelectorAll(targetClass).length;j++){
+                var clsList=document.querySelectorAll(targetClass)[0].classList;
+                document.querySelectorAll(targetClass)[j].style.display='none';
+            }
+        }
+    });
+}
+
+
+/**
+ * 메뉴를 더미데이터에서 가져옴
+ */
+function ctgrMatch(post){
+    if (post.category==="안주"){
+        return "ctgr-dish";
+    }
+    else if (post.category==="탕"){
+        return "ctgr-tang";
+    }
+    else if (post.category==="사이드"){
+        return "ctgr-side";
+    }
+    else if (post.category==="술"){
+        return "ctgr-alcohol";
+    }
+}
+function postTitle(post){
+    const h2=document.createElement('h2')
+    h2.setAttribute('class','card-title')
+    h2.textContent=post.menuName
+    return h2
+}
+function postTag(post){
+    const div=document.createElement('div')
+    div.setAttribute('class','card-tag')
+    const h3=document.createElement('p')
+    h3.innerText=post.menuTag
+    const icon=document.createElement('img')
+    icon.setAttribute('src','./images/square-caret-down-solid.svg')
+    icon.setAttribute('class','modal-open-icon')
+    icon.setAttribute('alt','더보기아이콘')
+    div.append(h3)
+    div.append(icon)
+    return div
+}
+function postImg(post){
+    const img=document.createElement('img')
+    img.setAttribute('src',post.menuImgUrl)
+    img.setAttribute('class','menuImg')
+    img.setAttribute('alt','메뉴이미지')
+    return img
+}
+for (var i=0;i<data.length;i++){
+    const cardContent= document.querySelector("#card-wrap")
+    const section=document.createElement('section')
+    section.setAttribute('class','card')
+    // 더미데이터의 카테고리를 태그의 속성과 매치해주는 부분
+    section.classList.add(ctgrMatch(data[i]))
+    cardContent.append(section)
+    const div=document.createElement('div')
+    div.setAttribute('id','content')
+    section.append(div)
+    div.append(postTitle(data[i]));
+    div.append(postTag(data[i]));
+    // 팝업되는 태그 모달
+    const modal=document.createElement('div')
+    modal.setAttribute('class','tag-modal')
+    modal.innerText=data[i].menuTag
+    const icon=document.createElement('img')
+    icon.setAttribute('src','./images/square-caret-down-solid.svg')
+    icon.setAttribute('class','modal-close-icon')
+    icon.setAttribute('alt','더보기아이콘')
+    modal.append(icon)
+    modal.style.display='none';
+    div.append(modal)
+
+    div.append(postImg(data[i]));
+    const img=document.createElement('img')
+    img.setAttribute('src','./images/glass-water-solid.svg')
+    img.setAttribute('class','icon')
+    img.setAttribute('alt','찜아이콘')
+    div.append(img)
+}
+
+
+var modalOpenTarget=document.querySelectorAll('.card-tag .modal-open-icon');
+// var modalCloseTarget=document.querySelectorAll('.modal-close-icon');
+for(var i=0;i<modalOpenTarget.length;i++){
+    modalOpenTarget[i].addEventListener('click',function(){
+        this.parentNode.parentNode.querySelector('.tag-modal').style.display='block';
+    });
+}
+var modalCloseTarget=document.querySelectorAll('.modal-close-icon');
+for(var i=0;i<modalCloseTarget.length;i++){
+    modalCloseTarget[i].addEventListener('click',function(){
+        this.parentNode.style.display='none';
+    });
+}