From 2515d643782bf08174a69ca61282081d7376d051 Mon Sep 17 00:00:00 2001 From: kxxheehxxn Date: Sat, 6 Sep 2025 04:26:43 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=B3=B4=EC=9D=B4=EC=8A=A4?= =?UTF-8?q?=ED=94=BC=EC=8B=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssh/package-lock.json | 1 + ssh/package.json | 1 + ssh/src/pages/Voicephishing/index.tsx | 223 +++++++++++++++++++++++++- 3 files changed, 224 insertions(+), 1 deletion(-) 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..7a533a4 100644 --- a/ssh/src/pages/Voicephishing/index.tsx +++ b/ssh/src/pages/Voicephishing/index.tsx @@ -1,5 +1,226 @@ +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' + ? '의심되는 전화번호를 입력하세요 (예: 010-1234-5678)' + : '의심되는 계좌번호를 입력하세요 (숫자만)' + } + 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; From 0fc9d0da86e0e44e5fe46c351edeb588ac47bb31 Mon Sep 17 00:00:00 2001 From: kxxheehxxn Date: Sat, 6 Sep 2025 04:30:10 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EC=98=88=EC=8B=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssh/src/pages/Voicephishing/index.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/ssh/src/pages/Voicephishing/index.tsx b/ssh/src/pages/Voicephishing/index.tsx index 7a533a4..9f002bd 100644 --- a/ssh/src/pages/Voicephishing/index.tsx +++ b/ssh/src/pages/Voicephishing/index.tsx @@ -102,8 +102,8 @@ const VoicephishingPage = () => { onChange={(e) => setInput(e.target.value)} placeholder={ type === 'phone' - ? '의심되는 전화번호를 입력하세요 (예: 010-1234-5678)' - : '의심되는 계좌번호를 입력하세요 (숫자만)' + ? '의심되는 전화번호를 입력하세요' + : '의심되는 계좌번호를 입력하세요' } 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" /> @@ -114,9 +114,7 @@ const VoicephishingPage = () => { id="lookup-helper" className="mx-auto mt-2 max-w-4xl px-2 text-center text-xs text-gray-500" > - {type === 'phone' - ? '예: 010-1234-5678 (하이픈 없이도 가능)' - : '예: 숫자만 입력하세요'} + {type === 'phone' ? '예: 010-1234-5678' : '예: 숫자만 입력하세요'}