refactor-066: 헤더, 푸터 사이드 바 오픈 여부에 따라 크기 조절

teamViNO · Feb 13, 2024 · b35a3fd · b35a3fd
1 parent 43a6cd7
commit b35a3fd
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
@@ -3,10 +3,13 @@ import AboutViNO from './AboutViNO';
 import SendEmail from './SendEmail';
 
 import FooterLogo from '@/assets/logo-footer.png';
+import { isSideBarOpenState } from '@/stores/ui';
+import { useRecoilValue } from 'recoil';
 
 const Footer = () => {
+  const isSideBarOpen = useRecoilValue(isSideBarOpenState);
   return (
-    <FooterStyle.Container>
+    <FooterStyle.Container width={`100% + ${isSideBarOpen ? '348px' : '0px'}`}>
       <img src={FooterLogo} alt="Footer 로고 이미지" />
       <SendEmail />
       <AboutViNO />

diff --git a/src/components/layout/header/index.tsx b/src/components/layout/header/index.tsx
@@ -52,7 +52,11 @@ const Header = () => {
   }, [observer, pathname]);
 
   return (
-    <HeaderStyle.Container id="header" color={isDark ? 'gray500' : 'white'}>
+    <HeaderStyle.Container
+      id="header"
+      color={isDark ? 'gray500' : 'white'}
+      width={`100% + ${isSideBarOpen ? '348px' : '0px'}`}
+    >
       <HeaderStyle.Area>
         <HeaderStyle.Button
           color={isDark ? 'white' : 'gray500'}

diff --git a/src/styles/layout/footer/index.ts b/src/styles/layout/footer/index.ts
@@ -1,11 +1,12 @@
 import styled from 'styled-components';
 import theme from '../../theme';
 
-export const Container = styled.footer`
+export const Container = styled.footer<{ width: string }>`
   padding: 60px 145px;
   background-color: ${theme.color.gray100};
   ${theme.typography.Body1};
   position: relative;
+  width: ${(props) => `calc(${props.width})`};
   z-index: -1;
 `;
 

diff --git a/src/styles/layout/header/index.ts b/src/styles/layout/header/index.ts
@@ -3,15 +3,15 @@ import { ColorKeyType } from '@/styles/theme';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-export const Container = styled.header<{ color: ColorKeyType }>`
+export const Container = styled.header<{ color: ColorKeyType; width: string }>`
   position: sticky;
   left: 0;
   top: 0;
   z-index: 1;
   padding: 16px 60px;
   display: flex;
   justify-content: space-between;
-  width: 100%;
+  width: ${(props) => `calc(${props.width})`};
   background-color: ${(props) => props.theme.color[props.color]};
   transition: background-color 0.2s;
 `;