feat: add typo-tolerant and Korean initial search to Q&A list

egbim/app.js

@@ -137,10 +137,114 @@
     };
   }
 
-  async function loadRemotePosts() {
-    const result = await requestJson("/api/feedbacks?limit=100&page=1", { method: "GET" });
-    const items = Array.isArray(result) ? result : (result.items || result.data && result.data.items || []);
-    return { posts: (Array.isArray(items) ? items : []).map(normalizeRemotePost).filter(function (post) { return post.id; }), meta: result.meta || result.data && result.data.meta || {} };
+  async function loadRemotePosts(onPage) {
+    const posts = [];
+    const seen = new Set();
+    let meta = {};
+    for (let page = 1; ; page += 1) {
+      const result = await requestJson('/api/feedbacks?limit=100&page=' + page, { method: 'GET' });
+      const items = Array.isArray(result) ? result : (result.items || result.data && result.data.items || []);
+      if (!Array.isArray(items)) throw new Error('문의 목록 응답을 확인할 수 없습니다.');
+      const previousCount = posts.length;
+      items.map(normalizeRemotePost).forEach(function (post) {
+        if (post.id && !seen.has(post.id)) { seen.add(post.id); posts.push(post); }
+      });
+      if (page > 1 && items.length && posts.length === previousCount) throw new Error('문의 목록의 다음 페이지를 불러오지 못했습니다.');
+      meta = result.meta || result.data && result.data.meta || {};
+      const totalPages = Number(meta.totalPages ?? meta.total_pages);
+      const total = Number(meta.total ?? meta.totalCount ?? meta.total_count);
+      if (!items.length && (Number.isFinite(total) && posts.length < total || Number.isFinite(totalPages) && page < totalPages)) {
+        throw new Error('문의 목록을 끝까지 불러오지 못했습니다.');
+      }
+      const hasMore = items.length > 0 && (Number.isFinite(totalPages) ? page < totalPages : Number.isFinite(total) ? posts.length < total : items.length === 100);
+      if (onPage) onPage({ posts: posts.slice(), meta: meta, complete: !hasMore });
+      if (!hasMore) return { posts: posts, meta: meta };
+    }
+  }
+
+  const HANGUL_INITIALS = 'ㄱㄲㄴㄷㄸㄹㅁㅂㅃㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎ';
+  const searchIndex = new WeakMap();
+
+  function normalizeSearchText(value) {
+    return String(value || '').normalize('NFKC').toLowerCase()
+      .replace(/[\u1100-\u1112]/g, function (char) { return HANGUL_INITIALS[char.charCodeAt(0) - 0x1100]; })
+      .replace(/[\p{P}\p{S}]+/gu, ' ').replace(/\s+/g, ' ').trim();
+  }
+
+  function hangulInitials(value) {
+    return Array.from(value).map(function (char) {
+      const code = char.charCodeAt(0) - 0xac00;
+      return code >= 0 && code <= 11171 ? HANGUL_INITIALS[Math.floor(code / 588)] : char;
+    }).join('');
+  }
+
+  // Find a near substring, allowing insertions, deletions, substitutions and adjacent swaps.
+  function fuzzySubstringDistance(query, text, limit) {
+    const cap = limit + 1;
+    const characters = Array.from({ length: query.length }, function (_, index) { return query.charCodeAt(index); });
+    let previous = new Uint8Array(query.length + 1);
+    let beforePrevious = new Uint8Array(query.length + 1);
+    let current = new Uint8Array(query.length + 1);
+    for (let j = 0; j <= query.length; j += 1) previous[j] = Math.min(j, cap);
+    let best = limit + 1;
+    for (let i = 0; i < text.length; i += 1) {
+      const character = text.charCodeAt(i);
+      const preceding = text.charCodeAt(i - 1);
+      current[0] = 0;
+      for (let j = 1; j <= query.length; j += 1) {
+        let distance = previous[j - 1] + (character === characters[j - 1] ? 0 : 1);
+        if (previous[j] + 1 < distance) distance = previous[j] + 1;
+        if (current[j - 1] + 1 < distance) distance = current[j - 1] + 1;
+        if (i > 0 && j > 1 && character === characters[j - 2] && preceding === characters[j - 1] && beforePrevious[j - 2] + 1 < distance) {
+          distance = beforePrevious[j - 2] + 1;
+        }
+        current[j] = distance > cap ? cap : distance;
+      }
+      if (current[query.length] < best) best = current[query.length];
+      // Exact substrings are checked by the caller; one edit is the best remaining match.
+      if (best <= 1) return best;
+      const reusable = beforePrevious;
+      beforePrevious = previous;
+      previous = current;
+      current = reusable;
+    }
+    return best;
+  }
+
+  function searchPosts(posts, query) {
+    const terms = normalizeSearchText(query).split(' ').filter(Boolean);
+    if (!terms.length) return posts.slice();
+    return posts.map(function (post, index) {
+      let fields = searchIndex.get(post);
+      if (!fields) {
+        fields = [post.title, post.content, getPostCompanyLabel(post), post.department, post.author].map(function (value, field) {
+          const text = normalizeSearchText(value).replace(/ /g, '');
+          return { text: text, initials: hangulInitials(text), characters: new Set(text), weight: field === 0 ? 0 : field === 1 ? 3 : 2 };
+        });
+        searchIndex.set(post, fields);
+      }
+      let score = 0;
+      for (const term of terms) {
+        let best = Infinity;
+        const initialsOnly = /^[ㄱㄲㄴㄷㄸㄹㅁㅂㅃㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎ]{2,}$/.test(term);
+        const limit = term.length >= 6 ? 2 : term.length >= 3 ? 1 : 0;
+        for (const field of fields) {
+          if (field.text.includes(term)) best = Math.min(best, field.weight);
+          else if (initialsOnly && field.initials.includes(term)) best = Math.min(best, 1 + field.weight);
+          else if (!initialsOnly && limit && term.length <= 32 && field.text) {
+            if (Array.from(term).filter(function (char) { return !field.characters.has(char); }).length > limit) continue;
+            const distance = fuzzySubstringDistance(term, field.text, limit);
+            if (distance <= limit) best = Math.min(best, 10 * distance + field.weight);
+          }
+          if (best === 0) break;
+        }
+        if (!Number.isFinite(best)) return { post: post, index: index, score: Infinity };
+        score += best;
+      }
+      return { post: post, index: index, score: score };
+    }).filter(function (match) { return Number.isFinite(match.score); })
+      .sort(function (a, b) { return a.score - b.score || a.index - b.index; })
+      .map(function (match) { return match.post; });
   }
 
   function savePost(post) {
@@ -475,6 +579,9 @@
     let page = 1;
     let posts = getPosts();
     let remoteLoaded = false;
+    let loadFailed = false;
+    let receivedRemotePage = false;
+    const searchStatus = qs('#searchStatus');
 
     function getPostCompany(post, user) { return getPostCompanyLabel(post, user); }
 
@@ -484,19 +591,20 @@
       const categoryFilter = selectedCategory ? selectedCategory.value : "전체";
       const onlyMine = qs("#onlyMine").checked;
       const user = getAuthUser();
-      const filtered = posts.filter(function (post) {
+      const filtered = searchPosts(posts.filter(function (post) {
         const matchesCategory = categoryFilter === "전체" || categoryFilter === post.category;
-        const company = getPostCompany(post, user);
-        const haystack = [post.title, post.content, company, post.department, post.author].join(" ").toLowerCase();
-        const matchesQuery = !query || haystack.indexOf(query) > -1;
         const matchesMine = !onlyMine || isPostOwner(post, user);
-        return matchesCategory && matchesQuery && matchesMine;
-      });
+        return matchesCategory && matchesMine;
+      }), query);
       const pageSize = config.pageSize || 10;
       const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
       page = Math.min(page, totalPages);
       const rows = filtered.slice((page - 1) * pageSize, page * pageSize);
       if (resultCount) resultCount.textContent = "총 " + filtered.length + "건";
+      if (searchStatus) {
+        searchStatus.hidden = remoteLoaded && !loadFailed && !query;
+        searchStatus.textContent = loadFailed ? '목록을 모두 불러오지 못했습니다. 현재 불러온 글에서 검색합니다. 새로고침해 주세요.' : !remoteLoaded ? '문의 목록을 불러오는 중입니다. 검색 결과가 추가될 수 있습니다.' : '검색 결과 ' + filtered.length + '건';
+      }
       if (empty) {
         empty.textContent = remoteLoaded || posts.length ? "검색 조건에 맞는 문의가 없습니다." : "문의 목록을 불러오는 중입니다.";
         empty.style.display = rows.length ? "none" : "block";
@@ -514,7 +622,11 @@
           "<td>" + escapeHtml(post.dateTime || post.date) + "</td><td>" + (status ? "<span class=\"status " + statusClass + "\">" + escapeHtml(status) + "</span>" : "-") + "</td></tr>";
       }).join("");
       qsa("#qaRows tr").forEach(function (row) { row.addEventListener("click", function () { window.location.href = "detail.html?id=" + encodeURIComponent(row.dataset.id); }); });
-      pagination.innerHTML = Array.from({ length: totalPages }, function (_, i) { return "<button type=\"button\" class=\"" + (i + 1 === page ? "active" : "") + "\" data-page=\"" + (i + 1) + "\">" + (i + 1) + "</button>"; }).join("");
+      const visiblePages = Array.from(new Set([1, totalPages, page - 2, page - 1, page, page + 1, page + 2])).filter(function (value) { return value >= 1 && value <= totalPages; }).sort(function (a, b) { return a - b; });
+      pagination.innerHTML = '<button type="button" data-page="' + Math.max(1, page - 1) + '" aria-label="이전 페이지"' + (page === 1 ? ' disabled' : '') + '>‹</button>' + visiblePages.map(function (value, index) {
+        const gap = index > 0 && value - visiblePages[index - 1] > 1 ? '<span aria-hidden="true">…</span>' : '';
+        return gap + '<button type="button" class="' + (value === page ? 'active' : '') + '" data-page="' + value + '"' + (value === page ? ' aria-current="page"' : '') + '>' + value + '</button>';
+      }).join('') + '<button type="button" data-page="' + Math.min(totalPages, page + 1) + '" aria-label="다음 페이지"' + (page === totalPages ? ' disabled' : '') + '>›</button>';
       qsa("#pagination button").forEach(function (button) { button.addEventListener("click", function () { page = Number(button.dataset.page); render(); window.scrollTo({ top: 360, behavior: "smooth" }); }); });
     }
 
@@ -522,15 +634,16 @@
     qsa("input[name=category], #onlyMine").forEach(function (input) { input.addEventListener("change", function () { page = 1; render(); }); });
     render();
     if (authReady) authReady.then(render);
-    loadRemotePosts().then(function (result) {
+    loadRemotePosts(function (result) { receivedRemotePage = true; posts = result.posts; render(); }).then(function (result) {
       posts = result.posts;
       remoteLoaded = true;
       render();
     }).catch(function (error) {
       console.warn("[QA] feedback list load failed:", error.message);
       remoteLoaded = true;
+      loadFailed = true;
       render();
-      refreshRemoteStatuses(posts).then(function (changed) { if (changed) render(); });
+      if (!receivedRemotePage) refreshRemoteStatuses(posts).then(function (changed) { if (changed) render(); });
     });
   }
 

egbim/detail.html

@@ -1,8 +1,8 @@
 <!doctype html>
 <html lang="ko">
-<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>문의 상세 | EG-BIM Q&amp;A</title><link rel="stylesheet" href="../assets/styles.css?v=20260929-3"></head>
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>문의 상세 | EG-BIM Q&amp;A</title><link rel="stylesheet" href="../assets/styles.css?v=20261030-search-1"></head>
 <body>
   <main class="egbim-page"><section class="page-hero"><div class="hero-inner"><span class="hero-kicker">EG-BIM SUPPORT</span><h1>Q&amp;A</h1><p>EG-BIM 관련 문의하기</p></div><nav class="sub-nav" aria-label="EG-BIM 지원 메뉴"><div class="sub-nav-inner"><a href="index.html" aria-current="page">문의하기(Q&amp;A)</a><a href="#" aria-disabled="true" class="disabled-tab">원격지원</a></div></nav></section>
     <section class="page-shell" id="detail"><div class="section-heading"><div><h2>문의 상세</h2><p>문의 내용과 답변을 확인할 수 있습니다.</p></div></div><article class="detail-card"><div class="detail-head"><div class="detail-title-line"><h2><span class="category" data-detail-category>문의</span> <span data-detail-title>문의 제목</span></h2><span class="status review" data-detail-status>문의접수</span></div><div class="detail-meta"><span data-detail-date>2026-09-17</span><span data-detail-author>작성자</span><span data-detail-company>회사</span><span data-detail-department>부서</span><span data-detail-secret hidden>🔒 비밀글</span></div></div><div class="detail-body" data-detail-content></div><div class="attachments"><h3>첨부파일</h3><div data-detail-attachments><span class="help-text">첨부된 파일이 없습니다.</span></div></div><div id="completionNotice" class="completion-notice" hidden><div><strong>처리 완료 안내</strong><p>담당자가 처리를 완료했습니다. 내용을 확인하셨다면 완료 확인을 눌러주세요.</p></div><button class="button button-primary" id="completionButton" type="button">완료 확인</button></div><div id="completionDoneNotice" class="completion-done-notice" hidden>완료 처리 된 요청 건입니다.</div><div class="detail-actions"><div class="owner-actions"><button class="button button-outline" id="editButton" type="button" hidden>수정</button><button class="button button-danger" id="deleteButton" type="button" hidden>삭제</button></div><a class="button button-outline" href="index.html">목록</a></div></article><form id="editForm" class="edit-form" hidden><h3>문의 수정</h3><div class="form-row"><label class="form-label" for="editCategory">구분</label><div class="form-control"><select id="editCategory" class="select"><option value="오류문의">오류문의</option><option value="개선문의">개선문의</option><option value="일반문의">일반문의</option></select></div></div><div class="form-row"><label class="form-label" for="editTitle">제목</label><div class="form-control"><input id="editTitle" class="input" maxlength="200" required></div></div><div class="form-row"><label class="form-label" for="editContent">내용</label><div class="form-control column"><textarea id="editContent" class="textarea" maxlength="10000" required></textarea></div></div><div class="form-row"><div class="form-label">설정</div><div class="form-control"><label class="check"><input id="editSecret" type="checkbox"> 비밀글</label></div></div><div class="form-footer"><button class="button button-outline" id="editCancel" type="button">취소</button><button class="button button-primary" type="submit">수정 저장</button></div><div id="editError" class="form-error" role="alert" hidden></div></form><section class="comment-box"><h3>답변 <span id="commentCount">0</span></h3><div id="comments"></div><form id="commentForm" class="comment-form"><label class="sr-only" for="commentContent">댓글 내용</label><textarea id="commentContent" class="textarea" maxlength="5000" placeholder="답변 또는 추가 문의를 입력해주세요" required></textarea><div class="comment-attachment-input"><label class="button button-primary comment-image-button" for="commentImages">이미지 첨부</label><input id="commentImages" type="file" accept="image/*" multiple><div id="commentImagePreview" class="comment-image-preview"></div></div><div class="comment-form-actions"><span id="commentError" class="form-error" role="alert" hidden></span><button class="button button-primary" id="commentSubmit" type="submit">댓글 등록</button></div></form></section><div class="form-footer"><button class="button button-outline" id="backButton" type="button">목록으로</button></div></section>
-  </main><script src="config.js?v=20260921-3"></script><script src="app.js?v=20261027-org-1"></script>
+  </main><script src="config.js?v=20260921-3"></script><script src="app.js?v=20261030-search-1"></script>
 </body></html>

egbim/index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="EG-BIM Q&A 문의 게시판">
   <title>EG-BIM Q&A | 바론컨설턴트</title>
-  <link rel="stylesheet" href="../assets/styles.css?v=20260929-3">
+  <link rel="stylesheet" href="../assets/styles.css?v=20261030-search-1">
 </head>
 <body>
   <main class="qa-list-page">
@@ -16,13 +16,14 @@
     <section class="page-shell">
       <div class="qa-list-heading"><h1>문의하기(Q&amp;A)</h1></div>
       <form class="filter-panel" id="searchForm">
-        <div class="filter-row"><div class="chip-group"><label class="chip"><input type="radio" name="category" value="전체" checked>전체</label><label class="chip"><input type="radio" name="category" value="일반문의">일반</label><label class="chip"><input type="radio" name="category" value="개선문의">개선</label><label class="chip"><input type="radio" name="category" value="오류문의">오류</label></div><label class="check"><input type="checkbox" id="onlyMine">내가 작성한 글</label><span class="filter-spacer"></span><div class="search-form"><input id="query" type="search" placeholder="제목+내용 검색어를 입력하세요" aria-label="게시글 검색"><button class="button search-button" type="submit"><span aria-hidden="true">⌕</span> 검색</button></div></div>
+        <div class="filter-row"><div class="chip-group"><label class="chip"><input type="radio" name="category" value="전체" checked>전체</label><label class="chip"><input type="radio" name="category" value="일반문의">일반</label><label class="chip"><input type="radio" name="category" value="개선문의">개선</label><label class="chip"><input type="radio" name="category" value="오류문의">오류</label></div><label class="check"><input type="checkbox" id="onlyMine">내가 작성한 글</label><span class="filter-spacer"></span><div class="search-form"><input id="query" type="search" maxlength="120" placeholder="검색어 입력 (오타·초성 지원)" aria-label="제목·내용·회사·부서·작성자 검색 (오타·초성 지원)"><button class="button search-button" type="submit"><span aria-hidden="true">⌕</span> 검색</button></div></div>
       </form>
+      <p id="searchStatus" class="help-text" role="status" aria-live="polite" hidden></p>
       <div class="table-wrap"><table class="qa-table"><caption class="sr-only">EG-BIM 문의 목록</caption><colgroup><col style="width:6%"><col style="width:8%"><col style="width:13%"><col style="width:11%"><col style="width:7%"><col style="width:38%"><col style="width:11%"><col style="width:6%"></colgroup><thead><tr><th>번호</th><th>구분</th><th>회사</th><th>부서</th><th>작성자</th><th>제목</th><th>등록일</th><th>상태</th></tr></thead><tbody id="qaRows"></tbody></table><div class="table-empty" id="tableEmpty">검색 조건에 맞는 문의가 없습니다.</div></div>
       <div class="list-footer"><div class="pagination" id="pagination" aria-label="페이지 이동"></div><a class="button button-primary" href="write.html">문의등록</a></div>
     </section>
   </main>
   <div id="toast" class="toast" role="status" aria-live="polite"></div>
-  <script src="config.js?v=20260921-3"></script><script src="app.js?v=20261027-org-1"></script>
+  <script src="config.js?v=20260921-3"></script><script src="app.js?v=20261030-search-1"></script>
 </body>
 </html>

egbim/write.html

@@ -1,8 +1,8 @@
 <!doctype html>
 <html lang="ko">
-<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>문의 등록 | EG-BIM Q&amp;A</title><link rel="stylesheet" href="../assets/styles.css?v=20260929-3"></head>
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>문의 등록 | EG-BIM Q&amp;A</title><link rel="stylesheet" href="../assets/styles.css?v=20261030-search-1"></head>
 <body>
   <main class="egbim-page"><section class="page-hero"><div class="hero-inner"><span class="hero-kicker">EG-BIM SUPPORT</span><h1>Q&amp;A</h1><p>EG-BIM 관련 문의하기</p></div><nav class="sub-nav" aria-label="EG-BIM 지원 메뉴"><div class="sub-nav-inner"><a href="index.html" aria-current="page">문의하기(Q&amp;A)</a><a href="#" aria-disabled="true" class="disabled-tab">원격지원</a></div></nav></section>
     <section class="page-shell"><div class="section-heading"><div><h2>문의 등록</h2><p>로그인한 사용자 정보로 문의가 등록됩니다.</p></div></div><div class="form-notice" data-auth-state>로그인 상태를 확인하고 있습니다.</div><div class="form-error" id="formError" role="alert"></div><form id="qaForm" novalidate><div class="form-card" id="writeFields"><div class="form-row"><label class="form-label" for="category">구분 <span class="required">*</span></label><div class="form-control"><select class="select" id="category" required><option value="">선택해주세요</option><option>오류문의</option><option>개선문의</option><option>일반문의</option></select></div></div><div class="form-row"><label class="form-label" for="title">제목 <span class="required">*</span></label><div class="form-control"><input class="input" id="title" type="text" maxlength="100" placeholder="문의 제목을 입력해주세요" required></div></div><div class="form-row"><span class="form-label">공개 설정</span><div class="form-control"><label class="check"><input id="secret" type="checkbox"> 비밀글로 등록</label></div></div><div class="form-row"><label class="form-label" for="content">내용 <span class="required">*</span></label><div class="form-control column"><textarea class="textarea" id="content" placeholder="문의 내용을 작성해주세요" required></textarea><span class="help-text">개인정보, 비밀번호, 인증번호 등 민감한 정보는 입력하지 마세요.</span></div></div><div class="form-row"><label class="form-label" for="attachment">첨부파일</label><div class="form-control column"><input class="file-input" id="attachment" type="file" multiple><span class="help-text">파일은 문의와 함께 안전하게 업로드됩니다. 파일당 최대 30MB</span></div></div></div><div class="form-footer"><a class="button button-outline" href="index.html">취소</a><button class="button button-primary" id="submitButton" type="submit">문의 등록</button></div></form></section>
-  </main><div id="toast" class="toast" role="status" aria-live="polite"></div><script src="config.js?v=20260921-3"></script><script src="app.js?v=20261027-org-1"></script>
+  </main><div id="toast" class="toast" role="status" aria-live="polite"></div><script src="config.js?v=20260921-3"></script><script src="app.js?v=20261030-search-1"></script>
 </body></html>