fix: confirm visit datetime picker selection

frontend/src/components/DateTimePicker.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import DatePicker, { registerLocale } from 'react-datepicker';
 import { ko } from 'date-fns/locale';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -14,31 +14,43 @@ interface Props {
 
 const pad = (n: number) => String(n).padStart(2, '0');
 
-/** Date → "YYYY-MM-DDTHH:mm" (local), the format the form/back-end expect. */
 function toLocalString(d: Date): string {
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
 }
 
-/**
- * Korean-localized date+time picker that replaces the browser-native
- * <input type="datetime-local"> (whose popup labels/border/buttons cannot be
- * styled). Keeps the calendar open until the user presses [입력] so the choice
- * is explicit.
- */
+function fromLocalString(value: string): Date | null {
+  return value ? new Date(value) : null;
+}
+
 export const DateTimePicker: React.FC<Props> = ({ value, onChange, placeholder }) => {
-  const ref = useRef<DatePicker>(null);
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState<Date | null>(fromLocalString(value));
+
+  useEffect(() => {
+    setDraft(fromLocalString(value));
+  }, [value]);
+
+  const confirm = () => {
+    if (draft) {
+      onChange(toLocalString(draft));
+    }
+    setOpen(false);
+  };
 
   return (
     <DatePicker
-      ref={ref}
-      selected={value ? new Date(value) : null}
-      onChange={(d: Date | null) => d && onChange(toLocalString(d))}
+      selected={draft}
+      onChange={(d: Date | null) => setDraft(d)}
+      open={open}
+      onInputClick={() => setOpen(true)}
+      onCalendarOpen={() => setOpen(true)}
+      onClickOutside={() => setOpen(false)}
       showTimeSelect
       timeIntervals={5}
       timeCaption="시간"
-      timeFormat="a K:mm"
-      dateFormat="yyyy.MM.dd (eee) a K:mm"
-      dateFormatCalendar="yyyy.M월"
+      timeFormat="a h:mm"
+      dateFormat="yyyy.MM.dd (eee) a h:mm"
+      dateFormatCalendar="yyyy.MM"
       locale="ko"
       shouldCloseOnSelect={false}
       placeholderText={placeholder ?? '날짜와 시간을 선택하세요'}
@@ -46,7 +58,7 @@ export const DateTimePicker: React.FC<Props> = ({ value, onChange, placeholder }
       popperClassName="acs-datepicker"
     >
       <div className="dt-actions">
-        <button type="button" className="btn-primary dt-confirm" onClick={() => ref.current?.setOpen(false)}>
+        <button type="button" className="btn-primary dt-confirm" onClick={confirm}>
           입력
         </button>
       </div>