Merge pull request #187 from vecosystem/feature/#185-sidebar-ux-develop

Author: jinj00oo

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

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">

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]);
+};

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 />;
   }

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>

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;