---
title: 모바일 툴바 고정 및 공유 대상 자동완성 기능 반영
date: 2026-02-24
status: approved
---

# 모바일 에디터 툴바 픽스 및 공유 카드 자동완성 구현

## 1. 개요
* 프로젝트: InsuWiki
* 작업자: 9-Agent (Frontend / UX / Reflect)
* 목적: 
  1. 모바일 기기 커서 포커싱 시 가상 키보드 높이만큼 브라우저가 위로 점프하여 상단 고정(Sticky) 툴바가 사라지는 문제 수정.
  2. 외부 공유 앱(Safari, YouTube 등)에서 InsuWiki `/share-target` 호출 시, `My 내문서` 탭에서 제목 입력 인풋에 기존 문서 제목 초성 및 단어 검색 자동완성을 지원하여 사용자 경험 증대.

## 2. 모바일 툴바 고정 이슈 디버깅 및 솔루션
* **현상**: 모바일 환경에서 ReflectEditor 영역 클릭 시 전체 뷰포트가 밀림.
* **원인 분해**: `DocumentClient.tsx`의 최상단 랩퍼가 `min-h-screen`을 갖기 때문에, OS 레벨의 키보드가 올라올 때 body/html 차원의 가시 영역(viewport)이 강제로 위로 밀림.
* **조치**: 
  - `DocumentClient` 랩퍼 클래스를 `h-[100dvh] max-h-[100dvh] overflow-hidden flex flex-col`으로 변경하여 전체 높이를 스크린 가시 영역으로 고정.
  - 내부 `<div id="scroll-container">` 컨테이너에만 `flex-1 overflow-y-auto` 속성을 부여하여 스크롤 제한.
  - 이로써 `sticky top-X` 속성의 네비게이션과 툴바가 가시영역 밖으로 벗어나지 않게 고정됨.

## 3. Share Target 페이지 'My 노트' 자동완성 로직 구현
* **현상**: 기존 공유 시에는 새로운 제목을 직접 입력하거나 붙여넣어야 했음.
* **기술 스택**: 
  - `useWikiMap` 훅: 사용자가 접근 가능한 모든 문서 제목을 캐시에 보관.
  - `es-hangul`의 `getChoseong`: 사용자의 한글 타이핑을 실시간 파싱.
* **조치**:
  - `ShareTargetPage.tsx` 내부에서 `useWikiMap`을 호출하여 `wikiList` 추출.
  - `input[name="cardTitle"]` 값을 기반으로 100ms 디바운스 처리 후 매칭 로직 실행 (`WikiLinkExtension.ts`의 로직 차용).
  - 초성(예: 'ㅇㅂ' -> '유튜브') 및 서브스트링 매칭 결과를 상위 5개까지만 노출하는 `TargetSuggester` 컴포넌트 추가.

## 4. 진행 현황 (Status)
- [x] 원인 분석 및 해결책 도출 (26.02.24)
- [x] 기획 및 설계서 작성 (26.02.24)
- [ ] DocumentClient 레이아웃 CSS 교체 (진행 중)
- [ ] ShareTargetPage 로직 및 UI 연동 (대기)
- [ ] 빌드 및 동작 테스트 (대기)