Merge pull request #3 from GlowTales/setting/#2

chore : 나눔스퀘어라운드 글꼴 global style로 적용
GlowTales · Aug 17, 2024 · 6c518c6 · 6c518c6
2 parents 908eacd + ba17ed5
commit 6c518c6
Show file tree

Hide file tree

Showing 16 changed files with 103 additions and 88 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Glow Tales</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,32 +1,7 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-
 function App() {
-  const [count, setCount] = useState(0);
-
   return (
     <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <h1>Glow Tales</h1>
     </>
   );
 }

diff --git a/src/styles/fonts/NanumSquareRound.css b/src/styles/fonts/NanumSquareRound.css
@@ -0,0 +1,41 @@
+/* 나눔스퀘어라운드 웹폰트 v1.11  https://github.com/innks/NanumSquareRound */
+@font-face {
+  font-family: NanumSquareRound;
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local("NanumSquareRoundL"),
+    url(./NanumSqueareRound/NanumSquareRoundL.woff2) format("woff2"),
+    url(./NanumSqueareRound/NanumSquareRoundL.woff) format("woff"),
+    url(./NanumSqueareRound/NanumSquareRoundL.ttf) format("truetype");
+}
+@font-face {
+  font-family: NanumSquareRound;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("NanumSquareRoundR"),
+    url(./NanumSqueareRound/NanumSquareRoundR.woff2) format("woff2"),
+    url(./NanumSqueareRound/NanumSquareRoundR.woff) format("woff"),
+    url(./NanumSqueareRound/NanumSquareRoundR.ttf) format("truetype");
+}
+@font-face {
+  font-family: NanumSquareRound;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local("NanumSquareRoundB"),
+    url(./NanumSqueareRound/NanumSquareRoundB.woff2) format("woff2"),
+    url(./NanumSqueareRound/NanumSquareRoundB.woff) format("woff"),
+    url(./NanumSqueareRound/NanumSquareRoundB.ttf) format("truetype");
+}
+@font-face {
+  font-family: NanumSquareRound;
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: local("NanumSquareRoundEB"),
+    url(./NanumSqueareRound/NanumSquareRoundEB.woff2) format("woff2"),
+    url(./NanumSqueareRound/NanumSquareRoundEB.woff) format("woff"),
+    url(./NanumSqueareRound/NanumSquareRoundEB.ttf) format("truetype");
+}
diff --git a/src/styles/fonts/NanumSqueareRound/NanumSquareRoundB.ttf b/src/styles/fonts/NanumSqueareRound/NanumSquareRoundB.ttf
diff --git a/src/styles/fonts/NanumSqueareRound/NanumSquareRoundB.woff b/src/styles/fonts/NanumSqueareRound/NanumSquareRoundB.woff
diff --git a/src/styles/fonts/NanumSqueareRound/NanumSquareRoundB.woff2 b/src/styles/fonts/NanumSqueareRound/NanumSquareRoundB.woff2
diff --git a/src/styles/fonts/NanumSqueareRound/NanumSquareRoundEB.ttf b/src/styles/fonts/NanumSqueareRound/NanumSquareRoundEB.ttf
diff --git a/src/styles/fonts/NanumSqueareRound/NanumSquareRoundEB.woff b/src/styles/fonts/NanumSqueareRound/NanumSquareRoundEB.woff
diff --git a/src/styles/fonts/NanumSqueareRound/NanumSquareRoundEB.woff2 b/src/styles/fonts/NanumSqueareRound/NanumSquareRoundEB.woff2
diff --git a/src/styles/fonts/NanumSqueareRound/NanumSquareRoundL.ttf b/src/styles/fonts/NanumSqueareRound/NanumSquareRoundL.ttf
diff --git a/src/styles/fonts/NanumSqueareRound/NanumSquareRoundL.woff b/src/styles/fonts/NanumSqueareRound/NanumSquareRoundL.woff
diff --git a/src/styles/fonts/NanumSqueareRound/NanumSquareRoundL.woff2 b/src/styles/fonts/NanumSqueareRound/NanumSquareRoundL.woff2
diff --git a/src/styles/fonts/NanumSqueareRound/NanumSquareRoundR.ttf b/src/styles/fonts/NanumSqueareRound/NanumSquareRoundR.ttf
diff --git a/src/styles/fonts/NanumSqueareRound/NanumSquareRoundR.woff b/src/styles/fonts/NanumSqueareRound/NanumSquareRoundR.woff
diff --git a/src/styles/fonts/NanumSqueareRound/NanumSquareRoundR.woff2 b/src/styles/fonts/NanumSqueareRound/NanumSquareRoundR.woff2
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,66 +1,65 @@
+@import "./fonts/NanumSquareRound.css";
+
 html {
-    -webkit-text-size-adjust: none;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    font-size: 62.5%;
-    overflow: scroll;
-    scroll-snap-type: y mandatory;
-    scroll-padding-top: 65px;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    display: flex;
-    justify-content: center;
-    font-family: "Pretendard";
+  -webkit-text-size-adjust: none;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-size: 62.5%;
+  overflow: scroll;
+  scroll-snap-type: y mandatory;
+  scroll-padding-top: 65px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  display: flex;
+  justify-content: center;
+  font-family: "NanumSquareRound", sans-serif;
+}
+
+html::-webkit-scrollbar {
+  display: none;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  min-height: 100%; /* 화면 스크롤 방지를 위해 최소높이 지정 */
+  margin: 0;
+  padding: 0;
+  background-color: white;
+  box-shadow: 10px -50px 50px 15px rgba(220, 220, 220, 0.22),
+    -10px -50px 50px 15px rgba(197, 197, 197, 0.22);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/*모바일+아이패드 세로) 화면 너비: 0 ~ 800 */
+@media (min-width: 0px) {
+  html {
+    font-size: 8px;
   }
-
-  html::-webkit-scrollbar {
-    display: none;
+}
+
+/* 데스크톱) 화면 너비: 1024 ~ */
+@media (min-width: 900px) {
+  html {
+    font-size: 10px;
   }
-
   body {
-    width: 100%;
-    height: fit-content;
-    /* 화면 스크롤 방지를 위해 최소높이 지정 */
-    min-height: 100%;
-    margin: 0;
-    padding: 0;
-    background-color: white;
-    box-shadow: 10px -50px 50px 15px rgba(220, 220, 220, 0.22),
-      -10px -50px 50px 15px rgba(197, 197, 197, 0.22);
-    /* 드래그 방지 */
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+    width: 768px;
   }
-
-  /*모바일+아이패드 세로) 화면 너비: 0 ~ 800 */
-  @media (min-width: 0px) {
-    html {
-      font-size: 8px;
-    }
-  }
-
-  /* 데스크톱) 화면 너비: 1024 ~ */
-  @media (min-width: 900px) {
-    html {
-      font-size: 10px;
-    }
-    body {
-      width: 768px;
-    }
-  }
-
-  img {
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-    -webkit-user-drag: none;
-    -khtml-user-drag: none;
-    -moz-user-drag: none;
-    -o-user-drag: none;
-  }
-
+}
+
+img {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-user-drag: none;
+  -webkit-user-drag: none;
+  -moz-user-drag: none;
+}