Refactor : 신규 디자인 시스템 반영(Caption2 사이즈 텍스트)

potenday-project · Nov 6, 2023 · ad7f571 · ad7f571
1 parent 7bff1ea
commit ad7f571
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/client/src/const/theme.ts b/client/src/const/theme.ts
@@ -35,10 +35,15 @@ const theme = createTheme({
       lineHeight: "16px",
       letterSpacing: "0em",
     },
-    caption: {
+    caption1: {
       fontSize: "12px",
       lineHeight: "16px",
     },
+    caption2: {
+      fontSize: "10px",
+      lineHeight: "12px",
+      letterSpacing: "0em",
+    },
 
     fontWeightRegular: 400,
     fontWeightBold: 700,
@@ -91,22 +96,29 @@ const theme = createTheme({
 declare module "@mui/material/styles" {
   interface TypographyVariants {
     label: React.CSSProperties;
+    caption1: React.CSSProperties;
+    caption2: React.CSSProperties;
   }
 
   // allow configuration using `createTheme`
   interface TypographyVariantsOptions {
     label?: React.CSSProperties;
+    caption1?: React.CSSProperties;
+    caption2?: React.CSSProperties;
   }
 }
 
 // Update the Typography's variant prop options
 declare module "@mui/material/Typography" {
   interface TypographyPropsVariantOverrides {
     label: true;
+    caption1: true;
+    caption2: true;
     h3: false;
     h4: false;
     h5: false;
     h6: false;
+    caption: false;
     body2: false;
   }
 }

diff --git a/client/src/stories/Design_system/Typography.stories.tsx b/client/src/stories/Design_system/Typography.stories.tsx
@@ -14,7 +14,8 @@ const meta = {
         "body",
         "button",
         "label",
-        "caption",
+        "caption1",
+        "caption2",
       ],
       default: "body",
       control: { type: "select" },
@@ -81,9 +82,15 @@ export const Label: Story = {
     variant: "label",
   },
 };
-export const Caption: Story = {
+export const Caption1: Story = {
   args: {
     ...Heading1.args,
-    variant: "caption",
+    variant: "caption1",
+  },
+};
+export const Caption2: Story = {
+  args: {
+    ...Heading1.args,
+    variant: "caption2",
   },
 };