From 8dc8cdf7f5227cc1a115c5badacbd42aca7fa60b Mon Sep 17 00:00:00 2001
From: miteruzo <miteruzo@naver.com>
Date: Wed, 3 Jun 2026 07:40:15 +0900
Subject: [PATCH] #90

---
 .../PostOriginalCreatedTimeField.tsx          |  2 ++
 .../src/components/common/DateTimeField.tsx   | 19 +++++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/PostOriginalCreatedTimeField.tsx b/frontend/src/components/PostOriginalCreatedTimeField.tsx
index 746f62b..1e0c9fa 100644
--- a/frontend/src/components/PostOriginalCreatedTimeField.tsx
+++ b/frontend/src/components/PostOriginalCreatedTimeField.tsx
@@ -31,6 +31,7 @@ const PostOriginalCreatedTimeField: FC<Props> = (
 	      className="mr-2"
 	      disabled={disabled ?? false}
 	      aria-invalid={errors && errors.length > 0}
+	      invalid={errors && errors.length > 0}
 	      value={originalCreatedFrom ?? undefined}
 	      onChange={setOriginalCreatedFrom}
 	      onBlur={ev => {
@@ -65,6 +66,7 @@ const PostOriginalCreatedTimeField: FC<Props> = (
 	      className="mr-2"
 	      disabled={disabled}
 	      aria-invalid={errors && errors.length > 0}
+	      invalid={errors && errors.length > 0}
 	      value={originalCreatedBefore ?? undefined}
 	      onChange={setOriginalCreatedBefore}/>
 	  より前
diff --git a/frontend/src/components/common/DateTimeField.tsx b/frontend/src/components/common/DateTimeField.tsx
index 9e50595..0cb2210 100644
--- a/frontend/src/components/common/DateTimeField.tsx
+++ b/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
\ No newline at end of file
+export default DateTimeField