Merge pull request #59 from prgrms-web-devcourse-final-project/58-fea…

…ture/mobile-wrapper [Feature] #58 Mobile Wrapper 추가
prgrms-web-devcourse-final-project · Nov 21, 2024 · ea2940d · ea2940d
2 parents b57bd59 + 811e94f
commit ea2940d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,7 +4,7 @@ import GlobalStyle from '@/styles/globalStyle'
 import { lightTheme, darkTheme } from '@/styles/theme'
 import { useState } from 'react'
 import { RouterProvider } from 'react-router-dom'
-import { ThemeProvider } from 'styled-components'
+import styled, { ThemeProvider } from 'styled-components'
 import { Helmet, HelmetProvider } from 'react-helmet-async'
 
 function App() {
@@ -24,7 +24,9 @@ function App() {
             Toggle Theme
           </button>
           <GlobalStyle />
-          <RouterProvider router={router} />
+          <MobileWrapper>
+            <RouterProvider router={router} />
+          </MobileWrapper>
           <PWABadge />
         </ThemeProvider>
       </HelmetProvider>
@@ -33,3 +35,24 @@ function App() {
 }
 
 export default App
+
+const MobileWrapper = styled.div`
+  font-family: 'SUIT', sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  color: ${({ theme }) => theme.colors.grayscale.font_1}; /* 기본 텍스트 색상 (Font_1) */
+  background-color: ${({ theme }) => theme.colors.brand.lighten_3}; /* 배경색 (GC_4) */
+  min-width: 340px;
+  max-width: 430px;
+  min-height: calc(var(--vh, 1vh) * 100);
+  margin: auto;
+  position: relative;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`
diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts
@@ -45,8 +45,6 @@ const GlobalStyle = createGlobalStyle`
     font-family: 'SUIT', sans-serif; /* SUIT 폰트 적용 */
     line-height: 1.5; 
     letter-spacing: -0.025em; 
-    color: ${({ theme }) => theme.colors.grayscale.font_1}; /* 기본 텍스트 색상 (Font_1) */
-    background-color: ${({ theme }) => theme.colors.brand.lighten_3}; /* 배경색 (GC_4) */
   }
 
   /* 버튼 스타일 */