AI 웹 개발 : UI/UX 개선 + 코드 최적화로 게시판 완성하기 (초보자ㆍ비전공자를 위한 AI 웹 개발 실무 시리즈) | Part 5

너는 실무 웹 개발자야.
현재 게시판 프로젝트의 프론트엔드 코드를
유지보수성과 성능을 기준으로 개선하려고 해.
기능 변경 없이 구조만 개선해줘.

/**
     * 검색 기능 초기화
     */
    function initSearch() {
        const searchForm = document.querySelector('.search-form');
        const searchInput = document.getElementById('search-keyword');
        const searchBtn = document.querySelector('.search-btn');

        if (!searchForm || !searchInput || !searchBtn) return;

        // 검색 버튼 클릭 이벤트
        searchBtn.addEventListener('click', handleSearch);

        // Enter 키 이벤트
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                handleSearch();
            }
        });
    }

/**
     * 필터 기능 초기화
     */
    function initFilter() {
        const sortFilter = document.getElementById('sort-filter');
        
        if (!sortFilter) return;

        sortFilter.addEventListener('change', function(e) {
            const sortValue = e.target.value;
            // 정렬 로직 구현 (현재는 구조만 제공)
            console.log('정렬 방식:', sortValue);
        });
    }

리팩토링 기준은 다음이야.
1. 중복 코드 제거
2. 함수 단위 책임 분리
3. 전역 변수 최소화
4. 렌더링 로직과 데이터 로직 분리

// ============================================
    // 데이터 모듈 (Data Module)
    // ============================================
    const DataManager = {
        /**
         * 검색어 처리
         */
        processSearch: function(keyword) {
            const trimmedKeyword = keyword.trim();
            // 검색 로직 구현 (데이터 처리만 담당)
            return {
                keyword: trimmedKeyword,
                isValid: trimmedKeyword.length > 0
            };
        },

        /**
         * 정렬 처리
         */
        processSort: function(sortValue) {
            // 정렬 로직 구현 (데이터 처리만 담당)
            return {
                sortType: sortValue,
                sortOrder: sortValue === 'latest' ? 'desc' : 'asc'
            };
        },

        /**
         * 페이지네이션 처리
         */
        processPagination: function(pageInfo) {
            // 페이지네이션 로직 구현 (데이터 처리만 담당)
            return {
                currentPage: pageInfo.page || 1,
                action: pageInfo.action || 'move'
            };
        }
    };

먼저 게시글 목록 렌더링 부분만 리팩토링해줘.
전체 파일을 한 번에 수정하지 말고,
변경 이유를 주석으로 설명해줘.

const DataManager = {
        /**
         * 게시글 데이터 저장소
         * 변경 이유: HTML에 하드코딩된 데이터를 JavaScript로 분리하여
         * 데이터와 렌더링 로직을 분리하고, 향후 API 연동 시 쉽게 교체 가능하도록 함
         */
        posts: [
            { id: 1, title: '첫 번째 게시글 제목입니다', author: '홍길동', date: '2024-01-15', views: 123 },
            { id: 2, title: '두 번째 게시글 제목입니다', author: '김철수', date: '2024-01-14', views: 456 },
            { id: 3, title: '세 번째 게시글 제목입니다', author: '이영희', date: '2024-01-13', views: 789 },
            { id: 4, title: '네 번째 게시글 제목입니다', author: '박민수', date: '2024-01-12', views: 234 },
            { id: 5, title: '다섯 번째 게시글 제목입니다', author: '최지영', date: '2024-01-11', views: 567 }
        ],

        /**
         * 게시글 목록 조회
         * 변경 이유: 데이터 접근을 함수로 캡슐화하여 향후 필터링, 정렬 등의
         * 로직을 추가할 때 유연하게 대응 가능하도록 함
         */
        getPosts: function() {
            return this.posts;
        },

기존 기능과 동작이 동일한지 체크 포인트를 정리해줘.
추가로 개선 가능한 부분이 있다면 목록으로만 제안해줘.

### 1. 게시글 목록 렌더링
- [ ] **게시글 개수**: 5개 게시글이 모두 표시되는가?
- [ ] **게시글 순서**: 번호 순서대로 표시되는가? (1, 2, 3, 4, 5)
- [ ] **게시글 데이터**: 제목, 작성자, 날짜, 조회수가 원본과 동일한가?
  - 게시글 1: "첫 번째 게시글 제목입니다", 홍길동, 2024.01.15, 123
  - 게시글 2: "두 번째 게시글 제목입니다", 김철수, 2024.01.14, 456
  - 게시글 3: "세 번째 게시글 제목입니다", 이영희, 2024.01.13, 789
  - 게시글 4: "네 번째 게시글 제목입니다", 박민수, 2024.01.12, 234
  - 게시글 5: "다섯 번째 게시글 제목입니다", 최지영, 2024.01.11, 567

### 2. HTML 구조 및 클래스명
- [ ] **컨테이너**: `.post-list` 클래스가 유지되는가?
- [ ] **게시글 아이템**: `.post-item` 클래스가 각 게시글에 적용되는가?
- [ ] **하위 요소 클래스명**:
  - `.post-number` (게시글 번호)
  - `.post-title` (제목 컨테이너)
  - `.post-link` (제목 링크)
  - `.post-author` (작성자)
  - `.post-date` (작성일)
  - `.post-views` (조회수)
- [ ] **시맨틱 태그**: `<article>`, `<time>` 태그가 올바르게 사용되는가?
- [ ] **링크**: `detail.html`로 연결되는가?