import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
const TrendingSearchTool = () => {
const [platform, setPlatform] = useState('naver');
const [searchTerm, setSearchTerm] = useState('');
const [trendingKeywords, setTrendingKeywords] = useState([]);
// 모의 데이터 (실제 API 연동 시 대체 필요)
const mockTrendingData = {
naver: [
'새해 다이어트',
'2024 여행 계획',
'건강 트렌드',
'신년 목표',
'겨울 패션'
],
google: [
'Global Tech Trends',
'New Year Resolutions',
'Travel Destinations 2024',
'AI Innovations',
'Health and Wellness'
],
daum: [
'설날 음식',
'겨울 여행지',
'신년 운세',
'건강 관리',
'재테크 트렌드'
]
};
const handleSearch = () => {
// 선택된 플랫폼의 트렌딩 키워드 필터링
const filteredKeywords = mockTrendingData[platform].filter(keyword =>
keyword.toLowerCase().includes(searchTerm.toLowerCase())
);
setTrendingKeywords(filteredKeywords);
};
return (
<Card className="w-full max-w-md mx-auto">
<CardHeader>
<CardTitle>실시간 인기 검색어 도구</CardTitle>
</CardHeader>
<CardContent>
<div className="flex space-x-2 mb-4">
<select
value={platform}
onChange={(e) => setPlatform(e.target.value)}
className="w-1/3 p-2 border rounded"
>
<option value="naver">네이버</option>
<option value="google">구글</option>
<option value="daum">다음</option>
</select>
<Input
type="text"
placeholder="키워드 검색"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-2/3"
/>
</div>
<Button onClick={handleSearch} className="w-full">
트렌드 검색
</Button>
</CardContent>
<CardContent>
<h3 className="font-semibold mb-2">트렌딩 키워드:</h3>
{trendingKeywords.length > 0 ? (
<ul className="space-y-2">
{trendingKeywords.map((keyword, index) => (
<li key={index} className="p-2 bg-gray-100 rounded">
{keyword}
</li>
))}
</ul>
) : (
<p className="text-gray-500">검색 결과가 없습니다.</p>
)}
</CardContent>
<CardFooter>
<p className="text-xs text-gray-500">
* 현재 모의 데이터를 사용 중입니다. 실제 API 연동 필요
</p>
</CardFooter>
</Card>
);
};
export default TrendingSearchTool;
-----------------------------------------------------------------
html 형식의 검색기입니다 .
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실시간 트렌딩 검색어 도구</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<style>
/* 스크롤바 커스터마이징 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4 max-w-4xl">
<div class="bg-white shadow-lg rounded-lg p-6">
<h1 class="text-2xl font-bold mb-4 text-center text-blue-600">🔥 실시간 트렌딩 검색어 도구</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<select id="platformSelect" class="w-full p-2 border rounded bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="naver">네이버</option>
<option value="google">구글</option>
<option value="daum">다음</option>
<option value="youtube">유튜브</option>
<option value="twitter">트위터</option>
</select>
<input type="text" id="searchInput" placeholder="키워드 필터링"
class="w-full p-2 border rounded bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button id="searchBtn" class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600 transition duration-300">
트렌드 검색
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<h3 class="font-semibold mb-2">🏆 실시간 트렌딩 키워드</h3>
<div id="trendingKeywords" class="h-64 overflow-y-auto border rounded p-2 bg-gray-50">
<!-- 트렌딩 키워드 리스트 -->
</div>
</div>
<div>
<h3 class="font-semibold mb-2">📊 키워드 트렌드 분석</h3>
<canvas id="trendChart" class="w-full h-64 bg-gray-50 rounded"></canvas>
</div>
</div>
<div class="mt-4 grid grid-cols-2 gap-4">
<div>
<h3 class="font-semibold mb-2">🔍 연관 검색어</h3>
<div id="relatedKeywords" class="border rounded p-2 bg-gray-50 h-32 overflow-y-auto">
<!-- 연관 검색어 리스트 -->
</div>
</div>
<div>
<h3 class="font-semibold mb-2">📈 검색 동향</h3>
<div id="searchTrends" class="border rounded p-2 bg-gray-50 h-32 overflow-y-auto">
<!-- 검색 동향 정보 -->
</div>
</div>
</div>
</div>
</div>
<script>
// 모의 데이터
const mockTrendData = {
naver: {
keywords: ['새해 다이어트', '2024 여행', '건강 트렌드', '재테크', '운동'],
relatedKeywords: ['건강식', '홈트', '재테크 앱', '여행 패키지'],
trends: ['검색량 ↑', '관심도 증가', '신규 트렌드']
},
google: {
keywords: ['Tech Trends', 'AI Innovation', 'Travel 2024', 'Fitness', 'Investing'],
relatedKeywords: ['Machine Learning', 'Smart Devices', 'Remote Work'],
trends: ['Global Search Spike', 'Emerging Topics', 'Tech Interest']
},
daum: {
keywords: ['설날 음식', '겨울 여행', '신년 운세', '건강 관리', '재테크'],
relatedKeywords: ['명절 요리', '여행 추천', '건강 관리 앱'],
trends: ['지역 인기 검색', '계절 트렌드', '생활 관심사']
}
};
// DOM 요소 선택
const platformSelect = document.getElementById('platformSelect');
const searchInput = document.getElementById('searchInput');
const searchBtn = document.getElementById('searchBtn');
const trendingKeywords = document.getElementById('trendingKeywords');
const relatedKeywords = document.getElementById('relatedKeywords');
const searchTrends = document.getElementById('searchTrends');
const trendChart = document.getElementById('trendChart');
// 트렌딩 키
'정보' 카테고리의 다른 글
| 대한민국 국군통수권의 이해 (4) | 2024.12.16 |
|---|---|
| 내면의 아티스트를 깨우는 DIY 만들기 꿀팁 7가지 (2) | 2024.12.07 |
| 해외직구, 위한 완벽 가이드 (1) | 2024.12.03 |
| 일기예보서비스개요 (1) | 2024.12.01 |
| 인김 검색어 검색기 (2) | 2024.12.01 |