style: 폰트 적용

TeamRecorDream · May 29, 2024 · 76fb0c2 · 76fb0c2
1 parent 1b88b46
commit 76fb0c2
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 74 deletions.
diff --git a/src/assets/fonts/index.ts b/src/assets/fonts/index.ts
@@ -1,51 +1,51 @@
-import { css } from "styled-components";
-import pretendard_extralight from "../../assets/fonts/pretendard_extralight.otf";
-import pretendard_bold from "../../assats/fonts/pretendard_bold.otf";
-import pretendard_light from "../../assets/fonts/pretendard_light.otf";
-import pretendard_medium from "../../assets/fonts/pretendard_medium.otf";
-import pretendard_regular from "../../assets/fonts/pretendard_regular.otf";
-import pretendard_semibold from "../../assets/fonts/pretendard_semibold.otf";
+import { css } from 'styled-components';
+import pretendard_extralight from '../../assets/fonts/pretendard_extralight.otf';
+import pretendard_bold from '../../assats/fonts/pretendard_bold.otf';
+import pretendard_light from '../../assets/fonts/pretendard_light.otf';
+import pretendard_medium from '../../assets/fonts/pretendard_medium.otf';
+import pretendard_regular from '../../assets/fonts/pretendard_regular.otf';
+import pretendard_semibold from '../../assets/fonts/pretendard_semibold.otf';
 
 export default css`
   @font-face {
     font-family: pretendard;
     font-weight: 200;
-    src: local("pretendard") url(${pretendard_extralight}) format("opentype");
+    src: local('pretendard') url(${pretendard_extralight}) format('opentype');
   }
 
   @font-face {
     font-family: pretendard;
     font-weight: 700;
-    src: local("pretendard") url(${pretendard_bold}) format("opentype");
+    src: local('pretendard') url(${pretendard_bold}) format('opentype');
   }
 
   @font-face {
     font-family: pretendard;
     font-weight: 300;
-    src: local("pretendard") url(${pretendard_extralight}) format("opentype");
+    src: local('pretendard') url(${pretendard_extralight}) format('opentype');
   }
 
   @font-face {
     font-family: pretendard;
     font-weight: 400;
-    src: local("pretendard") url(${pretendard_light}) format("opentype");
+    src: local('pretendard') url(${pretendard_light}) format('opentype');
   }
 
   @font-face {
     font-family: pretendard;
     font-weight: 500;
-    src: local("pretendard") url(${pretendard_medium}) format("opentype");
+    src: local('pretendard') url(${pretendard_medium}) format('opentype');
   }
 
   @font-face {
     font-family: pretendard;
     font-weight: 400;
-    src: local("pretendard") url(${pretendard_regular}) format("opentype");
+    src: local('pretendard') url(${pretendard_regular}) format('opentype');
   }
 
   @font-face {
     font-family: pretendard;
     font-weight: 600;
-    src: local("pretendard") url(${pretendard_semibold}) format("opentype");
+    src: local('pretendard') url(${pretendard_semibold}) format('opentype');
   }
 `;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -25,7 +25,7 @@ const ButtonWrapper = styled.div`
   height: 5.2rem;
   margin-top: 7.4rem;
 
-  font-size: 1.6rem;
+  ${({ theme }) => theme.fonts.button_01};
   text-align: center;
   color: ${({ theme }) => theme.colors.white};
 

diff --git a/src/components/DeleteButton.tsx b/src/components/DeleteButton.tsx
@@ -39,7 +39,7 @@ const ButtonWrapper = styled.div`
   height: 5.2rem;
   margin-top: 7.4rem;
 
-  font-size: 1.6rem;
+  ${({ theme }) => theme.fonts.button_01};
   text-align: center;
   color: ${({ theme }) => theme.colors.red};
 

diff --git a/src/components/Subtitle.tsx b/src/components/Subtitle.tsx
@@ -1,5 +1,5 @@
-import { PropsWithChildren } from "react";
-import styled from "styled-components";
+import { PropsWithChildren } from 'react';
+import styled from 'styled-components';
 
 const Subtitle = ({ children }: PropsWithChildren) => {
   return <SubtitleWrapper>{children}</SubtitleWrapper>;
@@ -10,11 +10,7 @@ export default Subtitle;
 const SubtitleWrapper = styled.p`
   margin-top: 1.8rem;
 
-  font-size: 2.4rem;
-  font-style: normal;
-  font-weight: 200;
-  line-height: 125%;
-  letter-spacing: -0.48px;
+  ${({ theme }) => theme.fonts.body_01};
   text-align: center;
 
   color: ${({ theme }) => theme.colors.white};

diff --git a/src/components/Title.tsx b/src/components/Title.tsx
@@ -1,5 +1,5 @@
-import { PropsWithChildren } from "react";
-import styled from "styled-components";
+import { PropsWithChildren } from 'react';
+import styled from 'styled-components';
 
 const Title = ({ children }: PropsWithChildren) => {
   return <TitleWrapper>{children}</TitleWrapper>;
@@ -8,10 +8,6 @@ const Title = ({ children }: PropsWithChildren) => {
 export default Title;
 
 const TitleWrapper = styled.p`
-  font-size: 2.4rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 125%; /* 30px */
-  letter-spacing: -0.48px;
+  ${({ theme }) => theme.fonts.heading_01};
   color: ${({ theme }) => theme.colors.white};
 `;
diff --git a/src/style/theme.ts b/src/style/theme.ts
@@ -1,160 +1,164 @@
-import mixin from "./mixin";
-import { css } from "styled-components";
+import mixin from './mixin';
+import { css } from 'styled-components';
 
 const colors = {
-  white: "#FFFFFF",
-  white02: "rgba(255, 255, 255, 0.50)",
-  white03: "rgba(255, 255, 255, 0.40)",
-  white04: "rgba(255, 255, 255, 0.20)",
-  white05: "rgba(255, 255, 255, 0.10)",
-  white06: "rgba(255, 255, 255, 0.05)",
-  grey01: "#222222",
-  grey02: "#373737",
-  dark: "#02040F",
-  purple: "#7F75EE",
-  red: "#FF5F5F",
-  black: "#000000",
-  kakao: "#FEE500",
+  white: '#FFFFFF',
+  white02: 'rgba(255, 255, 255, 0.50)',
+  white03: 'rgba(255, 255, 255, 0.40)',
+  white04: 'rgba(255, 255, 255, 0.20)',
+  white05: 'rgba(255, 255, 255, 0.10)',
+  white06: 'rgba(255, 255, 255, 0.05)',
+  grey01: '#222222',
+  grey02: '#373737',
+  dark: '#02040F',
+  purple: '#7F75EE',
+  red: '#FF5F5F',
+  black: '#000000',
+  kakao: '#FEE500',
 };
 
 const fonts = {
   Title: css`
-    font-family: "pretendard";
+    font-family: 'pretendard';
     font-size: 2.4rem;
     font-weight: 600;
     font-style: normal;
     line-height: 150%;
   `,
   heading_01: css`
-    font-family: SUIT;
-    font-size: 2.2rem;
+    font-family: 'pretendard';
+    font-size: 2.4rem;
     font-weight: 600;
     font-style: normal;
-    line-height: 150%;
+    line-height: 125%;
+    letter-spacing: -0.048rem;
   `,
   heading_02: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 2.2rem;
     font-weight: 400;
     font-style: normal;
     line-height: 150%;
   `,
   heading_03: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 2rem;
     font-weight: 600;
     font-style: normal;
     line-height: 150%;
   `,
   heading_04: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 2rem;
     font-weight: 400;
     font-style: normal;
     line-height: 150%;
   `,
 
   body_01: css`
-    font-family: SUIT;
-    font-size: 1.8rem;
-    font-weight: 600;
+    font-family: 'pretendard';
+    font-size: 2.4rem;
+    font-weight: 200;
     font-style: normal;
-    line-height: 150%;
+    line-height: 125%;
+    letter-spacing: -0.048rem;
   `,
   body_02: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 1.8rem;
     font-weight: 400;
     font-style: normal;
     line-height: 150%;
   `,
   body_03: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 1.7rem;
     font-weight: 600;
     font-style: normal;
     line-height: 150%;
   `,
   body_04: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 1.7rem;
     font-weight: 400;
     font-style: normal;
     line-height: 150%;
   `,
   body_05: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 1.6rem;
     font-weight: 600;
     font-style: normal;
     line-height: 150%;
   `,
   body_06: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 1.6rem;
     font-weight: 400;
     font-style: normal;
     line-height: 150%;
   `,
   body_07: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 1.5rem;
     font-weight: 600;
     font-style: normal;
     line-height: 150%;
   `,
   body_08: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 1.5rem;
     font-weight: 400;
     font-style: normal;
     line-height: 150%;
   `,
   body_09: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 1.4rem;
     font-weight: 600;
     font-style: normal;
     line-height: 150%;
   `,
   body_10: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 1.4rem;
     font-weight: 400;
     font-style: normal;
     line-height: 150%;
   `,
 
   caption_01: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 1.2rem;
     font-weight: 600;
     font-style: normal;
     line-height: 150%;
   `,
   caption_02: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 1.2rem;
     font-weight: 400;
     font-style: normal;
     line-height: 150%;
   `,
   caption_03: css`
-    font-family: SUIT;
+    font-family: 'pretendard';
     font-size: 1rem;
     font-weight: 600;
     font-style: normal;
     line-height: 150%;
   `,
   caption_04: css`
-    font-family: SUIT;
-    font-size: 1rem;
-    font-weight: 400;
+    font-family: 'pretendard';
+    font-size: 1.6rem;
+    font-weight: 700;
     font-style: normal;
-    line-height: 150%;
+    line-height: 125%;
+    letter-spacing: -0.016rem;
+    text-transform: capitalize;
   `,
-  timer_01: css`
-    font-family: SUIT;
+  button_01: css`
+    font-family: 'pretendard';
     font-size: 2.8rem;
     font-weight: 600;
     font-style: normal;