한식메뉴 렌더링하기

최종 결과

구현 목표

주어진 데이터 menuItems 를 배열 메서드를 활용해 화면에 표시하기

const menuItems = [
    { name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' },
    { name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' },
    { name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' },
    { name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식' },
    { name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }
];

추가한 기능

1) 각 메뉴에 카테고리를 추가하여 선택한 카테고리만 화면에 표시되도록 함

2) 선택한 카테고리는 적용되는 스타일 변경 (id 설정)

3) 앞면(메뉴 이름)에 마우스를 올리면 뒷면(메뉴 설명)이 보이도록 flip 효과 주기

기억하자!

jQuery 메서드 사용 오류

원인

클릭한 카테고리에 id를 설정하기 위해 onclick함수를 호출할 때 클릭된 요소를 매개변수로 보내주었다.

jQuery 객체가 아닌 Javascript DOM 객체에 jQuery 메서드를 사용하려하니 당연히 오류가 났다.

해결

받아온 요소를 jQuery 객체로 변경하여 사용한다.

// 첫 시도 -> javascript DOM 객체이므로 attr 메서드 없음
selectedCategory.attr("id", "selectedCategory");
 
// 깨달음 후 변경 -> jQuery 메서드를 사용하려는거니까 jQuery 객체로 바꿔줘야 함
$(selectedCategory).attr("id", "selectedCategory");

전체 코드

1) HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="mainContainer">
        <h1 id="title">🥘 한식 메뉴 🥘</h1>
        <ul class="category">
            <li class="categoryItem" id="selectedCategory" onclick="categoryChange(this)">전체보기</li>
            <li class="categoryItem" onclick="categoryChange(this)">밥</li>
            <li class="categoryItem" onclick="categoryChange(this)">국/찌개</li>
            <li class="categoryItem" onclick="categoryChange(this)">전</li>
        </ul>
        <ul id="menuList">
        </ul>
    </div>
    <script src="script.js"></script>
</body>

</html>

2) css

@font-face {
  font-family: "EF_jejudoldam";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-EF@1.0/EF_jejudoldam.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "LeeSeoyun";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

* {
  padding: 0;
  margin: 0;
  border: none;
}

ul {
  list-style: none;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#title {
  margin-top: 50px;
  font-family: "EF_jejudoldam";
  font-weight: lighter;
}

.menuItem {
  height: 100px;
  width: 300px;
  border: 1px solid lightgrey;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
  font-family: "LeeSeoyun";
  text-align: center;

  transition: transform 0.5s;
  transform: perspective(800px) rotateY(0deg);
  transform-style: preserve-3d;

  display: grid;
}

.menuItem:hover {
    transform: perspective(800px) rotateY(180deg);
}

.menuItem > * {
    grid-area: 1 / 1 / 1 / 1;
    backface-visibility: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.menuDescription {
    transform: rotateY(180deg);
}

.category {
  width: 300px;
  height: 40px;
  margin-top: 10px;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

  font-family: "EF_jejudoldam";
  font-size: 1.1rem;
}

.categoryItem:hover{
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 5px;
}

#selectedCategory {
  color: rgb(255, 147, 32);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 5px;
}

3) Javascript

const menuItems = [
    { name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리', category: '밥' },
    { name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리', category: '국/찌개' },
    { name: '된장찌개', description: '된장과 각종 야채를 넣고 끓인 찌개 요리', category: '국/찌개' },
    { name: '미역국', description: '미역과 소고기를 넣고 끓인 국물 요리', category: '국/찌개' },
    { name: '감자전', description: '감자가 가득 들어간 쫀득쫀득 전', category: '전' },
    { name: '김치전', description: '김치가 가득 들어간 바삭바삭 전', category: '전' }
];

function setMenu() {
    for (let menu of menuItems) {
        let item = `
        <li class="menuItem">
            <h2 class="menuName">${menu.name}</h2>
            <div class="menuDescription">${menu.description}</div>
        </li>
        `;
        $('#menuList').append(item);
    }
}


function filterMenu() {
    let selectedMenu = menuItems.filter(menu => menu.category === selectedCategory.textContent);
    if(selectedMenu.length === 0) {
        selectedMenu = menuItems;
    }

    $('#menuList').empty();

    for (let menu of selectedMenu) {
        let item = `
        <li class="menuItem">
            <h2 class="menuName">${menu.name}</h2>
            <div class="menuDescription">${menu.description}</div>
        </li>
        `;

        $('#menuList').append(item);
    }
}

let selectedCategory = $('#selectedCategory');
function categoryChange(selectedItem) {
    $(selectedCategory).removeAttr("id");
    selectedCategory = selectedItem;
    $(selectedCategory).attr("id", "selectedCategory");

    filterMenu();
}



$(document).ready(setMenu);

'프로젝트 > 개인 과제' 카테고리의 다른 글

TODO-LIST 만들기 (0)	2024.07.05
[Javascript] 숫자기억게임 만들기 (0)	2024.06.20