마우스 호버 시 효과 주기

  cursor: pointer;

• 마우스를 올리면 클릭할 수 있는 영역이라는 것을 알 수 있게 포인터로 커서를 바꾼다.

배너 이미지 변경

아이템 여러개 만들고 스크롤 나오도록 만들기

  flex-wrap: wrap;
  overflow-y: scroll;

• flex-wrap을 사용하면 브라우저 창이 가로로 축소될 때, 이미지 크기는 유지하되 밑으로 내려가 정렬된다.
• overflow=y를 사용하면 해당 컨테이너에 스크롤이 생긴다. 박스가 많아질 수록 해당 컨테이너에 스크롤이 적용되어 밑으로 내릴 수 있도록 만들 수 있다.
  

아이템 json데이터 만들고 받아오기

function loaditems() {
  return fetch("data/data.json").then((response) => response.json());
  // .json((json) => json.items)
  // .catch(console.log("error"));
}

loaditems()
  .then((items) => {
    //     displayitems(items);
    //     setEventListeners(items);
  })
  .catch(console.log);

콘솔 창에서 데이터가 잘 로드된걸 확인할 수 있다.

프로미스 함수

받은 데이터로 화면에 아이템 표시하기

json data

{
  "items": [
    {
      "type": "shirt",
      "mall": "림스몰",
      "title": "푸른셔츠",
      "price": "9900",
      "image": "mg/item_img1.png"
    },
    {
      "type": "shirt",
      "mall": "벨벳데이즈",
      "title": "푸른하늘색(귀염밴딩)",
      "price": "22,800",
      "image": "img/item_img2.png"
    },
    {
      "type": "shirt",
      "mall": "시크릿라벨",
      "title": "스커트",
      "price": "106,000",
      "image": "img/item_img3.png"
    }
  ]
}

js

function displayitems(items) {
  const container = document.querySelector(".items");
  const html = items.map((item) => createHTMLString(item)).join("");
  console.log(html);
  container.innerHTML = item.map((item) => //items.map으로 수정
                                 createHTMLString(item)).join("");
}
function createHTMLString(item) {
  return `
  <div class="item">
    <img src="${item.image}" alt="${item.type}" class="item_img" />
    <box class="item_description">
      <div class="item_mall">"${item.mall}"</div>
      <div class="item_title">"${item.title}</div>
      <div class="item_price">"${item.price}"</div>
    </box>
  </div>`;
}

console.log(html)로 테스트해봤을 때, json data가 createHTMLString()을 통해 html태그 문자열 형태로 잘 변환되었다.
이제 화면에 출력만 시키면 된다. 에러를 수정했다.

텍스트에 ""가 불필요하게 들어가 있다.

function createHTMLString(item) {
  return `
  <div class="item">
    <img src="${item.image}" alt="${item.type}" 
    class="item_img" />
    //여기서는 "${}"형태로 지정하지만
    <box class="item_description">
      <div class="item_mall">${item.mall}</div>
      <div class="item_title">${item.title}</div>//없음
      <div class="item_price">"${item.price}"</div>//""있음
      //이곳은 텍스트의 형태로 들어가기 때문에,
      //"도 텍스트로 그대로 출력되게 된다. 따옴표를 없애주면 정상적으로 출력된다.
    </box>
  </div>`;

잘 작동되는 것을 확인했으니, 가디건,스커트,셔츠,치마,바지 아이템을 각각 1개씩 데이터에 넣은 뒤, 필터링이 되도록 해보자.

아이템 필터링하기

custom property

data-이름
를 사용해 원하는 대로 데이터를 정의할 수 있다.

js

// 버튼 클릭 시 아이템 필터링 하기

function onButtonClick(event, items) {
  //   const dataset = event.target.dataset;
  //   const key = dataset.key;
  //   const value = dataset.value;
  console.log("ss");
  //   console.log(event.target.dataset.key);
  //   console.log(event.target.dataset.value);
  //   if (key == null || value == null) {
  //     return;
  //   }
  const filtered = items.filter((item) => item[key] === value);
  console.log(filtered);
  displayitems(filtered);
  //   displayitems(items.filter((item) => item[key] === value));
}

function setEventListeners(items) {
  const logo = document.querySelector(".logo");
  const menu = document.querySelector(".menu");
  // querySelector 와 getElementbyId는 뭐가 다를까?
  //   logo.addEventListener("click", () => displayitems(items));
  menu.addEventListener("click", (event) => onButtonClick(event, items));
  console.log("event");
}
loaditems()
  .then((items) => {
    displayitems(items);
    setEventListeners(items);
  })
  .catch(console.log);

html

<nav class="navbar2">
      <button class="menu" data-key="type" data-value="shirt">셔츠</button>
      <button class="menu" data-key="type" data-value="chardigan">
        가디건
      </button>
      <button class="menu" data-key="type" data-value="knit">니트</button>
      <button class="menu" data-key="type" data-value="pants">바지</button>
      <button class="menu" data-key="type" data-value="skirt">치마</button>
    </nav>

오류 수정

가디건을 클릭하면 요렇게 가디건 제품만 필터링 되어서 노출된다.

배운점 정리

• 프로미스 함수
• arrow function
• 전체 세로 스크롤로 여러 섹션을 만들고, 컨테이너마다 아이템이 여러개 들어가 있는 가로 스크롤을 만들고 싶다.