Merge pull request #1 from LikeLion-KNU/feature/fonts

feat: NanumSquare Neo 폰트 적용, 글로벌 스타일 수정
LikeLion-KNU · Aug 28, 2024 · edbfe53 · edbfe53
2 parents 844eff0 + fac6382
commit edbfe53
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 16 deletions.
diff --git a/cypress/e2e/sample.cy.ts b/cypress/e2e/sample.cy.ts
@@ -1,8 +0,0 @@
-describe("cypress 테스트", () => {
-    it("test", () => {
-        cy.visit("/");
-        cy.get("button#increment").should("have.text", "count is 0");
-        cy.get("button#increment").click();
-        cy.get("button#increment").should("have.text", "count is 1");
-    });
-});

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,15 @@
 import { BrowserRouter } from "react-router-dom";
 
+import { FontsStyle } from "@/styles/fonts";
+import { GlobalStyle } from "@/styles/global";
+
 import { Router } from "./Router";
-import { GlobalStyle } from "./styles/global";
 import { Global } from "@emotion/react";
 
 export default function App() {
     return (
         <BrowserRouter>
-            <Global styles={GlobalStyle} />
+            <Global styles={[FontsStyle, GlobalStyle]} />
             <Router />
         </BrowserRouter>
     );

diff --git a/src/components/typography/Text.tsx b/src/components/typography/Text.tsx
@@ -7,6 +7,10 @@ export interface TextProps extends React.ComponentProps<"span"> {
     children: React.ReactNode;
 }
 
-export const Text = forwardRef<HTMLSpanElement, TextProps>(({ children, ...props }) => {
-    return <TextElement {...props}>{children}</TextElement>;
+export const Text = forwardRef<HTMLSpanElement, TextProps>(({ children, ...props }, ref) => {
+    return (
+        <TextElement ref={ref} {...props}>
+            {children}
+        </TextElement>
+    );
 });
diff --git a/src/styles/fonts.ts b/src/styles/fonts.ts
@@ -0,0 +1,68 @@
+import { css } from "@emotion/react";
+
+export const FontsStyle = css`
+    @font-face {
+        font-family: "NanumSquareNeo";
+        font-weight: 300;
+        src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot);
+        src:
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot?#iefix)
+                format("embedded-opentype"),
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff)
+                format("woff"),
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.ttf)
+                format("truetype");
+    }
+
+    @font-face {
+        font-family: "NanumSquareNeo";
+        font-weight: 400;
+        src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
+        src:
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix)
+                format("embedded-opentype"),
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff)
+                format("woff"),
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf)
+                format("truetype");
+    }
+
+    @font-face {
+        font-family: "NanumSquareNeo";
+        font-weight: 700;
+        src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot);
+        src:
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix)
+                format("embedded-opentype"),
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff)
+                format("woff"),
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf)
+                format("truetype");
+    }
+
+    @font-face {
+        font-family: "NanumSquareNeo";
+        font-weight: 800;
+        src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot);
+        src:
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot?#iefix)
+                format("embedded-opentype"),
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff)
+                format("woff"),
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.ttf)
+                format("truetype");
+    }
+
+    @font-face {
+        font-family: "NanumSquareNeo";
+        font-weight: 900;
+        src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot);
+        src:
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot?#iefix)
+                format("embedded-opentype"),
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff)
+                format("woff"),
+            url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.ttf)
+                format("truetype");
+    }
+`;
diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -1,11 +1,19 @@
 import { css } from "@emotion/react";
 
 export const GlobalStyle = css`
-    margin: 0;
-    padding: 0;
-    border: 0;
+    * {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        box-sizing: border-box;
+    }
 
-    box-sizing: border-box;
+    body {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-family: "NanumSquareNeo", sans-serif;
+    }
 
     img {
         display: block;