update: custom modal inner

src/layouts/mainLayout/atom/MainCustomModalBody.tsx

@@ -0,0 +1,26 @@
+'use client';
+import { Box } from '@mui/material';
+import { MainCustomModalTextArea } from './MainCustomModalTextArea';
+import { useBreakPoint } from '@/hooks';
+
+export const MainCustomModalBody = () => {
+	const breakpoint = useBreakPoint();
+
+	return (
+		<Box
+			display="flex"
+			justifyContent="center"
+			alignItems={['xs', 'sm'].includes(breakpoint) ? 'center' : 'end'}
+			flexDirection="column"
+			gap="25px"
+			width="100%"
+			height="calc(100% - 50px)"
+			padding="0 50px"
+			sx={{
+				overflowY: 'overlay',
+			}}
+		>
+			<MainCustomModalTextArea />
+		</Box>
+	);
+};

src/layouts/mainLayout/atom/MainCustomModalHeader.tsx

@@ -0,0 +1,32 @@
+'use client';
+import { useLayout, usePalette } from '@/hooks';
+import { Close } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+
+export const MainCustomModalHeader = () => {
+	const palette = usePalette();
+	const { setIsCustomModal } = useLayout();
+
+	return (
+		<Box
+			display="flex"
+			justifyContent="space-between"
+			alignItems="center"
+			width="100%"
+			height="50px"
+			padding="0 25px"
+			bgcolor={palette.layout.mainLayout.leftBar.bg}
+		>
+			<Typography variant="body2" color={palette.text.secondary}>
+				キャラクターカスタマイズ
+			</Typography>
+			<Close
+				onClick={() => setIsCustomModal(false)}
+				sx={{
+					color: palette.error.dark,
+					cursor: 'pointer',
+				}}
+			/>
+		</Box>
+	);
+};

src/layouts/mainLayout/atom/MainCustomModalTextArea.tsx

@@ -0,0 +1,18 @@
+'use client';
+import { Switch, TextField } from '@mui/material';
+
+export const MainCustomModalTextArea = () => {
+	return (
+		<>
+			<TextField
+				fullWidth
+				multiline
+				variant="outlined"
+				rows={10}
+				label="キャラクターのカスタマイズ設定を入力"
+				inputProps={{ maxLength: 200 }}
+			/>
+			<Switch />
+		</>
+	);
+};

src/layouts/mainLayout/atom/index.ts

@@ -8,3 +8,6 @@ export * from './MainHeaderCommandsRight';
 export * from './MainLeftDrawerSelection';
 export * from './MainFooterCredit';
 export * from './MainLeftBarListItemLog';
+export * from './MainCustomModalHeader';
+export * from './MainCustomModalBody';
+export * from './MainCustomModalTextArea';

src/layouts/mainLayout/block/MainCustomModal.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { useBreakPoint, useLayout, usePalette } from '@/hooks';
 import { Grow, Modal, Paper } from '@mui/material';
+import { MainCustomModalBody, MainCustomModalHeader } from '../atom';
 
 export const MainCustomModal = () => {
 	const breakpoint = useBreakPoint();
@@ -28,10 +29,13 @@ export const MainCustomModal = () => {
 							: 'calc(100vh - 90px)',
 						maxHeight: '800px',
 						marginTop: ['xs', 'sm'].includes(breakpoint) ? '0px' : '60px',
-						borderRadius: ['xs', 'sm'].includes(breakpoint) ? '0px' : '0px',
+						borderRadius: ['xs', 'sm'].includes(breakpoint) ? '0px' : '10px',
 						overflow: 'hidden',
 					}}
-				></Paper>
+				>
+					<MainCustomModalHeader />
+					<MainCustomModalBody />
+				</Paper>
 			</Grow>
 		</Modal>
 	);