diff --git a/src/components/Sidebar/FullSidebarContent.tsx b/src/components/Sidebar/FullSidebarContent.tsx index a2d94b63..bbafb191 100644 --- a/src/components/Sidebar/FullSidebarContent.tsx +++ b/src/components/Sidebar/FullSidebarContent.tsx @@ -113,7 +113,11 @@ const FullSidebarContent = ({
{/* 첫 번째 드롭다운: 워크스페이스 기본 팀 */} - +
{isLoading ? null : ( {/* Team 드롭다운 (내부 드롭다운) */} {isLoading ? null : myTeams.length === 0 ? ( -
- 등록된 팀이 없습니다. -
+ ) : ( <> - + - defaultIcon + defaultIcon - hoverIcon + hoverIcon diff --git a/src/hooks/useAutoCloseSidebar.ts b/src/hooks/useAutoCloseSidebar.ts new file mode 100644 index 00000000..ed50a59f --- /dev/null +++ b/src/hooks/useAutoCloseSidebar.ts @@ -0,0 +1,24 @@ +import { useEffect } from 'react'; +import { useUIStore } from '../stores/ui'; + +export const useAutoCloseSidebar = (breakpoint = 768) => { + const { setSidebarOpen } = useUIStore(); + + useEffect(() => { + console.log('useAutoCloseSidebar'); + const mediaQuery = window.matchMedia(`(max-width: ${breakpoint}px)`); + + const handleMediaChange = (e: MediaQueryListEvent | MediaQueryList) => { + if (e.matches) { + setSidebarOpen(false); + } + }; + + handleMediaChange(mediaQuery); // 초기 상태 확인 + mediaQuery.addEventListener('change', handleMediaChange); + + return () => { + mediaQuery.removeEventListener('change', handleMediaChange); + }; + }, [breakpoint, setSidebarOpen]); +}; diff --git a/src/layouts/ProtectedLayout.tsx b/src/layouts/ProtectedLayout.tsx index 20e8fb14..2f8c2632 100644 --- a/src/layouts/ProtectedLayout.tsx +++ b/src/layouts/ProtectedLayout.tsx @@ -10,6 +10,7 @@ import { LOCAL_STORAGE_KEY } from '../constants/key.ts'; import { useLocalStorage } from '../hooks/useLocalStorage.ts'; import { useUIStore } from '../stores/ui.ts'; import { SIDEBAR_WIDTH } from '../constants/sidebar'; +import { useAutoCloseSidebar } from '../hooks/useAutoCloseSidebar'; const ProtectedLayout = () => { const location = useLocation(); @@ -20,6 +21,8 @@ const ProtectedLayout = () => { const isLoggedIn = !!getAccessToken() && !!getInviteUrl(); const { sidebarOpen } = useUIStore(); + useAutoCloseSidebar(); + if (!isLoggedIn) { return ; } diff --git a/src/pages/setting/SettingWorkspaceProfile.tsx b/src/pages/setting/SettingWorkspaceProfile.tsx index 8fd6419d..076f4e5f 100644 --- a/src/pages/setting/SettingWorkspaceProfile.tsx +++ b/src/pages/setting/SettingWorkspaceProfile.tsx @@ -18,7 +18,7 @@ const SettingWorkspaceProfile = () => { diff --git a/src/stores/ui.ts b/src/stores/ui.ts index 559d8bff..95ac6678 100644 --- a/src/stores/ui.ts +++ b/src/stores/ui.ts @@ -4,6 +4,7 @@ import { immer } from 'zustand/middleware/immer'; interface UIState { sidebarOpen: boolean; + setSidebarOpen: (open: boolean) => void; toggleSidebar: () => void; dropdownOpen: Record; @@ -15,6 +16,10 @@ export const useUIStore = create()( persist( immer((set) => ({ sidebarOpen: true, + setSidebarOpen: (open) => + set((s) => { + s.sidebarOpen = open; + }), toggleSidebar: () => set((s) => { s.sidebarOpen = !s.sidebarOpen;