사이드바 레이아웃 안정성 향상

src/features/search/ui/SearchDrawer.tsx

@@ -1,6 +1,13 @@
 import { cn } from '@/shared/lib/utils'
 import type { CSSProperties, RefObject } from 'react'
-import { useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { Input } from '@/shared/ui/input'
 import { useDebounce } from '@/shared/lib/hooks/useDebounce'
 
@@ -17,10 +24,12 @@ export function SearchDrawer({
   onOpenChange,
   anchorRef,
 }: SearchDrawerProps) {
-  const close = () => onOpenChange(false)
+  const close = useCallback(() => onOpenChange(false), [onOpenChange])
   const [anchorRightPx, setAnchorRightPx] = useState(DEFAULT_ANCHOR_RIGHT_PX)
   const [searchTerm, setSearchTerm] = useState('')
   const debouncedSearchTerm = useDebounce(searchTerm, 300)
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const drawerRef = useRef<HTMLElement | null>(null)
 
   useLayoutEffect(() => {
     const el = anchorRef?.current
@@ -50,6 +59,36 @@ export function SearchDrawer({
     [anchorRightPx]
   )
 
+  useEffect(() => {
+    if (!open) return
+
+    const container = containerRef.current
+    if (!container) return
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target as HTMLElement | null
+      if (!target) return
+
+      const drawerEl = drawerRef.current
+      const anchorEl = anchorRef?.current ?? null
+
+      const isInsideDrawer = drawerEl?.contains(target)
+      const isInsideAnchor = anchorEl?.contains(target)
+
+      if (isInsideDrawer || isInsideAnchor) {
+        return
+      }
+
+      close()
+    }
+
+    container.addEventListener('pointerdown', handlePointerDown)
+
+    return () => {
+      container.removeEventListener('pointerdown', handlePointerDown)
+    }
+  }, [anchorRef, close, open])
+
   useEffect(() => {
     // TODO: API 연결
     if (debouncedSearchTerm) {
@@ -60,21 +99,15 @@ export function SearchDrawer({
   return (
     <>
       <div
+        ref={containerRef}
         className={cn(
-          'fixed inset-y-0 right-0 z-40',
-          open ? 'pointer-events-auto' : 'pointer-events-none'
-        )}
-        style={anchoredStyle}
-        onClick={close}
-      />
-      <div
-        className={cn(
-          'fixed inset-y-0 right-0 z-50 overflow-hidden',
+          'fixed inset-y-0 right-0 z-40 overflow-hidden',
           open ? 'pointer-events-auto' : 'pointer-events-none'
         )}
         style={anchoredStyle}
       >
         <aside
+          ref={drawerRef}
           className={cn(
             'h-full w-[24rem] rounded-r-2xl bg-white transition-transform duration-300 ease-out',
             open ? 'translate-x-0 shadow-2xl' : '-translate-x-full'

src/routeTree.gen.ts

@@ -273,7 +273,7 @@ const AppProfile_nameRouteChildren: AppProfile_nameRouteChildren = {
 }
 
 const AppProfile_nameRouteWithChildren = AppProfile_nameRoute._addFileChildren(
-  AppProfile_nameRouteChildren
+  AppProfile_nameRouteChildren,
 )
 
 interface AppRouteChildren {

src/shared/ui/sidebar.tsx

@@ -29,7 +29,7 @@ const SIDEBAR_COOKIE_NAME = 'sidebar_state'
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 const SIDEBAR_WIDTH = '16rem'
 const SIDEBAR_WIDTH_MOBILE = '18rem'
-const SIDEBAR_WIDTH_ICON = '3rem'
+const SIDEBAR_WIDTH_ICON = '5rem'
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
 
 type SidebarContextProps = {
@@ -481,7 +481,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -492,7 +492,7 @@ const sidebarMenuButtonVariants = cva(
       size: {
         default: 'h-8 text-sm',
         sm: 'h-7 text-xs',
-        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+        lg: 'h-12 text-sm',
       },
     },
     defaultVariants: {

src/widgets/navigation-sidebar/model/useNavController.ts

@@ -57,12 +57,12 @@ export function useNavController({ onCreateClick }: UseNavControllerArgs) {
   )
 
   useEffect(() => {
-    if (isBelowXl || uiState.isSearchOpen) {
+    if (isBelowXl) {
       setOpen(false)
     } else {
       setOpen(true)
     }
-  }, [isBelowXl, uiState.isSearchOpen, setOpen])
+  }, [isBelowXl, setOpen])
 
   const isMyProfileRouteActive =
     Boolean(
@@ -119,6 +119,12 @@ export function useNavController({ onCreateClick }: UseNavControllerArgs) {
     [dispatchNavAction]
   )
 
+  const closeSearchIfOpen = useCallback(() => {
+    if (uiState.isSearchOpen) {
+      dispatchNavAction({ type: 'search_set', open: false })
+    }
+  }, [dispatchNavAction, uiState.isSearchOpen])
+
   const setSearchOpen = useCallback(
     (open: boolean) => dispatchNavAction({ type: 'search_set', open }),
     [dispatchNavAction]
@@ -129,5 +135,6 @@ export function useNavController({ onCreateClick }: UseNavControllerArgs) {
     setSearchOpen,
     getIsItemActive,
     handleItemClick,
+    closeSearchIfOpen,
   }
 }

src/widgets/navigation-sidebar/ui/DesktopSidebar.tsx

@@ -19,8 +19,13 @@ interface NavigationSidebarProps {
 export function NavigationSidebar({ onCreateClick }: NavigationSidebarProps) {
   const sidebarRef = useRef<HTMLDivElement | null>(null)
 
-  const { uiState, setSearchOpen, getIsItemActive, handleItemClick } =
-    useNavController({ onCreateClick })
+  const {
+    uiState,
+    setSearchOpen,
+    getIsItemActive,
+    handleItemClick,
+    closeSearchIfOpen,
+  } = useNavController({ onCreateClick })
 
   return (
     <>
@@ -33,20 +38,20 @@ export function NavigationSidebar({ onCreateClick }: NavigationSidebarProps) {
       <Sidebar
         ref={sidebarRef}
         collapsible="icon"
-        className="border-r border-gray-300 px-4"
+        className="border-r border-gray-300"
       >
-        <SidebarHeader className="pt-8 pb-4">
+        <SidebarHeader className="px-4 pt-8 pb-4">
           <div className="flex items-center justify-center">
             <img
               src={instagramLogo}
               alt="Instagram"
-              className="h-12 group-data-[collapsible=icon]:size-10"
+              className="h-12 group-data-[collapsible=icon]:size-12"
             />
           </div>
         </SidebarHeader>
 
         <SidebarContent>
-          <SidebarMenu className="gap-1">
+          <SidebarMenu className="gap-1 px-4">
             {NAV_ITEMS.map((item) => {
               const isActive = getIsItemActive(item)
 
@@ -56,6 +61,7 @@ export function NavigationSidebar({ onCreateClick }: NavigationSidebarProps) {
                     key={item.label}
                     {...item}
                     isActive={isActive}
+                    onClick={closeSearchIfOpen}
                   />
                 )
               }
@@ -65,7 +71,12 @@ export function NavigationSidebar({ onCreateClick }: NavigationSidebarProps) {
                   key={item.label}
                   {...item}
                   isActive={isActive}
-                  onClick={() => handleItemClick(item)}
+                  onClick={() => {
+                    if (item.action === 'profile') {
+                      closeSearchIfOpen()
+                    }
+                    handleItemClick(item)
+                  }}
                 />
               )
             })}

src/widgets/navigation-sidebar/ui/SidebarNavItem/SidebarNavItemBase.tsx

@@ -20,6 +20,7 @@ export function SidebarNavItemBase({
       <span
         className={cn(
           isCompact ? 'sr-only' : 'max-xl:sr-only',
+          'group-data-[collapsible=icon]:sr-only',
           isActive && 'font-semibold'
         )}
       >

src/widgets/navigation-sidebar/ui/SidebarNavItem/SidebarNavLink.tsx

@@ -9,12 +9,13 @@ import type { NavigationSidebarLinkItem } from '../../model/navItems'
 
 type SidebarNavLinkProps = SidebarNavItemBaseProps & {
   to: NavigationSidebarLinkItem['to']
+  onClick?: () => void
 }
 
 const COMPACT_NAV_ITEM_CLASS_NAME = 'w-12 justify-center gap-0 px-0'
 
 export function SidebarNavLink(props: SidebarNavLinkProps) {
-  const { to, label, icon, isActive, isCompact } = props
+  const { to, label, icon, isActive, isCompact, onClick } = props
 
   return (
     <SidebarMenuItem>
@@ -27,7 +28,7 @@ export function SidebarNavLink(props: SidebarNavLinkProps) {
           isCompact && COMPACT_NAV_ITEM_CLASS_NAME
         )}
       >
-        <Link to={to}>
+        <Link to={to} onClick={onClick}>
           <SidebarNavItemBase
             label={label}
             icon={icon}