refactor: 오버레이 닫기 동작을 useOverlayClose 로 통일
This commit is contained in:
parent
54e5d14127
commit
7b1e691715
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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={{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user