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 ? (
-
- 등록된 팀이 없습니다.
-
+
) : (
<>
-
+
-
+
-
+
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;