Feature/#132 반응형 폰트 스타일 수정 (#138)

* design: 기본 breakpoints 변경

- xl size를 1280px -> 1300px
- #132

* design: 반응형 폰트 스타일 수정

- #132

* refactor: breakpoint 파일 분리

- #132

src/theme/breakpoints.ts

@@ -0,0 +1,10 @@
+const breakpoints = {
+  base: '0px',
+  sm: '480px',
+  md: '768px',
+  lg: '992px',
+  xl: '1300px',
+  '2xl': '1536px',
+};
+
+export default breakpoints;

src/theme/foundations/textStyles.ts

@@ -1,32 +1,32 @@
 const textStyles = {
   bold_4xl: {
-    fontSize: { base: '40px', lg: '44px', '2xl': '48px' },
+    fontSize: { base: '32px', xl: '36px' },
     fontWeight: 'bold',
   },
   bold_3xl: {
-    fontSize: { base: '32px', lg: '36px', '2xl': '40px' },
+    fontSize: { base: '28px', xl: '30px' },
     fontWeight: 'bold',
   },
   bold_2xl: {
-    fontSize: { base: '22px', lg: '26px', '2xl': '30px' },
+    fontSize: { base: '22px', xl: '24px' },
     fontWeight: 'bold',
   },
   bold_xl: {
-    fontSize: { base: '16px', lg: '18px', '2xl': '20px' },
+    fontSize: { base: '18px', xl: '20px' },
     fontWeight: 'bold',
   },
   bold_md: {
-    fontSize: { base: '12px', lg: '14px', '2xl': '16px' },
+    fontSize: { base: '14px', xl: '16px' },
     fontWeight: 'bold',
   },
   md: {
-    fontSize: { base: '12px', lg: '14px', '2xl': '16px' },
+    fontSize: { base: '14px', xl: '16px' },
   },
   sm: {
-    fontSize: { base: '8px', lg: '10px', '2xl': '12px' },
+    fontSize: { base: '12px', xl: '14px' },
   },
   title_xl: {
-    fontSize: { base: '80px', lg: '100px', '2xl': '130px' },
+    fontSize: { base: '80px', lg: '80px', '2xl': '130px' },
     fontWeight: 'black',
   },
   title_bold_xl: {

src/theme/index.ts

@@ -1,10 +1,12 @@
 import { extendTheme } from '@chakra-ui/react';
 
+import breakpoints from './breakpoints';
 import components from './components';
 import foundations from './foundations';
 import styles from './styles';
 
 const theme = extendTheme({
+  breakpoints,
   styles,
   ...foundations,
   components,