Modify widget button

frontend-web/src/pages/Widget/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Outlet, useParams } from 'react-router-dom';
+import { Link as RouterLink, Outlet, useParams } from 'react-router-dom';
 import { useAlert } from 'react-alert';
 import PageContainer from '@/components/PageContainer';
 import PageTitleBox from '@/components/PageTitleBox';
@@ -7,6 +7,8 @@ import BoardList from '@/components/BoardList';
 import AddIconButton from '@/components/button/AddIconButton';
 import WidgetService from '@/api/widgetService';
 import { LoadingContext } from '@/contexts/LoadingContext';
+import AddIcon from '@mui/icons-material/Add';
+import { Button } from '@mui/material';
 
 const title = '위젯';
 
@@ -57,7 +59,34 @@ const Widget = () => {
   return (
     <PageContainer>
       {!widgetId ? (
-        <PageTitleBox title={title} button={<AddIconButton link="create" />}>
+        <PageTitleBox
+          title={title}
+          button={
+            <Button
+              component={RouterLink}
+              to={'create'}
+              variant="contained"
+              startIcon={<AddIcon />}
+              color="primary"
+              sx={{
+                borderRadius: '8px',
+                backgroundColor: '#043f84',
+                width: '97px',
+                height: '32px',
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'center',
+                alignItems: 'center',
+                marginRight: '20px',
+                padding: '7px 0',
+                objectFit: 'contain',
+                border: 'solid 1px #0f5ab2',
+              }}
+            >
+              <span style={{ height: '20px' }}>위젯 추가</span>
+            </Button>
+          }
+        >
           <BoardList postList={widgetList} handleDeleteSelect={removeWidget} />
         </PageTitleBox>
       ) : (