🚀 240805: 중첩된 overflow옵션 제거, 인터뷰 컴포넌트에 overflow-x 옵션 설정

code-squad · Aug 5, 2024 · 888dccc · 888dccc
2 parents d5f6d4f + dadfdc7
commit 888dccc
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -162,20 +162,24 @@ const Footer: React.FC = () => {
 const FooterWrapper = styled.footer`
   display: flex;
   background-color: ${({ theme: { color } }) => color.black};
+  align-items: center;
+  width: 100%;
   @media ${({ theme }) => theme.device.mobile} {
-    align-items: center;
-    width: 100%;
-    height: 30.4rem;
+    height: 32.8rem;
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    height: 32.8rem;
   }
   @media ${({ theme }) => theme.device.desktop} {
     justify-content: center;
-    width: 100%;
     min-width: 144rem;
+    height: 26.6rem;
   }
 `;
 
 const ContentWrapper = styled.div`
   display: flex;
+
   justify-content: space-between;
   align-items: center;
   color: ${({ theme: { color } }) => color.white};
@@ -184,14 +188,17 @@ const ContentWrapper = styled.div`
   line-height: ${({ theme: { lineHeight } }) => lineHeight.body.xs};
   letter-spacing: ${({ theme: { letterSpacing } }) => letterSpacing};
   @media ${({ theme }) => theme.device.mobile} {
+    height: 24.8rem;
     padding: 4rem 2.4rem;
   }
   @media ${({ theme }) => theme.device.tablet} {
+    height: 24.8rem;
     padding: 4rem 8rem;
   }
   @media ${({ theme }) => theme.device.desktop} {
     min-width: 128rem;
-    padding: 5.6rem 8rem 8rem 8rem;
+    height: 15.4rem;
+    padding: 5.6rem 8rem;
   }
 `;
 

diff --git a/src/components/Interview/Interview.tsx b/src/components/Interview/Interview.tsx
@@ -124,6 +124,7 @@ const Interview: React.FC<IInterview> = ({ subtitle, title, interviews, style })
 const InterviewWrapper = styled.div`
   display: flex;
   flex-direction: column;
+  overflow-x: hidden;
   @media ${({ theme }) => theme.device.mobile} {
     margin-bottom: 12rem;
     align-items: space-between;

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -45,7 +45,7 @@ const MainPage: React.FC = () => {
   return (
     <GlobalTheme>
       <GlobalHeader title={SEO_TITLE.MAIN} description={SEO_DESCRIPTION.MAIN} url={INTERNAL.MAIN} />
-      <main style={{ overflowX: "hidden" }}>
+      <main>
         <HomeGlobalNavigationBar {...{ bannerStatus }} />
         {bannerStatus && <Banner {...{ bannerStatus, setBannerStatus }} />}
         <Welcome />