【個人開発】PDF 出力バグ修正とカスタムフック追加

今日は個人開発アプリの改善を行った。

• PDF に出力する文章が長いと見切れるバグ修正
• アイコンの大きさをレスポンシブ対応するために、カスタムフックを作成

以下は画面幅に応じてアイコンをスマホサイズと PC サイズに切り替えるカスタムフック。

import { useState, useEffect } from 'react';

const useResponsiveSize = (mobileSize: number, desktopSize: number) => {
  const [size, setSize] = useState(mobileSize);

  useEffect(() => {
    const handleResize = () => {
      // レスポンシブ対応
      setSize(window.innerWidth <= 600 ? mobileSize : desktopSize);
    };

    // 初期設定
    handleResize();

    // リサイズイベントをリッスン
    window.addEventListener('resize', handleResize);

    // クリーンアップ
    return () => window.removeEventListener('resize', handleResize);
  }, [mobileSize, desktopSize]);

  return size;
};

export default useResponsiveSize;

アイコンコンポーネント側でカスタムフックを呼び出す。

import useResponsiveSize from '@/hooks/useReponsiveSize';

export const AboutIcon = () => {
  // カスタムフックを呼び出す
  const size = useResponsiveSize(30, 40);

  return (
    <svg
      width={`${size}px`}
      height={`${size}px`}
      fill="#ebaf7a"
      stroke="#ebaf7a"
      strokeWidth="0.5"
      viewBox="-1 0 19 19"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M16.417 9.583A7.917 ・・・（省略）" />
    </svg>
  );
};

画像を貼り付けてみたが分かりづらい。

• PC サイズ

• スマホサイズ