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 { 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>
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
@ -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={{
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user