// 성능 최적화를 위한 디바운싱 함수 function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // 초기 게시글 로딩 async function loadInitialPosts() { try { const response = await fetch('/api/posts?page=1&limit=10'); const result = await response.json(); if (result.success) { displayPosts(result.data); if (result.pagination.hasMore) { document.getElementById('load-more-container').style.display = 'block'; } } else { showError('게시글을 불러오는데 실패했습니다.'); } } catch (error) { console.error('초기 게시글 로딩 오류:', error); showError('게시글을 불러오는데 실패했습니다.'); } } // 게시글 표시 함수 function displayPosts(posts) { const container = document.getElementById('posts-container'); if (posts.length === 0) { container.innerHTML = '

게시글이 없습니다.

'; return; } container.innerHTML = posts.map(post => `

${post.isSticky ? '공지' : ''} ${post.category === 'tip' ? '자유게시판' : post.category === 'local' ? '질문' : post.category}

${post.title}

${post.content}

${new Date(post.createdAt).toLocaleDateString('ko-KR')} ${post.views} ${post.likes || 0} ${post.comments} 작성자: ${post.author}

`).join(''); } // 오류 표시 함수 function showError(message) { const container = document.getElementById('posts-container'); container.innerHTML = `

${message}

`; } // 게시글 로딩 함수 (최적화) async function loadMorePosts(page) { const loadMoreBtn = document.getElementById('load-more-btn'); if (!loadMoreBtn) return; try { loadMoreBtn.disabled = true; loadMoreBtn.innerHTML = '

불러오는 중...'; const response = await fetch(`/api/posts?page=${page}&limit=10`); const result = await response.json(); if (result.success && result.data.length > 0) { const postsContainer = document.getElementById('posts-container'); // 새로운 게시글들을 DOM에 추가 result.data.forEach(post => { const postElement = createPostElement(post); postsContainer.appendChild(postElement); }); // 다음 페이지 설정 if (result.pagination.hasMore) { loadMoreBtn.dataset.page = (parseInt(page) + 1).toString(); loadMoreBtn.disabled = false; loadMoreBtn.innerHTML = '⬇️ 더보기'; } else { loadMoreBtn.style.display = 'none'; } } else { loadMoreBtn.style.display = 'none'; } } catch (error) { console.error('게시글 로딩 오류:', error); loadMoreBtn.disabled = false; loadMoreBtn.innerHTML = '⬇️ 더보기'; } } // 게시글 요소 생성 함수 function createPostElement(post) { const card = document.createElement('div'); card.className = 'card post-card mb-3'; card.innerHTML = `

${post.isSticky ? '공지' : ''} ${post.category === 'tip' ? '자유게시판' : post.category === 'local' ? '질문' : post.category}

${post.title}

${post.content}

${new Date(post.createdAt).toLocaleDateString('ko-KR')} ${post.views} ${post.likes || 0} ${post.comments} 작성자: ${post.author}

`; return card; } // 검색 기능 (디바운싱 적용) const debouncedSearch = debounce(async function(searchTerm) { try { const response = await fetch(`/api/posts?search=${encodeURIComponent(searchTerm)}&page=1&limit=10`); const result = await response.json(); if (result.success) { displayPosts(result.data); if (result.pagination.hasMore) { document.getElementById('load-more-container').style.display = 'block'; } else { document.getElementById('load-more-container').style.display = 'none'; } } } catch (error) { console.error('검색 오류:', error); } }, 300); // 이벤트 리스너 등록 document.addEventListener('DOMContentLoaded', function() { // 초기 게시글 로딩 loadInitialPosts(); // 더보기 버튼 기능 const loadMoreBtn = document.getElementById('load-more-btn'); if (loadMoreBtn) { loadMoreBtn.addEventListener('click', function() { const nextPage = this.dataset.page; if (nextPage) { loadMorePosts(nextPage); } }); } // 검색 기능 const searchInput = document.getElementById('search-input'); if (searchInput) { searchInput.addEventListener('input', function() { debouncedSearch(this.value); }); } // 카테고리 필터 기능 const categoryButtons = document.querySelectorAll('.category-badge[data-category]'); categoryButtons.forEach(button => { button.addEventListener('click', async function() { const category = this.dataset.category; // 활성 상태 변경 categoryButtons.forEach(btn => { btn.className = 'btn btn-outline-secondary category-badge'; }); this.className = 'btn btn-secondary category-badge'; try { const url = category === 'all' ? '/api/posts?page=1&limit=10' : `/api/posts?category=${category}&page=1&limit=10`; const response = await fetch(url); const result = await response.json(); if (result.success) { displayPosts(result.data); if (result.pagination.hasMore) { document.getElementById('load-more-container').style.display = 'block'; } else { document.getElementById('load-more-container').style.display = 'none'; } } } catch (error) { console.error('카테고리 필터 오류:', error); } }); }); });