관리자 검색창 한글 IME 조합 검색 및 모바일 가로 트랙 세로 스크롤 문제 수정

- IME 조합 중에도 검색되는 공통 컴포저블 useImeSearchInput 추가 - 글/멤버/미디어/설정/태그 필터/미디어 모달 검색 IME 조합 대응 - 홈 추천글·페이지 섹션 가로 트랙 touch-action pan-x 제거로 모바일 세로 스크롤 복구 - v1.10.29 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-03 17:03:31 +09:00
parent 58fbae5a03
commit b669d34e83
13 changed files with 169 additions and 12 deletions
--- a/pages/admin/media/index.vue
+++ b/pages/admin/media/index.vue
@@ -42,6 +42,11 @@ const isThumbnailFolderPath = (folder) => folder === MEDIA_THUMBNAIL_ROOT || Str

 const activeTab = ref('library')
 const searchText = ref('')
+const {
+  displayValue: searchTextInput,
+  onInput: onSearchTextInput,
+  onCompositionEnd: onSearchTextCompositionEnd
+} = useImeSearchInput(searchText, { debounce: 250 })
 const activeFolder = ref('')
 const activeMediaKind = ref('all')
 const showUnusedOnly = ref(false)
@@ -1387,10 +1392,13 @@ watch(() => mediaPagination.value.page, (page) => {
              <circle cx="11" cy="11" r="8" />
            </svg>
            <input
-              v-model="searchText"
+              :value="searchTextInput"
              class="admin-media__search-input h-10 w-full rounded border border-line bg-white pl-9 pr-3 text-sm text-[#394047] outline-none transition-colors placeholder:text-[#8e9cac] hover:border-[#c8ced3] focus:border-[#8e9cac] md:w-72"
              type="search"
              placeholder="미디어 검색"
+              @input="onSearchTextInput"
+              @compositionupdate="onSearchTextInput"
+              @compositionend="onSearchTextCompositionEnd"
            >
          </label>
          <button
--- a/pages/admin/members/index.vue
+++ b/pages/admin/members/index.vue
@@ -4,6 +4,11 @@ definePageMeta({
 })

 const memberSearchQuery = ref('')
+const {
+  displayValue: memberSearchInput,
+  onInput: onMemberSearchInput,
+  onCompositionEnd: onMemberSearchCompositionEnd
+} = useImeSearchInput(memberSearchQuery)
 const isFilterOpen = ref(false)
 const filterDrafts = ref([
  {
@@ -383,10 +388,13 @@ const formatRelativeTime = (value) => {
            <circle cx="11" cy="11" r="8" />
          </svg>
          <input
-            v-model="memberSearchQuery"
+            :value="memberSearchInput"
            class="admin-members__search-input h-10 w-full rounded border border-line bg-white pl-9 pr-3 text-sm text-[#394047] outline-none transition-colors placeholder:text-[#8e9cac] hover:border-[#c8ced3] focus:border-[#8e9cac]"
            type="search"
            placeholder="멤버 검색"
+            @input="onMemberSearchInput"
+            @compositionupdate="onMemberSearchInput"
+            @compositionend="onMemberSearchCompositionEnd"
            aria-label="멤버 검색"
          >
        </label>
--- a/pages/admin/posts/index.vue
+++ b/pages/admin/posts/index.vue
@@ -29,6 +29,18 @@ const analyticsModalError = ref('')
 const postMenuTriggerRefs = new Map()
 const tagFilterRef = ref(null)

+const {
+  displayValue: searchInput,
+  onInput: onSearchInput,
+  onCompositionEnd: onSearchCompositionEnd
+} = useImeSearchInput(searchQuery, { debounce: 200 })
+
+const {
+  displayValue: tagFilterSearchInput,
+  onInput: onTagFilterSearchInput,
+  onCompositionEnd: onTagFilterSearchCompositionEnd
+} = useImeSearchInput(tagFilterSearch)
+
 const postsQuery = computed(() => ({
  paged: 'true',
  page: postPage.value,
@@ -921,10 +933,13 @@ watch(postPageCount, (pageCount) => {
              <circle cx="11" cy="11" r="8" />
            </svg>
            <input
-              v-model="searchQuery"
+              :value="searchInput"
              class="admin-posts__search-input h-10 w-52 rounded border border-line bg-white pl-9 pr-3 text-sm text-[#394047] outline-none transition-colors placeholder:text-[#8e9cac] hover:border-[#c8ced3] focus:border-[#8e9cac]"
              type="search"
              placeholder="글 검색"
+              @input="onSearchInput"
+              @compositionupdate="onSearchInput"
+              @compositionend="onSearchCompositionEnd"
            >
          </label>
          <label class="admin-posts__filter">
@@ -958,7 +973,7 @@ watch(postPageCount, (pageCount) => {
                <span aria-hidden="true">×</span>
              </button>
              <input
-                v-model="tagFilterSearch"
+                :value="tagFilterSearchInput"
                class="admin-posts__tag-filter-input min-w-0 flex-1 bg-transparent px-1 text-sm text-[#394047] outline-none placeholder:text-[#394047]"
                type="text"
                role="combobox"
@@ -966,7 +981,9 @@ watch(postPageCount, (pageCount) => {
                aria-controls="admin-posts-tag-filter-list"
                :placeholder="tagFilter === 'all' ? '전체 태그' : '태그 검색'"
                autocomplete="off"
-                @input="openTagFilter"
+                @input="onTagFilterSearchInput($event); openTagFilter()"
+                @compositionupdate="onTagFilterSearchInput"
+                @compositionend="onTagFilterSearchCompositionEnd"
                @focus="openTagFilter"
                @keydown="handleTagFilterKeydown"
              >
--- a/pages/admin/settings/index.vue
+++ b/pages/admin/settings/index.vue
@@ -87,6 +87,11 @@ const homeCoverDarkInputRef = ref(null)
 const postImportInputRef = ref(null)
 const mainScrollRef = ref(null)
 const navSearchQuery = ref('')
+const {
+  displayValue: navSearchInput,
+  onInput: onNavSearchInput,
+  onCompositionEnd: onNavSearchCompositionEnd
+} = useImeSearchInput(navSearchQuery)
 const activeSectionId = ref('admin-settings-section-title')
 const scrollSpySuspended = ref(false)
 /** 블로그 제목·설명 카드 편집 모드 여부 */
@@ -1991,11 +1996,14 @@ onBeforeUnmount(() => {
              <path d="M16 16l4.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
            </svg>
            <input
-              v-model="navSearchQuery"
+              :value="navSearchInput"
              class="admin-settings-screen__search-input w-full rounded-md border border-[#dce0e5] bg-white py-2 pr-3 pl-9 text-sm text-[#15171a] placeholder:text-[#9aa3ad] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
              type="search"
              autocomplete="off"
              placeholder="설정 검색"
+              @input="onNavSearchInput"
+              @compositionupdate="onNavSearchInput"
+              @compositionend="onNavSearchCompositionEnd"
            >
          </label>

--- a/pages/admin/tags/index.vue
+++ b/pages/admin/tags/index.vue
@@ -15,6 +15,11 @@ const TAG_TOAST_STORAGE_KEY = 'SORI_ADMIN_TAG_TOAST'
 const { openMenuId, closeMenu } = useAdminRowMenu()
 let toastTimer = null
 const generalTagQuery = ref('')
+const {
+  displayValue: generalTagQueryInput,
+  onInput: onGeneralTagQueryInput,
+  onCompositionEnd: onGeneralTagQueryCompositionEnd
+} = useImeSearchInput(generalTagQuery)
 const generalTagSortMode = ref('recent')

 const { data: tags, refresh } = await useFetch('/admin/api/tags', {
@@ -474,10 +479,13 @@ onBeforeUnmount(() => {
      <div class="space-y-3 bg-white p-4">
        <div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
          <input
-            v-model="generalTagQuery"
+            :value="generalTagQueryInput"
            type="text"
            class="h-10 min-w-0 flex-1 rounded border border-line px-3 text-sm outline-none focus:border-[#8e9cac]"
            placeholder="일반 태그 이름 또는 슬러그 필터"
+            @input="onGeneralTagQueryInput"
+            @compositionupdate="onGeneralTagQueryInput"
+            @compositionend="onGeneralTagQueryCompositionEnd"
            @keydown.enter.prevent="searchGeneralTags"
          >
          <div class="inline-flex shrink-0 rounded border border-line bg-[#f7f7f5] p-1">