diff --git a/src/components/BusinessNameInputModal.tsx b/src/components/BusinessNameInputModal.tsx
index 22f844a..c9fca7c 100644
--- a/src/components/BusinessNameInputModal.tsx
+++ b/src/components/BusinessNameInputModal.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import CitySelectModal, { REGIONS } from './CitySelectModal';
+import { useOverlayClose } from '../hooks/useOverlayClose';
 
 interface BusinessNameInputModalProps {
   onClose: () => void;
@@ -15,6 +16,7 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
   const [detailAddress, setDetailAddress] = useState('');
   const [category, setCategory] = useState('');
   const [isCityModalOpen, setIsCityModalOpen] = useState(false);
+  const overlayCloseHandlers = useOverlayClose(onClose);
 
   useEffect(() => {
     document.body.style.overflow = 'hidden';
@@ -55,7 +57,7 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
 
   return createPortal(
     <>
-      <div className="manual-modal-backdrop" onClick={onClose}>
+      <div className="manual-modal-backdrop" {...overlayCloseHandlers}>
         <div className="manual-modal" onClick={e => e.stopPropagation()}>
           <div className="manual-modal-header">
             <span className="manual-modal-title">{t('landing.hero.manualModalTitle')}</span>
diff --git a/src/components/CitySelectModal.tsx b/src/components/CitySelectModal.tsx
index 2592264..24a47ba 100644
--- a/src/components/CitySelectModal.tsx
+++ b/src/components/CitySelectModal.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useOverlayClose } from '../hooks/useOverlayClose';
 
 export const REGIONS: { label: string; cities: string[] }[] = [
   {
@@ -96,8 +97,10 @@ const CitySelectModal: React.FC<CitySelectModalProps> = ({ selected, onSelect, o
     onClose();
   };
 
+  const overlayCloseHandlers = useOverlayClose(onClose);
+
   return (
-    <div className="city-modal-backdrop" onClick={onClose}>
+    <div className="city-modal-backdrop" {...overlayCloseHandlers}>
       <div className="city-modal" onClick={e => e.stopPropagation()}>
         <div className="city-modal-header">
           <span className="city-modal-title">
diff --git a/src/components/LoginPromptModal.tsx b/src/components/LoginPromptModal.tsx
index beb2eb9..6fe87e8 100644
--- a/src/components/LoginPromptModal.tsx
+++ b/src/components/LoginPromptModal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { getKakaoLoginUrl } from '../utils/api';
+import { useOverlayClose } from '../hooks/useOverlayClose';
 
 interface LoginPromptModalProps {
   onClose: () => void;
@@ -8,6 +9,7 @@ interface LoginPromptModalProps {
 
 const LoginPromptModal: React.FC<LoginPromptModalProps> = ({ onClose }) => {
   const { t } = useTranslation();
+  const overlayCloseHandlers = useOverlayClose(onClose);
 
   const handleLogin = async () => {
     try {
@@ -30,7 +32,7 @@ const LoginPromptModal: React.FC<LoginPromptModalProps> = ({ onClose }) => {
         justifyContent: 'center',
         zIndex: 9999,
       }}
-      onClick={onClose}
+      {...overlayCloseHandlers}
     >
       <div
         style={{