募金登録の金額入力フォームにプルダウンを追加する

view/next-project/src/components/common/Input/Input.tsx

@@ -11,23 +11,36 @@ interface Props {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   children?: React.ReactNode;
   type?: string;
+  datalist?: { id: number; name: string }[];
+  listKey?: string;
+  enableDatalist?: boolean;
 }
 
 function Input(props: Props): JSX.Element {
   const className =
     'rounded-full border border-primary-1 py-2 px-4' +
     (props.className ? ` ${props.className}` : '');
   return (
-    <input
-      className={clsx(s.input, className)}
-      placeholder={props.placeholder}
-      id={props.id}
-      value={props.value}
-      onChange={props.onChange}
-      type={props.type}
-    >
-      {props.children}
-    </input>
+    <div>
+      <input
+        className={clsx(s.input, className)}
+        placeholder={props.placeholder}
+        id={props.id}
+        value={props.value}
+        onChange={props.onChange}
+        type={props.type}
+        list={props.enableDatalist ? props.listKey : undefined}
+      >
+        {props.children}
+      </input>
+      {props.enableDatalist && (
+        <datalist id={props.listKey}>
+          {props.datalist?.map((option) => (
+            <option key={option.id} value={option.name} />
+          ))}
+        </datalist>
+      )}
+    </div>
   );
 }
 

view/next-project/src/components/fund_information/AddModal.tsx

@@ -6,6 +6,7 @@ import { Modal, CloseButton, Input, Select, PrimaryButton } from '../common';
 import { userAtom } from '@/store/atoms';
 import { post } from '@api/fundInformations';
 import { BUREAUS } from '@constants/bureaus';
+import { DONATION_AMOUNT } from '@constants/donationAmount';
 import { Department, FundInformation, Teacher, User } from '@type/common';
 
 interface ModalProps {
@@ -132,7 +133,14 @@ const OpenAddModal: FC<ModalProps> = (props) => {
         </div>
         <p className='col-span-1 text-black-600'>金額</p>
         <div className='col-span-4 w-full'>
-          <Input className='w-full' value={formData.price} onChange={handler('price')} />
+          <Input
+            className='w-full'
+            value={formData.price}
+            onChange={handler('price')}
+            datalist={DONATION_AMOUNT}
+            listKey='amoutOptions'
+            enableDatalist={true}
+          />
         </div>
         <p className='col-span-1 text-black-600'>備考</p>
         <div className='col-span-4 w-full'>

view/next-project/src/components/fund_information/EditModal.tsx

@@ -4,6 +4,7 @@ import { Dispatch, SetStateAction, useEffect, useState, useMemo } from 'react';
 import { Modal, Input, Select, CloseButton, PrimaryButton } from '../common';
 import { put } from '@api/fundInformations';
 import { BUREAUS } from '@constants/bureaus';
+import { DONATION_AMOUNT } from '@constants/donationAmount';
 import { FundInformation, Teacher, User, Department } from '@type/common';
 
 interface ModalProps {
@@ -140,7 +141,14 @@ export default function EditModal(props: ModalProps) {
         </div>
         <p className='col-span-1 text-black-600'>金額</p>
         <div className='col-span-4 w-full'>
-          <Input className='w-full' value={formData.price} onChange={handler('price')} />
+          <Input
+            className='w-full'
+            value={formData.price}
+            onChange={handler('price')}
+            datalist={DONATION_AMOUNT}
+            listKey='amoutOptions'
+            enableDatalist={true}
+          />
         </div>
         <p className='col-span-1 text-black-600'>備考</p>
         <div className='col-span-4 w-full'>

view/next-project/src/constants/donationAmount.ts

@@ -0,0 +1,18 @@
+export const DONATION_AMOUNT = [
+  {
+    id: 1,
+    name: '1000',
+  },
+  {
+    id: 2,
+    name: '2000',
+  },
+  {
+    id: 3,
+    name: '5000',
+  },
+  {
+    id: 4,
+    name: '10000',
+  },
+];