Merge pull request #257 from Team-Crops/dev

mobile에서 꺠지는 부분 핫픽스 적용

src/app/globals.css

@@ -90,12 +90,17 @@ textarea {
 
 html {
   background-color: #fff;
+  min-width: 1500px;
 }
 
 body {
+  min-width: 1500px;
   width: 100vw;
   margin: 0 auto;
 }
+header {
+  min-width: 1500px;
+}
 
 input,
 textarea,

src/components/atoms/Backdrop.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 export const Backdrop = styled.div`
   position: fixed;
-  z-index: 100;
+  z-index: 10000;
   top: 0;
   left: 0;
 

src/components/organisms/main/IntroProjectBlock.tsx

@@ -18,14 +18,13 @@ const Block = styled.div`
   gap: 80px;
   align-items: center;
 
-  width: 100vw;
+  width: 100%;
   padding: 20px;
 `;
 const CardWrapper = styled.div`
   position: relative;
 
   display: flex;
-  flex-wrap: wrap;
   gap: 32px;
   justify-content: center;
 

src/components/organisms/main/IntroRecommendBlock.tsx

@@ -71,7 +71,7 @@ const Block = styled.div`
   gap: 80px;
   align-items: center;
 
-  width: 100vw;
+  width: 100%;
   padding: 20px;
 `;
 

src/components/templates/Header.tsx

@@ -3,6 +3,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { media } from '#/utilities';
 import { HeaderContent } from '#organisms/HeaderContent';
 
 const SpaceCSS = css`
@@ -13,15 +14,21 @@ const StyledHeader = styled.header`
   position: fixed;
   z-index: 9999;
 
+  padding: 0 20px;
+
   background: #fff;
   border-bottom: 1px solid #eee;
 
-  padding: 0 20px;
-
   ${SpaceCSS}
+  ${media.xxlarge} {
+    position: relative;
+  }
 `;
 const HeaderSpace = styled.div`
   ${SpaceCSS}
+  ${media.xxlarge} {
+    display: none;
+  }
 `;
 
 export const Header = () => {

src/components/templates/MainSection3.tsx

@@ -81,7 +81,7 @@ const BackgroundImage = styled(Image)`
   z-index: -10;
   top: -70px;
 
-  width: 100vw;
+  width: 100%;
   height: calc(100vw * ${mainSection3Background.height / mainSection3Background.width});
 `;