Merge pull request #218 from boostcampwm-2024/refactor/header-action-…

…style ♻️ refactor: 헤더 검색 버튼 스타일 수정, 채팅 버튼 스타일 수정
boostcampwm-2024 · Nov 27, 2024 · 9f9053c · 9f9053c
2 parents f4cbff1 + e7c377f
commit 9f9053c
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 31 deletions.
diff --git a/client/src/components/chat/Chat.tsx b/client/src/components/chat/Chat.tsx
@@ -20,7 +20,7 @@ export function Chat() {
   }, []);
 
   return (
-    <Sidebar side="right">
+    <Sidebar side="right" variant="floating">
       <SidebarContent className="flex flex-col h-full w-full">
         <ChatHeader userCount={userCount} />
         <ChatSection chatHistory={chatHistory} />

diff --git a/client/src/components/layout/Header.tsx b/client/src/components/layout/Header.tsx
@@ -18,17 +18,15 @@ import {
   navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { SidebarProvider } from "@/components/ui/sidebar";
 
 import { useCustomToast } from "@/hooks/common/useCustomToast.ts";
 import { useKeyboardShortcut } from "@/hooks/common/useKeyboardShortcut";
 
 import logo from "@/assets/logo-denamu-main.svg";
 
-
-import { SidebarProvider } from "../ui/sidebar";
 import { TOAST_MESSAGES } from "@/constants/messages";
 
-
 export default function Header() {
   const [modals, setModals] = useState({ search: false, rss: false, login: false, chat: false });
   const { toast } = useCustomToast();
@@ -46,14 +44,17 @@ export default function Header() {
   return (
     <div className="border-b border-primary/20">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="flex h-20 items-center justify-between overflow-hidden">
-          {/* Logo */}
-
-          <div className="flex-shrink-0">
+        <div className="h-20 items-center overflow-hidden flex justify-between">
+          <div className="flex-shrink-0 ">
             <img className="h-14 w-auto cursor-pointer" src={logo} alt="Logo" onClick={() => location.reload()} />
           </div>
-          <DesktopNavigation toggleModal={toggleModal} />
-          <MobileNavigation toggleModal={toggleModal} />
+          <div className="absolute left-1/2 transform -translate-x-1/2 w-[30%]">
+            <SearchButton handleSearchModal={() => toggleModal("search")} />
+          </div>
+          <div className="flex-shrink-0">
+            <DesktopNavigation toggleModal={toggleModal} />
+            <MobileNavigation toggleModal={toggleModal} />
+          </div>
         </div>
       </div>
       <AnimatePresence>
@@ -68,7 +69,7 @@ function DesktopNavigation({ toggleModal }: { toggleModal: (modalType: "search"
   return (
     <div className="hidden md:flex md:items-center">
       <NavigationMenu>
-        <NavigationMenuList className="gap-2">
+        <NavigationMenuList>
           <NavigationMenuItem>
             <div className="flex h-full items-center">
               <SidebarProvider defaultOpen={false}>
@@ -77,11 +78,7 @@ function DesktopNavigation({ toggleModal }: { toggleModal: (modalType: "search"
               </SidebarProvider>
             </div>
           </NavigationMenuItem>
-          <NavigationMenuItem>
-            <div className="flex h-full items-center">
-              <SearchButton handleSearchModal={() => toggleModal("search")} />
-            </div>
-          </NavigationMenuItem>
+
           <NavigationMenuItem>
             <NavigationMenuLink
               className={`${navigationMenuTriggerStyle()} hover:text-primary hover:bg-primary/10`}

diff --git a/client/src/components/search/SearchButton.tsx b/client/src/components/search/SearchButton.tsx
@@ -1,18 +1,25 @@
 import { Search } from "lucide-react";
 
-import { NavigationMenuLink, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
-
 export default function SearchButton({ handleSearchModal }: { handleSearchModal: () => void }) {
   return (
-    <NavigationMenuLink
-      className={`${navigationMenuTriggerStyle()} hover:text-primary hover:bg-primary/10`}
+    <div
+      className="w-full px-4 py-3 
+                   bg-white 
+                   border border-primary 
+                   rounded-xl 
+                   shadow-sm 
+                   cursor-pointer
+                   text-primary
+                   flex 
+                   justify-between 
+                   items-center 
+                   hover:bg-primary/5 
+                   
+                   "
       onClick={handleSearchModal}
-      href="#"
     >
-      <div className="flex items-center gap-2">
-        <Search size={16} />
-        <span>검색</span>
-      </div>
-    </NavigationMenuLink>
+      <span className="text-sm font-medium">검색</span>
+      <Search size={16} className="text-primary group-hover:text-secondary transition-colors" />
+    </div>
   );
 }
diff --git a/client/src/components/search/SearchResults/SearchResultList.tsx b/client/src/components/search/SearchResults/SearchResultList.tsx
@@ -9,7 +9,7 @@ import SearchResultItem from "./SearchResultItem";
 import { useSearchStore } from "@/store/useSearchStore";
 
 const RESULT_PER_PAGE = 4;
-const COMMANDCLASS = "flex min-h-[28rem] justify-center items-center";
+const COMMANDCLASS = "flex h-[28rem] justify-center items-center";
 export default function SearchResults() {
   const { searchParam, currentFilter, page } = useSearchStore();
   const { data, isLoading, error } = useSearch({
@@ -23,7 +23,7 @@ export default function SearchResults() {
   const results = data?.data.result || [];
   const renderContent = {
     //검색 전
-    noQuery: <CommandEmpty className={COMMANDCLASS}>검색어를 입력해주세요 (최소 2글자)</CommandEmpty>,
+    noQuery: <CommandEmpty className={COMMANDCLASS}>검색어를 입력해주세요</CommandEmpty>,
     // 검색 로딩
     loading: (
       <CommandEmpty className={COMMANDCLASS}>
@@ -37,7 +37,7 @@ export default function SearchResults() {
     // 정상적인 상황
     default: (
       <CommandGroup heading={`검색결과 (총 ${totalItems}건)`}>
-        <CommandList className="h-[25rem] ">
+        <CommandList className="h-[28rem]">
           {results.map((result, index) => (
             <SearchResultItem key={index} {...result} />
           ))}

diff --git a/client/src/components/ui/sidebar.tsx b/client/src/components/ui/sidebar.tsx
@@ -174,7 +174,7 @@ const Sidebar = React.forwardRef<
   return (
     <div
       ref={ref}
-      className="group peer hidden md:block text-sidebar-foreground"
+      className="group peer  md:block text-sidebar-foreground "
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -183,7 +183,7 @@ const Sidebar = React.forwardRef<
       {/* This is what handles the sidebar gap on desktop */}
       <div
         className={cn(
-          "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+          "duration-200 hidden h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
           "group-data-[collapsible=offcanvas]:w-0",
           "group-data-[side=right]:rotate-180",
           variant === "floating" || variant === "inset"