파미콘 생성기 - 배포가이드 - withMAKE.CO.KR 자동화세상모든이야기

 파미콘 생성기 - 배포가이드

이 React 컴포넌트는 간단한 파비콘 생성기를 구현합니다. 주요 기능은 다음과 같습니다:

1. 사용자가 한 글자의 텍스트를 입력할 수 있습니다.
2. 배경색과 텍스트 색상을 선택할 수 있습니다.
3. 실시간으로 파비콘 미리보기를 제공합니다.
4. "파비콘 다운로드" 버튼을 클릭하여 생성된 파비콘을 PNG 파일로 다운로드할 수 있습니다.

이 컴포넌트를 블로그에 추가하면 독자들이 직접 자신의 블로그용 파비콘을 만들 수 있게 됩니다. 사용 방법은 다음과 같습니다:

1. React 프로젝트에 이 컴포넌트를 추가합니다.
2. 필요한 경우 스타일을 조정합니다 (현재는 Tailwind CSS 클래스를 사용하고 있습니다).
3. 블로그의 적절한 페이지나 섹션에 이 컴포넌트를 렌더링합니다.

이 파비콘 생성기는 사용자들에게 유용한 도구가 될 것이며, 블로그의 인터랙티브한 콘텐츠로서 방문자들의 참여를 유도할 수 있습니다.

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;

소스코드 다운받기::