rename files

src/components/DialogBox/index.tsx

@@ -9,8 +9,8 @@ import {
     DialogContent,
     DialogProps,
 } from '@mui/material';
-import DialogTitleWithCloseButton from './TitleWithCloseButton';
-import MessageText from './MessageText';
+import DialogTitleWithCloseButton from './titleWithCloseButton';
+import MessageText from './messageText';
 import DialogBoxBase from './base';
 
 export interface DialogBoxAttributes {

src/components/DialogBox/messageText.tsx

@@ -0,0 +1,9 @@
+import { DialogContentText, styled } from '@mui/material';
+
+const MessageText = styled(DialogContentText)(({ theme }) => ({
+    paddingBottom: theme.spacing(2),
+    fontSize: '20px',
+    lineHeight: '24.2px',
+}));
+
+export default MessageText;

src/components/DialogBox/titleWithCloseButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { DialogTitle, IconButton, Typography } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { SpaceBetweenFlex } from 'components/Container';
+
+const DialogTitleWithCloseButton = (props) => {
+    const { children, onClose, ...other } = props;
+
+    return (
+        <DialogTitle {...other}>
+            <SpaceBetweenFlex>
+                <Typography variant="title">{children}</Typography>
+                {onClose && (
+                    <IconButton
+                        aria-label="close"
+                        onClick={onClose}
+                        sx={{ float: 'right' }}>
+                        <CloseIcon />
+                    </IconButton>
+                )}
+            </SpaceBetweenFlex>
+        </DialogTitle>
+    );
+};
+
+export default DialogTitleWithCloseButton;