feat: apply datetime and self-approve admin requests

frontend/src/components/DateTimePicker.tsx

@@ -1,4 +1,4 @@
-import React 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';
@@ -22,22 +22,39 @@ function fromLocalString(value: string): Date | null {
   return value ? new Date(value) : null;
 }
 
-export const DateTimePicker: React.FC<Props> = ({ value, onChange, placeholder }) => (
-  <DatePicker
-    selected={fromLocalString(value)}
-    onChange={(d: Date | null) => {
-      if (d) onChange(toLocalString(d));
-    }}
-    showTimeSelect
-    timeIntervals={5}
-    timeCaption="시간"
-    timeFormat="a h:mm"
-    dateFormat="yyyy.MM.dd (eee) a h:mm"
-    dateFormatCalendar="yyyy.MM"
-    locale="ko"
-    shouldCloseOnSelect={false}
-    placeholderText={placeholder ?? '날짜와 시간을 선택하세요'}
-    className="dt-input"
-    popperClassName="acs-datepicker"
-  />
-);
+export const DateTimePicker: React.FC<Props> = ({ value, onChange, placeholder }) => {
+  const [draft, setDraft] = useState<Date | null>(fromLocalString(value));
+
+  useEffect(() => {
+    setDraft(fromLocalString(value));
+  }, [value]);
+
+  const apply = () => {
+    if (draft) {
+      onChange(toLocalString(draft));
+    }
+  };
+
+  return (
+    <div className="dt-apply-row">
+      <DatePicker
+        selected={draft}
+        onChange={(d: Date | null) => setDraft(d)}
+        showTimeSelect
+        timeIntervals={5}
+        timeCaption="시간"
+        timeFormat="a h:mm"
+        dateFormat="yyyy.MM.dd (eee) a h:mm"
+        dateFormatCalendar="yyyy.MM"
+        locale="ko"
+        shouldCloseOnSelect={false}
+        placeholderText={placeholder ?? '날짜와 시간을 선택하세요'}
+        className="dt-input"
+        popperClassName="acs-datepicker"
+      />
+      <button type="button" className="btn-ghost dt-apply-button" onClick={apply} disabled={!draft}>
+        적용
+      </button>
+    </div>
+  );
+};

frontend/src/styles/common.css

@@ -128,10 +128,11 @@ a { color: inherit; text-decoration: none; }
 /* react-datepicker: make the input fill the field like the native ones */
 .field .react-datepicker-wrapper { width: 100%; }
 .field .react-datepicker__input-container input { width: 100%; box-sizing: border-box; }
-/* clearer popup border + shadow, and a full-width [입력] footer button */
+/* clearer popup border + shadow, and a stable field-side apply button */
 .acs-datepicker .react-datepicker { border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
-.dt-actions { padding: 8px; border-top: 1px solid var(--border); }
-.dt-confirm { width: 100%; }
+.dt-apply-row { display: flex; align-items: center; gap: 8px; }
+.dt-apply-row .react-datepicker-wrapper { flex: 1; min-width: 0; }
+.dt-apply-button { flex: 0 0 auto; min-height: 40px; padding-inline: 14px; }
 
 /* In-app modal dialog (replaces window.prompt/confirm) */
 .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }