공개 검색 조합 입력 반영 개선
This commit is contained in:
@@ -38,9 +38,6 @@ const scheduleDebouncedQuery = (value) => {
|
||||
}
|
||||
|
||||
watch(query, (value) => {
|
||||
if (isComposing.value) {
|
||||
return
|
||||
}
|
||||
scheduleDebouncedQuery(value)
|
||||
})
|
||||
|
||||
@@ -132,8 +129,8 @@ const onCompositionStart = () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* 입력 이벤트에서 최종 검색어를 갱신한다.
|
||||
* @param {InputEvent} event - 입력 이벤트
|
||||
* 입력 이벤트에서 화면에 보이는 검색어를 갱신한다.
|
||||
* @param {InputEvent | CompositionEvent} event - 입력 이벤트
|
||||
* @returns {void}
|
||||
*/
|
||||
const onInput = (event) => {
|
||||
@@ -142,10 +139,6 @@ const onInput = (event) => {
|
||||
return
|
||||
}
|
||||
query.value = target.value
|
||||
if (isComposing.value || event.isComposing) {
|
||||
clearTimeout(debounceTimer)
|
||||
return
|
||||
}
|
||||
scheduleDebouncedQuery(target.value)
|
||||
}
|
||||
|
||||
@@ -234,6 +227,7 @@ onBeforeUnmount(() => {
|
||||
class="site-search-modal__input min-w-0 flex-1 bg-transparent py-2 text-lg outline-none placeholder:text-[var(--site-soft)] focus-visible:ring-0 sm:text-[1.35rem]"
|
||||
placeholder="글 제목, 본문, 태그 검색"
|
||||
@compositionstart="onCompositionStart"
|
||||
@compositionupdate="onInput"
|
||||
@compositionend="onCompositionEnd"
|
||||
@input="onInput"
|
||||
/>
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# 업데이트 요약
|
||||
|
||||
## v1.9.25
|
||||
|
||||
- 공개 검색에서 한글 마지막 글자가 조합 중일 때 결과가 직전 검색어에 머무르던 문제를 수정했다.
|
||||
|
||||
## v1.9.24
|
||||
|
||||
- 공개 검색에서 한글 입력 조합 중 미완성 검색어로 결과가 비는 문제를 보정했다.
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# 의사결정 이력
|
||||
|
||||
## 2026-07-01 v1.9.25 — 검색은 IME 조합 중 표시값도 따라간다
|
||||
|
||||
한글 IME에서 마지막 글자가 아직 밑줄 상태이면 사용자는 완성된 검색어를 보고 있어도 브라우저는 조합 중으로 유지할 수 있다. 조합 중 검색 요청을 완전히 멈추면 `소문`처럼 화면에는 두 글자가 보여도 결과는 직전 확정값인 `소`에 머문다. 따라서 통합 검색은 조합 중에도 입력창의 현재 표시값을 디바운스로 반영하고, 조합 종료 시 최종 값을 즉시 확정한다.
|
||||
|
||||
## 2026-07-01 v1.9.24 — 검색은 IME 조합 확정값만 사용한다
|
||||
|
||||
한글 입력 중 조합 중간값을 즉시 검색에 반영하면 사용자는 `에델`을 입력했다고 느껴도 실제 요청에는 `에데` 같은 미완성 값이 들어갈 수 있다. 통합 검색은 입력 즉시 반응해야 하지만 조합 중간 상태는 결과 품질보다 혼란을 만들기 쉬우므로, IME 조합 중에는 검색 요청을 멈추고 조합 종료 후 최종 입력값을 공백·Unicode 정규화한 값으로 조회한다.
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
| components/site/SiteTopChrome.vue | 공개 레이아웃 상단 고정 영역(어나운스 바+헤더), `--site-top-chrome-height` CSS 변수 |
|
||||
| components/site/SiteAnnouncementBar.vue | 공개 사이트 상단 어나운스 배너(문구·선택 링크·hex 배경색·텍스트 정렬·닫기) |
|
||||
| components/site/SiteHeader.vue | 모든 공개 페이지 상단, 사이트 이름 텍스트 브랜드, `grid-cols-3`로 검색 패널 중앙 정렬(`md+`), 우측 사용자 아바타 드롭다운(아바타 없거나 비로그인 시 사람 아이콘), `/`·`SiteSearchModal` |
|
||||
| components/site/SiteSearchModal.vue | `Teleport`·전체 화면 딤·Tags/Posts 결과·일치 구간 강조, 열림 시 `html.site-search-open` 스크롤 잠금, IME 조합 종료 후 최종 검색어 반영과 공백·Unicode 정규화 |
|
||||
| components/site/SiteSearchModal.vue | `Teleport`·전체 화면 딤·Tags/Posts 결과·일치 구간 강조, 열림 시 `html.site-search-open` 스크롤 잠금, IME 조합 중 표시값 디바운스 반영·조합 종료 후 최종 검색어 즉시 반영과 공백·Unicode 정규화 |
|
||||
| components/site/LeftSidebar.vue | 왼쪽 사이드바, `lg+`는 `sticky`+고정 높이+내부 무스크롤바 스크롤, `lg` 미만은 고정 슬라이드 패널, 상단 메뉴는 `SidebarPrimaryNavList`+`provide`로 트리·펼침 상태(`sori-primary-nav-expanded`), 태그 Categories 아래 공개 `GET /api/navigation`의 `recommended` 카드 목록(수동 썸네일 > 서버 캐시 파비콘 > 외부 프록시 fallback), Authors 영역은 비공개, 푸터 `footer` 링크는 `flex-wrap`·테마 버튼 `shrink-0`, 태그 카테고리·테마 점은 `site-sidebar-nav-row` 호버 |
|
||||
| components/site/SidebarPrimaryNavList.vue | 상단 네비: 부모·리프 동일 `before` 막대/호버 원형, 내부 현재 경로 `--site-accent`, 행 `w-full`+`site-sidebar-nav-row` 호버(`#F7F4EF` 라이트), `inject`·`localStorage` 펼침 |
|
||||
| components/site/RightSidebar.vue | 오른쪽 사이드바, 일반 화면은 설정 기반 사이트 로고 48px 정사각형 고정·SNS Follow(프리셋·사용자 SVG, 16px 아이콘 중앙 정렬)·오른쪽 사이드 광고를 표시, 게시글 상세 데스크톱은 블로그 소개·Follow 대신 최상단 H1~H3 TOC와 TOC 아래 게시물 사이드 광고(모바일 숨김, 스크롤 위치 기반 활성 표시·내부 자동 스크롤, 세로 기준선), About 영역은 비공개, `lg+` 스티키 |
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
- `lg` 미만에서는 왼쪽 사이드바를 화면 좌측 고정 슬라이드 패널로 표시하고, 열린 동안 백드롭을 탭하면 `closeMenu`로 닫는다.
|
||||
- `Escape` 키는 통합 검색 모달이 열려 있으면 최우선으로 닫고, 그다음 사용자 드롭다운, 이어서 모바일에서만 좌측 슬라이드 메뉴를 닫는다.
|
||||
- `/` 키는 `INPUT`·`TEXTAREA`·`SELECT`·`contenteditable`에 포커스가 없고 `Ctrl`/`Meta`/`Alt`와 함께 눌리지 않을 때 통합 검색 모달을 연다. 헤더 검색 영역(`md+`) 클릭으로도 동일하게 연다.
|
||||
- 통합 검색 입력은 한글 등 IME 조합 중에는 검색 요청을 보내지 않고 조합 종료 후 최종 입력값으로 검색한다. 검색어는 앞뒤 공백 제거, 연속 공백 단일화, Unicode NFC 정규화를 거쳐 태그·게시물·페이지 검색에 사용한다.
|
||||
- 통합 검색 입력은 한글 등 IME 조합 중에도 입력창에 표시되는 현재 값을 디바운스로 검색에 반영하고, 조합 종료 시 최종 입력값을 즉시 검색한다. 검색어는 앞뒤 공백 제거, 연속 공백 단일화, Unicode NFC 정규화를 거쳐 태그·게시물·페이지 검색에 사용한다.
|
||||
- 헤더 우측 사용자 아이콘 버튼은 로그인 상태면 회원 아바타/닉네임과 설정·로그아웃 메뉴를, 비로그인 상태면 Guest·Sign up·Sign in 메뉴를 표시한다. 회원 아바타 이미지가 없거나 비로그인 상태인 경우 사용자 메뉴 버튼에는 사람 아이콘을 표시한다.
|
||||
- 오른쪽 사이드바의 FOLLOW 영역은 사이트 설정의 SNS 링크 목록을 기준으로 표시한다. 관리자가 아이콘 프리셋 또는 직접 SVG 아이콘과 주소를 등록한 항목만 노출하며, 등록된 항목이 없으면 FOLLOW 영역 자체를 숨긴다. SNS 주소는 `https://`를 생략해도 저장 시 자동 보정한다. 관리자 편집 화면은 아이콘과 주소를 기본 입력으로 사용하며, 직접 SVG 프리셋을 선택했을 때만 SVG 코드 입력을 추가로 표시한다. 공개 FOLLOW 아이콘은 프리셋·직접 SVG 모두 16px 아이콘을 20px 버튼 중앙에 배치한다.
|
||||
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
# 업데이트 이력
|
||||
|
||||
## v1.9.25
|
||||
|
||||
- 공개 통합 검색이 한글 IME 조합 중에도 입력창의 현재 표시값을 디바운스 검색어로 반영하도록 수정.
|
||||
- 공개 통합 검색에서 마지막 조합 글자 확정 전 결과가 직전 검색어에 머물던 문제 수정.
|
||||
|
||||
## v1.9.24
|
||||
|
||||
- 공개 통합 검색 입력의 한글 IME 조합 중 미완성 검색 요청 방지.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sori.studio",
|
||||
"version": "1.9.24",
|
||||
"version": "1.9.25",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"imports": {
|
||||
|
||||
Reference in New Issue
Block a user