// script.js // DOM이 로드된 후 실행될 함수를 등록합니다. document.addEventListener('DOMContentLoaded', function () { /* console.log(window.location.href); console.log(window.location.protocol); console.log(window.location.host); console.log(window.location.hostname); console.log(window.location.port); console.log(window.location.pathname); console.log(window.location.search); */ let Pr = window.location.protocol; let Hostname = window.location.hostname; let PrHo = Pr+"//"+Hostname async function play() { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.open('GET', PrHo+'/api/news?page=0&size=2', true); xhr.onload = function () { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); resolve(data.totalElements); // 비동기 작업이 성공적으로 완료되면 resolve를 호출합니다. } else { reject("Error " + xhr.status); // 비동기 작업이 실패하면 reject를 호출합니다. } }; xhr.onerror = function () { reject("Network error"); }; xhr.send(); }); } async function play_1(number) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.open('GET', PrHo+`/api/news?page=${number}&size=2`, true); xhr.onload = function () { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); resolve(data.content); // 비동기 작업이 성공적으로 완료되면 resolve를 호출합니다. } else { reject("Error " + xhr.status); // 비동기 작업이 실패하면 reject를 호출합니다. } }; xhr.onerror = function () { reject("Network error"); }; xhr.send(); }); } // 예시 데이터, 이 부분에서는 서버로부터 받아온 게시글 데이터를 모방합니다. // 실제 애플리케이션에서는 이 배열이 서버로부터 동적으로 받아온 데이터일 것입니다. const postsPerPage = 2; // 페이지 당 보여줄 게시글의 수를 정의합니다. let currentPage = 1; // 현재 페이지를 나타내는 변수, 초기값은 1 페이지입니다. // 현재 페이지에 해당하는 게시글들을 화면에 렌더링하는 함수입니다. async function renderPosts() { const postsContainer = document.getElementById('posts-container'); postsContainer.innerHTML = ''; // 게시글을 담는 컨테이너를 초기화합니다. // 현재 페이지에 보여줄 게시글의 범위를 계산합니다. const start = (currentPage - 1) * postsPerPage; const end = start + postsPerPage; let box_content = await play_1(currentPage - 1); //console.log(box_content); // slice를 사용하여 현재 페이지에 해당하는 게시글 부분집합을 가져옵니다. const paginatedPosts = box_content.slice(0,2); //posts.slice(start, end); if(paginatedPosts.length<2) { paginatedPosts.forEach(async post => { let img = PrHo+"/api/news/image?id=" + post.id; let text = post.title; let content = post.content; let maxLength = 20; if(text.length > maxLength) { post.title = text.substring(0, maxLength) + '...'; } if(content.length > maxLength) { post.content = content.substring(0, maxLength) + '...'; } const postElement = document.createElement('div'); postElement.classList.add('post-item'); // 스타일 적용을 위한 클래스 추가 postElement.innerHTML = `My Happy SVG

${post.title}

${post.content}

`; // 게시글 제목과 내용을 설정 postsContainer.appendChild(postElement); // 생성된 요소를 DOM에 추가 const postElement2 = document.createElement('div'); postElement2.classList.add('post-item'); // 스타일 적용을 위한 클래스 추가 postsContainer.appendChild(postElement2); }); } else{ // 각 게시글에 대해 HTML 요소를 생성하고 컨테이너에 추가합니다. paginatedPosts.forEach(async post => { //let img = await new_img(1); let img = PrHo+"/api/news/image?id=" + post.id; //console.log(post.id); let text = post.title; let content = post.content; let maxLength = 20; if(text.length > maxLength) { post.title = text.substring(0, maxLength) + '...'; } if(content.length > maxLength) { post.content = content.substring(0, maxLength) + '...'; } const postElement = document.createElement('div'); postElement.classList.add('post-item'); // 스타일 적용을 위한 클래스 추가 postElement.innerHTML = `My Happy SVG

${post.title}

${post.content}

`; // 게시글 제목과 내용을 설정 postsContainer.appendChild(postElement); // 생성된 요소를 DOM에 추가 }); } } async function renderPagination() { let num = await play(); const pagination = document.getElementById('pagination'); pagination.innerHTML = ''; const pageCount = num; // 이전 페이지 버튼 추가 const prevButton = document.createElement('button'); prevButton.textContent = '<'; prevButton.classList.add('page-item'); prevButton.disabled = currentPage === 1; // 첫 페이지에서는 비활성화 prevButton.addEventListener('click', () => { currentPage -= 1; // 현재 페이지 번호 감소 renderPosts(); renderPagination(); }); pagination.appendChild(prevButton); // 숫자 페이지 버튼 추가 for (let i = 1; i <= pageCount; i++) { const pageItem = document.createElement('button'); pageItem.textContent = i; pageItem.classList.add('page-item'); if (i === currentPage) { pageItem.classList.add('active'); } pageItem.addEventListener('click', () => { currentPage = i; renderPosts(); renderPagination(); }); pagination.appendChild(pageItem); } // 다음 페이지 버튼 추가 const nextButton = document.createElement('button'); nextButton.textContent = '>'; nextButton.classList.add('page-item'); nextButton.disabled = currentPage === pageCount; // 마지막 페이지에서는 비활성화 nextButton.addEventListener('click', () => { currentPage += 1; // 현재 페이지 번호 증가 renderPosts(); renderPagination(); }); pagination.appendChild(nextButton); } // 초기 게시글 및 페이지네이션 렌더링을 실행합니다. renderPosts(); renderPagination(); });