feat: 패딩 값 추가

Author: Leeyoonji23

src/common/component/Mandalart/Square/Square.css.ts

@@ -11,24 +11,28 @@ const SQUARE_TYPES = {
   TODO_SUB: {
     width: '9.6rem',
     height: '9.6rem',
+    padding: '0.6rem',
     mainFont: fonts.body04,
     subFont: fonts.caption01,
   },
   TODO_MAIN: {
     width: '19.6rem',
     height: '19.6rem',
+    padding: '1.4rem',
     mainFont: fonts.title03,
     subFont: fonts.subtitle01,
   },
   TODO_EDIT: {
     width: '16rem',
     height: '16rem',
+    padding: '1.2rem',
     mainFont: fonts.subtitle01,
     subFont: fonts.subtitle05,
   },
   MY_MANDAL: {
     width: '29.8rem',
     height: '29.8rem',
+    padding: '4.4rem',
     mainFont: fonts.display02,
     subFont: fonts.title01,
   },
@@ -44,6 +48,7 @@ const createBaseCell = (type: keyof typeof SQUARE_TYPES) =>
     textAlign: 'center',
     width: SQUARE_TYPES[type].width,
     height: SQUARE_TYPES[type].height,
+    padding: SQUARE_TYPES[type].padding,
     boxSizing: 'border-box',
   });
 

src/page/home/Home.tsx

@@ -1,7 +1,13 @@
+import Mandalart from '@/common/component/Mandalart/Mandalart';
+
 const Home = () => {
   return (
     <div>
       <h1>홈</h1>
+      <Mandalart type={'TODO_SUB'} />
+      <Mandalart type={'TODO_MAIN'} />
+      <Mandalart type={'TODO_EDIT'} />
+      <Mandalart type={'MY_MANDAL'} />
     </div>
   );
 };