refactor: typography 토큰 네이밍 변경, text 컴포넌트 props 변경

Nexters · Feb 1, 2025 · 6ee71d3 · 6ee71d3
1 parent d6e972b
commit 6ee71d3
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 69 deletions.
diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx
@@ -6,10 +6,10 @@ const Home = () => {
   return (
     <div className={styles.Home}>
       <div className={styles.HomeTitle}>
-        <Text size="xl" color="gradient" weight="bold" align="center" as="h1">
+        <Text variant="titleLg" color="gradient" align="center" as="h1">
           {`영수증으로\nAI 음식 리뷰 남겨요`}
         </Text>
-        <Text color="secondary" weight="medium" align="center">
+        <Text variant="bodyLg" color="secondary" align="center">
           손쉬운 음식 리뷰 작성
         </Text>
       </div>

diff --git a/src/components/RecognitionFail/RecognitionFail.tsx b/src/components/RecognitionFail/RecognitionFail.tsx
@@ -6,10 +6,10 @@ const RecognitionFail = () => {
   return (
     <div className={styles.RecognitionFail}>
       <div className={styles.Title}>
-        <Text size="lg" color="primary" weight="bold" align="center" as="h1">
+        <Text color="primary" variant="titleM" align="center" as="h1">
           영수증 인식에 실패했어요
         </Text>
-        <Text weight="medium" align="center" color="secondary">
+        <Text color="secondary" variant="bodyLg" align="center">
           {`깨끗한 배경에 영수증을 놓고\n전체가 잘 나오도록 촬영해 주세요`}
         </Text>
       </div>

diff --git a/src/components/ui/Input/Input.module.scss b/src/components/ui/Input/Input.module.scss
@@ -28,11 +28,11 @@
   }
 
   &.Focused {
-    border-color: var(--color-purple);
+    border-color: var(--color-primary-purple);
   }
 
   .Input {
-    @include bodyMd;
+    @include bodyM;
     color: var(--color-text-primary);
     line-height: 1.5rem;
 

diff --git a/src/components/ui/Text/Text.module.scss b/src/components/ui/Text/Text.module.scss
@@ -1,3 +1,5 @@
+@use "@/styles/_mixins.scss" as *;
+
 .Text {
   line-height: 1.5;
 
@@ -18,15 +20,42 @@
     }
   }
 
-  @each $size-name in ("xxs", "xs", "sm", "default", "md", "lg", "xl") {
-    &.size-#{"#{$size-name}"} {
-      font-size: var(--font-size-#{$size-name});
-    }
-  }
-
-  @each $weight-name in ("regular", "medium", "semi-bold", "bold") {
-    &.weight-#{"#{$weight-name}"} {
-      font-weight: var(--font-weight-#{$weight-name});
+  @each $variant-name
+    in (
+      titleLg,
+      titleM,
+      titleSm,
+      bodyLg,
+      bodyM,
+      bodySm,
+      bodyXsm,
+      buttonPrimary,
+      buttonSecondary,
+      buttonTertiary
+    )
+  {
+    &.variant-#{$variant-name} {
+      @if $variant-name == titleLg {
+        @include titleLg;
+      } @else if $variant-name == titleM {
+        @include titleM;
+      } @else if $variant-name == titleSm {
+        @include titleSm;
+      } @else if $variant-name == bodyLg {
+        @include bodyLg;
+      } @else if $variant-name == bodyM {
+        @include bodyM;
+      } @else if $variant-name == bodySm {
+        @include bodySm;
+      } @else if $variant-name == bodyXsm {
+        @include bodyXsm;
+      } @else if $variant-name == buttonPrimary {
+        @include buttonPrimary;
+      } @else if $variant-name == buttonSecondary {
+        @include buttonSecondary;
+      } @else if $variant-name == buttonTertiary {
+        @include buttonTertiary;
+      }
     }
   }
 

diff --git a/src/components/ui/Text/Text.stories.tsx b/src/components/ui/Text/Text.stories.tsx
@@ -24,57 +24,46 @@ const Template: StoryFn<TextProps> = ({ children, ...props }) => (
 export const Primary: StoryObj<TextProps> = {
   render: Template,
   args: {
-    size: "default",
     color: "black",
-    weight: "regular",
+    variant: "bodyLg",
     align: "left",
     truncated: false,
     children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
   },
 };
 
-export const SizeProps: StoryObj<typeof Text> = {
+export const VariantProps: StoryObj<typeof Text> = {
   render: () => (
     <div className={styles.TextStory}>
       <div className={styles.Wrapper}>
-        <Text size="xxs" children="xxs" />
+        <Text variant="titleLg" children="titleLg" />
       </div>
       <div className={styles.Wrapper}>
-        <Text size="xs" children="xs" />
+        <Text variant="titleM" children="titleM" />
       </div>
       <div className={styles.Wrapper}>
-        <Text size="sm" children="sm" />
+        <Text variant="titleSm" children="titleSm" />
       </div>
       <div className={styles.Wrapper}>
-        <Text size="default" children="default" />
+        <Text variant="bodyLg" children="bodyLg" />
       </div>
       <div className={styles.Wrapper}>
-        <Text size="md" children="md" />
+        <Text variant="bodyM" children="bodyM" />
       </div>
       <div className={styles.Wrapper}>
-        <Text size="lg" children="lg" />
+        <Text variant="bodySm" children="bodySm" />
       </div>
       <div className={styles.Wrapper}>
-        <Text size="xl" children="xl" />
-      </div>
-    </div>
-  ),
-};
-
-export const WeightProps: StoryObj<typeof Text> = {
-  render: () => (
-    <div className={styles.TextStory}>
-      <div className={styles.Wrapper}>
-        <Text weight="regular" children="regular" />
+        <Text variant="bodyXsm" children="bodyXsm" />
       </div>
       <div className={styles.Wrapper}>
-        <Text weight="medium" children="medium" />
+        <Text variant="buttonPrimary" children="buttonPrimary" />
       </div>
       <div className={styles.Wrapper}>
-        <Text weight="semi-bold" children="semi-bold" />
+        <Text variant="buttonSecondary" children="buttonSecondary" />
       </div>
       <div className={styles.Wrapper}>
-        <Text weight="bold" children="bold" />
+        <Text variant="buttonTertiary" children="buttonTertiary" />
       </div>
     </div>
   ),

diff --git a/src/components/ui/Text/Text.tsx b/src/components/ui/Text/Text.tsx
@@ -11,9 +11,8 @@ const Text = React.forwardRef<HTMLElement, TextProps>(
       as: Comp = "span",
       children,
       color = "black",
-      size = "default",
+      variant = "bodyLg",
       className,
-      weight = "regular",
       align = "left",
       truncated,
       ...props
@@ -28,8 +27,7 @@ const Text = React.forwardRef<HTMLElement, TextProps>(
         className={classNames(
           styles.Text,
           styles[`color-${color}`],
-          styles[`size-${size}`],
-          styles[`weight-${weight}`],
+          styles[`variant-${variant}`],
           styles[`align-${align}`],
           truncated === true
             ? styles.truncated

diff --git a/src/components/ui/Text/Text.types.ts b/src/components/ui/Text/Text.types.ts
@@ -1,6 +1,14 @@
-type TextSize = "xxs" | "xs" | "sm" | "default" | "md" | "lg" | "xl";
-
-type TextWeight = "regular" | "medium" | "semi-bold" | "bold";
+type TextVariant =
+  | "titleLg"
+  | "titleM"
+  | "titleSm"
+  | "bodyLg"
+  | "bodyM"
+  | "bodySm"
+  | "bodyXsm"
+  | "buttonPrimary"
+  | "buttonSecondary"
+  | "buttonTertiary";
 
 type TextAlign = "left" | "center" | "right";
 
@@ -16,8 +24,7 @@ type TextColor =
 export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
   as?: React.ElementType;
   color?: TextColor;
-  size?: TextSize;
-  weight?: TextWeight;
+  variant?: TextVariant;
   align?: TextAlign;
   truncated?: boolean | number;
 }
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
@@ -1,49 +1,49 @@
 @mixin titleLg {
-  font-size: var(--font-size-xl);
+  font-size: var(--font-size-28);
   font-weight: var(--font-weight-bold);
 }
 
-@mixin titleMd {
-  font-size: var(--font-size-lg);
+@mixin titleM {
+  font-size: var(--font-size-24);
   font-weight: var(--font-weight-bold);
 }
 
 @mixin titleSm {
-  font-size: var(--font-size-md);
+  font-size: var(--font-size-22);
   font-weight: var(--font-weight-bold);
 }
 
 @mixin bodyLg {
-  font-size: var(--font-size-default);
+  font-size: var(--font-size-16);
   font-weight: var(--font-weight-medium);
 }
 
-@mixin bodyMd {
-  font-size: var(--font-size-sm);
+@mixin bodyM {
+  font-size: var(--font-size-15);
   font-weight: var(--font-weight-medium);
 }
 
 @mixin bodySm {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-14);
   font-weight: var(--font-weight-medium);
 }
 
 @mixin bodyXsm {
-  font-size: var(--font-size-xxs);
+  font-size: var(--font-size-13);
   font-weight: var(--font-weight-medium);
 }
 
 @mixin buttonPrimary {
-  font-size: var(--font-size-default);
+  font-size: var(--font-size-16);
   font-weight: var(--font-weight-semi-bold);
 }
 
 @mixin buttonSecondary {
-  font-size: var(--font-size-default);
+  font-size: var(--font-size-16);
   font-weight: var(--font-weight-medium);
 }
 
 @mixin buttonTertiary {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-14);
   font-weight: var(--font-weight-medium);
 }
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -4,21 +4,25 @@
   --font-weight-semi-bold: 600;
   --font-weight-bold: 700;
 
-  --font-size-xl: 1.75rem;
-  --font-size-lg: 1.5rem;
-  --font-size-md: 1.375rem;
-  --font-size-default: 1rem;
-  --font-size-sm: 0.9375rem;
-  --font-size-xs: 0.875rem;
-  --font-size-xxs: 0.8125rem;
+  --font-size-28: 1.75rem;
+  --font-size-24: 1.5rem;
+  --font-size-22: 1.375rem;
+  --font-size-16: 1rem;
+  --font-size-15: 0.9375rem;
+  --font-size-14: 0.875rem;
+  --font-size-13: 0.8125rem;
 
   --color-text-white: #fff;
   --color-text-black: #000;
   --color-text-primary: #363642;
   --color-text-secondary: #68696e;
   --color-text-tertiary: #a6a6ad;
   --color-text-quarternary: #e0e0e0;
-  --color-text-gradient: linear-gradient(90deg, var(--color-pink), var(--color-purple));
+  --color-text-gradient: linear-gradient(
+    90deg,
+    var(--color-primary-pink),
+    var(--color-primary-purple)
+  );
 
   --color-white: #ffffff;
   --color-black: #000000;
@@ -32,6 +36,6 @@
   --color-gray700: #161636;
   --color-bg-gradient: linear-gradient(180deg, #ffffff, #dcdce8);
   --color-bg-error: #d45085;
-  --color-purple: #443fb6;
-  --color-pink: #d444ba;
+  --color-primary-purple: #443fb6;
+  --color-primary-pink: #d444ba;
 }