Update MainHeader responsive

themoment-team · Jul 16, 2023 · 839f17e · 839f17e
1 parent aabaf40
commit 839f17e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 18 deletions.
diff --git 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
@@ -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
@@ -31,9 +31,9 @@ const SlotMachine = () => {
           </S.Wrap>
           <span>{']'}</span>
         </S.ListWrap>
-        <S.Icon>
+        <span>
           <UnderscoreIcon />
-        </S.Icon>
+        </span>
       </S.ListIconWrap>
       <span className='second'>
         할 수 있어