feat: Text 굵기 선택 지원 + global.ts weight 추가

LikeLion-KNU · Aug 28, 2024 · 3c82f7b · 3c82f7b
1 parent edbfe53
commit 3c82f7b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 0 deletions.
diff --git a/src/components/typography/Text.style.ts b/src/components/typography/Text.style.ts
@@ -21,6 +21,25 @@ export const TextElement = styled.span<TextProps>`
         }
     }};
 
+    font-weight: ${(props) => {
+        switch (props.weight) {
+            case "l":
+                return "var(--font-weight-l)";
+            case "r":
+                return "var(--font-weight-r)";
+            case "b":
+                return "var(--font-weight-b)";
+            case "eb":
+                return "var(--font-weight-eb)";
+            case "h":
+                return "var(--font-weight-h)";
+            case undefined:
+                return "var(--font-weight-r)";
+            default:
+                return props.weight;
+        }
+    }};
+
     color: ${(props) => {
         switch (props.color) {
             case "primary":

diff --git a/src/components/typography/Text.tsx b/src/components/typography/Text.tsx
@@ -4,6 +4,7 @@ import { TextElement } from "./Text.style";
 
 export interface TextProps extends React.ComponentProps<"span"> {
     size: "xs" | "s" | "m" | "l" | "xl";
+    weight?: "l" | "r" | "b" | "eb" | "h";
     children: React.ReactNode;
 }
 

diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -28,6 +28,11 @@ export const GlobalStyle = css`
         --font-size-m: 18px;
         --font-size-s: 16px;
         --font-size-xs: 13px;
+        --font-weight-l: 300;
+        --font-weight-r: 400;
+        --font-weight-b: 700;
+        --font-weight-eb: 800;
+        --font-weight-h: 900;
 
         --color-primary: #37cdcd;
         --color-primary-300: #64e4e0;