feat: add SMS diagnostics admin check

frontend/src/pages/AdminManagementPage.tsx

@@ -12,14 +12,15 @@ import {
   updateAdminPurposeCode,
   updateAdminUserTeam,
   updateAdminUserRoles,
+  runSmsDiagnostics,
   uploadAdminTeams,
   uploadAdminUserRoles,
   updateWatcher1Settings,
   getWatcher1Settings,
 } from '../api';
-import { AdminExcelImportResult, AdminUser, PurposeCode, Role, Team, Watcher1Settings } from '../types';
+import { AdminExcelImportResult, AdminUser, PurposeCode, Role, SmsDiagnosticsResult, Team, Watcher1Settings } from '../types';
 
-type Tab = 'watcher' | 'purpose' | 'teams' | 'roles';
+type Tab = 'watcher' | 'purpose' | 'teams' | 'roles' | 'sms';
 
 const EMPTY_PURPOSE = {
   code: '',
@@ -137,6 +138,7 @@ export const AdminManagementPage: React.FC = () => {
   const [teamUploadResult, setTeamUploadResult] = useState<AdminExcelImportResult | null>(null);
   const [userRoleUploadFile, setUserRoleUploadFile] = useState<File | null>(null);
   const [userRoleUploadResult, setUserRoleUploadResult] = useState<AdminExcelImportResult | null>(null);
+  const [smsDiagnostics, setSmsDiagnostics] = useState<SmsDiagnosticsResult | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
@@ -169,6 +171,21 @@ export const AdminManagementPage: React.FC = () => {
     }
   };
 
+  const checkSms = async () => {
+    setBusy(true);
+    setError(null);
+    setNotice(null);
+    try {
+      const result = await runSmsDiagnostics();
+      setSmsDiagnostics(result);
+      setNotice(result.reachable ? 'SMS API 연결 점검이 완료되었습니다.' : 'SMS API 연결 점검에 실패했습니다.');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'SMS API 연결 점검 실패');
+    } finally {
+      setBusy(false);
+    }
+  };
+
   const editPurpose = (p: PurposeCode) => {
     setEditingPurposeId(p.id);
     setPurposeForm({
@@ -404,6 +421,7 @@ export const AdminManagementPage: React.FC = () => {
         <button className={tab === 'purpose' ? 'tab-active' : ''} onClick={() => setTab('purpose')}>출입목적 코드</button>
         <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>
       </div>
 
       {tab === 'watcher' && (
@@ -579,6 +597,32 @@ export const AdminManagementPage: React.FC = () => {
           </div>
         </>
       )}
+
+      {tab === 'sms' && (
+        <div className="card">
+          <div className="admin-upload-head">
+            <h3>SMS API 연결 점검</h3>
+            <button className="btn-primary" type="button" disabled={busy} onClick={() => void checkSms()}>
+              점검 실행
+            </button>
+          </div>
+          {smsDiagnostics ? (
+            <table className="table diagnostic-table">
+              <tbody>
+                <tr><th>Provider</th><td>{smsDiagnostics.provider}</td></tr>
+                <tr><th>URL</th><td>{smsDiagnostics.url || '-'}</td></tr>
+                <tr><th>연결</th><td className={smsDiagnostics.reachable ? '' : 'text-danger'}>{smsDiagnostics.reachable ? '성공' : '실패'}</td></tr>
+                <tr><th>HTTP 상태</th><td>{smsDiagnostics.httpStatus ?? '-'}</td></tr>
+                <tr><th>소요시간</th><td>{smsDiagnostics.elapsedMs} ms</td></tr>
+                <tr><th>점검시각</th><td>{new Date(smsDiagnostics.checkedAt).toLocaleString()}</td></tr>
+                <tr><th>오류</th><td className={smsDiagnostics.error ? 'text-danger' : ''}>{smsDiagnostics.error ?? '-'}</td></tr>
+              </tbody>
+            </table>
+          ) : (
+            <p className="muted">점검 실행 버튼을 누르면 서버 컨테이너에서 현재 SMS API URL로 연결을 확인합니다.</p>
+          )}
+        </div>
+      )}
     </div>
   );
 };