refactor: 오버레이 닫기 동작을 useOverlayClose 로 통일

This commit is contained in:
김성경 2026-08-11 14:57:33 +09:00
parent 54e5d14127
commit 7b1e691715
3 changed files with 10 additions and 3 deletions

View File

@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import CitySelectModal, { REGIONS } from './CitySelectModal'; import CitySelectModal, { REGIONS } from './CitySelectModal';
import { useOverlayClose } from '../hooks/useOverlayClose';
interface BusinessNameInputModalProps { interface BusinessNameInputModalProps {
onClose: () => void; onClose: () => void;
@ -15,6 +16,7 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
const [detailAddress, setDetailAddress] = useState(''); const [detailAddress, setDetailAddress] = useState('');
const [category, setCategory] = useState(''); const [category, setCategory] = useState('');
const [isCityModalOpen, setIsCityModalOpen] = useState(false); const [isCityModalOpen, setIsCityModalOpen] = useState(false);
const overlayCloseHandlers = useOverlayClose(onClose);
useEffect(() => { useEffect(() => {
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
@ -55,7 +57,7 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
return createPortal( 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" onClick={e => e.stopPropagation()}>
<div className="manual-modal-header"> <div className="manual-modal-header">
<span className="manual-modal-title">{t('landing.hero.manualModalTitle')}</span> <span className="manual-modal-title">{t('landing.hero.manualModalTitle')}</span>

View File

@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useOverlayClose } from '../hooks/useOverlayClose';
export const REGIONS: { label: string; cities: string[] }[] = [ export const REGIONS: { label: string; cities: string[] }[] = [
{ {
@ -96,8 +97,10 @@ const CitySelectModal: React.FC<CitySelectModalProps> = ({ selected, onSelect, o
onClose(); onClose();
}; };
const overlayCloseHandlers = useOverlayClose(onClose);
return ( 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" onClick={e => e.stopPropagation()}>
<div className="city-modal-header"> <div className="city-modal-header">
<span className="city-modal-title"> <span className="city-modal-title">

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { getKakaoLoginUrl } from '../utils/api'; import { getKakaoLoginUrl } from '../utils/api';
import { useOverlayClose } from '../hooks/useOverlayClose';
interface LoginPromptModalProps { interface LoginPromptModalProps {
onClose: () => void; onClose: () => void;
@ -8,6 +9,7 @@ interface LoginPromptModalProps {
const LoginPromptModal: React.FC<LoginPromptModalProps> = ({ onClose }) => { const LoginPromptModal: React.FC<LoginPromptModalProps> = ({ onClose }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const overlayCloseHandlers = useOverlayClose(onClose);
const handleLogin = async () => { const handleLogin = async () => {
try { try {
@ -30,7 +32,7 @@ const LoginPromptModal: React.FC<LoginPromptModalProps> = ({ onClose }) => {
justifyContent: 'center', justifyContent: 'center',
zIndex: 9999, zIndex: 9999,
}} }}
onClick={onClose} {...overlayCloseHandlers}
> >
<div <div
style={{ style={{