[front] Add create room page

next_app/src/app/admin/adminRoomPage.module.scss

@@ -24,6 +24,8 @@
   border-radius: 4px;
   border: solid 1px $color-border-darkgray;
 
+  margin-top: 5px;
+
   div + div {
     border-top: solid 1px $color-border-darkgray;
   }

next_app/src/app/admin/create/createRoomPage.module.scss

@@ -0,0 +1,13 @@
+.form {
+  width: 100%;
+  max-width: 500px;
+  margin: auto;
+
+  margin-bottom: 50px;
+}
+
+.button_submit {
+  margin-top: 16px;
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+}

next_app/src/app/admin/create/page.tsx

@@ -0,0 +1,92 @@
+'use client'
+import { useFormPartText } from 'components/form/FormPartText'
+import Header from 'features/header/Header'
+import css from './createRoomPage.module.scss'
+import { ContentsGridHeader } from 'components/ContentsGridHeader'
+import { useEffect, useState } from 'react'
+import axios from 'axios'
+import PopupWindowMessage from 'components/PopupWindowMessage'
+import { useRouter } from 'next/navigation'
+import SimpleButton from 'components/SimpleButton'
+import { useFormPartSelect } from 'components/form/FormPartSelect'
+
+const createOptions = (): { value: string; name: string }[] => {
+  return [
+    {
+      value: '',
+      name: 'Select Room Type',
+    },
+    {
+      value: 'video',
+      name: 'Video',
+    },
+    {
+      value: 'manga',
+      name: 'Manga',
+    },
+  ]
+}
+
+const Page = () => {
+  const router = useRouter()
+
+  const [FormPartId, id] = useFormPartText({ title: 'ID', name: 'id' })
+  const [FormPartName, name] = useFormPartText({ title: '名前', name: 'name' })
+  const [FormPartType, type] = useFormPartSelect({ title: 'Room Type', name: 'type', options: createOptions() })
+  const [FormPartAccessKey, accessKey] = useFormPartText({ title: 'Access Key', name: 'access_key' })
+
+  const [isEnableSubmit, setIsEnableSubmit] = useState(false)
+  const [isShowCompletePopup, setIsShowCompletePopup] = useState(false)
+
+  useEffect(() => {
+    if (id && name && type && accessKey) {
+      setIsEnableSubmit(true)
+    } else {
+      setIsEnableSubmit(false)
+    }
+  }, [id, name, type, accessKey])
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault()
+
+    const file = new FormData()
+    file.append('id', id)
+    file.append('name', name)
+    file.append('access_key', accessKey)
+
+    axios
+      .post(process.env.NEXT_PUBLIC_BACKEND_URL + '/api/admin/room', file, {
+        headers: { 'content-type': 'multipart/form-data' },
+      })
+      .then(res => {
+        setIsShowCompletePopup(true)
+      })
+      .catch(err => {
+        console.error(err)
+      })
+  }
+
+  return (
+    <>
+      <Header roomId="" />
+      <div className={css.form}>
+        <ContentsGridHeader title="新規ルーム作成" />
+        {FormPartId}
+        {FormPartName}
+        {FormPartType}
+        {FormPartAccessKey}
+        <SimpleButton className={css.button_submit} onClick={handleSubmit} disabled={!isEnableSubmit}>
+          作成
+        </SimpleButton>
+      </div>
+      <PopupWindowMessage
+        isShow={isShowCompletePopup}
+        message={'作成しました'}
+        buttonText="戻る"
+        buttonCallback={() => router.push(`/admin}`)}
+      />
+    </>
+  )
+}
+
+export default Page

next_app/src/app/admin/page.tsx

@@ -4,6 +4,8 @@ import Header from 'features/header/Header'
 import { ContentsGridHeader } from 'components/ContentsGridHeader'
 import { RoomType } from 'features/rooms/types'
 import { convertRoomType } from 'features/rooms/utils'
+import SimpleButton from 'components/SimpleButton'
+import Link from 'next/link'
 
 export const dynamic = 'force-dynamic'
 
@@ -85,6 +87,9 @@ const AdminRoomPage = async () => {
       <Header roomId="" />
       <div className={css.main_container}>
         <ContentsGridHeader title="Room List" />
+        <Link href={'/admin/create'}>
+          <SimpleButton>新規ルーム作成</SimpleButton>
+        </Link>
         <div className={css.info_panel_list}>
           <RoomInfoPanelList />
         </div>

next_app/src/components/form/FormPartSelect.tsx

@@ -0,0 +1,55 @@
+'use client'
+import { useCallback, useMemo, useState } from 'react'
+import css from './FormParts.module.scss'
+
+const FormPartSelect = ({
+  title,
+  name,
+  options,
+  selected,
+  setSelected,
+}: {
+  title: string
+  name: string
+  options: { value: string; name: string }[]
+  selected: string
+  setSelected: React.Dispatch<React.SetStateAction<string>>
+}) => {
+  const handleChangeSelected = useCallback((event: any) => {
+    setSelected(event.target.value)
+  }, [])
+
+  const optionList = options.map(v => {
+    return <option value={v.value}>{v.name}</option>
+  })
+
+  return (
+    <div>
+      <h4 className={css.item_header}>{title}</h4>
+      <select name={name} value={selected} className={css.input_select} onChange={handleChangeSelected}>
+        {optionList}
+      </select>
+    </div>
+  )
+}
+
+export const useFormPartSelect = ({
+  title,
+  name,
+  options,
+  initial,
+}: {
+  title: string
+  name: string
+  options: { value: string; name: string }[]
+  initial?: string
+}): [JSX.Element, string] => {
+  const [selected, setSelected] = useState(initial ?? '')
+
+  const formText = useMemo(
+    () => <FormPartSelect title={title} name={name} options={options} selected={selected} setSelected={setSelected} />,
+    [title, name, selected, setSelected]
+  )
+
+  return [formText, selected]
+}