[新規]メニューと、ロケーション検索～選択ロジック作成

inert 有効化判定

メニューを開いた時、天気トップ表示（PC サイズだと左側の領域）は単純に inert 有効化でいいのだが...。天気詳細表示（PC サイズだと右側の領域）は、モバイルサイズの時だけ inert を有効化したいという特殊な状況。

悩んだ結果、メニュー・ロケーション検索管理用カスタムフックに以下の処理を追加した

メニューが開いている & モバイルサイズの時だけ inert およびスクロール制御をつける
上記の処理を、メニュー開閉時と画面リサイズ時に実行するようにする（リサイズ検知でもやっておかないと、メニューを開いた後にリサイズされたときに想定の動作にならない）
```
const [open, setOpen] = useState<boolean>(false);
const [inertFlg, setInertFlg] = useState<boolean>(false);
```

// モバイルサイズの時だけ inert を有効化したい部分があるので、その判定 const inertCheck = useCallback(() => { if (open && window.innerWidth < breakPoint.md) { document.body.style.overflowY = 'hidden'; setInertFlg(true); return; } document.body.style.overflowY = ''; setInertFlg(false); }, [open]);

// メニュー開閉時と画面リサイズ時に inert 判定をするように useEffect(() => { window.addEventListener('resize', inertCheck); inertCheck(); }, [open, inertCheck]);



あとは、カスタムフック呼び出し側で
- 天気トップ表示部分：open で inert 付与分岐
- 天気詳細表示部分：inertFlg で inert 付与分岐

h-yoshikawa44 / ch-weather-app

[新規]メニューと、ロケーション検索～選択ロジック作成 #7

作業内容

inert 有効化判定