feat(search): 모바일 검색 화면 추가 및 네비게이션 업데이트

- 모바일 전용 SearchScreen 컴포넌트 추가
- 하단 네비게이션에 chat 항목 추가 및 route 상수 사용하도록 수정
- mypage 탭의 active 상태 판별 로직 조정
- 헤더의 알림 버튼을 기능 복구 전까지 주석 처리
- 서브 헤더 노출 기준을 lg 브레이크포인트로 변경
- 로그아웃 시 불필요한 query 제거 로직 삭제

Author: sageherb

src/app/(public)/search/page.tsx

@@ -0,0 +1,5 @@
+import { SearchScreen } from "@/screens/search";
+
+export default function Page() {
+  return <SearchScreen />;
+}

src/screens/search/index.ts

@@ -0,0 +1 @@
+export { SearchScreen } from "./ui/search-screen";

src/screens/search/ui/search-screen.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { useRouter } from "next/navigation";
+
+import { ROUTES } from "@/shared/config/routes";
+import SearchInput from "@/shared/ui/input/search-input";
+import { SubHeader } from "@/widgets/sub-header/sub-header";
+
+export function SearchScreen() {
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(min-width: 1024px)");
+
+    const handleChange = () => {
+      if (mediaQuery.matches) {
+        router.replace(ROUTES.auctions);
+      }
+    };
+
+    handleChange();
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, [router]);
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const trimmed = query.trim();
+    if (!trimmed) return;
+
+    const params = new URLSearchParams();
+    params.set("query", trimmed);
+    router.push(`${ROUTES.auctions}?${params.toString()}`);
+  };
+
+  return (
+    <div className="bg-background flex min-h-screen w-full flex-col lg:hidden">
+      <SubHeader
+        content={
+          <form className="w-full" onSubmit={handleSubmit}>
+            <SearchInput
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              onDelete={() => setQuery("")}
+              placeholder="검색어를 입력해주세요"
+            />
+          </form>
+        }
+      />
+
+      <main className="flex-1 px-4 pb-6">
+        <section className="pt-4">
+          <h2 className="text-sm font-semibold">최근 검색어</h2>
+          <div className="mt-3 min-h-24" />
+        </section>
+      </main>
+    </div>
+  );
+}

src/widgets/bottom-nav/model/item.ts

@@ -1,13 +1,15 @@
-import { House, Search, Plus, Bell, User } from "lucide-react";
+import { House, Search, Plus, MessageCircle, User } from "lucide-react";
+
+import { ROUTES } from "@/shared/config/routes";
 
 import type { LucideIcon } from "lucide-react";
 
 export const BOTTOM_NAV_ITEMS = [
   { id: "home", label: "홈", href: "/", icon: House },
   { id: "search", label: "검색", href: "/search", icon: Search },
-  { id: "create", label: "등록", href: "/auctions/create", icon: Plus },
-  { id: "notification", label: "알림", href: "/notifications", icon: Bell },
-  { id: "profile", label: "내정보", href: "/users/me", icon: User },
+  { id: "create", label: "등록", href: ROUTES.auctionCreate, icon: Plus },
+  { id: "chat", label: "채팅", href: "/dm", icon: MessageCircle },
+  { id: "mypage", label: "내정보", href: ROUTES.myPage, icon: User },
 ] as const;
 
 export type BottomNavIdType = (typeof BOTTOM_NAV_ITEMS)[number]["id"];

src/widgets/bottom-nav/ui/bottom-nav.tsx

@@ -23,7 +23,9 @@ export function BottomNav() {
           <BottomNavItem
             key={item.id}
             {...item}
-            isActive={pathname === item.href}
+            isActive={
+              item.id === "mypage" ? pathname.startsWith("/users/me") : pathname === item.href
+            }
             hasNotification={!!hasNotificationsById[item.id]}
           />
         ))}

src/widgets/header/ui/header-actions.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 
-import { Bell, Plus } from "lucide-react";
+import { Plus } from "lucide-react";
 
 import { ROUTES } from "@/shared/config/routes";
 import { Button } from "@/shared/ui";
@@ -30,10 +30,11 @@ export default function HeaderActions({
         </Link>
       </Button>
 
-      <Button aria-label="알림" size="icon-lg" variant="ghost" className="relative">
+      {/* TODO: 알림 기능 복구 시 다시 노출 */}
+      {/* <Button aria-label="알림" size="icon-lg" variant="ghost" className="relative">
         <Bell className="size-5" />
         <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-red-500" />
-      </Button>
+      </Button> */}
 
       <HeaderUserMenu avatarUrl={avatarUrl} avatarAlt={avatarAlt} />
     </div>

src/widgets/header/ui/header-user-menu.tsx

@@ -44,7 +44,6 @@ export default function HeaderUserMenu({ avatarUrl, avatarAlt }: HeaderUserMenuP
       showToast.error("로그아웃에 실패했습니다. 잠시 후 다시 시도해주세요.");
     } finally {
       queryClient.setQueryData(userKeys.basic(), null);
-      queryClient.removeQueries({ queryKey: userKeys.all, exact: false });
       router.refresh();
       router.push(ROUTES.login);
     }

src/widgets/sub-header/sub-header.tsx

@@ -17,7 +17,7 @@ export function SubHeader({ content = "", className, ...props }: SubHeaderProps)
   const router = useRouter();
 
   return (
-    <header className={cn("w-full md:hidden", className)} {...props}>
+    <header className={cn("w-full lg:hidden", className)} {...props}>
       <div className="h-header flex items-center gap-3 px-2.5">
         <Button variant="ghost" size="icon-lg" aria-label="뒤로가기" onClick={() => router.back()}>
           <ChevronLeft />