feat: theme에 NavigationTab 높이 추가

woowacourse-teams · Feb 12, 2025 · 40d0482 · 40d0482
1 parent 175c65e
commit 40d0482
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 6 deletions.
diff --git a/frontend/src/components/common/NavigationTab/styles.ts b/frontend/src/components/common/NavigationTab/styles.ts
@@ -6,7 +6,7 @@ export const NavContainer = styled.nav`
   position: relative;
   display: flex;
   width: calc(100vw - ${({ theme }) => theme.scrollbarWidth.basic});
-  height: 4rem;
+  height: ${({ theme }) => theme.componentHeight.navigationTab};
 
   border-bottom: 0.2rem solid ${({ theme }) => theme.colors.lightGray};
 

diff --git a/frontend/src/components/layouts/Main/index.tsx b/frontend/src/components/layouts/Main/index.tsx
@@ -4,11 +4,12 @@ import * as S from './styles';
 
 interface MainProps {
   isShowBreadCrumb?: boolean;
+  isShowNavigationTab?: boolean;
 }
 
-const Main = ({ children, isShowBreadCrumb }: EssentialPropsWithChildren<MainProps>) => {
+const Main = ({ children, isShowBreadCrumb, isShowNavigationTab }: EssentialPropsWithChildren<MainProps>) => {
   return (
-    <S.MainContainer $isShowBreadCrumb={isShowBreadCrumb}>
+    <S.MainContainer $isShowBreadCrumb={isShowBreadCrumb} $isShowNavigationTab={isShowNavigationTab}>
       <S.Contents>{children}</S.Contents>
     </S.MainContainer>
   );

diff --git a/frontend/src/components/layouts/Main/styles.ts b/frontend/src/components/layouts/Main/styles.ts
@@ -3,13 +3,15 @@ import styled from '@emotion/styled';
 
 interface MainContainerProps {
   $isShowBreadCrumb?: boolean;
+  $isShowNavigationTab?: boolean;
 }
-const calculateMinHeight = ({ $isShowBreadCrumb, ...theme }: MainContainerProps & Theme) => {
+const calculateMinHeight = ({ $isShowBreadCrumb, $isShowNavigationTab, ...theme }: MainContainerProps & Theme) => {
   const topbarHeight = theme.componentHeight.topbar;
   const footerHeight = theme.componentHeight.footer;
   const breadCrumbHeight = $isShowBreadCrumb ? theme.componentHeight.breadCrumb : '0rem';
+  const navigationTabHeight = $isShowNavigationTab ? theme.componentHeight.navigationTab : '0rem';
 
-  return `calc(100vh - ${topbarHeight} - ${footerHeight} - ${breadCrumbHeight})`;
+  return `calc(100vh - ${topbarHeight} - ${footerHeight} - ${breadCrumbHeight}) - ${navigationTabHeight}`;
 };
 
 export const MainContainer = styled.div<MainContainerProps>`

diff --git a/frontend/src/components/layouts/PageLayout/index.tsx b/frontend/src/components/layouts/PageLayout/index.tsx
@@ -35,7 +35,9 @@ const PageLayout = ({ children, isNeedBreadCrumb = true }: EssentialPropsWithChi
         <Topbar />
         {isShowNavigationTab && <NavigationTab tabList={navigationTabList} />}
         {isShowBreadCrumb && <Breadcrumb pathList={breadcrumbPathList} />}
-        <Main isShowBreadCrumb={isShowBreadCrumb}>{children}</Main>
+        <Main isShowBreadCrumb={isShowBreadCrumb} isShowNavigationTab={isShowNavigationTab}>
+          {children}
+        </Main>
         <Footer />
       </S.Wrapper>
     </S.Layout>

diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts
@@ -35,6 +35,7 @@ export const componentHeight = {
   footer: '6rem',
   topbar: '7rem',
   breadCrumb: '4.3rem',
+  navigationTab: '4rem',
 };
 
 export const breakpoint = {