라임올리브 json데이터 가져와 화면 표시&더보기 버튼 구현 / project1-5

HTML

      <!-- 화면 더보기 버튼 구현 -->
      <header class="section-header">
        <h1 class="section-title">
          전체 상품
        </h1>
      </header>
      <ul id="list-wrapper"></ul> 
      <button id="more-button">더보기</button>

CSS

@media (max-width: 768px) {
  /* 더보기 css */
  #list-wrapper{
    gap: 5px;
    padding: 0 5px;
  }
  #list-wrapper > .section-item {
    width: calc((100% - 10px) / 3);
  }
  .list-item h2 {
    font-size: 12px;
    padding: 5px 0;
  }
  .list-item p {
    font-size: 10px;
  }
  #more-button {
    width: calc((100% - 10px));
    margin: 0 5px;
    padding: 12px;
    font-size: 11px;
  }
  #list-wrapper > .hidden-m {
    display: none;
  }
}

@media (min-width: 769px) {
  #list-wrapper > .hidden-w {
    display: none;
  }
}

JS

// hidden 갯수별 숨김 함수
async function loadInitialScreen() {
  try {
    const itemList = document.getElementById("list-wrapper");
    const data = await fetchItems();
    const initialVisibleItemsW = 16; //초기 아이템 개수
    const initialVisibleItemsM = 12; //초기 아이템 개수
    const items = data.goods;

    items.forEach((item, index) => {
      const itemElement = createItemElement(item);
      itemList.appendChild(itemElement);
      if (index >= initialVisibleItemsW) {
        itemElement.classList.add("hidden-w"); 
      }
      if (index >= initialVisibleItemsM) {
        itemElement.classList.add("hidden-m"); 
      }
    });
    const moreButton = document.getElementById("more-button");
    moreButton.addEventListener("click", showMoreItems);
  } catch(error) {
    console.error("Error load initial screen", error);
  }
}
loadInitialScreen();

1. "list-wrapper" 요소를 가져와서 itemList 변수에 저장합니다.
2. 데이터를 비동기적으로 가져오기 위해 fetchItems() 함수를 호출합니다.
3. 초기에 보여줄 아이템 개수를 나타내는 initialVisibleItemsW와 initialVisibleItemsM 변수를 설정합니다.
4. 가져온 데이터에서 goods 배열을 items 변수에 저장합니다.
5. 아이템을 반복하면서, 각 아이템을 HTML 요소로 만들어 itemList 에 추가합니다. 동시에 초기에 보여줄 개수를 넘어서면 해당 아이템에 "hidden-w" 또는 "hidden-m" 클래스를 추가하여 숨깁니다.
6. "more-button" 요소를 가져와서 이벤트 리스너를 추가합니다. 버튼 클릭 시 showMoreItems 함수를 호출합니다.
7. 오류가 발생하면 해당 오류를 콘솔에 출력합니다.

 

---

// more button 사라지는 함수
function showMoreItems() {
  const hiddenItemsW = document.getElementsByClassName("hidden-w");
  const hiddenItemsM = document.getElementsByClassName("hidden-m");

  while (hiddenItemsW.length > 0) {
    hiddenItemsW[0].classList.remove("hidden-w");
  }
  while (hiddenItemsM.length > 0) {
    hiddenItemsM[0].classList.remove("hidden-m");
  }

  const moreButton = document.getElementById("more-button");
  if (hiddenItemsW.length === 0 && hiddenItemsM.length === 0) {
    moreButton.style.display = "none"; // "더보기" 버튼을 숨깁니다.
  }
}

1. "hidden-w" 클래스가 적용된 요소들을 찾아서 숨깁니다.
2. "hidden-m" 클래스가 적용된 요소들을 찾아서 숨깁니다.
3. 모든 숨겨진 아이템을 보여줍니다.
4. 만약 더 이상 숨겨진 아이템이 없으면 "더보기" 버튼을 숨깁니다.

완성본 다운로드 : https://github.com/jangbooyeong/limeolive