From 64384ed901d410372d0e9eb6fe094c98f0dcebb1 Mon Sep 17 00:00:00 2001 From: Sage Date: Wed, 7 Jan 2026 15:49:58 +0900 Subject: [PATCH] =?UTF-8?q?feat(search):=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EA=B2=80=EC=83=89=20=ED=99=94=EB=A9=B4=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B0=8F=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 모바일 전용 SearchScreen 컴포넌트 추가 - 하단 네비게이션에 chat 항목 추가 및 route 상수 사용하도록 수정 - mypage 탭의 active 상태 판별 로직 조정 - 헤더의 알림 버튼을 기능 복구 전까지 주석 처리 - 서브 헤더 노출 기준을 lg 브레이크포인트로 변경 - 로그아웃 시 불필요한 query 제거 로직 삭제 --- src/app/(public)/search/page.tsx | 5 ++ src/screens/search/index.ts | 1 + src/screens/search/ui/search-screen.tsx | 65 ++++++++++++++++++++++ src/widgets/bottom-nav/model/item.ts | 10 ++-- src/widgets/bottom-nav/ui/bottom-nav.tsx | 16 +++--- src/widgets/header/ui/header-actions.tsx | 7 ++- src/widgets/header/ui/header-user-menu.tsx | 1 - src/widgets/sub-header/sub-header.tsx | 2 +- 8 files changed, 91 insertions(+), 16 deletions(-) create mode 100644 src/app/(public)/search/page.tsx create mode 100644 src/screens/search/index.ts create mode 100644 src/screens/search/ui/search-screen.tsx diff --git a/src/app/(public)/search/page.tsx b/src/app/(public)/search/page.tsx new file mode 100644 index 00000000..26248b1b --- /dev/null +++ b/src/app/(public)/search/page.tsx @@ -0,0 +1,5 @@ +import { SearchScreen } from "@/screens/search"; + +export default function Page() { + return ; +} diff --git a/src/screens/search/index.ts b/src/screens/search/index.ts new file mode 100644 index 00000000..e0fb059a --- /dev/null +++ b/src/screens/search/index.ts @@ -0,0 +1 @@ +export { SearchScreen } from "./ui/search-screen"; diff --git a/src/screens/search/ui/search-screen.tsx b/src/screens/search/ui/search-screen.tsx new file mode 100644 index 00000000..a321f799 --- /dev/null +++ b/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) => { + event.preventDefault(); + const trimmed = query.trim(); + if (!trimmed) return; + + const params = new URLSearchParams(); + params.set("query", trimmed); + router.push(`${ROUTES.auctions}?${params.toString()}`); + }; + + return ( +
+ + setQuery(event.target.value)} + onDelete={() => setQuery("")} + placeholder="검색어를 입력해주세요" + /> + + } + /> + +
+
+

최근 검색어

+
+
+
+
+ ); +} diff --git a/src/widgets/bottom-nav/model/item.ts b/src/widgets/bottom-nav/model/item.ts index bfe8a28b..722ff632 100644 --- a/src/widgets/bottom-nav/model/item.ts +++ b/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"]; diff --git a/src/widgets/bottom-nav/ui/bottom-nav.tsx b/src/widgets/bottom-nav/ui/bottom-nav.tsx index 388f3341..b549494b 100644 --- a/src/widgets/bottom-nav/ui/bottom-nav.tsx +++ b/src/widgets/bottom-nav/ui/bottom-nav.tsx @@ -2,16 +2,16 @@ import { usePathname } from "next/navigation"; -import { BOTTOM_NAV_ITEMS, BottomNavIdType } from "@/widgets/bottom-nav/model/item"; +import { BOTTOM_NAV_ITEMS } from "@/widgets/bottom-nav/model/item"; import { BottomNavItem } from "@/widgets/bottom-nav/ui/bottom-nav-item"; export function BottomNav() { const pathname = usePathname(); - // TODO: 알림 연결 후 하드 코딩 삭제 - const hasNotificationsById: Partial> = { - notification: true, - }; + // // TODO: 알림 연결 후 하드 코딩 삭제 + // const hasNotificationsById: Partial> = { + // notification: true, + // }; return (