Merge pull request #248 from Yanabada/feature/#247

Fix: 아이폰 뷰포트 대응 & 웹 폰트 통일
Yanabada · Jan 30, 2024 · 5561e27 · 5561e27
2 parents 0f5aad7 + 3632f33
commit 5561e27
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
     <link rel="manifest" href="/manifest.json" />
     <link rel="icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180" />

diff --git a/src/components/navBar/bottomNavBar/styles.ts b/src/components/navBar/bottomNavBar/styles.ts
@@ -15,6 +15,12 @@ export const BottomNavWrapper = styled.div`
   max-width: 780px;
   margin: 0 auto;
 
+  padding-left: constant(safe-area-inset-left);
+  padding-right: constant(safe-area-inset-right);
+
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+
   user-select: none;
   z-index: 999;
 

diff --git a/src/fonts/Pretendard-Black.woff b/src/fonts/Pretendard-Black.woff
diff --git a/src/fonts/Pretendard-Bold.woff b/src/fonts/Pretendard-Bold.woff
diff --git a/src/fonts/Pretendard-ExtraBold.woff b/src/fonts/Pretendard-ExtraBold.woff
diff --git a/src/fonts/Pretendard-ExtraLight.woff b/src/fonts/Pretendard-ExtraLight.woff
diff --git a/src/fonts/Pretendard-Light.woff b/src/fonts/Pretendard-Light.woff
diff --git a/src/fonts/Pretendard-Medium.woff b/src/fonts/Pretendard-Medium.woff
diff --git a/src/fonts/Pretendard-Regular.woff b/src/fonts/Pretendard-Regular.woff
diff --git a/src/fonts/Pretendard-SemiBold.woff b/src/fonts/Pretendard-SemiBold.woff
diff --git a/src/fonts/Pretendard-Thin.woff b/src/fonts/Pretendard-Thin.woff
diff --git a/src/styles/fonts.ts b/src/styles/fonts.ts
@@ -0,0 +1,24 @@
+import { css } from "@emotion/react";
+
+import PretendardRegular from "../fonts/Pretendard-Regular.woff";
+import PretendardBold from "../fonts/Pretendard-Bold.woff";
+
+export const fonts = css`
+  @font-face {
+    font-family: Pretendard;
+    font-style: normal;
+    font-weight: normal;
+    src:
+      local("Pretendard"),
+      url(${PretendardRegular}) format("woff");
+  }
+
+  @font-face {
+    font-family: Pretendard;
+    font-style: normal;
+    font-weight: 500;
+    src:
+      local("Pretendard"),
+      url(${PretendardBold}) format("woff");
+  }
+`;
diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts
@@ -1,10 +1,12 @@
 import { css } from "@emotion/react";
+import { fonts } from "./fonts";
 
 const globalStyles = css`
   * {
     margin: 0px;
     box-sizing: border-box;
   }
+  ${fonts}
 
   ::-webkit-scrollbar {
     width: 8px;
@@ -43,7 +45,22 @@ const globalStyles = css`
   textarea,
   label,
   table {
-    font-family: "Pretendard-Regular";
+    font-family:
+      "Pretendard Variable",
+      Pretendard,
+      -apple-system,
+      BlinkMacSystemFont,
+      system-ui,
+      Roboto,
+      "Helvetica Neue",
+      "Segoe UI",
+      "Apple SD Gothic Neo",
+      "Noto Sans KR",
+      "Malgun Gothic",
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      sans-serif;
     margin: 0;
     padding: 0;
     border: 0;
@@ -63,23 +80,45 @@ const globalStyles = css`
     list-style: none;
   }
   button {
-    font-family: "Pretendard-Regular";
+    font-family:
+      "Pretendard Variable",
+      Pretendard,
+      -apple-system,
+      BlinkMacSystemFont,
+      system-ui,
+      Roboto,
+      "Helvetica Neue",
+      "Segoe UI",
+      "Apple SD Gothic Neo",
+      "Noto Sans KR",
+      "Malgun Gothic",
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      sans-serif;
     border: 0;
     background: transparent;
     cursor: pointer;
     padding: 0;
     margin: 0;
   }
   input {
-    font-family: "Pretendard-Regular";
-  }
-
-  @font-face {
-    font-family: "Pretendard-Regular";
-    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
-      format("woff");
-    font-weight: 400;
-    font-style: normal;
+    font-family:
+      "Pretendard Variable",
+      Pretendard,
+      -apple-system,
+      BlinkMacSystemFont,
+      system-ui,
+      Roboto,
+      "Helvetica Neue",
+      "Segoe UI",
+      "Apple SD Gothic Neo",
+      "Noto Sans KR",
+      "Malgun Gothic",
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      sans-serif;
   }
 `;