diff --git a/ssh/package-lock.json b/ssh/package-lock.json index ec14884..a749c10 100644 --- a/ssh/package-lock.json +++ b/ssh/package-lock.json @@ -13,6 +13,7 @@ "@radix-ui/react-slot": "^1.2.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "embla-carousel": "^8.6.0", "embla-carousel-react": "^8.6.0", "leaflet": "^1.9.4", "lucide-react": "^0.542.0", diff --git a/ssh/package.json b/ssh/package.json index 50135d9..8983a6b 100644 --- a/ssh/package.json +++ b/ssh/package.json @@ -15,6 +15,7 @@ "@radix-ui/react-slot": "^1.2.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "embla-carousel": "^8.6.0", "embla-carousel-react": "^8.6.0", "leaflet": "^1.9.4", "lucide-react": "^0.542.0", diff --git a/ssh/src/pages/Voicephishing/index.tsx b/ssh/src/pages/Voicephishing/index.tsx index 12d0c4f..9f002bd 100644 --- a/ssh/src/pages/Voicephishing/index.tsx +++ b/ssh/src/pages/Voicephishing/index.tsx @@ -1,5 +1,224 @@ +import { useState, useCallback } from 'react'; +import { Phone, CreditCard, ShieldAlert } from 'lucide-react'; + const VoicephishingPage = () => { - return

보이스피싱 진단 페이지

; + const [input, setInput] = useState(''); + const [type, setType] = useState<'phone' | 'account'>('phone'); + + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(null); + const [results, setResults] = useState< + Array<{ + id: string; + type: 'phone' | 'account'; + value: string; + reports: number; + lastReported?: string; + source?: string; + risk?: 'low' | 'medium' | 'high'; + }> + >([]); + const [hasSearched, setHasSearched] = useState(false); + + const handleLookup = useCallback(() => { + const q = input.trim(); + setHasSearched(true); + setError(null); + if (!q) { + setResults([]); + setIsLoading(false); + setError(type === 'phone' ? '전화번호를 입력해 주세요.' : '계좌번호를 입력해 주세요.'); + return; + } + setIsLoading(true); + // 백엔드 연동 전이므로 즉시 완료 처리 + setResults([]); + setIsLoading(false); + }, [input, type]); + + return ( +
+
+ 보이스피싱 배경 +
+
+ +
+ + + 안전한 금융생활을 위한 신고·조회 허브 + +

+ 의심 번호 조회 서비스 +

+

+ 보이스피싱이 의심되는 전화번호 혹은 계좌번호를 조회해 +
+ 관련 신고 및 접수 횟수를 바로 확인하세요. +

+
+ +
+
+
+
+
+
+ + +
+
+ +
{ + e.preventDefault(); + handleLookup(); + }} + className="flex-1 w-full" + > + setInput(e.target.value)} + placeholder={ + type === 'phone' + ? '의심되는 전화번호를 입력하세요' + : '의심되는 계좌번호를 입력하세요' + } + className="w-full bg-transparent pl-4 py-3 rounded-2xl text-gray-900 placeholder:text-gray-400 outline-none focus:outline-none focus:ring-0 border-0 caret-emerald-600" + /> +
+
+
+

+ {type === 'phone' ? '예: 010-1234-5678' : '예: 숫자만 입력하세요'} +

+
+
+
+ +
+ {isLoading && ( +
+ 조회 중입니다… +
+ )} + {!isLoading && error && ( +
+ {error} +
+ )} + {!isLoading && !error && hasSearched && results.length === 0 && ( +
+ 검색 결과가 없습니다. +
+ )} + {!isLoading && !error && results.length > 0 && ( +
    + {results.map((r) => ( +
  • +
    +
    +
    + {r.type === 'phone' ? '전화번호' : '계좌번호'} +
    +
    {r.value}
    +
    +
    +
    신고 횟수
    +
    {r.reports}건
    +
    +
    +
    + + {r.lastReported ? `최근 신고일: ${r.lastReported}` : '최근 신고일: -'} + + {r.source ? `출처: ${r.source}` : ''} +
    +
    • + ))} +
+ )} +
+ +
+ } + /> + } + /> + } + /> +
+
+ ); +}; + +const StatCard = ({ + title, + value, + caption, + accent, + icon, +}: { + title: string; + value: string; + caption: string; + accent?: boolean; + icon?: React.ReactNode; +}) => { + return ( +
+
+ + {icon} + + {title} +
+
+ {value} +
+
{caption}
+
+ ); }; export default VoicephishingPage;