From c5cdd7fe3fb8e059c85f42e1f48cbf1fb274235b Mon Sep 17 00:00:00 2001
From: jaewoongs <dbswodnd5428@gmail.com>
Date: Wed, 7 Aug 2024 23:53:19 +0900
Subject: [PATCH] =?UTF-8?q?fix,=20mobile=EC=97=90=EC=84=9C=20=EA=B9=A8?=
 =?UTF-8?q?=EC=A7=80=EB=8A=94=20=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/atoms/Backdrop.tsx                     |  2 +-
 src/components/organisms/main/IntroProjectBlock.tsx   |  3 +--
 src/components/organisms/main/IntroRecommendBlock.tsx |  2 +-
 src/components/templates/Header.tsx                   | 11 +++++++++--
 src/components/templates/MainSection3.tsx             |  2 +-
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/atoms/Backdrop.tsx b/src/components/atoms/Backdrop.tsx
index d3ce0ac1..de6e5554 100644
--- a/src/components/atoms/Backdrop.tsx
+++ b/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;
 
diff --git a/src/components/organisms/main/IntroProjectBlock.tsx b/src/components/organisms/main/IntroProjectBlock.tsx
index bf5a8133..5793a2ff 100644
--- a/src/components/organisms/main/IntroProjectBlock.tsx
+++ b/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;
 
diff --git a/src/components/organisms/main/IntroRecommendBlock.tsx b/src/components/organisms/main/IntroRecommendBlock.tsx
index d0c9a3ae..eaaf8845 100644
--- a/src/components/organisms/main/IntroRecommendBlock.tsx
+++ b/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;
 `;
 
diff --git a/src/components/templates/Header.tsx b/src/components/templates/Header.tsx
index 9191ba64..94500933 100644
--- a/src/components/templates/Header.tsx
+++ b/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 = () => {
diff --git a/src/components/templates/MainSection3.tsx b/src/components/templates/MainSection3.tsx
index 948bca62..2d50bef9 100644
--- a/src/components/templates/MainSection3.tsx
+++ b/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});
 `;