[Refactor] 오버레이 컴포넌트 재설계

package.json

@@ -38,6 +38,7 @@
     "dayjs": "^1.11.11",
     "event-source-polyfill": "^1.0.31",
     "jotai": "^2.8.4",
+    "overlay-kit": "^1.8.4",
     "react": "^18.3.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",

src/app/App.tsx

@@ -15,6 +15,7 @@ const App = () => {
 			<div style={{ fontSize: '16px' }}>
 				<ReactQueryDevtools initialIsOpen={false} />
 			</div>
+
 			<Provider>
 				<RouterProvider router={router} />
 			</Provider>

src/app/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx

@@ -1,10 +1,11 @@
-import { ReactNode, useRef } from 'react';
+import { ReactNode } from 'react';
 
 import Dropdown from '@/shared/components/Dropdown/Dropdown';
 import FaviconImage from '@/shared/components/FaviconImage/FaviconImage';
-import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper/ModalWrapper';
 import Spacer from '@/shared/components/Spacer/Spacer';
 
+import { overlay } from '@/shared/utils/overlay';
+
 import { AllowedServiceGroupDetailSiteType } from '@/shared/types/allowedService';
 
 import MeatBallDefaultIcon from '@/shared/assets/svgs/common/ic_meatball_default.svg?react';
@@ -66,23 +67,38 @@ export const AllowedServiceGroupDetailContentTableRow = ({
 	activeGroupId,
 	...allowedSiteData
 }: AllowedServiceGroupDetailContentRootTableRowProps) => {
-	const domainAllowModalRef = useRef<ModalWrapperRef>(null);
-	const confirmDeleteModalRef = useRef<ModalWrapperRef>(null);
-
-	const handleOpenDomainAllowModal = () => {
-		domainAllowModalRef.current?.open();
-	};
-
-	const handleCloseDomainAllowModal = () => {
-		domainAllowModalRef.current?.close();
-	};
-
-	const handleOpenConfirmDeleteModal = () => {
-		confirmDeleteModalRef.current?.open();
+	const handleDomainAllowModal = () => {
+		overlay({
+			backdrop: true,
+			content: ({ close }) => (
+				<ModalContentsAlert.DomainAllowConfirm
+					siteName={allowedSiteData.siteName}
+					onConfirm={() => {
+						allowToMergeParentDomain.mutate({
+							allowedGroupId: activeGroupId,
+							siteUrl: allowedSiteData.siteUrl,
+						});
+						close();
+					}}
+					onCancel={close}
+				/>
+			),
+		});
 	};
 
-	const handleCloseConfirmDeleteModal = () => {
-		confirmDeleteModalRef.current?.close();
+	const handleConfirmDeleteModal = () => {
+		overlay({
+			backdrop: true,
+			content: ({ close }) => (
+				<ModalContentsAlert.ConfirmDelete
+					onClick={() => {
+						close();
+						onDeleteAllowedSite();
+					}}
+					pageName={allowedSiteData.pageName}
+				/>
+			),
+		});
 	};
 
 	const allowToMergeParentDomain = usePostMergeToParentDomain();
@@ -110,44 +126,18 @@ export const AllowedServiceGroupDetailContentTableRow = ({
 							<MeatBallDefaultIcon className="cursor-pointer hover:rounded-full hover:bg-gray-bg-05" />
 						</Dropdown.Trigger>
 						<Dropdown.Content className="absolute right-0 top-[2.4rem] w-[16.7rem]">
-							<Dropdown.Item label="상위 도메인 허용" onClick={handleOpenDomainAllowModal} />
+							<Dropdown.Item label="상위 도메인 허용" onClick={handleDomainAllowModal} />
 							<Dropdown.Item
 								label="허용 사이트 삭제"
 								textColor="red"
 								onClick={() => {
-									handleOpenConfirmDeleteModal();
+									handleConfirmDeleteModal();
 								}}
 							/>
 						</Dropdown.Content>
 					</Dropdown>
 				</div>
 			</div>
-			<ModalWrapper ref={domainAllowModalRef} backdrop>
-				{() => (
-					<ModalContentsAlert.DomainAllowConfirm
-						siteName={allowedSiteData.siteName}
-						onConfirm={() => {
-							allowToMergeParentDomain.mutate({
-								allowedGroupId: activeGroupId,
-								siteUrl: allowedSiteData.siteUrl,
-							});
-							handleCloseDomainAllowModal();
-						}}
-						onCancel={handleCloseDomainAllowModal}
-					/>
-				)}
-			</ModalWrapper>
-			<ModalWrapper ref={confirmDeleteModalRef} backdrop>
-				{() => (
-					<ModalContentsAlert.ConfirmDelete
-						onClick={() => {
-							handleCloseConfirmDeleteModal();
-							onDeleteAllowedSite();
-						}}
-						pageName={allowedSiteData.pageName}
-					/>
-				)}
-			</ModalWrapper>
 		</div>
 	);
 };

src/app/pages/AllowedServicePage/AllowedServicePage.tsx

@@ -4,13 +4,13 @@ import { useQueryClient } from '@tanstack/react-query';
 
 import AutoFixedGrid from '@/shared/components/AutoFixedGrid/AutoFixedGrid';
 import ModalContentsFriends from '@/shared/components/ModalContentsFriends/ModalContentsFriends';
-import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper/ModalWrapper';
 import NotificationPanel from '@/shared/components/NotificationPanel/NotificationPanel';
 import Spacer from '@/shared/components/Spacer/Spacer';
 import TextField from '@/shared/components/TextField/TextField';
 
 import useClickOutside from '@/shared/hooks/useClickOutside';
 
+import { overlay } from '@/shared/utils/overlay';
 import { isUrlValid } from '@/shared/utils/validation';
 
 import { ColorPaletteType } from '@/shared/types/allowedService';
@@ -49,10 +49,6 @@ const AllowedServicePage = () => {
 	const [isNotificationVisible, setIsNotificationVisible] = useState(false);
 
 	const queryClient = useQueryClient();
-
-	const friendsModalRef = useRef<ModalWrapperRef>(null);
-	const requireTitleModalRef = useRef<ModalWrapperRef>(null);
-
 	const bellIconRef = useRef<HTMLButtonElement>(null);
 	const notificationPanelRef = useRef<HTMLDivElement>(null);
 
@@ -173,7 +169,7 @@ const AllowedServicePage = () => {
 
 	const handleAddAllowedService = (urlInput: string, activeGroupId: number | null) => {
 		if (!activeGroupId) {
-			handleOpenRequireTitleModal();
+			handleRequireTitleModal();
 			return;
 		}
 		if (activeGroupId && !isPending) {
@@ -259,22 +255,24 @@ const AllowedServicePage = () => {
 		}
 	}, [allowedServiceGroupDetail, setTitleInput]);
 
-	const handleOpenFriendsModal = () => {
-		friendsModalRef.current?.open();
+	const handleFriendsModal = () => {
+		overlay({
+			backdrop: true,
+			content: ({ isOpen }) => <ModalContentsFriends isModalOpen={isOpen} />,
+		});
 	};
 
-	const handleOpenRequireTitleModal = () => {
-		requireTitleModalRef.current?.open();
-	};
-
-	const handleCloseRequireTitleModal = () => {
-		requireTitleModalRef.current?.close();
+	const handleRequireTitleModal = () => {
+		overlay({
+			backdrop: true,
+			content: ({ close }) => <ModalContentsAlert.RequireTitle onClick={close} />,
+		});
 	};
 
 	return (
 		<AutoFixedGrid type="allowedService" className="gap-[3rem] bg-gray-bg-01 px-[3.6rem] py-[4.2rem]">
 			<div className="absolute right-[4.2rem] top-[5.4rem] z-50 flex gap-[0.8rem]">
-				<button onClick={handleOpenFriendsModal}>
+				<button onClick={handleFriendsModal}>
 					<FriendSettingIcon className="rounded-[1.6rem] hover:bg-gray-bg-04 active:bg-gray-bg-05" />
 				</button>
 				<button ref={bellIconRef} onClick={toggleNotification}>
@@ -378,13 +376,6 @@ const AllowedServicePage = () => {
 					))}
 				</RecommendService>
 			</AutoFixedGrid.Slot>
-			<ModalWrapper ref={friendsModalRef} backdrop>
-				{({ isModalOpen }) => <ModalContentsFriends isModalOpen={isModalOpen} />}
-			</ModalWrapper>
-
-			<ModalWrapper ref={requireTitleModalRef} backdrop>
-				{() => <ModalContentsAlert.RequireTitle onClick={handleCloseRequireTitleModal} />}
-			</ModalWrapper>
 
 			{isNotificationVisible && <NotificationPanel ref={notificationPanelRef} />}
 		</AutoFixedGrid>

src/app/pages/HomePage/BoxTodayTodo/StatusAddBoxTodayTodo/StatusAddBoxTodayTodo.tsx

@@ -1,11 +1,11 @@
-import { useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import BoxTodo from '@/shared/components/BoxTodo/BoxTodo';
 import ButtonRadius5 from '@/shared/components/ButtonRadius5/ButtonRadius5';
-import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper/ModalWrapper';
 import Spacer from '@/shared/components/Spacer/Spacer';
 
+import { overlay } from '@/shared/utils/overlay';
+
 import type { TaskType } from '@/shared/types/tasks';
 
 import { LARGE_BTN_TEXT, SMALL_BTN_TEXT } from '@/shared/constants/btnText';
@@ -39,7 +39,6 @@ const StatusAddBoxTodayTodo = ({
 	addingTodayTodoStatus,
 }: StatusAddBoxTodayTodoProps) => {
 	const { data: allowedServiceList } = useGetPopoverAllowedServiceList();
-	const registerServiceModalRef = useRef<ModalWrapperRef>(null);
 	const navigate = useNavigate();
 
 	const allowedServicePath = ROUTES_CONFIG.allowedService.path;
@@ -58,12 +57,30 @@ const StatusAddBoxTodayTodo = ({
 
 	const handleStartTimer = () => {
 		if (allowedServiceList && allowedServiceList.data.length === 0) {
-			registerServiceModalRef.current?.open();
+			handleRegisterServiceModal();
 		} else {
 			onCreateTodayTodos();
 		}
 	};
 
+	const handleRegisterServiceModal = () => {
+		overlay({
+			backdrop: true,
+			content: ({ close }) => (
+				<RegisterAllowedService
+					onCloseModal={() => {
+						close();
+						onCreateTodayTodos();
+					}}
+					onConfirm={() => {
+						close();
+						navigate(allowedServicePath);
+					}}
+				/>
+			),
+		});
+	};
+
 	return (
 		<Spacer.Height className="flex flex-grow flex-col justify-between">
 			{hasTodayTodos ? (
@@ -124,21 +141,6 @@ const StatusAddBoxTodayTodo = ({
 					</ButtonRadius5.Sm>
 				</div>
 			</span>
-
-			<ModalWrapper ref={registerServiceModalRef} backdrop>
-				{() => (
-					<RegisterAllowedService
-						onCloseModal={() => {
-							registerServiceModalRef.current?.close();
-							onCreateTodayTodos();
-						}}
-						onConfirm={() => {
-							registerServiceModalRef.current?.close();
-							navigate(allowedServicePath);
-						}}
-					/>
-				)}
-			</ModalWrapper>
 		</Spacer.Height>
 	);
 };