refactor: refactor font family using styled componenet

LikeLionHGU · Jul 30, 2024 · 6bf8111 · 6bf8111
1 parent aa9c1d2
commit 6bf8111
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 22 deletions.
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -5,6 +5,7 @@ import headerLogo from "../assets/header-logo.svg";
 import googleLogo from "../assets/googlelogo.svg";
 import kakaoLogo from "../assets/kakaologo.svg";
 import { serverRootUrl } from "../constants";
+import { pretendard, timesNewRoman } from "../styles/fonts";
 
 function Header() {
   const [openModal, setOpenModal] = useState("initial");
@@ -233,17 +234,15 @@ const HeaderModalLoginText = {
     }
   `,
   title: styled.div`
-    font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia,
-      serif;
+    ${timesNewRoman}
     font-size: 18px;
     font-weight: bold;
     font-style: italic;
     text-transform: uppercase;
     margin-bottom: 13px;
   `,
   text: styled.div`
-    font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia,
-      serif;
+    ${timesNewRoman}
     font-size: 12px;
     text-transform: uppercase;
     margin-bottom: 25px;
@@ -252,11 +251,8 @@ const HeaderModalLoginText = {
 
 const HeaderModalLoginBtn = {
   root: styled.div`
+    ${pretendard}
     color: black;
-    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;
     font-size: 12px;
     font-weight: 600; // Semi Bold
   `,

diff --git a/src/components/Home/Footer.jsx b/src/components/Home/Footer.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 
 import FooterLogoImg from "../../assets/footer-logo.svg";
+import { pretendard } from "../../styles/fonts";
 
 function Footer() {
   return (
@@ -31,10 +32,7 @@ function Footer() {
 export default Footer;
 
 const FooterComp = styled.div`
-  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;
+  ${pretendard}
 `;
 
 const FooterArea = {

diff --git a/src/components/Home/HomeUnreg.jsx b/src/components/Home/HomeUnreg.jsx
@@ -18,6 +18,7 @@ import MainHomeComp2_1 from "./MainHomeComp2_1";
 import MainHomeComp3 from "./MainHomeComp3";
 import MainHomeComp4 from "./MainHomeComp4";
 import Footer from "./Footer";
+import { pretendard } from "../../styles/fonts";
 
 function HomeUnreg() {
   const [videoLoadedComplete, setVideoLoadedComplete] = useState(false);
@@ -287,10 +288,7 @@ const MainFeatureComp = {
     }
   `,
   subtext: styled.div`
-    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;
+    ${pretendard}
     font-weight: medium;
     font-size: 24px;
     display: flex;

diff --git a/src/components/Home/MainHomeComp4.jsx b/src/components/Home/MainHomeComp4.jsx
@@ -7,6 +7,7 @@ import "slick-carousel/slick/slick-theme.css";
 import LeftArrowImg from "../../assets/MainHome/Section4/LeftArrow.svg";
 import RightArrowImg from "../../assets/MainHome/Section4/RightArrow.svg";
 import styled from "styled-components";
+import { pretendard, timesNewRoman } from "../../styles/fonts";
 
 function MainHomeComp4() {
   var settings = {
@@ -88,14 +89,10 @@ const MainHomeComp4Style = styled.div`
 
 const SliderStyle = {
   card: styled.div`
-    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;
+    ${pretendard}
   `,
   number: styled.div`
-    font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia,
-      serif;
+    ${timesNewRoman}
     font-size: 48px;
     padding: 36.5px;
   `,