HOTFIX: 폰트 사이즈 크기 수정

GDG-on-Campus-KNU · Sep 21, 2024 · c62aa58 · c62aa58
1 parent 98a739b
commit c62aa58
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 9 deletions.
diff --git a/src/components/common/button/CompleteBtn.tsx b/src/components/common/button/CompleteBtn.tsx
@@ -26,6 +26,8 @@ const Button = styled.button<IButton>`
         return 'var(--font-size-sm)';
       case 'xs':
         return 'var(--font-size-xs)';
+      case 'xxs':
+        return 'var(--font-size-xxs)';
       default:
         return 'var(--font-size-md)';
     }

diff --git a/src/components/common/typography/Text.tsx b/src/components/common/typography/Text.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 interface IText {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'mxl' | 'xl' | 'xxl';
+  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'mxl' | 'xl' | 'xxl';
   color?: 'white' | 'black' | 'placeholder' | string;
   weight?: 'light' | 'normal' | 'bold' | string;
   whiteSpace?: 'nowrap' | 'normal' | 'pre-line';
@@ -34,6 +34,8 @@ const Text = styled.span<IText>`
 
   font-size: ${(props) => {
     switch (props.size) {
+      case 'xxs':
+        return 'var(--font-size-xxs)';
       case 'xs':
         return 'var(--font-size-xs)';
       case 'sm':

diff --git a/src/pages/main/components/PCRotateCarousel.tsx b/src/pages/main/components/PCRotateCarousel.tsx
@@ -60,11 +60,11 @@ const PCRotateCarousel = ({
                 weight='700'
                 color='black'
                 whiteSpace='normal'
-                size='lg'
+                size='md'
               >
                 {cardData[index].mainText}
               </CardMainText>
-              <Text weight='500' color='black' whiteSpace='normal' size='sm'>
+              <Text weight='500' color='black' whiteSpace='normal' size='xs'>
                 {cardData[index].subText}
               </Text>
               <hr
@@ -86,7 +86,7 @@ const PCRotateCarousel = ({
               <CompleteBtnWrapper>
                 <Link to='/techblog'>
                   <CompleteBtn
-                    size='md'
+                    size='xs'
                     type='button'
                     color='blue'
                     backgroundColor='blue'

diff --git a/src/pages/main/components/Tablet/TabletRotateCarousel.tsx b/src/pages/main/components/Tablet/TabletRotateCarousel.tsx
@@ -54,11 +54,11 @@ const TabletRotateCarousel = ({
                 weight='700'
                 color='black'
                 whiteSpace='normal'
-                size='sm'
+                size='xs'
               >
                 {cardData[index].mainText}
               </CardMainText>
-              <Text weight='500' color='black' whiteSpace='normal' size='xs'>
+              <Text weight='500' color='black' whiteSpace='normal' size='xxs'>
                 {cardData[index].subText}
               </Text>
               <hr
@@ -71,7 +71,7 @@ const TabletRotateCarousel = ({
               />
               <MobileContentText
                 color='black'
-                size='xs'
+                size='xxs'
                 weight='500'
                 whiteSpace='normal'
               >
@@ -80,7 +80,7 @@ const TabletRotateCarousel = ({
               <CompleteBtnWrapper>
                 <Link to='/techblog'>
                   <CompleteBtn
-                    size='xs'
+                    size='xxs'
                     type='button'
                     color='blue'
                     backgroundColor='blue'

diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts
@@ -8,6 +8,7 @@ const fontSizeLg = '1.25rem'; // 20px
 const fontSizeMd = '1rem'; // 16px
 const fontSizeSm = '0.875rem'; // 14px
 const fontSizeXs = '0.75rem'; // 12px
+const fontSizeXxs = '0.625rem'; // 10px
 
 const sizeXxl = '2.5rem'; //40px
 const sizeMxl = '2.25rem'; // 36px
@@ -16,6 +17,7 @@ const sizeLg = '1.25rem'; // 20px
 const sizeMd = '1rem'; // 16px
 const sizeSm = '0.875rem'; // 14px
 const sizeXs = '0.75rem'; // 12px
+const sizeXxs = '0.625rem'; // 10px
 
 //color 정의
 const colorAbony = '#1A122B';
@@ -73,6 +75,7 @@ export const GlobalStyle = css`
     --font-size-md: ${fontSizeMd};
     --font-size-sm: ${fontSizeSm};
     --font-size-xs: ${fontSizeXs};
+    --font-size-xxs: ${fontSizeXxs};
 
     --size-xxl: ${sizeXxl};
     --size-mxl: ${sizeMxl};
@@ -81,6 +84,7 @@ export const GlobalStyle = css`
     --size-md: ${sizeMd};
     --size-sm: ${sizeSm};
     --size-xs: ${sizeXs};
+    --size-xxs: ${sizeXxs};
 
     --color-transparent: ${colorTransParent};
     --color-white: ${colorWhite};

diff --git a/src/types/ButtonInterfaces.ts b/src/types/ButtonInterfaces.ts
@@ -2,7 +2,7 @@ export interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   color: string;
   backgroundColor: string;
   hoverColor: string;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | undefined;
+  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | undefined;
   type: 'button' | 'submit' | 'reset' | undefined;
   children: React.ReactNode;
 }