From 7b1e6917159d309cd074aff43a4ebb7701dd166b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=84=B1=EA=B2=BD?= <skkim@o2o.kr>
Date: Tue, 11 Aug 2026 14:57:33 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=98=A4=EB=B2=84=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=20=EB=8B=AB=EA=B8=B0=20=EB=8F=99=EC=9E=91=EC=9D=84=20?=
 =?UTF-8?q?useOverlayClose=20=EB=A1=9C=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BusinessNameInputModal.tsx | 4 +++-
 src/components/CitySelectModal.tsx        | 5 ++++-
 src/components/LoginPromptModal.tsx       | 4 +++-
 3 files changed, 10 insertions(+), 3 deletions(-)

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={{