update: custom mode provider management

src/hooks/context/useCharacter.tsx

@@ -25,6 +25,10 @@ export const useCharacter = (): UseCharacterProps => {
 		setText,
 		style,
 		setStyle,
+		customText,
+		setCustomText,
+		isCustom,
+		setIsCustom,
 	} = context;
 
 	const handleGetCharacters = async (): Promise<void> => {
@@ -94,6 +98,10 @@ export const useCharacter = (): UseCharacterProps => {
 		}));
 	};
 
+	const handleSetCustomText = ({ text }: { text: string }): void => {
+		setCustomText(text);
+	};
+
 	return {
 		characters,
 		setCharacters,
@@ -103,5 +111,10 @@ export const useCharacter = (): UseCharacterProps => {
 		setStyle,
 		handleGetCharacters,
 		handleSetCharacterStyle,
+		customText,
+		setCustomText,
+		handleSetCustomText,
+		isCustom,
+		setIsCustom,
 	};
 };

src/interfaces/hooks/UseCharacterProps.d.ts

@@ -17,8 +17,13 @@ export interface UseCharacterProps {
 	setStyle: React.Dispatch<
 		React.SetStateAction<{ [uuid: string]: characterStyleProps }>
 	>;
+	customText: string | null;
+	setCustomText: React.Dispatch<React.SetStateAction<string | null>>;
+	isCustom: boolean;
+	setIsCustom: React.Dispatch<React.SetStateAction<boolean>>;
 	handleGetCharacters: () => Promise<void>;
 	handleSetCharacterStyle: ({ index }: HandleSetCharacterStyleProps) => void;
+	handleSetCustomText: ({ text: string }) => void;
 }
 
 export interface HandleGetCharacterDetailProps {

src/interfaces/provider/ContextProviderProps.d.ts

@@ -41,6 +41,10 @@ export interface ContextProviderProps {
 	>;
 	isCustomModal: boolean;
 	setIsCustomModal: React.Dispatch<React.SetStateAction<boolean>>;
+	customText: string | null;
+	setCustomText: React.Dispatch<React.SetStateAction<string | null>>;
+	isCustom: boolean;
+	setIsCustom: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export type SelectedContentProps = 'noSelected' | 'character' | 'log' | 'call';

src/layouts/mainLayout/atom/MainCustomModalBody.tsx

@@ -1,21 +1,18 @@
 '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'}
+			justifyContent="start"
+			alignItems="center"
 			flexDirection="column"
 			gap="25px"
 			width="100%"
 			height="calc(100% - 50px)"
-			padding="0 50px"
+			padding="100px 50px 0 50px"
 			sx={{
 				overflowY: 'overlay',
 			}}

src/layouts/mainLayout/atom/MainCustomModalTextArea.tsx

@@ -1,7 +1,12 @@
 'use client';
-import { Switch, TextField } from '@mui/material';
+import { useCharacter, usePalette } from '@/hooks';
+import { Box, Switch, TextField, Typography } from '@mui/material';
 
 export const MainCustomModalTextArea = () => {
+	const palette = usePalette();
+	const { handleSetCustomText, customText, isCustom, setIsCustom } =
+		useCharacter();
+
 	return (
 		<>
 			<TextField
@@ -11,8 +16,24 @@ export const MainCustomModalTextArea = () => {
 				rows={10}
 				label="キャラクターのカスタマイズ設定を入力"
 				inputProps={{ maxLength: 200 }}
+				value={customText || ''}
+				onChange={(e) => handleSetCustomText({ text: e.target.value })}
 			/>
-			<Switch />
+			<Box
+				display="flex"
+				justifyContent="end"
+				alignItems="center"
+				gap="10px"
+				width="100%"
+			>
+				<Typography variant="body2" color={palette.text.disabled}>
+					カスタムモードを適用
+				</Typography>
+				<Switch
+					checked={isCustom}
+					onChange={() => setIsCustom((prev) => !prev)}
+				/>
+			</Box>
 		</>
 	);
 };

src/layouts/mainLayout/atom/MainHeaderCommandsRight.tsx

@@ -1,11 +1,12 @@
 'use client';
-import { useCall, useLayout, usePalette } from '@/hooks';
+import { useCall, useCharacter, useLayout, usePalette } from '@/hooks';
 import { Call, CallEnd, Settings } from '@mui/icons-material';
 import { Box, Tooltip } from '@mui/material';
 
 export const MainHeaderCommandsRight = () => {
 	const { selectedContent, setIsCustomModal } = useLayout();
 	const { handleNewCallStart, handleCallStart, handleCallEnd } = useCall();
+	const { isCustom } = useCharacter();
 	const palette = usePalette();
 	const iconDisabled: boolean = !['character', 'log', 'call'].includes(
 		selectedContent
@@ -25,6 +26,7 @@ export const MainHeaderCommandsRight = () => {
 						onClick={() => setIsCustomModal((prev) => !prev)}
 						sx={{
 							cursor: 'pointer',
+							color: isCustom ? palette.primary.main : palette.text.primary,
 						}}
 					/>
 				</span>

src/provider/ContextProvider.tsx

@@ -33,8 +33,12 @@ export const ContextProvider = ({ children }: { children: ReactNode }) => {
 	const [isSending, setIsSending] = useState<boolean>(false);
 	const [chat, setChat] = useState<{ [uuid: string]: ChatsResponse }>({});
 	const [isCustomModal, setIsCustomModal] = useState<boolean>(false);
+	const [customText, setCustomText] = useState<string | null>(null);
+	const [isCustom, setIsCustom] = useState<boolean>(false);
 
 	const contextValue = {
+		isCustom,
+		setIsCustom,
 		characters,
 		setCharacters,
 		chatRooms,
@@ -61,6 +65,8 @@ export const ContextProvider = ({ children }: { children: ReactNode }) => {
 		setChat,
 		isCustomModal,
 		setIsCustomModal,
+		customText,
+		setCustomText,
 	};
 
 	return <Context.Provider value={contextValue}>{children}</Context.Provider>;