refactor: CardListPage Heading padding 개선

bytrustu · Mar 7, 2024 · bcd93a5 · bcd93a5
1 parent cb29fdb
commit bcd93a5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/pages/CardListPage.tsx b/src/pages/CardListPage.tsx
@@ -13,7 +13,9 @@ export const CardListPage = () => {
   return (
     <>
       <AppLayout.Header>
-        <Typography variant="headline">보유 카드</Typography>
+        <Typography as="h1" variant="headline" padding="10px 0" margin="0">
+          보유 카드
+        </Typography>
       </AppLayout.Header>
       <AppLayout.Body>
         <VStack spacing="20px" padding="20px 0">

diff --git a/src/shared/components/Typography/Typography.tsx b/src/shared/components/Typography/Typography.tsx
@@ -11,6 +11,7 @@ export enum TypographyVariants {
   headline = 'headline',
   display = 'display',
 }
+
 export type TypographyVariant = keyof typeof TypographyVariants;
 
 type TypographyProps = PropsWithChildren<
@@ -20,18 +21,23 @@ type TypographyProps = PropsWithChildren<
     }
 >;
 
-export const Typography = ({ children, ...props }: TypographyProps) => {
-  const { as, variant = 'body', whiteSpace, fontSize, fontWeight, ...restProps } = props;
-
+export const Typography = ({
+  children,
+  as = 'span',
+  variant = 'body',
+  whiteSpace = 'pre-wrap',
+  fontSize,
+  fontWeight,
+  ...props
+}: TypographyProps) => {
   const typographyProps = {
     fontSize: fontSize || typographyVariantStyle[variant].fontSize,
     fontWeight: fontWeight || typographyVariantStyle[variant].fontWeight,
     lineHeight: typographyVariantStyle[variant].lineHeight,
     letterSpacing: typographyVariantStyle[variant].letterSpacing,
-    whiteSpace: whiteSpace || 'pre-wrap',
   };
   return (
-    <Root as="span" variant={variant} {...typographyProps} {...restProps}>
+    <Root as={as} variant={variant} whiteSpace={whiteSpace} {...typographyProps} {...props}>
       {children}
     </Root>
   );