diff --git a/ssh/src/pages/Voicephishing/index.tsx b/ssh/src/pages/Voicephishing/index.tsx
index 83cacab..41c833b 100644
--- a/ssh/src/pages/Voicephishing/index.tsx
+++ b/ssh/src/pages/Voicephishing/index.tsx
@@ -1,6 +1,22 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { Phone, CreditCard, ShieldAlert } from 'lucide-react';
 
+const onlyDigits = (v: string) => v.replace(/\D/g, '');
+
+const normalizeForType = (value: string, type: 'phone' | 'account') => {
+  const digits = onlyDigits(value);
+  if (type === 'phone') return digits;
+  return digits;
+};
+
+const isValid = (value: string, type: 'phone' | 'account') => {
+  const digits = onlyDigits(value);
+  if (type === 'phone') {
+    return /^01[016789]\d{7,8}$/.test(digits);
+  }
+  return /^\d{8,20}$/.test(digits);
+};
+
 const VoicephishingPage = () => {
   const [input, setInput] = useState('');
   const [type, setType] = useState<'phone' | 'account'>('phone');
@@ -13,27 +29,185 @@ const VoicephishingPage = () => {
       type: 'phone' | 'account';
       value: string;
       reports: number;
-      lastReported?: string;
-      source?: string;
-      risk?: 'low' | 'medium' | 'high';
+      lastReported: string;
+      risk: 'low' | 'medium' | 'high';
     }>
   >([]);
   const [hasSearched, setHasSearched] = useState(false);
+  const [reportingId, setReportingId] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  const [recentReports, setRecentReports] = useState<
+    Array<{
+      id: string;
+      type: 'phone' | 'account';
+      value: string;
+      lastReported: string;
+    }>
+  >([]);
+
+  useEffect(() => {
+    let aborted = false;
+
+    const load = async () => {
+      try {
+        const res = await fetch('/api/reports/recent');
+        if (!res.ok) throw new Error();
+        if (res.status === 204) {
+          // No Content
+          if (!aborted) setRecentReports([]);
+          return;
+        }
+        const data = await res.json();
+        let list: any[] = [];
+        if (Array.isArray(data)) list = data;
+        else if (Array.isArray((data as any)?.data?.items)) list = (data as any).data.items;
+        else if (Array.isArray((data as any)?.data)) list = (data as any).data;
+        else if (Array.isArray((data as any)?.content)) list = (data as any).content;
+        else if (Array.isArray((data as any)?.items)) list = (data as any).items;
+        else if (data && typeof data === 'object') list = [data];
+        else list = [];
+
+        const mapped = list.map((item: any) => ({
+          id: item.id ?? '',
+          type: item.type === 'phone' || item.type === 'account' ? item.type : 'phone',
+          value: item.value ?? '',
+          lastReported: item.lastReported
+            ? new Date(item.lastReported).toISOString().split('T')[0]
+            : '-',
+        }));
+        if (!aborted) setRecentReports(mapped);
+      } catch {
+        if (!aborted) setRecentReports([]);
+      }
+    };
+
+    load();
+    const t = setInterval(load, 15000);
+    return () => {
+      aborted = true;
+      clearInterval(t);
+    };
+  }, []);
+
+  const switchType = useCallback((next: 'phone' | 'account') => {
+    setType(next);
+    setInput('');
+    setResults([]);
+    setHasSearched(false);
+    setError(null);
+    setNotice(null);
+    setReportingId(null);
+  }, []);
+
+  const submitReport = useCallback(
+    async (payload: { type: 'phone' | 'account'; value: string }) => {
+      const key = `${payload.type}:${payload.value}`;
+      setReportingId(key);
+      setError(null);
+      setNotice(null);
+      try {
+        const res = await fetch('/api/reports', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        });
+        if (!res.ok) {
+          const text = await res.text().catch(() => '');
+          throw new Error(text || '신고에 실패했습니다. 다시 시도해 주세요.');
+        }
+        setNotice('신고가 접수되었습니다. 감사합니다.');
+        try {
+          const recentRes = await fetch('/api/reports/recent');
+          if (recentRes.ok && recentRes.status !== 204) {
+            const data = await recentRes.json();
+            let list: any[] = [];
+            if (Array.isArray(data)) list = data;
+            else if (Array.isArray((data as any)?.data)) list = (data as any).data;
+            else if (Array.isArray((data as any)?.content)) list = (data as any).content;
+            else if (Array.isArray((data as any)?.items)) list = (data as any).items;
+            else if (data && typeof data === 'object') list = [data];
+            const mapped = list.map((item: any) => ({
+              id: item.id ?? '',
+              type: item.type === 'phone' || item.type === 'account' ? item.type : 'phone',
+              value: item.value ?? '',
+              lastReported: item.lastReported
+                ? new Date(item.lastReported).toISOString().split('T')[0]
+                : '-',
+            }));
+            setRecentReports(mapped);
+          }
+        } catch {}
+      } catch (e: any) {
+        setError(e?.message || '신고 처리 중 오류가 발생했습니다.');
+      } finally {
+        setReportingId(null);
+      }
+    },
+    [],
+  );
 
   const handleLookup = useCallback(() => {
-    const q = input.trim();
+    const raw = input.trim();
     setHasSearched(true);
     setError(null);
-    if (!q) {
+    if (!raw) {
       setResults([]);
       setIsLoading(false);
       setError(type === 'phone' ? '전화번호를 입력해 주세요.' : '계좌번호를 입력해 주세요.');
       return;
     }
+
+    const q = normalizeForType(raw, type);
+    if (!isValid(q, type)) {
+      setResults([]);
+      setIsLoading(false);
+      setError(
+        type === 'phone' ? '전화번호 형식을 확인해 주세요.' : '계좌번호 형식을 확인해 주세요.',
+      );
+      return;
+    }
+
     setIsLoading(true);
-    // 백엔드 연동 전이므로 즉시 완료 처리
-    setResults([]);
-    setIsLoading(false);
+    fetch(`/api/lookup?type=${type}&q=${encodeURIComponent(q)}`)
+      .then(async (res) => {
+        if (!res.ok) {
+          const text = await res.text().catch(() => '');
+          throw new Error(text || '조회에 실패했습니다. 다시 시도해 주세요.');
+        }
+        const data = await res.json();
+        let list: any[] = [];
+        if (Array.isArray(data)) list = data;
+        else if (Array.isArray((data as any)?.data?.items)) list = (data as any).data.items;
+        else if (Array.isArray((data as any)?.data)) list = (data as any).data;
+        else if (Array.isArray((data as any)?.content)) list = (data as any).content;
+        else if (Array.isArray((data as any)?.items)) list = (data as any).items;
+        else if (data && typeof data === 'object') list = [data];
+        else list = [];
+
+        const mappedResults = list.map((item: any) => ({
+          id: item.id ?? '',
+          type: item.type === 'phone' || item.type === 'account' ? item.type : type,
+          value: item.value ?? q,
+          reports: typeof item.reports === 'number' ? item.reports : 0,
+          lastReported: item.lastReported
+            ? new Date(item.lastReported).toISOString().split('T')[0]
+            : '-',
+          risk: (['low', 'medium', 'high'] as const).includes(item.risk)
+            ? item.risk
+            : typeof item.reports === 'number' && item.reports >= 10
+              ? 'high'
+              : typeof item.reports === 'number' && item.reports >= 3
+                ? 'medium'
+                : 'low',
+        }));
+        setResults(mappedResults);
+      })
+      .catch((err) => {
+        setError(err.message || '조회 중 오류가 발생했습니다.');
+        setResults([]);
+      })
+      .finally(() => setIsLoading(false));
   }, [input, type]);
 
   return (
@@ -73,7 +247,7 @@ const VoicephishingPage = () => {
                     <button
                       type="button"
                       aria-pressed={type === 'phone'}
-                      onClick={() => setType('phone')}
+                      onClick={() => switchType('phone')}
                       className={`px-3 py-1.5 text-sm rounded-full ${type === 'phone' ? 'bg-white shadow text-emerald-700' : 'text-gray-600 hover:text-gray-800'}`}
                     >
                       전화번호
@@ -81,7 +255,7 @@ const VoicephishingPage = () => {
                     <button
                       type="button"
                       aria-pressed={type === 'account'}
-                      onClick={() => setType('account')}
+                      onClick={() => switchType('account')}
                       className={`px-4 py-2 text-sm rounded-full ${type === 'account' ? 'bg-white shadow text-emerald-700' : 'text-gray-600 hover:text-gray-800'}`}
                     >
                       계좌번호
@@ -96,19 +270,36 @@ const VoicephishingPage = () => {
                   }}
                   className="flex-1 w-full"
                 >
-                  <input
-                    aria-label={type === 'phone' ? '전화번호 입력' : '계좌번호 입력'}
-                    aria-describedby="lookup-helper"
-                    inputMode={type === 'phone' ? 'tel' : 'numeric'}
-                    value={input}
-                    onChange={(e) => setInput(e.target.value)}
-                    placeholder={
-                      type === 'phone'
-                        ? '의심되는 전화번호를 입력하세요'
-                        : '의심되는 계좌번호를 입력하세요'
-                    }
-                    className="w-full bg-transparent pl-5 py-4 rounded-2xl text-lg text-gray-900 placeholder:text-gray-400 outline-none focus:outline-none focus:ring-0 border-0 caret-emerald-600"
-                  />
+                  <div className="relative w-full">
+                    <input
+                      aria-label={type === 'phone' ? '전화번호 입력' : '계좌번호 입력'}
+                      aria-describedby="lookup-helper"
+                      inputMode={type === 'phone' ? 'tel' : 'numeric'}
+                      value={input}
+                      onChange={(e) => setInput(e.target.value)}
+                      placeholder={
+                        type === 'phone'
+                          ? '의심되는 전화번호를 입력하세요'
+                          : '의심되는 계좌번호를 입력하세요'
+                      }
+                      className="w-full bg-transparent pl-5 pr-36 py-4 rounded-2xl text-lg text-gray-900 placeholder:text-gray-400 outline-none focus:outline-none focus:ring-0 border-0 caret-emerald-600"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => submitReport({ type, value: normalizeForType(input, type) })}
+                      disabled={
+                        !isValid(normalizeForType(input, type), type) ||
+                        reportingId === `${type}:${normalizeForType(input, type)}`
+                      }
+                      className="absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded-full border border-red-200 bg-red-50 px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-100 disabled:opacity-50 shadow-sm"
+                      aria-label="신고하기"
+                      title="신고하기"
+                    >
+                      {reportingId === `${type}:${normalizeForType(input, type)}`
+                        ? '신고 중…'
+                        : '신고하기'}
+                    </button>
+                  </div>
                 </form>
               </div>
             </div>
@@ -133,9 +324,16 @@ const VoicephishingPage = () => {
             {error}
           </div>
         )}
+        {!isLoading && !error && notice && (
+          <div className="rounded-xl border border-emerald-100 bg-emerald-50 p-4 text-sm text-emerald-700 shadow-sm">
+            {notice}
+          </div>
+        )}
         {!isLoading && !error && hasSearched && results.length === 0 && (
           <div className="rounded-xl border border-gray-100 bg-white p-4 text-sm text-gray-600 shadow-sm">
-            검색 결과가 없습니다.
+            <div className="flex items-center justify-between gap-3">
+              <span>검색 결과가 없습니다.</span>
+            </div>
           </div>
         )}
         {!isLoading && !error && results.length > 0 && (
@@ -152,13 +350,23 @@ const VoicephishingPage = () => {
                   <div className="text-right">
                     <div className="text-xs text-gray-500">신고 횟수</div>
                     <div className="text-lg font-bold text-emerald-600">{r.reports}건</div>
+                    <div
+                      className={`mt-1 inline-block rounded-full px-2 py-0.5 text-xs font-semibold ${
+                        r.risk === 'high'
+                          ? 'bg-red-100 text-red-700'
+                          : r.risk === 'medium'
+                            ? 'bg-orange-100 text-orange-700'
+                            : 'bg-green-100 text-green-700'
+                      }`}
+                    >
+                      {r.risk === 'high' ? '높음' : r.risk === 'medium' ? '중간' : '낮음'}
+                    </div>
                   </div>
                 </div>
                 <div className="mt-2 flex items-center justify-between text-xs text-gray-500">
                   <span>
                     {r.lastReported ? `최근 신고일: ${r.lastReported}` : '최근 신고일: -'}
                   </span>
-                  <span>{r.source ? `출처: ${r.source}` : ''}</span>
                 </div>
               </li>
             ))}
@@ -167,12 +375,7 @@ const VoicephishingPage = () => {
       </section>
 
       <section className="mx-auto mt-16 mb-12 grid max-w-6xl grid-cols-1 gap-6 px-4 md:mt-20 md:grid-cols-3">
-        <StatCard
-          title="최근 신고 데이터"
-          value="실시간"
-          caption="DB 연동"
-          icon={<ShieldAlert className="h-5 w-5" />}
-        />
+        <RecentReportsCard reports={recentReports} />
         <StatCard
           title="전화 신고"
           value="10건 이상"
@@ -223,4 +426,89 @@ const StatCard = ({
   );
 };
 
+const RecentReportsCard = ({
+  reports,
+}: {
+  reports: Array<{
+    id: string;
+    type: 'phone' | 'account';
+    value: string;
+    lastReported: string;
+  }>;
+}) => {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    if (index >= reports.length) setIndex(0);
+  }, [reports, index]);
+
+  const hasItems = reports && reports.length > 0;
+  const current = hasItems ? reports[index] : null;
+
+  return (
+    <div className="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm hover:shadow-md transition-shadow">
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-2 text-gray-600">
+          <span className="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-gray-100 text-gray-600">
+            <ShieldAlert className="h-5 w-5" />
+          </span>
+          <span className="text-sm font-medium">최근 신고 데이터</span>
+        </div>
+        <div className="text-xs text-gray-500">
+          {hasItems ? `${index + 1} / ${Math.min(5, reports.length)}` : '0 / 0'}
+        </div>
+      </div>
+
+      {!hasItems ? (
+        <div className="text-sm text-gray-400">최근 신고 데이터가 없습니다.</div>
+      ) : (
+        <div className="relative">
+          {/* 단일 카드 */}
+          <div className="rounded-xl border border-gray-100 bg-white p-4 shadow-sm">
+            <div className="text-xs text-gray-500 mb-1">
+              {current!.type === 'phone' ? '전화번호' : '계좌번호'}
+            </div>
+            <div className="text-base font-semibold text-gray-900">{current!.value}</div>
+            <div className="mt-2 text-xs text-gray-500">
+              최근 신고일: {current!.lastReported || '-'}
+            </div>
+          </div>
+
+          {/* 내비게이션 */}
+          <div className="mt-3 flex items-center justify-between">
+            <button
+              type="button"
+              onClick={() => setIndex((i) => (i <= 0 ? Math.min(4, reports.length - 1) : i - 1))}
+              className="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-100 disabled:opacity-50"
+              disabled={reports.length <= 1}
+              aria-label="이전"
+              title="이전"
+            >
+              이전
+            </button>
+            <div className="flex items-center gap-1">
+              {reports.slice(0, 5).map((_, i) => (
+                <span
+                  key={i}
+                  className={`h-1.5 w-1.5 rounded-full ${i === index ? 'bg-emerald-600' : 'bg-gray-300'}`}
+                />
+              ))}
+            </div>
+            <button
+              type="button"
+              onClick={() => setIndex((i) => (i >= Math.min(4, reports.length - 1) ? 0 : i + 1))}
+              className="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-100 disabled:opacity-50"
+              disabled={reports.length <= 1}
+              aria-label="다음"
+              title="다음"
+            >
+              다음
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
 export default VoicephishingPage;