From 6ee71d351651d220a9d99ca56d28955e53826d5b Mon Sep 17 00:00:00 2001 From: sikkzz Date: Fri, 31 Jan 2025 16:34:25 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20typography=20=ED=86=A0=ED=81=B0=20?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD,=20text=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20props=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Home/Home.tsx | 4 +- .../RecognitionFail/RecognitionFail.tsx | 4 +- src/components/ui/Input/Input.module.scss | 4 +- src/components/ui/Text/Text.module.scss | 47 +++++++++++++++---- src/components/ui/Text/Text.stories.tsx | 35 +++++--------- src/components/ui/Text/Text.tsx | 6 +-- src/components/ui/Text/Text.types.ts | 17 +++++-- src/styles/_mixins.scss | 24 +++++----- src/styles/_variables.scss | 24 ++++++---- 9 files changed, 96 insertions(+), 69 deletions(-) diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx index fc895a7..83a4d33 100644 --- a/src/components/Home/Home.tsx +++ b/src/components/Home/Home.tsx @@ -6,10 +6,10 @@ const Home = () => { return (
- + {`영수증으로\nAI 음식 리뷰 남겨요`} - + 손쉬운 음식 리뷰 작성
diff --git a/src/components/RecognitionFail/RecognitionFail.tsx b/src/components/RecognitionFail/RecognitionFail.tsx index 63b09ef..a392c67 100644 --- a/src/components/RecognitionFail/RecognitionFail.tsx +++ b/src/components/RecognitionFail/RecognitionFail.tsx @@ -6,10 +6,10 @@ const RecognitionFail = () => { return (
- + 영수증 인식에 실패했어요 - + {`깨끗한 배경에 영수증을 놓고\n전체가 잘 나오도록 촬영해 주세요`}
diff --git a/src/components/ui/Input/Input.module.scss b/src/components/ui/Input/Input.module.scss index 5116c7c..f3ed52c 100644 --- 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 index 9f077d7..d773582 100644 --- 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 index 8a9a9dd..c7d2165 100644 --- a/src/components/ui/Text/Text.stories.tsx +++ b/src/components/ui/Text/Text.stories.tsx @@ -24,57 +24,46 @@ const Template: StoryFn = ({ children, ...props }) => ( export const Primary: StoryObj = { 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 = { +export const VariantProps: StoryObj = { render: () => (
- +
- +
- +
- +
- +
- +
- -
-
- ), -}; - -export const WeightProps: StoryObj = { - render: () => ( -
-
- +
- +
- +
- +
), diff --git a/src/components/ui/Text/Text.tsx b/src/components/ui/Text/Text.tsx index 9fc1325..7ff3d85 100644 --- a/src/components/ui/Text/Text.tsx +++ b/src/components/ui/Text/Text.tsx @@ -11,9 +11,8 @@ const Text = React.forwardRef( 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( 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 index fc51701..8971eaf 100644 --- 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 { 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 index b06644d..1177b67 100644 --- 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 index 238b5d4..7151803 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -4,13 +4,13 @@ --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; @@ -18,7 +18,11 @@ --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; }