refactor: フォーム作成用フォームの質問追加部分以外を作り直し

src/app/(authed)/admin/_components/DashboardMenu.tsx

@@ -38,7 +38,7 @@ const DashboardMenu = () => {
       <MenuList>
         {['Dashboard', 'Forms', 'Announcements'].map((value) => {
           return (
-            <MenuItem key={value}>
+            <MenuItem key={value} sx={{ color: 'white' }}>
               <ListItemIcon
                 sx={{
                   color: 'rgba(255, 255, 255, 0.56)',

src/app/(authed)/admin/forms/create/CreateForm.tsx

@@ -0,0 +1,78 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button, Container, MenuItem, Stack, TextField } from '@mui/material';
+import { useForm, useWatch } from 'react-hook-form';
+import { formSchema } from '@/_schemas/formSchema';
+import type { Form } from '@/_schemas/formSchema';
+import SendIcon from '@mui/icons-material/Send';
+
+export const CreateFormComponent = () => {
+  const {
+    control,
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<Form>({
+    // fixme: ここの型を_schemasのFormなのは適切ではなさそうなので、同ディレクトリにこのフォーム用のスキーマを定義する
+    mode: 'onSubmit',
+    reValidateMode: 'onBlur',
+    resolver: zodResolver(formSchema),
+  });
+
+  const visibility = useWatch({
+    control,
+    name: 'settings.visibility',
+    defaultValue: 'PUBLIC',
+  });
+
+  const onSubmit = (data: Form) => {
+    // todo: データの送信処理を書く
+  };
+
+  return (
+    <Container component="form" onSubmit={handleSubmit(onSubmit)}>
+      <Stack spacing={2}>
+        <TextField {...register('title')} label="フォームタイトル" required />
+        <TextField
+          {...register('description')}
+          label="フォームの説明"
+          required
+        />
+        <TextField
+          {...register('settings.response_period.start_at')}
+          label="回答開始日"
+          type="datetime-local"
+          helperText="回答開始日と回答終了日はどちらも指定する必要があります。"
+        />
+        <TextField
+          {...register('settings.response_period.end_at')}
+          label="回答終了日"
+          type="datetime-local"
+          helperText="回答開始日と回答終了日はどちらも指定する必要があります。"
+        />
+        <TextField
+          {...register('settings.visibility')}
+          label="公開設定"
+          defaultValue={visibility}
+          select
+          required
+        >
+          <MenuItem value="PUBLIC">公開</MenuItem>
+          <MenuItem value="PRIVATE">非公開</MenuItem>
+        </TextField>
+        <TextField
+          {...register('settings.webhook_url')}
+          label="Webhook URL"
+          type="url"
+        />
+        {/* todo: default_answer_titleにhelper textをつける */}
+        <TextField
+          {...register('settings.default_answer_title')}
+          label="デフォルトの回答タイトル"
+        />
+        <Button type="submit" variant="contained" endIcon={<SendIcon />}>
+          フォーム作成
+        </Button>
+      </Stack>
+    </Container>
+  );
+};

src/app/(authed)/admin/forms/create/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { CssBaseline, ThemeProvider } from '@mui/material';
-import { CreateFormComponent } from './CreateForm2';
+import { CreateFormComponent } from './CreateForm';
 import adminDashboardTheme from '../../theme/adminDashboardTheme';
 
 const Home = () => {

src/app/(authed)/admin/theme/adminDashboardTheme.ts

@@ -3,6 +3,52 @@
 import { createTheme } from '@mui/material';
 
 const theme = createTheme({
+  components: {
+    MuiInputLabel: {
+      styleOverrides: {
+        formControl: {
+          // ラベルを上部に固定
+          position: 'static',
+          transform: 'none',
+          transition: 'none',
+          cursor: 'pointer',
+          fontSize: '1.1rem',
+          color: 'white',
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          color: 'black',
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: {
+          paddingTop: '10px',
+          paddingBottom: '8px',
+          height: 'auto',
+          background: '#FFFFFF29',
+        },
+        notchedOutline: {
+          top: 0,
+          legend: {
+            display: 'none',
+          },
+        },
+      },
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          marginLeft: 0,
+          color: 'white',
+        },
+      },
+    },
+  },
   palette: {
     primary: {
       main: '#90CAF9',