Sekkison Frontend UI -14 # Home

ILCHAN AHN·2023년 3월 26일
0

Sekkison

목록 보기
13/13

앞서 말했듯 Sekkison의 Home을 구현해보도록 하겠다.
모든 사이트들은 Home 페이지가 필수적이며, 사이트를 접속했을떄 가장 눈에 들어오는 요소이다. 기획단계에서 Lobby같은 느낌을 주는 페이지를 만들고자 하였기에 이를 중점으로 구성해보았다.

이 글에서 소개할 부분은 스크롤 페이징이다.
사실 home페이지의 목록은 10개씩 페이징을 하여 스크롤이 목록 끝의 div를 만나게 된다면 다음 페이지를 load해서 데이터의 낭비를 막는다.

Home에서는 검색어, 카테고리 3종류, 페이지 파라미터를 백엔드 서버로 보내 해당 페이지의 검색결과를 받는다. 그렇다면 다음 페이지를 보기 위해선 스크롤이 끝에 도달하였을 때 페이지 값만 +1해서 다시 요청하면 되는 것이다.

아래 자바스크립트 코드에서는 id="showBox" 에 스크롤 이벤트리스너를 달아 id="loading" 을 만나게 되면 목록을 추가해주는 addload() 함수를 실행시킨다.
javascript

function checkVisible(element) {
	//목록을 담을 div의 높이
	const viewportHeight = $("#showBox").height();
	// Scroll Top
	const scrolltop = $("#showBox").scrollTop();
	const y = $(element).offset().top;
	return ((y < (viewportHeight + scrolltop)));
}
function func() {
	if (checkVisible('#loading')) addload();
}
// 스크롤 이벤트 등록
document.getElementById("showBox").addEventListener('scroll', func);

html

<div id="showBox" style="width:100%; overflow:scroll;">
  <div id="list" name="list"></div>
  <div id="loading" style="width:100%; height:2rem;"></div>
</div>

만약 addload()를 실행했는데 더이상 받아올 목록이 없으면 이벤트리스너를 해제한다. 해제는 다음 코드로 간단히 할 수 있다.

document.getElementById("showBox").removeEventListener('scroll', func);

참고로, D-day를 계산하는 방법은 간단하다.

function dday(local_date_time) {
	return Math.floor((new Date(local_date_time) - new Date()) / (1000*60*60*24)); 
}

다음 게시글에서는 약속만들기를 구현해 보도록 하겠다.

profile
백엔드 개발자를 꿈꿉니다

0개의 댓글