[홈화면] 슬라이드 뷰, Application 뷰 컴포넌트 #25 solve view overflow

Network-Leader · Oct 31, 2022 · d1b8e4d · d1b8e4d
1 parent c280bcb
commit d1b8e4d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
@@ -1,14 +1,15 @@
 import { Outlet } from "react-router-dom";
+import { MainContainer } from "../../styles/layout/layout";
 import Footer from "./Footer";
 import Header from "./Header";
 
 const Layout = () => {
   return (
-    <>
+    <MainContainer>
       <Header authenticated={false} profile={null} />
       <Outlet />
       <Footer />
-    </>
+    </MainContainer>
   );
 };
 

diff --git a/src/styles/activity/modal/template.ts b/src/styles/activity/modal/template.ts
@@ -10,6 +10,7 @@ const ModalContainer = styled.div`
   background-color: rgba(105, 105, 105, 0.9);
   position: fixed;
   top: 0;
+  /* z-index: 996; */
 `;
 
 const ModalTemplate = styled.div`

diff --git a/src/styles/layout/footer.ts b/src/styles/layout/footer.ts
@@ -4,7 +4,7 @@ const FooterBox = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  z-index: 999;
+  z-index: 997;
   width: 100%;
   height: 318px;
   left: 0px;

diff --git a/src/styles/layout/layout.ts b/src/styles/layout/layout.ts
@@ -9,4 +9,13 @@ const GlobalContainer = styled.main`
   padding: 145px 0 0 0;
 `;
 
-export { GlobalContainer };
+const MainContainer = styled.main`
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+`;
+
+export { GlobalContainer, MainContainer };