Update src/components/menu-bar/google-drive-save.jsx

src/components/menu-bar/google-drive-save.jsx

@@ -17,6 +17,7 @@ class GoogleDriveSave extends React.Component {
             isModalOpen: false,
             isLoading: false
         };
+        this.modalContentRef = React.createRef();
     }
 
     componentDidMount() {
@@ -30,7 +31,12 @@ class GoogleDriveSave extends React.Component {
     handleCloseModal = () => {
         this.setState({isModalOpen: false});
     };
-
+    handleOverlayClick = (e) => {
+        // モーダルコンテンツ内をクリックした場合は閉じない
+        if (this.modalContentRef.current && !this.modalContentRef.current.contains(e.target)) {
+            this.handleCloseModal();
+        }
+    };
     startGoogleLogin = () => {
         const CLIENT_ID = "1033286471224-n9mv8l869fqikubj2e8q92n8ige3qr6r.apps.googleusercontent.com";
         const REDIRECT_URI = "https://soiz1-s4s-upload.hf.space/close2";
@@ -94,7 +100,7 @@ class GoogleDriveSave extends React.Component {
         if (!this.state.isModalOpen) return null;
 
         return (
-            <div className={styles.modalOverlay}>
+            <div className={styles.modalOverlay} onClick={this.handleOverlayClick}>
                 <div className={styles.modalContent}>
                     <div className={styles.modalHeader}>
                         <h2>Googleドライブに保存</h2>