Merge pull request #245 from kookmin-sw/feature/13

Feat : 폰트 적용

frontend/src/App.js

@@ -2,21 +2,20 @@ import "./App.css";
 import { RecoilRoot } from "recoil";
 import GlobalStyle from "./styles/global";
 import Router from "./core/router";
-
-// import { Map, MapMarker } from "react-kakao-maps-sdk";
+import { ConfigProvider } from "antd";
 
 function App() {
   return (
-    // <div>
-    //   {/* <Map center={{ lat: 33.5563, lng: 126.79581 }} style={{ width: "100%", height: "360px" }}>
-    //     <MapMarker position={{ lat: 33.55635, lng: 126.795841 }}>
-    //       <div style={{ color: "#000" }}>Hello World!</div>
-    //     </MapMarker>
-    //   </Map> */}
-    // </div>
     <RecoilRoot>
       <GlobalStyle />
-      <Router />
+      <ConfigProvider
+        theme={{
+          token: {
+            fontFamily: "Prentendard",
+          },
+        }}>
+        <Router />
+      </ConfigProvider>
     </RecoilRoot>
   );
 }

frontend/src/components/common/Nav.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import { DesktopOutlined, FileOutlined, PieChartOutlined, TeamOutlined, UserOutlined } from "@ant-design/icons";
+import { DesktopOutlined, TeamOutlined, UserOutlined } from "@ant-design/icons";
 import { Layout, Menu } from "antd";
 const { Sider } = Layout;
 import { Outlet, Link, useLocation } from "react-router-dom";
@@ -14,11 +14,9 @@ function getItem(label, key, icon, children) {
 }
 
 const items = [
-  //getItem(<Link to="/">Option 1</Link>, "1", <PieChartOutlined />),
   getItem(<Link to="/list">실종자 리스트</Link>, "2", <DesktopOutlined />),
   getItem(<Link to="/report">실종자 리포트</Link>, "3", <UserOutlined />),
   getItem(<Link to="/add">실종정보 등록</Link>, "4", <TeamOutlined />),
-  // getItem("Option 5", "5", <FileOutlined />),
 ];
 
 const Nav = () => {

frontend/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

frontend/src/styles/global.js

@@ -1,7 +1,78 @@
 import { createGlobalStyle } from "styled-components";
 import { reset } from "styled-reset";
+import GlobalFont from "./globalFont";
+import Pretendard_Black from "../assets/fonts/pretendard/Pretendard-Black.woff";
+import Pretendard_Bold from "../assets/fonts/pretendard/Pretendard-Bold.woff";
+import Pretendard_semiBold from "../assets/fonts/pretendard/Pretendard-SemiBold.woff";
+import Pretendard_ExtraBold from "../assets/fonts/pretendard/Pretendard-ExtraBold.woff";
+import Pretendard_ExtraLight from "../assets/fonts/pretendard/Pretendard-ExtraLight.woff";
+import Pretendard_Light from "../assets/fonts/pretendard/Pretendard-Light.woff";
+import Pretendard_Medium from "../assets/fonts/pretendard/Pretendard-Medium.woff";
+import Pretendard_Regular from "../assets/fonts/pretendard/Pretendard-Regular.woff";
+import Pretendard_Thin from "../assets/fonts/pretendard/Pretendard-Thin.woff";
 
 const GlobalStyle = createGlobalStyle`
+@font-face {
+  font-family: 'Pretendard Black';
+  font-weight: 900;
+  font-display: swap;
+  src: local('Pretendard Black'), url(${Pretendard_Black}) format('woff');
+}
+
+@font-face {
+  font-family: 'Pretendard ExtraBold';
+  font-weight: 800;
+  font-display: swap;
+  src: local('Pretendard ExtraBold'),
+  url(${Pretendard_ExtraBold}) format('woff');
+}
+
+@font-face {
+    font-family:'Pretendard';
+    font-weight:700;
+    font-display:swap;
+    src:local('Pretendard Bold'), url(${Pretendard_Bold}) format("woff");
+  }
+
+  @font-face {
+    font-family:'Pretendard';
+    font-weight:600;
+    font-display:swap;
+    src:local('Pretendard SemiBold'), url(${Pretendard_semiBold}) format("woff");
+  }
+
+  @font-face {
+    font-family:'Pretendard';
+    font-weight:500;
+    font-display:swap;
+    src:local('Pretendard Medium'), url(${Pretendard_Medium}) format("woff")
+  }
+  @font-face {
+    font-family:'Pretendard';
+    font-weight:400;
+    font-display:swap;
+    src:local('Pretendard Regular'), url(${Pretendard_Regular}) format("woff")
+  }
+  @font-face {
+	font-family: 'Pretendard';
+	font-weight: 300;
+	font-display: swap;
+	src: local('Pretendard Light'),url(${Pretendard_Light}) format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 200;
+	font-display: swap;
+	src: local('Pretendard ExtraLight'), url(${Pretendard_ExtraLight}) format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 100;
+	font-display: swap;
+	src: local('Pretendard Thin'),url(${Pretendard_Thin}) format('woff');
+}
   ${reset}
   html { font-size: 62.5%; }
   @media all and (max-width: 750px) {
@@ -17,7 +88,9 @@ const GlobalStyle = createGlobalStyle`
 
   * {
     box-sizing: border-box;
+    font-family : "Pretendard";
 	}
+  body{font-family: "Pretendard";}
 
   button:hover {
     cursor: pointer;

frontend/src/styles/globalFont.js

@@ -0,0 +1,77 @@
+import { createGlobalStyle } from "styled-components";
+import { reset } from "styled-reset";
+import Pretendard_Black from "../assets/fonts/pretendard/Pretendard-Black.woff";
+import Pretendard_Bold from "../assets/fonts/pretendard/Pretendard-Bold.woff";
+import Pretendard_semiBold from "../assets/fonts/pretendard/Pretendard-SemiBold.woff";
+import Pretendard_ExtraBold from "../assets/fonts/pretendard/Pretendard-ExtraBold.woff";
+import Pretendard_ExtraLight from "../assets/fonts/pretendard/Pretendard-ExtraLight.woff";
+import Pretendard_Light from "../assets/fonts/pretendard/Pretendard-Light.woff";
+import Pretendard_Medium from "../assets/fonts/pretendard/Pretendard-Medium.woff";
+import Pretendard_Regular from "../assets/fonts/pretendard/Pretendard-Regular.woff";
+import Pretendard_Thin from "../assets/fonts/pretendard/Pretendard-Thin.woff";
+
+const GlobalFont = createGlobalStyle`
+@font-face {
+  font-family: 'Pretendard Black';
+  font-weight: 900;
+  font-display: swap;
+  src: local('Pretendard Black'), url(${Pretendard_Black}) format('woff');
+}
+
+@font-face {
+  font-family: 'Pretendard ';
+  font-weight: 800;
+  font-display: swap;
+  src: local('Pretendard ExtraBold'),
+  url(${Pretendard_ExtraBold}) format('woff');
+}
+
+@font-face {
+    font-family:'Pretendard';
+    font-weight:700;
+    font-display:swap;
+    src:local('Pretendard Bold'), url(${Pretendard_Bold}) format("woff");
+  }
+
+  @font-face {
+    font-family:'Pretendard';
+    font-weight:600;
+    font-display:swap;
+    src:local('Pretendard SemiBold'), url(${Pretendard_semiBold}) format("woff");
+  }
+
+  @font-face {
+    font-family:'Pretendard';
+    font-weight:500;
+    font-display:swap;
+    src:local('Pretendard Medium'), url(${Pretendard_Medium}) format("woff")
+  }
+  @font-face {
+    font-family:'Pretendard';
+    font-weight:400;
+    font-display:swap;
+    src:local('Pretendard Regular'), url(${Pretendard_Regular}) format("woff")
+  }
+  @font-face {
+	font-family: 'Pretendard';
+	font-weight: 300;
+	font-display: swap;
+	src: local('Pretendard Light'),url(${Pretendard_Light}) format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 200;
+	font-display: swap;
+	src: local('Pretendard ExtraLight'), url(${Pretendard_ExtraLight}) format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 100;
+	font-display: swap;
+	src: local('Pretendard Thin'),url(${Pretendard_Thin}) format('woff');
+}
+
+`;
+export default GlobalFont;

frontend/src/styles/theme/index.js

@@ -0,0 +1,14 @@
+export const theme = {
+  token: {
+    colorSuccess: "#58f60a",
+    colorWarning: "#ffb600",
+    colorError: "#f93638",
+    colorBgBase: "#1a1a20",
+    fontSize: 15,
+    colorLink: "#1677ff",
+    colorPrimaryBgHover: "#1677ff",
+  },
+  components: {
+    // component token
+  },
+};