CrownyDoc 문서목록 UI 4종 개선

개요

docs.crowny.org 포트 4100 서버의 /docs/ 목록 페이지 UI를 4가지 항목으로 개선.

무엇을 했는지

개선 1: 실시간 검색 하이라이트 + URL 파라미터

• 검색어 입력 시 목록 내 제목에서 매칭 부분을 <mark> 태그로 강조 표시
• foundMsg 요소로 "N개 문서 발견" 메시지 실시간 표시
• updateUrl() 함수로 URL에 ?q=검색어 파라미터 자동 업데이트 (history.replaceState)
• 초기 진입 시 URL의 q 파라미터를 읽어 즉시 검색 적용 (공유 가능한 링크)

개선 2: 정렬 토글 버튼

• 정렬 바 추가: 최신순(기본) / 오래된순 / 이름순 / 크기순
• FILE_SIZES, FILE_MTIMES 객체를 서버에서 서버사이드 렌더링으로 주입
• sortItems() 함수로 DOM 재정렬 (.appendChild() 순서 변경)
• 활성 버튼에 .active 클래스 토글

개선 3: 통계 대시보드 (서버사이드 렌더링으로 전환)

• 기존 JS 비동기 로드 방식 → 서버 측에서 즉시 계산하여 HTML에 포함
• 4개 카드: 총 문서 수 / 이번 주 추가 / 카테고리 수 / 총 용량(KB/MB)
• 총 용량 카드: 1MB 이상이면 MB 단위로 자동 변환
• 녹색 강조색(.stat-card.green) 추가

개선 4: 카테고리 버튼에 문서 수 뱃지

• catCount 객체로 서버사이드에서 카테고리별 문서 수 집계
• 버튼 형태: 컴파일러 (14) — <span class="cat-count">N</span> 스타일
• "전체" 버튼에도 전체 문서 수 표시
• 활성 버튼 상태에서 뱃지 배경색도 함께 변경

관련 파일 경로

• 서버: /Users/ef/CrownyDoc/server-docs.js (2061~2310줄 범위, /docs/ GET 라우트)
• 한선씨 동반: /Users/ef/CrownyDoc/한선씨/서버/문서목록UI.한선

잔여 이슈

• 본문 검색(fullSearch) 결과에도 하이라이트 적용됨 (이미 구현)
• 정렬 시 data-slug 속성이 li 태그에 필요 — 이번에 추가함
• URL의 /docs?q= 및 /docs/?q= 두 형태 모두 처리하도록 라우트 조건 추가