フォームのバリデーションとニコ連携の画面変更 (#090) (#355)

Reviewed-on: #355
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/components/common/DateTimeField.tsx

@@ -22,10 +22,11 @@ type Props = Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> & {
     value?:     string
     onChange?:  (isoUTC: string | null) => void
     className?: string
-    onBlur?:    (ev: FocusEvent<HTMLInputElement>) => void }
+    onBlur?:    (ev: FocusEvent<HTMLInputElement>) => void
+    invalid?:   boolean }
 
 
-const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, ...rest }) => {
+const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, invalid, ...rest }) => {
   const [local, setLocal] = useState ('')
 
   useEffect (() => {
@@ -35,9 +36,19 @@ const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, ...rest
   return (
       <input
 	  {...rest}
-	  className={cn ('border rounded p-2', className)}
+	  className={cn ('border rounded p-2',
+			 (invalid
+			  ? ['border-red-500 bg-red-50 text-red-900',
+			     'focus:border-red-500 focus:outline-none',
+			     'focus:ring-2 focus:ring-red-200',
+			     'dark:border-red-500 dark:bg-red-950/30 dark:text-red-100']
+			  : ['border-gray-300',
+			     'focus:border-blue-500 focus:outline-none',
+			     'focus:ring-2 focus:ring-blue-200']),
+			 className)}
 	  type="datetime-local"
 	  value={local}
+	  aria-invalid={invalid}
 	  onChange={ev => {
 	    const v = ev.target.value
 	    setLocal (v)
@@ -46,4 +57,4 @@ const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, ...rest
 	  onBlur={onBlur}/>)
 }
 
-export default DateTimeField
+export default DateTimeField