search drawer 컴포넌트 구현

src/features/search/ui/SearchDrawer.tsx

@@ -1,6 +1,8 @@
 import { cn } from '@/shared/lib/utils'
 import type { CSSProperties, RefObject } from 'react'
-import { useLayoutEffect, useMemo, useState } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { Input } from '@/shared/ui/input'
+import { useDebounce } from '@/shared/lib/hooks/useDebounce'
 
 type SearchDrawerProps = {
   open: boolean
@@ -17,6 +19,8 @@ export function SearchDrawer({
 }: SearchDrawerProps) {
   const close = () => onOpenChange(false)
   const [anchorRightPx, setAnchorRightPx] = useState(DEFAULT_ANCHOR_RIGHT_PX)
+  const [searchTerm, setSearchTerm] = useState('')
+  const debouncedSearchTerm = useDebounce(searchTerm, 300)
 
   useLayoutEffect(() => {
     const el = anchorRef?.current
@@ -46,11 +50,18 @@ export function SearchDrawer({
     [anchorRightPx]
   )
 
+  useEffect(() => {
+    // TODO: API 연결
+    if (debouncedSearchTerm) {
+      console.log(debouncedSearchTerm)
+    }
+  }, [debouncedSearchTerm])
+
   return (
     <>
       <div
         className={cn(
-          'fixed inset-y-0 right-0 z-40 bg-transparent',
+          'fixed inset-y-0 right-0 z-40',
           open ? 'pointer-events-auto' : 'pointer-events-none'
         )}
         style={anchoredStyle}
@@ -65,13 +76,19 @@ export function SearchDrawer({
       >
         <aside
           className={cn(
-            'bg-background h-full w-[24rem] border-r transition-transform duration-300 ease-out',
-            open ? 'translate-x-0' : '-translate-x-full'
+            'h-full w-[24rem] rounded-r-2xl bg-white transition-transform duration-300 ease-out',
+            open ? 'translate-x-0 shadow-2xl' : '-translate-x-full'
           )}
         >
-          <div className="p-6">
+          <div className="flex flex-col gap-6 p-6">
             <h2 className="text-2xl font-bold">검색</h2>
-            <div className="mt-6 h-64 rounded-lg border border-dashed" />
+            <Input
+              className="rounded-lg border-none bg-gray-100 focus-visible:ring-0"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              placeholder="검색"
+            />
+            <h3 className="text-md font-semibold">최근 검색 항목</h3>
           </div>
         </aside>
       </div>

src/shared/lib/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+
+export function useDebounce<T>(value: T, delay: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}