fix(search): 슬래시 단축키 토글 중복 수정

모바일과 데스크톱 검색 버튼이 각각 전역 keydown listener를 등록해 / 입력 시 검색창이 즉시 닫히던 문제를 수정합니다.

단축키 처리를 AppShell 단일 listener로 이동하고 검색 입력 aria-label과 회귀 테스트를 추가합니다.

Author: dev-wooyeon

src/features/search/ui/components/CommandPalette/CommandPalette.tsx

@@ -23,6 +23,7 @@ export const CommandPalette = () => {
           <div className={styles.searchWrapper}>
             <KBarSearch
               className={styles.search}
+              aria-label="검색어, 태그, 글 제목 입력"
               defaultPlaceholder="검색어, 태그, 글 제목을 입력하세요"
             />
             <button

src/shared/layout/AppShell/AppShell.tsx

@@ -156,32 +156,6 @@ function resolveSection(pathname: string, posts: FeedData[]): AppSection {
 function SearchButton() {
   const { query } = useKBar();
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== '/' || event.metaKey || event.ctrlKey || event.altKey) {
-        return;
-      }
-
-      const activeElement = document.activeElement as HTMLElement | null;
-      const tagName = activeElement?.tagName;
-      const isEditable =
-        activeElement?.isContentEditable ||
-        tagName === 'INPUT' ||
-        tagName === 'TEXTAREA' ||
-        tagName === 'SELECT';
-
-      if (isEditable) {
-        return;
-      }
-
-      event.preventDefault();
-      query.toggle();
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [query]);
-
   return (
     <button
       type="button"
@@ -212,6 +186,7 @@ function SearchButton() {
 
 export default function AppShell({ children, posts }: AppShellProps) {
   const pathname = usePathname();
+  const { query } = useKBar();
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
   const activeSection = useMemo(
@@ -223,6 +198,32 @@ export default function AppShell({ children, posts }: AppShellProps) {
     setMobileNavOpen(false);
   }, [pathname]);
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== '/' || event.metaKey || event.ctrlKey || event.altKey) {
+        return;
+      }
+
+      const activeElement = document.activeElement as HTMLElement | null;
+      const tagName = activeElement?.tagName;
+      const isEditable =
+        activeElement?.isContentEditable ||
+        tagName === 'INPUT' ||
+        tagName === 'TEXTAREA' ||
+        tagName === 'SELECT';
+
+      if (isEditable) {
+        return;
+      }
+
+      event.preventDefault();
+      query.toggle();
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [query]);
+
   return (
     <div className="min-h-screen bg-[var(--color-grey-50)] text-[var(--color-text-primary)] md:flex md:h-screen md:overflow-hidden">
       <ThemeTransitionWash />

tests/e2e/regression/search-shortcut.spec.ts

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Search shortcut', () => {
+  test('/ 단축키로 검색창이 열린 상태를 유지해요', async ({ page }) => {
+    await page.goto('/');
+
+    await page.keyboard.press('/');
+
+    const searchInput = page.getByRole('combobox', {
+      name: /검색어|태그|글 제목/,
+    });
+
+    await expect(searchInput).toBeVisible();
+    await expect(searchInput).toBeFocused();
+  });
+});