From 99f8af1bf3950c1b51ec5bd1c3c32c7459fdb7d3 Mon Sep 17 00:00:00 2001
From: jinj00oo <icems0428@naver.com>
Date: Tue, 19 Aug 2025 15:17:02 +0900
Subject: [PATCH 1/2] =?UTF-8?q?#185=20[FEAT]=20=EC=82=AC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=EB=B0=94=20UX=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 사이드바 팀 없을시 팀 생성하기 버튼
- 뷰 일정 너비 이하로 줄어들시 사이드바 닫힘
---
 src/components/Sidebar/FullSidebarContent.tsx | 14 +++++++----
 src/hooks/useAutoCloseSidebar.ts              | 24 +++++++++++++++++++
 src/layouts/ProtectedLayout.tsx               |  3 +++
 src/stores/ui.ts                              |  5 ++++
 4 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 src/hooks/useAutoCloseSidebar.ts

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 = ({
 
         <div className="flex flex-col items-start self-stretch">
           {/* 첫 번째 드롭다운: 워크스페이스 기본 팀 */}
-          <DropdownMenu dropdownId="ws-default-team" headerTitle="워크스페이스 기본 팀" initialOpen={true}>
+          <DropdownMenu
+            dropdownId="ws-default-team"
+            headerTitle="워크스페이스 기본 팀"
+            initialOpen={true}
+          >
             <div className="flex flex-col">
               {isLoading ? null : (
                 <DropdownMenu
@@ -169,9 +173,11 @@ const FullSidebarContent = ({
           <DropdownMenu dropdownId="my-teams" headerTitle="나의 팀" initialOpen={true}>
             {/* Team 드롭다운 (내부 드롭다운) */}
             {isLoading ? null : myTeams.length === 0 ? (
-              <div className="text-gray-400 font-xsmall-r px-[3rem] pb-[1.6rem]">
-                등록된 팀이 없습니다.
-              </div>
+              <button type="button" onClick={() => navigate('/workspace/setting/team-list')}>
+                <div className="text-gray-400 font-xsmall-r px-[3rem] pb-[1.6rem] cursor-pointer underline underline-offset-[0.3rem]">
+                  팀 생성하기
+                </div>
+              </button>
             ) : (
               <>
                 <SortableDropdownList
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 <Navigate to="/onboarding" replace />;
   }
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<string, boolean>;
@@ -15,6 +16,10 @@ export const useUIStore = create<UIState>()(
   persist(
     immer((set) => ({
       sidebarOpen: true,
+      setSidebarOpen: (open) =>
+        set((s) => {
+          s.sidebarOpen = open;
+        }),
       toggleSidebar: () =>
         set((s) => {
           s.sidebarOpen = !s.sidebarOpen;

From 42f258d374e0578a8acac3c0f8c4816b0e1b1da9 Mon Sep 17 00:00:00 2001
From: jinj00oo <icems0428@naver.com>
Date: Tue, 19 Aug 2025 15:51:21 +0900
Subject: [PATCH 2/2] =?UTF-8?q?#185=20[MOD]=20=EC=84=B8=ED=8C=85=20?=
 =?UTF-8?q?=EC=9B=8C=ED=81=AC=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B3=A0=20=EB=8F=99=EA=B7=B8=EB=9E=97=EA=B2=8C=20?=
 =?UTF-8?q?=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/SidebarItem.tsx        | 14 +++++++++++---
 src/pages/setting/SettingWorkspaceProfile.tsx |  2 +-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar/SidebarItem.tsx b/src/components/Sidebar/SidebarItem.tsx
index d2aab687..7902003c 100644
--- a/src/components/Sidebar/SidebarItem.tsx
+++ b/src/components/Sidebar/SidebarItem.tsx
@@ -22,12 +22,20 @@ const SidebarItem = ({
         type="button"
         className="flex grow items-center gap-[0.8rem] cursor-pointer"
       >
-        <span className="w-[2.4rem] h-[2.4rem] shrink-0 aspect-square">
+        <span className="w-[2.4rem] h-[2.4rem] shrink-0">
           <span className="block group-hover:hidden">
-            <img src={defaultIcon} alt="defaultIcon" />
+            <img
+              src={defaultIcon}
+              alt="defaultIcon"
+              className="w-full h-full rounded-full object-cover"
+            />
           </span>
           <span className="hidden group-hover:block">
-            <img src={hoverIcon} alt="hoverIcon" />
+            <img
+              src={hoverIcon}
+              alt="hoverIcon"
+              className="w-full h-full rounded-full object-cover"
+            />
           </span>
         </span>
         <span className="font-small-r text-gray-600 letter-spacing-[0.028rem] group-hover:text-primary-blue group-hover:font-bold">
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 = () => {
               <button className="w-[4.2rem] h-[4.2rem] flex items-center justify-center">
                 <img
                   src={workspaceData?.workspaceImageUrl || vecocirclenavy}
-                  className="w-full h-full"
+                  className="w-full h-full rounded-full object-cover"
                   alt="프로필 사진"
                 />
               </button>