폰트적용

codestates · May 14, 2022 · 96522aa · 96522aa
1 parent 80eb5a8
commit 96522aa
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 14 deletions.
diff --git a/client/src/component/Footer.js b/client/src/component/Footer.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import logo from '../images/logo.png';
 import styled from 'styled-components';
 
 const FooterContainer = styled.div`
@@ -8,6 +7,10 @@ const FooterContainer = styled.div`
   color: white;
   align-items: center;
   padding: 20px 30px;
+
+  > ul {
+    list-style: none;
+  }
 `;
 
 const Footer = () => {
@@ -22,7 +25,6 @@ const Footer = () => {
         Copyright &copy; <span>{thisYear()}</span>
       </p>
       <ul className="footer-info">
-        <li>TeamLeader&nbsp;:&nbsp;오상민</li>
         <li>Back-End&nbsp;:&nbsp;오상민</li>
         <li>Back-End&nbsp;:&nbsp;유지훈</li>
         <li>Front-End&nbsp;:&nbsp;최윤선</li>

diff --git a/client/src/component/Header.js b/client/src/component/Header.js
@@ -4,8 +4,8 @@ import { NavLink } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { useState } from 'react';
-import { useSelector } from 'react-redux';
 import UserMenu from './UserMenu';
+import styled from 'styled-components';
 
 function Header() {
   // const test = useSelector((state) => state);

diff --git a/client/src/component/MypageCompo/UserInfo.js b/client/src/component/MypageCompo/UserInfo.js
@@ -194,7 +194,10 @@ function UserInfo() {
   //처음 렌더링때 작동: 유저정보 불러오기
   useEffect(() => {
     axios
-      .get(`${process.env.REACT_APP_SERVER_DEV_URL}/users/${id}`, getConfig)
+      .get(
+        `${process.env.REACT_APP_SERVER_DEV_URL}/users/userinfo/${id}`,
+        getConfig,
+      )
       .then((res) => {
         const { user } = res.data;
         if (user) {

diff --git a/client/src/fonts/EliceDigitalCoding_Bold.woff b/client/src/fonts/EliceDigitalCoding_Bold.woff
diff --git a/client/src/fonts/EliceDigitalCoding_Regular.woff b/client/src/fonts/EliceDigitalCoding_Regular.woff
diff --git a/client/src/fonts/fonts.js b/client/src/fonts/fonts.js
@@ -0,0 +1,23 @@
+import { createGlobalStyle } from 'styled-components';
+import EliceDigitalCodingRegular from './EliceDigitalCoding_Regular.woff';
+import EliceDigitalCodingBold from './EliceDigitalCoding_Bold.woff';
+
+export default createGlobalStyle`		     
+  @font-face {
+    font-family: 'Elice Regular';	
+    src: local('Elice Regular'),   
+    url(${EliceDigitalCodingRegular}) format('woff');
+    font-weight: 300; 
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'Elice Bold';	
+    src: local('Elice Bold'),   
+    url(${EliceDigitalCodingBold}) format('woff');
+    font-weight: 300; 
+    font-style: normal;
+  }
+  
+  
+`;
diff --git a/client/src/pages/Outline.js b/client/src/pages/Outline.js
@@ -2,32 +2,36 @@ import { Outlet } from 'react-router-dom';
 import Header from '../component/Header';
 import Footer from '../component/Footer';
 import styled from 'styled-components';
+import GlobalFonts from '../fonts/fonts';
 
 const EntireContainer = styled.div`
   * {
     box-sizing: border-box;
     word-break: keep-all;
-    font-family: 'Helvetica', 'Arial', sans-serif;
-    color: red;
+    /* font-family: 'Helvetica', 'Arial', sans-serif; */
+    font-family: 'Elice Bold';
   }
 `;
 
 const BodyContainer = styled.div`
   * {
     margin: 0;
-    background-color: wheat;
+    font-family: 'Elice Regular';
   }
 `;
 
 function Outline() {
   return (
-    <EntireContainer>
-      <Header />
-      <BodyContainer id="content-wrap">
-        <Outlet />
-      </BodyContainer>
-      <Footer />
-    </EntireContainer>
+    <>
+      <GlobalFonts />
+      <EntireContainer>
+        <Header />
+        <BodyContainer id="content-wrap">
+          <Outlet />
+        </BodyContainer>
+        <Footer />
+      </EntireContainer>
+    </>
   );
 }