From 0641e97c5394f9dce1e18332e8c7a0beb516c896 Mon Sep 17 00:00:00 2001
From: ruehan <node.js_@kakao.com>
Date: Thu, 21 Nov 2024 15:51:38 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8Design:=20Mobile=20Wrapper=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx               | 27 +++++++++++++++++++++++++--
 src/styles/globalStyle.ts |  2 --
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 574a33d..bfa5661 100644
--- 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: 'Pretendard Variable', Pretendard, 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
index 1cf45d7..93e317a 100644
--- 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) */
   }
 
   /* 버튼 스타일 */

From 811e94fc998975ffb069bd091755dd59d11444ae Mon Sep 17 00:00:00 2001
From: ruehan <node.js_@kakao.com>
Date: Thu, 21 Nov 2024 16:20:17 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9BFix:=20=ED=8F=B0=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index bfa5661..9fd3a80 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -37,7 +37,7 @@ function App() {
 export default App
 
 const MobileWrapper = styled.div`
-  font-family: 'Pretendard Variable', Pretendard, sans-serif;
+  font-family: 'SUIT', sans-serif;
   display: flex;
   flex-direction: column;
   justify-content: space-between;