From 839f17e906183385fcdd329c3d4f97d4644b093c Mon Sep 17 00:00:00 2001
From: yoosion030 <yoosioff@gmail.com>
Date: Sun, 16 Jul 2023 23:20:17 +0900
Subject: [PATCH] Update MainHeader responsive

---
 .../src/components/MainPage/Content/index.tsx |  6 +-----
 .../src/components/MainPage/Header/index.tsx  | 21 +++++++++----------
 .../src/components/SlotMachine/index.tsx      |  4 ++--
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/components/MainPage/Content/index.tsx b/apps/client/src/components/MainPage/Content/index.tsx
index ae9d18ab8..56ee1b1b0 100644
--- a/apps/client/src/components/MainPage/Content/index.tsx
+++ b/apps/client/src/components/MainPage/Content/index.tsx
@@ -27,10 +27,6 @@ const Content = styled.div`
   flex-direction: column;
   align-items: center;
   z-index: 1;
-  margin-top: calc(56.25vw - 4rem);
+  margin-top: calc(100vh - 4rem);
   padding: 6.25rem 0 12.5rem;
-
-  @media ${({ theme }) => theme.breakPoint['1024']} {
-    margin-top: calc(43.75rem - 4rem);
-  }
 `;
diff --git a/apps/client/src/components/MainPage/Header/index.tsx b/apps/client/src/components/MainPage/Header/index.tsx
index 111f93b98..ea4f14ddb 100644
--- a/apps/client/src/components/MainPage/Header/index.tsx
+++ b/apps/client/src/components/MainPage/Header/index.tsx
@@ -1,22 +1,21 @@
 'use client';
 
 import { Header } from 'client/components';
-import { useGetWindowScrollHeight, useGetWindowWidth } from 'client/hooks';
-
-const headerHeightPx = 64;
+import {
+  useGetWindowHeight,
+  useGetWindowScrollHeight,
+  useGetWindowWidth,
+} from 'client/hooks';
 
 const MainpageHeader = () => {
-  const windowScrollHeight = useGetWindowScrollHeight();
   const windowWidth = useGetWindowWidth();
+  const headerHeightPx = windowWidth <= 600 ? 48 : 64;
+  const windowScrollHeight = useGetWindowScrollHeight();
+  const windowHeight = useGetWindowHeight();
 
-  const isTablet = windowWidth <= 1024;
-
-  /** 가로 : 세로 = 16 : 9 = 100 : 56.25 (56.25%) */
-  const promotionVideoHeightPx = isTablet ? 700 : (windowWidth / 100) * 56.25;
-
-  const videoOverlayPx = promotionVideoHeightPx - headerHeightPx;
+  // 100vh - header height
+  const videoOverlayPx = windowHeight - headerHeightPx;
 
-  // main과 분리
   const isAbovePromotionVideo = windowScrollHeight < videoOverlayPx;
 
   return <Header segment='' isAbovePromotionVideo={isAbovePromotionVideo} />;
diff --git a/apps/client/src/components/SlotMachine/index.tsx b/apps/client/src/components/SlotMachine/index.tsx
index 5e666468a..3ee3e7c9b 100644
--- a/apps/client/src/components/SlotMachine/index.tsx
+++ b/apps/client/src/components/SlotMachine/index.tsx
@@ -31,9 +31,9 @@ const SlotMachine = () => {
           </S.Wrap>
           <span>{']'}</span>
         </S.ListWrap>
-        <S.Icon>
+        <span>
           <UnderscoreIcon />
-        </S.Icon>
+        </span>
       </S.ListIconWrap>
       <span className='second'>
         할 수 있어