실시간 검색 필터링

1. 실시간 검색 필터링 (Search Filtering)

별도의 '검색' 버튼을 누르지 않아도 사용자가 입력하는 즉시 목록이 필터링되는 방식입니다. :is(), :has()와 같은 최신 선택자를 활용한 기존 레이아웃과 완벽하게 호환됩니다.

HTML 구조 (게시판 상단에 추가)

HTML

 

<div class="search-container">
    <input type="text" id="board-search" placeholder="제목 또는 작성자로 검색하세요...">
    <div id="search-count" class="search-count">전체 게시글: 3개</div>
</div>

JavaScript 로직

JavaScript

 

const searchInput = document.getElementById('board-search');
const tableRows = document.querySelectorAll('.table-body li');
const countDisplay = document.getElementById('search-count');

searchInput.addEventListener('input', (e) => {
    const term = e.target.value.toLowerCase();
    let visibleCount = 0;

    tableRows.forEach(row => {
        // 제목과 작성자 텍스트를 가져와서 검색어 포함 여부 확인
        const title = row.querySelector('.b-title').textContent.toLowerCase();
        const writer = row.querySelector('.b-writer').textContent.toLowerCase();

        if (title.includes(term) || writer.includes(term)) {
            row.style.display = 'flex'; // 일치하면 보임
            visibleCount++;
        } else {
            row.style.display = 'none'; // 일치하지 않으면 숨김
        }
    });

    countDisplay.textContent = `검색 결과: ${visibleCount}개`;
});

 

2. 로딩 스피너 애니메이션 (Loading Spinner)

페이지를 처음 불러오거나, 데이터를 새로고침할 때 보여줄 깔끔한 스피너입니다. CSS 변수를 활용하여 다크 모드에서도 색상이 자동으로 조절되도록 설계했습니다.

CSS 스타일

CSS

 

/* 스피너 컨테이너 (화면 중앙 정렬) */
.loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(var(--bg-main-rgb), 0.8); /* 배경 변수 활용 */
    display: none; /* 기본은 숨김 */
    justify-content: center; align-items: center;
    z-index: 9999;
}

/* 실제 스피너 모양 */
.spinner {
    width: 40px; height: 40px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color); /* 포인트 컬러 활용 */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

JavaScript 활용 (로딩 시뮬레이션)

JavaScript

 

function showLoading() {
    const overlay = document.querySelector('.loading-overlay');
    overlay.style.display = 'flex';
    
    // 1.5초 후 로딩 완료 시뮬레이션
    setTimeout(() => {
        overlay.style.display = 'none';
    }, 1500);
}

// 페이지 로드 시 실행 예시
window.addEventListener('load', showLoading);

---

3. 디자인 시스템 연동 포인트 (CSS)

검색바와 스피너가 다크 모드에서도 예쁘게 보이도록 디자인 시스템 변수를 적용합니다.

CSS

 

.search-container {
    margin-bottom: 20px;
    display: flex; flex-direction: column; gap: 8px;
}

#board-search {
    padding: 12px 20px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-main);
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
}

#board-search:focus {
    border-color: var(--primary-color);
}

.search-count {
    font-size: 13px;
    color: var(--text-muted);
    padding-left: 5px;
}

💡 기능 시너지 가이드

• 검색 필터링: includes() 함수를 사용하여 대소문자 구분 없이 제목과 작성자를 동시에 검색합니다. 목록이 수백 개라면 display: none 대신 가상 리스트를 쓰기도 하지만, 일반적인 게시판에서는 이 정도로 충분히 빠릅니다.
• 로딩 스피너: 페이지가 처음 뜰 때뿐만 아니라, 글을 저장하거나 삭제한 뒤 목록으로 돌아올 때 showLoading()을 호출하면 사용자에게 "시스템이 처리 중이다"라는 명확한 피드백을 줄 수 있습니다.

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.