feat: add email diagnostics

frontend/src/pages/AdminManagementPage.tsx

@@ -12,15 +12,16 @@ import {
   updateAdminPurposeCode,
   updateAdminUserTeam,
   updateAdminUserRoles,
+  runEmailDiagnostics,
   runSmsDiagnostics,
   uploadAdminTeams,
   uploadAdminUserRoles,
   updateWatcher1Settings,
   getWatcher1Settings,
 } from '../api';
-import { AdminExcelImportResult, AdminUser, PurposeCode, Role, SmsDiagnosticsResult, Team, Watcher1Settings } from '../types';
+import { AdminExcelImportResult, AdminUser, EmailDiagnosticsResult, PurposeCode, Role, SmsDiagnosticsResult, Team, Watcher1Settings } from '../types';
 
-type Tab = 'watcher' | 'purpose' | 'teams' | 'roles' | 'sms';
+type Tab = 'watcher' | 'purpose' | 'teams' | 'roles' | 'sms' | 'email';
 
 const EMPTY_PURPOSE = {
   code: '',
@@ -139,6 +140,7 @@ export const AdminManagementPage: React.FC = () => {
   const [userRoleUploadFile, setUserRoleUploadFile] = useState<File | null>(null);
   const [userRoleUploadResult, setUserRoleUploadResult] = useState<AdminExcelImportResult | null>(null);
   const [smsDiagnostics, setSmsDiagnostics] = useState<SmsDiagnosticsResult | null>(null);
+  const [emailDiagnostics, setEmailDiagnostics] = useState<EmailDiagnosticsResult | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
@@ -186,6 +188,21 @@ export const AdminManagementPage: React.FC = () => {
     }
   };
 
+  const checkEmail = async () => {
+    setBusy(true);
+    setError(null);
+    setNotice(null);
+    try {
+      const result = await runEmailDiagnostics();
+      setEmailDiagnostics(result);
+      setNotice(result.reachable ? 'Email SMTP 연결 점검이 완료되었습니다.' : 'Email SMTP 연결 점검에 실패했습니다.');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Email SMTP 연결 점검 실패');
+    } finally {
+      setBusy(false);
+    }
+  };
+
   const editPurpose = (p: PurposeCode) => {
     setEditingPurposeId(p.id);
     setPurposeForm({
@@ -422,6 +439,7 @@ export const AdminManagementPage: React.FC = () => {
         <button className={tab === 'teams' ? 'tab-active' : ''} onClick={() => setTab('teams')}>팀 관리</button>
         <button className={tab === 'roles' ? 'tab-active' : ''} onClick={() => setTab('roles')}>권한관리</button>
         <button className={tab === 'sms' ? 'tab-active' : ''} onClick={() => setTab('sms')}>SMS 점검</button>
+        <button className={tab === 'email' ? 'tab-active' : ''} onClick={() => setTab('email')}>Email 점검</button>
       </div>
 
       {tab === 'watcher' && (
@@ -623,6 +641,36 @@ export const AdminManagementPage: React.FC = () => {
           )}
         </div>
       )}
+
+      {tab === 'email' && (
+        <div className="card">
+          <div className="admin-upload-head">
+            <h3>Email SMTP 연결 점검</h3>
+            <button className="btn-primary" type="button" disabled={busy} onClick={() => void checkEmail()}>
+              점검 실행
+            </button>
+          </div>
+          {emailDiagnostics ? (
+            <table className="table diagnostic-table">
+              <tbody>
+                <tr><th>Host</th><td>{emailDiagnostics.host || '-'}</td></tr>
+                <tr><th>Port</th><td>{emailDiagnostics.port}</td></tr>
+                <tr><th>From</th><td>{emailDiagnostics.from || '-'}</td></tr>
+                <tr><th>SMTP Auth</th><td>{emailDiagnostics.smtpAuth ? 'Y' : 'N'}</td></tr>
+                <tr><th>STARTTLS</th><td>{emailDiagnostics.startTls ? 'Y' : 'N'}</td></tr>
+                <tr><th>계정 설정</th><td>{emailDiagnostics.usernameConfigured ? 'Y' : 'N'}</td></tr>
+                <tr><th>비밀번호 설정</th><td>{emailDiagnostics.passwordConfigured ? 'Y' : 'N'}</td></tr>
+                <tr><th>연결</th><td className={emailDiagnostics.reachable ? '' : 'text-danger'}>{emailDiagnostics.reachable ? '성공' : '실패'}</td></tr>
+                <tr><th>소요시간</th><td>{emailDiagnostics.elapsedMs} ms</td></tr>
+                <tr><th>점검시각</th><td>{new Date(emailDiagnostics.checkedAt).toLocaleString()}</td></tr>
+                <tr><th>오류</th><td className={emailDiagnostics.error ? 'text-danger' : ''}>{emailDiagnostics.error ?? '-'}</td></tr>
+              </tbody>
+            </table>
+          ) : (
+            <p className="muted">점검 실행 버튼을 누르면 서버 컨테이너에서 현재 Email SMTP host/port로 연결을 확인합니다.</p>
+          )}
+        </div>
+      )}
     </div>
   );
 };