feat: 사이드 바 여닫는 기능 구현

woowacourse-teams · Oct 8, 2024 · 6ed96ad · 6ed96ad
1 parent a6e01fa
commit 6ed96ad
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 31 deletions.
diff --git a/frontend/src/components/dashboard/DashboardSidebar/style.ts b/frontend/src/components/dashboard/DashboardSidebar/style.ts
@@ -3,9 +3,8 @@ import styled from '@emotion/styled';
 const Container = styled.div`
   position: relative;
 
-  width: 20%;
-  min-width: 25rem;
-  max-width: 30rem;
+  width: 28rem;
+  height: 100%;
   border-right: 1px solid ${({ theme }) => theme.baseColors.grayscale[400]};
   padding: 3.6rem 1.6rem;
 

diff --git a/frontend/src/pages/DashBoardList/style.ts b/frontend/src/pages/DashBoardList/style.ts
@@ -4,7 +4,7 @@ import { hideScrollBar } from '@styles/utils';
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 3.8rem 2.4rem;
+  padding: 3.2rem 1.6rem;
   gap: 2.4rem;
 
   height: 100%;

diff --git a/frontend/src/pages/Dashboard/style.ts b/frontend/src/pages/Dashboard/style.ts
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { hiddenStyles, hideScrollBar, visibleStyles } from '@styles/utils';
 
 const AppContainer = styled.div`
-  padding: 3.6rem 2rem;
+  padding: 3.2rem 1.6rem;
   height: 100vh;
 `;
 

diff --git a/frontend/src/pages/DashboardLayout/index.tsx b/frontend/src/pages/DashboardLayout/index.tsx
@@ -1,11 +1,18 @@
+import { useRef, useState } from 'react';
+
 import DashboardSidebar from '@components/dashboard/DashboardSidebar';
+import IconButton from '@components/_common/atoms/IconButton';
 import useGetDashboards from '@hooks/useGetDashboards';
+import { HiChevronDoubleLeft, HiOutlineMenu } from 'react-icons/hi';
+
 import { Outlet, useParams } from 'react-router-dom';
 import S from './style';
 
 export default function DashboardLayout() {
   const { applyFormId: currentPostId } = useParams();
   const { data, isLoading } = useGetDashboards();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const sidebarRef = useRef<HTMLDivElement>(null);
 
   if (isLoading) return <div>Loading...</div>;
   if (!data) return <div>something wrong</div>;
@@ -17,15 +24,36 @@ export default function DashboardLayout() {
     dashboardId,
   }));
 
+  const handleToggleSidebar = () => {
+    if (isSidebarOpen) setIsSidebarOpen(false);
+    if (!isSidebarOpen) setIsSidebarOpen(true);
+  };
+
   return (
-    <S.LayoutBg>
-      <S.Layout>
-        <DashboardSidebar options={titleList} />
-
-        <S.MainContainer>
-          <Outlet />
-        </S.MainContainer>
-      </S.Layout>
-    </S.LayoutBg>
+    <S.Layout>
+      <S.SidebarContainer>
+        {isSidebarOpen && (
+          <S.Sidebar ref={sidebarRef}>
+            <DashboardSidebar options={titleList} />
+          </S.Sidebar>
+        )}
+
+        <S.SidebarController isSidebarOpen={isSidebarOpen}>
+          <S.ToggleButton>
+            <IconButton
+              size="sm"
+              outline={false}
+              onClick={handleToggleSidebar}
+            >
+              {isSidebarOpen ? <HiChevronDoubleLeft /> : <HiOutlineMenu />}
+            </IconButton>
+          </S.ToggleButton>
+        </S.SidebarController>
+      </S.SidebarContainer>
+
+      <S.MainContainer isSidebarOpen={isSidebarOpen}>
+        <Outlet />
+      </S.MainContainer>
+    </S.Layout>
   );
 }
diff --git a/frontend/src/pages/DashboardLayout/style.ts b/frontend/src/pages/DashboardLayout/style.ts
@@ -1,34 +1,47 @@
 import styled from '@emotion/styled';
 
-const LayoutBg = styled.div`
-  min-height: 100vh;
-  min-width: 100vw;
-
-  padding: 2.4rem;
-  background-color: ${({ theme }) => theme.baseColors.redscale[50]};
+interface SidebarStyleProps {
+  isSidebarOpen: boolean;
+}
 
+const Layout = styled.div`
+  height: 100vh;
+  width: 100vw;
   display: flex;
+  background-color: ${({ theme }) => theme.baseColors.grayscale[50]};
 `;
 
-const Layout = styled.div`
+const SidebarContainer = styled.div`
   display: flex;
-  flex: 1;
-  border-radius: 1.6rem;
-  overflow: hidden;
+  height: 100%;
+  width: fit-content;
+`;
 
-  background-color: ${({ theme }) => theme.baseColors.grayscale[50]};
+const Sidebar = styled.div``;
+
+const SidebarController = styled.div<SidebarStyleProps>`
+  width: ${({ isSidebarOpen }) => (isSidebarOpen ? '0px' : 'fit-content')};
+  transform: ${({ isSidebarOpen }) => (isSidebarOpen ? 'translateX(-6rem)' : 'none')};
+  z-index: 1;
 `;
 
-const MainContainer = styled.div`
-  width: 80%;
-  height: 100%;
-  // INFO: 4.8rem = 바깥 컨테이너의 padding-top + padding-bottom
-  max-height: calc(100vh - 4.8rem);
+const ToggleButton = styled.div`
+  padding: 3.3rem 0rem 0rem 1.6rem;
+`;
+
+const MainContainer = styled.div<SidebarStyleProps>`
+  flex: 1;
+  height: 100vh;
+
+  padding-left: ${({ isSidebarOpen }) => isSidebarOpen && '1rem'};
 `;
 
 const S = {
-  LayoutBg,
   Layout,
+  SidebarContainer,
+  Sidebar,
+  SidebarController,
+  ToggleButton,
   MainContainer,
 };