fix: mock 제거 및 실제 API 연동 + 버그 수정

SOIV · claude · SOIV · commit 4feb158a49cf · 2026-04-17T12:30:01.000+09:00
- 004_add_user_modules.sql: user_id TEXT → UUID (FK 타입 불일치 수정)
- vite.config.ts: /admin 프록시 누락 추가 (PIN 인증 등 admin 엔드포인트 전달 안 되던 문제)
- admin.ts: POST /admin/change-pin 엔드포인트 추가 (rotatePin 사용)
           POST /admin/verify-pin 엔드포인트 추가
- AdminPinModal: MOCK_ADMIN_PIN 비교 제거 → POST /admin/verify-pin 실제 API 호출
- AdminView: 부분/완전 초기화, PIN 변경 mock 비교 제거 → 실제 API 호출
- ForgotPasswordView: MOCK_ADMIN_TOKEN 제거 → POST /auth/password/recovery/confirm 연동
- ChangePasswordView: POST /auth/password/change 실제 API 호출, 에러 표시 추가

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/apps/api/src/db/migrations/core/004_add_user_modules.sql b/apps/api/src/db/migrations/core/004_add_user_modules.sql
@@ -8,7 +8,7 @@
 
 CREATE TABLE IF NOT EXISTS user_modules (
   id           {{UUID_PRIMARY_KEY}},
-  user_id      TEXT        NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  user_id      UUID        NOT NULL REFERENCES users(id) ON DELETE CASCADE,
   module_name  TEXT        NOT NULL,
   enabled      BOOLEAN     NOT NULL DEFAULT {{BOOLEAN_TRUE}},
   installed_at TEXT        NOT NULL DEFAULT ({{NOW}}),
diff --git a/apps/api/src/routes/admin.ts b/apps/api/src/routes/admin.ts
@@ -11,6 +11,11 @@ const ResetBody = z.object({
   pin: z.string().min(4),
 });
 
+const ChangePinBody = z.object({
+  currentPin: z.string().min(4),
+  newPin: z.string().min(4),
+});
+
 // ── 완전 초기화: 삭제할 테이블 목록 (FK 의존성 역순) ──────────
 
 const ALL_TABLES = [
@@ -36,6 +41,52 @@ const DATA_TABLES = ['shared_link_logs', 'shared_links'];
 export function createAdminRouter(services: AppServices): Router {
   const router = Router();
 
+  /**
+   * POST /admin/change-pin — 관리자 PIN 변경
+   *
+   * 현재 PIN 검증 후 새 PIN으로 교체한다.
+   * rotatePin()이 내부에서 현재 PIN 검증 + setPin을 원자적으로 처리한다.
+   */
+  router.post('/change-pin', requireAuth(services.jwtManager), async (req, res) => {
+    const parsed = ChangePinBody.safeParse(req.body);
+    if (!parsed.success) {
+      res.status(400).json({ success: false, error: parsed.error.flatten() });
+      return;
+    }
+
+    try {
+      await services.adminPin.rotatePin(parsed.data.currentPin, parsed.data.newPin);
+      res.json({ success: true });
+    } catch (err) {
+      const msg = (err as Error).message;
+      const status = msg.includes('incorrect') ? 403 : 500;
+      res.status(status).json({ success: false, error: msg });
+    }
+  });
+
+  /**
+   * POST /admin/verify-pin — 관리자 PIN 단독 검증
+   *
+   * 프론트엔드 AdminPinModal에서 PIN 인증 전용으로 호출한다.
+   * 성공 시 { success: true }만 반환하며 세션/토큰을 별도로 발급하지 않는다.
+   * 실제 인가는 각 관리자 액션 API에서 PIN을 재검증한다.
+   */
+  router.post('/verify-pin', requireAuth(services.jwtManager), async (req, res) => {
+    const parsed = ResetBody.safeParse(req.body);
+    if (!parsed.success) {
+      res.status(400).json({ success: false, error: parsed.error.flatten() });
+      return;
+    }
+
+    const pinOk = await services.adminPin.verifyPin(parsed.data.pin);
+    if (!pinOk) {
+      res.status(403).json({ success: false, error: 'PIN이 올바르지 않습니다.' });
+      return;
+    }
+
+    res.json({ success: true });
+  });
+
   /**
    * POST /admin/factory-reset — 완전 초기화
    *
diff --git a/apps/web/src/components/AdminPinModal.tsx b/apps/web/src/components/AdminPinModal.tsx
@@ -2,8 +2,6 @@ import { useEffect, useState, type FormEvent } from "react";
 
 import { Button, Modal, PinInput } from "@fieldstack/controls";
 
-// 개발 mock PIN — 실제 구현 시 API 검증으로 교체
-const MOCK_ADMIN_PIN = "1234";
 const MAX_ATTEMPTS = 5;
 const LOCKOUT_SECONDS = 300; // 5분
 
@@ -18,6 +16,7 @@ export function AdminPinModal({ onVerified, onClose }: AdminPinModalProps) {
   const [attempts, setAttempts] = useState(0);
   const [lockedUntil, setLockedUntil] = useState<number | null>(null);
   const [remaining, setRemaining] = useState(0);
+  const [isVerifying, setIsVerifying] = useState(false);
 
   // 잠금 카운트다운
   useEffect(() => {
@@ -40,25 +39,43 @@ export function AdminPinModal({ onVerified, onClose }: AdminPinModalProps) {
 
   const isLocked = lockedUntil !== null;
 
-  const handleSubmit = (e: FormEvent) => {
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    if (isLocked || pin.length < 4) return;
+    if (isLocked || pin.length < 4 || isVerifying) return;
 
-    if (pin === MOCK_ADMIN_PIN) {
-      onVerified();
-      return;
-    }
+    setIsVerifying(true);
+    try {
+      const token = sessionStorage.getItem("fs_token") ?? "";
+      const res = await fetch("/admin/verify-pin", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ pin }),
+      });
+
+      if (res.ok) {
+        onVerified();
+        return;
+      }
 
-    const next = attempts + 1;
-    setAttempts(next);
-    setPin("");
+      const next = attempts + 1;
+      setAttempts(next);
+      setPin("");
 
-    if (next >= MAX_ATTEMPTS) {
-      const until = Date.now() + LOCKOUT_SECONDS * 1000;
-      setLockedUntil(until);
-      setError(`PIN ${MAX_ATTEMPTS}회 오류 — 5분간 잠금`);
-    } else {
-      setError(`PIN이 올바르지 않습니다. (${next}/${MAX_ATTEMPTS})`);
+      if (next >= MAX_ATTEMPTS) {
+        const until = Date.now() + LOCKOUT_SECONDS * 1000;
+        setLockedUntil(until);
+        setError(`PIN ${MAX_ATTEMPTS}회 오류 — 5분간 잠금`);
+      } else {
+        setError(`PIN이 올바르지 않습니다. (${next}/${MAX_ATTEMPTS})`);
+      }
+    } catch {
+      setError("서버 연결 오류. 다시 시도해주세요.");
+      setPin("");
+    } finally {
+      setIsVerifying(false);
     }
   };
 
@@ -70,8 +87,14 @@ export function AdminPinModal({ onVerified, onClose }: AdminPinModalProps) {
       size="sm"
       footer={
         <>
-          <Button type="button" onClick={onClose}>취소</Button>
-          <Button variant="primary" type="submit" form="pin-form" disabled={pin.length < 4 || isLocked}>
+          <Button type="button" onClick={onClose} disabled={isVerifying}>취소</Button>
+          <Button
+            variant="primary"
+            type="submit"
+            form="pin-form"
+            disabled={pin.length < 4 || isLocked || isVerifying}
+            loading={isVerifying}
+          >
             확인
           </Button>
         </>
@@ -90,12 +113,10 @@ export function AdminPinModal({ onVerified, onClose }: AdminPinModalProps) {
             setPin(val);
             if (!isLocked) setError("");
           }}
-          disabled={isLocked}
+          disabled={isLocked || isVerifying}
           error={error ? (isLocked ? `${error} — ${remaining}초 후 재시도 가능` : error) : undefined}
         />
       </form>
-
-      <p className="pin-modal-hint">개발 mock PIN: 1234</p>
     </Modal>
   );
 }
diff --git a/apps/web/src/views/AdminView.tsx b/apps/web/src/views/AdminView.tsx
@@ -4,8 +4,6 @@ import { Button, FormField, PinInput } from "@fieldstack/controls";
 
 import "../styles/admin.css";
 
-// 개발 mock PIN — 실제 구현 시 API 검증으로 교체
-const MOCK_ADMIN_PIN = "1234";
 
 // 초기화 플로우 단계
 type ResetPhase =
@@ -94,6 +92,8 @@ export function AdminView({ isPinVerified, onRequestPin, installMode }: AdminVie
   const [resetPhase, setResetPhase] = useState<ResetPhase>("idle");
   const [resetPin, setResetPin] = useState("");
   const [resetPinError, setResetPinError] = useState("");
+  const [isResetting, setIsResetting] = useState(false);
+  const [isPinChanging, setIsPinChanging] = useState(false);
 
   // 모듈 목록 조회
   const fetchModules = useCallback(async () => {
@@ -176,54 +176,84 @@ export function AdminView({ isPinVerified, onRequestPin, installMode }: AdminVie
     if (next !== "system") resetResetFlow();
   };
 
-  // 부분 초기화 PIN 확인 (mock)
-  const handlePartialResetSubmit = (e: FormEvent) => {
+  const handlePartialResetSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    if (resetPin !== MOCK_ADMIN_PIN) {
-      setResetPinError("PIN이 올바르지 않습니다.");
-      setResetPin("");
-      return;
-    }
+    if (isResetting) return;
+    setIsResetting(true);
     setResetPinError("");
-    setResetPhase("p-done");
-    // 실제 구현 시: POST /admin/partial-reset { pin } 호출
+    try {
+      const token = sessionStorage.getItem("fs_token") ?? "";
+      const res = await fetch("/admin/partial-reset", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+        body: JSON.stringify({ pin: resetPin }),
+      });
+      const json = await res.json() as { success: boolean; error?: string };
+      if (!res.ok || !json.success) {
+        setResetPinError(json.error ?? "초기화 실패");
+        setResetPin("");
+        return;
+      }
+      setResetPhase("p-done");
+    } catch {
+      setResetPinError("서버 연결 오류");
+    } finally {
+      setIsResetting(false);
+    }
   };
 
-  // 완전 초기화 PIN 확인 (mock)
-  const handleFactoryResetSubmit = (e: FormEvent) => {
+  const handleFactoryResetSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    if (resetPin !== MOCK_ADMIN_PIN) {
-      setResetPinError("PIN이 올바르지 않습니다.");
-      setResetPin("");
-      return;
-    }
+    if (isResetting) return;
+    setIsResetting(true);
     setResetPinError("");
-    setResetPhase("f-done");
-    // 실제 구현 시: POST /admin/factory-reset { pin } 호출 → 서버 재시작
+    try {
+      const token = sessionStorage.getItem("fs_token") ?? "";
+      const res = await fetch("/admin/factory-reset", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+        body: JSON.stringify({ pin: resetPin }),
+      });
+      const json = await res.json() as { success: boolean; error?: string };
+      if (!res.ok || !json.success) {
+        setResetPinError(json.error ?? "초기화 실패");
+        setResetPin("");
+        return;
+      }
+      setResetPhase("f-done");
+    } catch {
+      setResetPinError("서버 연결 오류");
+    } finally {
+      setIsResetting(false);
+    }
   };
 
-  const handlePinChange = (e: FormEvent) => {
+  const handlePinChange = async (e: FormEvent) => {
     e.preventDefault();
-    if (currentPin !== MOCK_ADMIN_PIN) {
-      setPinError("현재 PIN이 올바르지 않습니다.");
-      setCurrentPin("");
-      return;
-    }
-    if (newPin.length < 4) {
-      setPinError("새 PIN은 4자리 이상이어야 합니다.");
-      return;
-    }
-    if (newPin !== confirmPin) {
-      setPinError("새 PIN이 일치하지 않습니다.");
-      setConfirmPin("");
-      return;
-    }
-    if (newPin === MOCK_ADMIN_PIN) {
-      setPinError("현재 PIN과 동일한 PIN은 사용할 수 없습니다.");
-      return;
-    }
+    if (isPinChanging) return;
+    if (newPin.length < 4) { setPinError("새 PIN은 4자리 이상이어야 합니다."); return; }
+    if (newPin !== confirmPin) { setPinError("새 PIN이 일치하지 않습니다."); setConfirmPin(""); return; }
+    setIsPinChanging(true);
     setPinError("");
-    setPinSuccess(true);
+    try {
+      const token = sessionStorage.getItem("fs_token") ?? "";
+      const res = await fetch("/admin/change-pin", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+        body: JSON.stringify({ currentPin, newPin }),
+      });
+      const json = await res.json() as { success: boolean; error?: string };
+      if (!res.ok || !json.success) {
+        setPinError(json.error ?? "PIN 변경 실패");
+        setCurrentPin("");
+        return;
+      }
+      setPinSuccess(true);
+    } catch {
+      setPinError("서버 연결 오류");
+    } finally {
+      setIsPinChanging(false);
+    }
   };
 
   if (!isPinVerified) {
diff --git a/apps/web/src/views/ChangePasswordView.tsx b/apps/web/src/views/ChangePasswordView.tsx
@@ -2,7 +2,7 @@ import { useState, type FormEvent } from "react";
 
 import { PASSWORD_POLICY, validatePassword } from "@fieldstack/core/browser";
 
-import { Button, FormField, Input } from "@fieldstack/controls";
+import { Alert, Button, FormField, Input } from "@fieldstack/controls";
 
 import "../styles/change-password.css";
 
@@ -21,6 +21,7 @@ export function ChangePasswordView({ isFirstLogin, onChanged }: ChangePasswordVi
   const [next, setNext] = useState<FieldState>({ value: "", touched: false });
   const [confirm, setConfirm] = useState<FieldState>({ value: "", touched: false });
   const [submitted, setSubmitted] = useState(false);
+  const [apiError, setApiError] = useState("");
 
   const nextValidation = validatePassword(next.value);
   const confirmMismatch = confirm.value !== next.value;
@@ -30,12 +31,27 @@ export function ChangePasswordView({ isFirstLogin, onChanged }: ChangePasswordVi
 
   const canSubmit = current.value.length > 0 && nextValidation.valid && !confirmMismatch;
 
-  const handleSubmit = (e: FormEvent) => {
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setSubmitted(true);
     if (!canSubmit) return;
-    // TODO: API 연결 시 current 비밀번호 검증 후 변경
-    onChanged();
+    setApiError("");
+    try {
+      const token = sessionStorage.getItem("fs_token") ?? "";
+      const res = await fetch("/auth/password/change", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+        body: JSON.stringify({ newPassword: next.value }),
+      });
+      const json = await res.json() as { success: boolean; error?: string };
+      if (!res.ok || !json.success) {
+        setApiError(json.error ?? "비밀번호 변경에 실패했습니다.");
+        return;
+      }
+      onChanged();
+    } catch {
+      setApiError("서버 연결 오류. 다시 시도해주세요.");
+    }
   };
 
   return (
@@ -53,6 +69,8 @@ export function ChangePasswordView({ isFirstLogin, onChanged }: ChangePasswordVi
           </p>
         </div>
 
+        {apiError && <Alert variant="error">{apiError}</Alert>}
+
         <form className="stack cpw-form" onSubmit={handleSubmit} noValidate>
           <FormField
             label={isFirstLogin ? "임시 비밀번호" : "현재 비밀번호"}
diff --git a/apps/web/src/views/ForgotPasswordView.tsx b/apps/web/src/views/ForgotPasswordView.tsx
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
