파미콘 생성기 - 배포가이드
이 React 컴포넌트는 간단한 파비콘 생성기를 구현합니다. 주요 기능은 다음과 같습니다:
- 사용자가 한 글자의 텍스트를 입력할 수 있습니다.
- 배경색과 텍스트 색상을 선택할 수 있습니다.
- 실시간으로 파비콘 미리보기를 제공합니다.
- "파비콘 다운로드" 버튼을 클릭하여 생성된 파비콘을 PNG 파일로 다운로드할 수 있습니다.
이 컴포넌트를 블로그에 추가하면 독자들이 직접 자신의 블로그용 파비콘을 만들 수 있게 됩니다. 사용 방법은 다음과 같습니다:
- React 프로젝트에 이 컴포넌트를 추가합니다.
- 필요한 경우 스타일을 조정합니다 (현재는 Tailwind CSS 클래스를 사용하고 있습니다).
- 블로그의 적절한 페이지나 섹션에 이 컴포넌트를 렌더링합니다.
이 파비콘 생성기는 사용자들에게 유용한 도구가 될 것이며, 블로그의 인터랙티브한 콘텐츠로서 방문자들의 참여를 유도할 수 있습니다.
import React, { useState, useRef, useEffect } from 'react';
const FaviconGenerator = () => {
const [text, setText] = useState('B');
const [bgColor, setBgColor] = useState('#3498db');
const [textColor, setTextColor] = useState('#ffffff');
const [faviconUrl, setFaviconUrl] = useState('');
const canvasRef = useRef(null);
useEffect(() => {
generateFavicon();
}, [text, bgColor, textColor]);
const generateFavicon = () => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
// Clear canvas
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, 64, 64);
// Draw text
ctx.fillStyle = textColor;
ctx.font = 'bold 40px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, 32, 32);
// Convert to data URL
setFaviconUrl(canvas.toDataURL('image/png'));
};
const handleDownload = () => {
if (!faviconUrl) return;
const link = document.createElement('a');
link.download = 'favicon.png';
link.href = faviconUrl;
link.click();
};
return (
<div className="p-4 max-w-md mx-auto bg-white rounded-xl shadow-md">
<h2 className="text-2xl font-bold mb-4">블로그 파비콘 생성기</h2>
<div className="mb-4">
<label className="block mb-2">텍스트:</label>
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value.charAt(0))}
maxLength="1"
className="w-full p-2 border rounded"
/>
</div>
<div className="mb-4">
<label className="block mb-2">배경색:</label>
<input
type="color"
value={bgColor}
onChange={(e) => setBgColor(e.target.value)}
className="w-full"
/>
</div>
<div className="mb-4">
<label className="block mb-2">텍스트 색상:</label>
<input
type="color"
value={textColor}
onChange={(e) => setTextColor(e.target.value)}
className="w-full"
/>
</div>
<canvas ref={canvasRef} width="64" height="64" className="hidden" />
<div className="mb-4">
<label className="block mb-2">미리보기:</label>
{faviconUrl && <img src={faviconUrl} alt="Favicon preview" className="border" />}
</div>
<button
onClick={handleDownload}
className="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
>
파비콘 다운로드
</button>
</div>
);
};
export default FaviconGenerator;
소스코드 다운받기::
