✨ feat: 검색 컴포넌트 구현

packages/frontend/src/components/layouts/Sidebar.tsx

@@ -2,7 +2,9 @@ import { useState } from 'react';
 import logoCharacter from '/logoCharacter.png';
 import logoTitle from '/logoTitle.png';
 import { MenuList } from './MenuList';
-import { bottomMenuItems, topMenuItems } from '@/constants/menuItems';
+import { Search } from './search';
+import { BOTTOM_MENU_ITEMS, TOP_MENU_ITEMS } from '@/constants/menuItems';
+import { type MenuSection } from '@/types/menu';
 import { cn } from '@/utils/cn';
 
 export const Sidebar = () => {
@@ -16,6 +18,7 @@ export const Sidebar = () => {
   };
 
   return (
+    <div ref={ref}>
     <nav
       className={cn(
         'fixed left-0 top-0 h-full cursor-pointer bg-white px-1 py-4 shadow-md',
@@ -51,5 +54,14 @@ export const Sidebar = () => {
         </div>
       </section>
     </nav>
+      <div
+        className={cn(
+          'fixed top-0 transition-all duration-300 ease-in-out',
+          isHovered ? 'left-60' : 'left-24',
+        )}
+      >
+        {showSearch && <Search className="h-screen" />}
+      </div>
+      </div>
   );
 };

packages/frontend/src/components/layouts/search/Search.tsx

@@ -0,0 +1,28 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/utils/cn';
+
+interface SearchProps {
+  className?: string;
+}
+
+export const Search = ({ className }: SearchProps) => {
+  const searchResult = [''];
+
+  return (
+    <div className={cn('bg-white p-10 shadow', className)}>
+      <h3 className="display-bold24 mb-2">검색</h3>
+      <p className="display-medium16 text-dark-gray mb-10">
+        주식을 검색하세요.
+      </p>
+      <div className="mb-8 flex gap-4">
+        <Input placeholder="검색어" />
+        <Button size="sm">검색</Button>
+      </div>
+      {searchResult.map((word) => (
+        // TODO: 추후 Link로 수정
+        <p className="text-dark-gray leading-7">{word}</p>
+      ))}
+    </div>
+  );
+};

packages/frontend/src/components/layouts/search/index.ts

@@ -0,0 +1 @@
+export * from './Search';