Skip to content

Commit 4429eb6

Browse files
sikkzzsikkzz
committed
refactor: typography 토큰 네이밍 변경, text 컴포넌트 props 변경
1 parent de06404 commit 4429eb6

File tree

9 files changed

+96
-69
lines changed

9 files changed

+96
-69
lines changed

‎src/components/Home/Home.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ const Home = () => {
66
return (
77
<div className={styles.Home}>
88
<div className={styles.HomeTitle}>
9-
<Text size="xl" color="gradient" weight="bold" align="center" as="h1">
9+
<Text variant="titleLg" color="gradient" align="center" as="h1">
1010
{`영수증으로\nAI 음식 리뷰 남겨요`}
1111
</Text>
12-
<Text color="secondary" weight="medium" align="center">
12+
<Text variant="bodyLg" color="secondary" align="center">
1313
손쉬운 음식 리뷰 작성
1414
</Text>
1515
</div>

‎src/components/RecognitionFail/RecognitionFail.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ const RecognitionFail = () => {
66
return (
77
<div className={styles.RecognitionFail}>
88
<div className={styles.Title}>
9-
<Text size="lg" color="primary" weight="bold" align="center" as="h1">
9+
<Text color="primary" variant="titleM" align="center" as="h1">
1010
영수증 인식에 실패했어요
1111
</Text>
12-
<Text weight="medium" align="center" color="secondary">
12+
<Text color="secondary" variant="bodyLg" align="center">
1313
{`깨끗한 배경에 영수증을 놓고\n전체가 잘 나오도록 촬영해 주세요`}
1414
</Text>
1515
</div>

‎src/components/ui/Input/Input.module.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@
2828
}
2929

3030
&.Focused {
31-
border-color: var(--color-purple);
31+
border-color: var(--color-primary-purple);
3232
}
3333

3434
.Input {
35-
@include bodyMd;
35+
@include bodyM;
3636
color: var(--color-text-primary);
3737
line-height: 1.5rem;
3838

‎src/components/ui/Text/Text.module.scss‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "@/styles/_mixins.scss" as *;
2+
13
.Text {
24
line-height: 1.5;
35

@@ -18,15 +20,42 @@
1820
}
1921
}
2022

21-
@each $size-name in ("xxs", "xs", "sm", "default", "md", "lg", "xl") {
22-
&.size-#{"#{$size-name}"} {
23-
font-size: var(--font-size-#{$size-name});
24-
}
25-
}
26-
27-
@each $weight-name in ("regular", "medium", "semi-bold", "bold") {
28-
&.weight-#{"#{$weight-name}"} {
29-
font-weight: var(--font-weight-#{$weight-name});
23+
@each $variant-name
24+
in (
25+
titleLg,
26+
titleM,
27+
titleSm,
28+
bodyLg,
29+
bodyM,
30+
bodySm,
31+
bodyXsm,
32+
buttonPrimary,
33+
buttonSecondary,
34+
buttonTertiary
35+
)
36+
{
37+
&.variant-#{$variant-name} {
38+
@if $variant-name == titleLg {
39+
@include titleLg;
40+
} @else if $variant-name == titleM {
41+
@include titleM;
42+
} @else if $variant-name == titleSm {
43+
@include titleSm;
44+
} @else if $variant-name == bodyLg {
45+
@include bodyLg;
46+
} @else if $variant-name == bodyM {
47+
@include bodyM;
48+
} @else if $variant-name == bodySm {
49+
@include bodySm;
50+
} @else if $variant-name == bodyXsm {
51+
@include bodyXsm;
52+
} @else if $variant-name == buttonPrimary {
53+
@include buttonPrimary;
54+
} @else if $variant-name == buttonSecondary {
55+
@include buttonSecondary;
56+
} @else if $variant-name == buttonTertiary {
57+
@include buttonTertiary;
58+
}
3059
}
3160
}
3261

‎src/components/ui/Text/Text.stories.tsx‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -24,57 +24,46 @@ const Template: StoryFn<TextProps> = ({ children, ...props }) => (
2424
export const Primary: StoryObj<TextProps> = {
2525
render: Template,
2626
args: {
27-
size: "default",
2827
color: "black",
29-
weight: "regular",
28+
variant: "bodyLg",
3029
align: "left",
3130
truncated: false,
3231
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
3332
},
3433
};
3534

36-
export const SizeProps: StoryObj<typeof Text> = {
35+
export const VariantProps: StoryObj<typeof Text> = {
3736
render: () => (
3837
<div className={styles.TextStory}>
3938
<div className={styles.Wrapper}>
40-
<Text size="xxs" children="xxs" />
39+
<Text variant="titleLg" children="titleLg" />
4140
</div>
4241
<div className={styles.Wrapper}>
43-
<Text size="xs" children="xs" />
42+
<Text variant="titleM" children="titleM" />
4443
</div>
4544
<div className={styles.Wrapper}>
46-
<Text size="sm" children="sm" />
45+
<Text variant="titleSm" children="titleSm" />
4746
</div>
4847
<div className={styles.Wrapper}>
49-
<Text size="default" children="default" />
48+
<Text variant="bodyLg" children="bodyLg" />
5049
</div>
5150
<div className={styles.Wrapper}>
52-
<Text size="md" children="md" />
51+
<Text variant="bodyM" children="bodyM" />
5352
</div>
5453
<div className={styles.Wrapper}>
55-
<Text size="lg" children="lg" />
54+
<Text variant="bodySm" children="bodySm" />
5655
</div>
5756
<div className={styles.Wrapper}>
58-
<Text size="xl" children="xl" />
59-
</div>
60-
</div>
61-
),
62-
};
63-
64-
export const WeightProps: StoryObj<typeof Text> = {
65-
render: () => (
66-
<div className={styles.TextStory}>
67-
<div className={styles.Wrapper}>
68-
<Text weight="regular" children="regular" />
57+
<Text variant="bodyXsm" children="bodyXsm" />
6958
</div>
7059
<div className={styles.Wrapper}>
71-
<Text weight="medium" children="medium" />
60+
<Text variant="buttonPrimary" children="buttonPrimary" />
7261
</div>
7362
<div className={styles.Wrapper}>
74-
<Text weight="semi-bold" children="semi-bold" />
63+
<Text variant="buttonSecondary" children="buttonSecondary" />
7564
</div>
7665
<div className={styles.Wrapper}>
77-
<Text weight="bold" children="bold" />
66+
<Text variant="buttonTertiary" children="buttonTertiary" />
7867
</div>
7968
</div>
8069
),

‎src/components/ui/Text/Text.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,8 @@ const Text = React.forwardRef<HTMLElement, TextProps>(
1111
as: Comp = "span",
1212
children,
1313
color = "black",
14-
size = "default",
14+
variant = "bodyLg",
1515
className,
16-
weight = "regular",
1716
align = "left",
1817
truncated,
1918
...props
@@ -28,8 +27,7 @@ const Text = React.forwardRef<HTMLElement, TextProps>(
2827
className={classNames(
2928
styles.Text,
3029
styles[`color-${color}`],
31-
styles[`size-${size}`],
32-
styles[`weight-${weight}`],
30+
styles[`variant-${variant}`],
3331
styles[`align-${align}`],
3432
truncated === true
3533
? styles.truncated

‎src/components/ui/Text/Text.types.ts‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
1-
type TextSize = "xxs" | "xs" | "sm" | "default" | "md" | "lg" | "xl";
2-
3-
type TextWeight = "regular" | "medium" | "semi-bold" | "bold";
1+
type TextVariant =
2+
| "titleLg"
3+
| "titleM"
4+
| "titleSm"
5+
| "bodyLg"
6+
| "bodyM"
7+
| "bodySm"
8+
| "bodyXsm"
9+
| "buttonPrimary"
10+
| "buttonSecondary"
11+
| "buttonTertiary";
412

513
type TextAlign = "left" | "center" | "right";
614

@@ -16,8 +24,7 @@ type TextColor =
1624
export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
1725
as?: React.ElementType;
1826
color?: TextColor;
19-
size?: TextSize;
20-
weight?: TextWeight;
27+
variant?: TextVariant;
2128
align?: TextAlign;
2229
truncated?: boolean | number;
2330
}

‎src/styles/_mixins.scss‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
11
@mixin titleLg {
2-
font-size: var(--font-size-xl);
2+
font-size: var(--font-size-28);
33
font-weight: var(--font-weight-bold);
44
}
55

6-
@mixin titleMd {
7-
font-size: var(--font-size-lg);
6+
@mixin titleM {
7+
font-size: var(--font-size-24);
88
font-weight: var(--font-weight-bold);
99
}
1010

1111
@mixin titleSm {
12-
font-size: var(--font-size-md);
12+
font-size: var(--font-size-22);
1313
font-weight: var(--font-weight-bold);
1414
}
1515

1616
@mixin bodyLg {
17-
font-size: var(--font-size-default);
17+
font-size: var(--font-size-16);
1818
font-weight: var(--font-weight-medium);
1919
}
2020

21-
@mixin bodyMd {
22-
font-size: var(--font-size-sm);
21+
@mixin bodyM {
22+
font-size: var(--font-size-15);
2323
font-weight: var(--font-weight-medium);
2424
}
2525

2626
@mixin bodySm {
27-
font-size: var(--font-size-xs);
27+
font-size: var(--font-size-14);
2828
font-weight: var(--font-weight-medium);
2929
}
3030

3131
@mixin bodyXsm {
32-
font-size: var(--font-size-xxs);
32+
font-size: var(--font-size-13);
3333
font-weight: var(--font-weight-medium);
3434
}
3535

3636
@mixin buttonPrimary {
37-
font-size: var(--font-size-default);
37+
font-size: var(--font-size-16);
3838
font-weight: var(--font-weight-semi-bold);
3939
}
4040

4141
@mixin buttonSecondary {
42-
font-size: var(--font-size-default);
42+
font-size: var(--font-size-16);
4343
font-weight: var(--font-weight-medium);
4444
}
4545

4646
@mixin buttonTertiary {
47-
font-size: var(--font-size-xs);
47+
font-size: var(--font-size-14);
4848
font-weight: var(--font-weight-medium);
4949
}

‎src/styles/_variables.scss‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,25 @@
44
--font-weight-semi-bold: 600;
55
--font-weight-bold: 700;
66

7-
--font-size-xl: 1.75rem;
8-
--font-size-lg: 1.5rem;
9-
--font-size-md: 1.375rem;
10-
--font-size-default: 1rem;
11-
--font-size-sm: 0.9375rem;
12-
--font-size-xs: 0.875rem;
13-
--font-size-xxs: 0.8125rem;
7+
--font-size-28: 1.75rem;
8+
--font-size-24: 1.5rem;
9+
--font-size-22: 1.375rem;
10+
--font-size-16: 1rem;
11+
--font-size-15: 0.9375rem;
12+
--font-size-14: 0.875rem;
13+
--font-size-13: 0.8125rem;
1414

1515
--color-text-white: #fff;
1616
--color-text-black: #000;
1717
--color-text-primary: #363642;
1818
--color-text-secondary: #68696e;
1919
--color-text-tertiary: #a6a6ad;
2020
--color-text-quarternary: #e0e0e0;
21-
--color-text-gradient: linear-gradient(90deg, var(--color-pink), var(--color-purple));
21+
--color-text-gradient: linear-gradient(
22+
90deg,
23+
var(--color-primary-pink),
24+
var(--color-primary-purple)
25+
);
2226

2327
--color-white: #ffffff;
2428
--color-black: #000000;
@@ -32,6 +36,6 @@
3236
--color-gray700: #161636;
3337
--color-bg-gradient: linear-gradient(180deg, #ffffff, #dcdce8);
3438
--color-bg-error: #d45085;
35-
--color-purple: #443fb6;
36-
--color-pink: #d444ba;
39+
--color-primary-purple: #443fb6;
40+
--color-primary-pink: #d444ba;
3741
}

0 commit comments

Comments
 (0)