style: add scroll lock in modals

src/components/modal/modal.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { IoClose } from 'react-icons/io5/index';
 
@@ -8,17 +9,32 @@ import styles from './modal.module.css';
 
 interface ModalProps {
   children: React.ReactNode;
+  lockBody?: boolean;
   onClose: () => void;
   show: boolean;
   wide?: boolean;
 }
 
-export function Modal({ children, onClose, show, wide }: ModalProps) {
+export function Modal({
+  children,
+  lockBody = true,
+  onClose,
+  show,
+  wide,
+}: ModalProps) {
   const variants = {
     modal: mix(fade(), slideY(20)),
     overlay: fade(),
   };
 
+  useEffect(() => {
+    if (show && lockBody) {
+      document.body.style.overflow = 'hidden';
+    } else if (lockBody) {
+      document.body.style.overflow = 'auto';
+    }
+  }, [show, lockBody]);
+
   return (
     <AnimatePresence>
       {show && (

src/components/toolbox/pomodoro/setting/setting.tsx

@@ -27,7 +27,7 @@ export function Setting({ onChange, onClose, show, times }: SettingProps) {
   };
 
   return (
-    <Modal show={show} onClose={onClose}>
+    <Modal lockBody={false} show={show} onClose={onClose}>
       <h2 className={styles.title}>Change Times</h2>
 
       <form className={styles.form} onSubmit={handleSubmit}>