From 116739d3c1eac1c632716e40cae4cb03d3c06997 Mon Sep 17 00:00:00 2001 From: ivoryeee Date: Tue, 22 Jul 2025 16:36:12 +0900 Subject: [PATCH 1/7] =?UTF-8?q?chore:=20=EC=98=A4=EB=B2=84=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=20=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20(#323)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 14 ++++++++++++++ 2 files changed, 15 insertions(+) diff --git a/package.json b/package.json index 8f6360b3..be22fe78 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f6278e4f..2cea45cf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,6 +35,9 @@ importers: jotai: specifier: ^2.8.4 version: 2.8.4(@types/react@18.3.3)(react@18.3.1) + overlay-kit: + specifier: ^1.8.4 + version: 1.8.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -2616,6 +2619,12 @@ packages: outvariant@1.4.3: resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==} + overlay-kit@1.8.4: + resolution: {integrity: sha512-CqFrMWStiLDqW6jr8Zj9O/n8eSBAnrHe2w6M77cFiEn724xmigk56sPcYtQXCYDcbvwV47oJjoKQQvfutL5yFw==} + peerDependencies: + react: ^16.8 || ^17 || ^18 || ^19 + react-dom: ^16.8 || ^17 || ^18 || ^19 + p-cancelable@2.1.1: resolution: {integrity: sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==} engines: {node: '>=8'} @@ -6372,6 +6381,11 @@ snapshots: outvariant@1.4.3: {} + overlay-kit@1.8.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + p-cancelable@2.1.1: {} p-limit@3.1.0: From ebc33b6d878ef85aec5bddd8a1951e9169349de4 Mon Sep 17 00:00:00 2001 From: ivoryeee Date: Sat, 26 Jul 2025 16:05:35 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20root=20=EA=B3=84=EC=B8=B5=EC=97=90?= =?UTF-8?q?=20OverlayProvider=20=EC=B6=94=EA=B0=80=20(#323)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/App.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/App.tsx b/src/app/App.tsx index 019d04f3..449ff4ef 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -1,4 +1,5 @@ import { Provider } from 'jotai'; +import { OverlayProvider } from 'overlay-kit'; import { RouterProvider } from 'react-router-dom'; @@ -15,9 +16,11 @@ const App = () => {
- - - + + + + + ); }; From 57303c80e2576ed44d15ad2b36fed243864e2f5a Mon Sep 17 00:00:00 2001 From: ivoryeee Date: Sat, 26 Jul 2025 17:31:04 +0900 Subject: [PATCH 3/7] =?UTF-8?q?refactor:=20ModalWrapper=EB=A5=BC=20?= =?UTF-8?q?=EB=B2=94=EC=9A=A9=20=EC=98=A4=EB=B2=84=EB=A0=88=EC=9D=B4=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=EB=A1=9C=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0=20(#323)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ModalWrapper/ModalWrapper.tsx | 63 ------------------- .../components/ModalWrapper/styles/dialog.css | 7 --- src/app/shared/components/Overlay/Overlay.tsx | 23 +++++++ 3 files changed, 23 insertions(+), 70 deletions(-) delete mode 100644 src/app/shared/components/ModalWrapper/ModalWrapper.tsx delete mode 100644 src/app/shared/components/ModalWrapper/styles/dialog.css create mode 100644 src/app/shared/components/Overlay/Overlay.tsx diff --git a/src/app/shared/components/ModalWrapper/ModalWrapper.tsx b/src/app/shared/components/ModalWrapper/ModalWrapper.tsx deleted file mode 100644 index c6e13194..00000000 --- a/src/app/shared/components/ModalWrapper/ModalWrapper.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { MouseEvent, ReactNode, forwardRef, useImperativeHandle, useRef, useState } from 'react'; -import { createPortal } from 'react-dom'; - -import './styles/dialog.css'; - -interface ModalWrapperProps { - children: (props: { isModalOpen: boolean }) => ReactNode; - backdrop?: boolean; -} - -export interface ModalWrapperRef { - open: () => void; - close: () => void; -} - -const ModalWrapper = forwardRef(function Modal( - { children, backdrop = false }, - ref, -) { - const [isModalOpen, setIsModalOpen] = useState(false); - const dialog = useRef(null); - - useImperativeHandle(ref, () => ({ - open() { - dialog.current?.showModal(); - setIsModalOpen(true); - }, - close() { - dialog.current?.close(); - setIsModalOpen(false); - }, - })); - const modalElement = document.getElementById('modal'); - - const handleClick = (e: MouseEvent) => { - if (e.target === dialog.current) { - dialog.current?.close(); - setIsModalOpen(false); - } - }; - - if (!modalElement) { - return null; - } - - const content = - typeof children === 'function' - ? (children as (props: { isModalOpen: boolean }) => ReactNode)({ isModalOpen }) - : children; - - return createPortal( - - {content} - , - modalElement, - ); -}); - -export default ModalWrapper; diff --git a/src/app/shared/components/ModalWrapper/styles/dialog.css b/src/app/shared/components/ModalWrapper/styles/dialog.css deleted file mode 100644 index 3fa0f22a..00000000 --- a/src/app/shared/components/ModalWrapper/styles/dialog.css +++ /dev/null @@ -1,7 +0,0 @@ -.custom-dialog::backdrop { - background-color: rgba(0, 0, 0, 0.7); - } - -.custom-dialog:not(.with-backdrop)::backdrop { - background-color: transparent; -} \ No newline at end of file diff --git a/src/app/shared/components/Overlay/Overlay.tsx b/src/app/shared/components/Overlay/Overlay.tsx new file mode 100644 index 00000000..f94a1399 --- /dev/null +++ b/src/app/shared/components/Overlay/Overlay.tsx @@ -0,0 +1,23 @@ +import { overlay } from 'overlay-kit'; + +import { ReactNode } from 'react'; + +interface OverlayProps { + backdrop?: boolean; + content: (props: { isOpen: boolean; close: () => void }) => ReactNode; +} + +export const Overlay = ({ content, backdrop = true }: OverlayProps) => { + overlay.open(({ isOpen, close }) => + isOpen ? ( +
+
e.stopPropagation()}>{content({ isOpen, close })}
+
+ ) : null, + ); +}; From f8d72c5302dfcf40f9930cbdf4defa6521bc2192 Mon Sep 17 00:00:00 2001 From: ivoryeee Date: Sat, 26 Jul 2025 17:31:27 +0900 Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20ModalWrapper=20->=20Overlay=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20(#323)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AllowedServiceGroupDetailContent.tsx | 79 ++++++++----------- .../AllowedServicePage/AllowedServicePage.tsx | 35 +++----- .../StatusAddBoxTodayTodo.tsx | 39 ++++----- src/app/pages/HomePage/HomePage.tsx | 50 +++++------- src/app/pages/TimerPage/Carousel/Carousel.tsx | 15 ++-- .../AccountContent/AccountContent.tsx | 58 ++++++-------- src/app/shared/layout/Sidebar/Sidebar.tsx | 20 +++-- 7 files changed, 126 insertions(+), 170 deletions(-) diff --git a/src/app/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx b/src/app/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx index 0c7a4dac..3e6f8730 100644 --- a/src/app/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx +++ b/src/app/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx @@ -1,8 +1,8 @@ -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 { Overlay } from '@/shared/components/Overlay/Overlay'; import Spacer from '@/shared/components/Spacer/Spacer'; import { AllowedServiceGroupDetailSiteType } from '@/shared/types/allowedService'; @@ -66,23 +66,38 @@ export const AllowedServiceGroupDetailContentTableRow = ({ activeGroupId, ...allowedSiteData }: AllowedServiceGroupDetailContentRootTableRowProps) => { - const domainAllowModalRef = useRef(null); - const confirmDeleteModalRef = useRef(null); - - const handleOpenDomainAllowModal = () => { - domainAllowModalRef.current?.open(); - }; - - const handleCloseDomainAllowModal = () => { - domainAllowModalRef.current?.close(); - }; - - const handleOpenConfirmDeleteModal = () => { - confirmDeleteModalRef.current?.open(); + const handleDomainAllowModal = () => { + Overlay({ + backdrop: true, + content: ({ close }) => ( + { + allowToMergeParentDomain.mutate({ + allowedGroupId: activeGroupId, + siteUrl: allowedSiteData.siteUrl, + }); + close(); + }} + onCancel={close} + /> + ), + }); }; - const handleCloseConfirmDeleteModal = () => { - confirmDeleteModalRef.current?.close(); + const handleConfirmDeleteModal = () => { + Overlay({ + backdrop: true, + content: ({ close }) => ( + { + close(); + onDeleteAllowedSite(); + }} + pageName={allowedSiteData.pageName} + /> + ), + }); }; const allowToMergeParentDomain = usePostMergeToParentDomain(); @@ -110,44 +125,18 @@ export const AllowedServiceGroupDetailContentTableRow = ({ - + { - handleOpenConfirmDeleteModal(); + handleConfirmDeleteModal(); }} /> - - {() => ( - { - allowToMergeParentDomain.mutate({ - allowedGroupId: activeGroupId, - siteUrl: allowedSiteData.siteUrl, - }); - handleCloseDomainAllowModal(); - }} - onCancel={handleCloseDomainAllowModal} - /> - )} - - - {() => ( - { - handleCloseConfirmDeleteModal(); - onDeleteAllowedSite(); - }} - pageName={allowedSiteData.pageName} - /> - )} - ); }; diff --git a/src/app/pages/AllowedServicePage/AllowedServicePage.tsx b/src/app/pages/AllowedServicePage/AllowedServicePage.tsx index 6633a14f..4c297873 100644 --- a/src/app/pages/AllowedServicePage/AllowedServicePage.tsx +++ b/src/app/pages/AllowedServicePage/AllowedServicePage.tsx @@ -4,8 +4,8 @@ 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 { Overlay } from '@/shared/components/Overlay/Overlay'; import Spacer from '@/shared/components/Spacer/Spacer'; import TextField from '@/shared/components/TextField/TextField'; @@ -49,10 +49,6 @@ const AllowedServicePage = () => { const [isNotificationVisible, setIsNotificationVisible] = useState(false); const queryClient = useQueryClient(); - - const friendsModalRef = useRef(null); - const requireTitleModalRef = useRef(null); - const bellIconRef = useRef(null); const notificationPanelRef = useRef(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 }) => , + }); }; - const handleOpenRequireTitleModal = () => { - requireTitleModalRef.current?.open(); - }; - - const handleCloseRequireTitleModal = () => { - requireTitleModalRef.current?.close(); + const handleRequireTitleModal = () => { + Overlay({ + backdrop: true, + content: ({ close }) => , + }); }; return (
-
- - - {() => ( - { - registerServiceModalRef.current?.close(); - onCreateTodayTodos(); - }} - onConfirm={() => { - registerServiceModalRef.current?.close(); - navigate(allowedServicePath); - }} - /> - )} - ); }; diff --git a/src/app/pages/HomePage/HomePage.tsx b/src/app/pages/HomePage/HomePage.tsx index 5fe3f6a1..b9271f63 100644 --- a/src/app/pages/HomePage/HomePage.tsx +++ b/src/app/pages/HomePage/HomePage.tsx @@ -7,8 +7,8 @@ import { useLocation, useNavigate } from 'react-router-dom'; 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 { Overlay } from '@/shared/components/Overlay/Overlay'; import Spacer from '@/shared/components/Spacer/Spacer'; import useClickOutside from '@/shared/hooks/useClickOutside'; @@ -60,11 +60,8 @@ const HomePage = () => { const categoryRef = useRef(null); const boxAddCategoryRef = useRef(null); - const friendsModalRef = useRef(null); const notificationPanelRef = useRef(null); const bellIconRef = useRef(null); - const timerRestrictionModalRef = useRef(null); - const timerErrorModalRef = useRef(null); const [isNotificationVisible, setIsNotificationVisible] = useState(false); @@ -161,12 +158,25 @@ const HomePage = () => { ); }; - const handleCloseTimerErrorModal = () => { - timerErrorModalRef.current?.close(); + const handleFriendsModal = () => { + Overlay({ + backdrop: true, + content: ({ isOpen }) => , + }); }; - const handleOpenFriendsModal = () => { - friendsModalRef.current?.open(); + const handleTimerErrorModal = () => { + Overlay({ + backdrop: true, + content: ({ close }) => , + }); + }; + + const handleTimerRestrictionModal = () => { + Overlay({ + backdrop: true, + content: ({ close }) => , + }); }; const toggleNotification = () => { @@ -204,7 +214,7 @@ const HomePage = () => { const handleSelectedDateChange = (date: Dayjs) => { if (addingTodayTodoStatus && !todayDate.isSame(date, 'day')) { - timerRestrictionModalRef.current?.open(); + handleTimerRestrictionModal(); return; } setSelectedDate(date); @@ -262,7 +272,7 @@ const HomePage = () => { useEffect(() => { if (isTimerError) { - timerErrorModalRef.current?.open(); + handleTimerErrorModal(); } }, [isTimerError]); @@ -360,7 +370,7 @@ const HomePage = () => {
-
- - {({ isModalOpen }) => } - ); }; diff --git a/src/app/shared/layout/Sidebar/ModalContentsSetting/AccountContent/AccountContent.tsx b/src/app/shared/layout/Sidebar/ModalContentsSetting/AccountContent/AccountContent.tsx index 970db44b..f7960827 100644 --- a/src/app/shared/layout/Sidebar/ModalContentsSetting/AccountContent/AccountContent.tsx +++ b/src/app/shared/layout/Sidebar/ModalContentsSetting/AccountContent/AccountContent.tsx @@ -1,8 +1,8 @@ -import React, { useRef, useState } from 'react'; +import React, { useState } from 'react'; import ButtonRadius8 from '@/shared/components/ButtonRadius8/ButtonRadius8'; import ButtonStatusToggle from '@/shared/components/ButtonStatusToggle/ButtonStatusToggle'; -import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper/ModalWrapper'; +import { Overlay } from '@/shared/components/Overlay/Overlay'; import { reloginWithoutLogout } from '@/shared/utils/auth'; @@ -17,8 +17,6 @@ import { useDeleteAccount, usePutChangeProfile } from '@/shared/apisV2/setting/s type AccountContentProps = UserProfileType; const AccountContent = ({ ...props }: AccountContentProps) => { - const logoutModalRef = useRef(null); - const deleteAccountModalRef = useRef(null); const { mutate: changeProfile } = usePutChangeProfile(); const { mutate: deleteAccount } = useDeleteAccount(); @@ -35,20 +33,26 @@ const AccountContent = ({ ...props }: AccountContentProps) => { changeProfile({ name: userName, imageUrl: props.imageUrl, isPushEnabled: isToggleOn }); }; - const handleCloseLogoutModal = () => { - logoutModalRef.current?.close(); + const handleLogoutModal = () => { + Overlay({ + backdrop: true, + content: ({ close }) => ( + + ), + }); }; - const handleCloseDeleteAccountModal = () => { - deleteAccountModalRef.current?.close(); - }; - - const handleOpenLogoutModal = () => { - logoutModalRef.current?.open(); - }; - - const handleOpenDeleteAccountModal = () => { - deleteAccountModalRef.current?.open(); + const handleDeleteAccounttModal = () => { + Overlay({ + backdrop: true, + content: ({ close }) => ( + + ), + }); }; const handleDeleteAccount = () => { @@ -92,7 +96,7 @@ const AccountContent = ({ ...props }: AccountContentProps) => {

모든 기기에서 로그아웃

본 기기를 포함한 모든 기기에서 로그아웃합니다.

- @@ -104,7 +108,7 @@ const AccountContent = ({ ...props }: AccountContentProps) => { 계정을 영구적으로 삭제하고 모든 워크스페이스에서 액세스 권한을 제거합니다.

- @@ -119,24 +123,6 @@ const AccountContent = ({ ...props }: AccountContentProps) => { 변경사항 저장 - - {(_) => ( - - )} - - - {(_) => ( - - )} - ); }; diff --git a/src/app/shared/layout/Sidebar/Sidebar.tsx b/src/app/shared/layout/Sidebar/Sidebar.tsx index c89cc5d4..f22c1c61 100644 --- a/src/app/shared/layout/Sidebar/Sidebar.tsx +++ b/src/app/shared/layout/Sidebar/Sidebar.tsx @@ -1,7 +1,6 @@ -import { useRef } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; -import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper/ModalWrapper'; +import { Overlay } from '@/shared/components/Overlay/Overlay'; import { getActivePath } from '@/shared/utils/path'; @@ -14,16 +13,11 @@ import { ROUTES_CONFIG } from '@/router/routesConfig'; import ModalContentsSetting from './ModalContentsSetting/ModalContentsSetting'; const Sidebar = () => { - const modalRef = useRef(null); const navigate = useNavigate(); const location = useLocation(); const pathName = getActivePath(location.pathname); - const openSettings = () => { - modalRef.current?.open(); - }; - const navigateHome = () => { navigate(ROUTES_CONFIG.home.path); }; @@ -32,6 +26,13 @@ const Sidebar = () => { navigate(ROUTES_CONFIG.allowedService.path); }; + const handleSettingModal = () => { + Overlay({ + backdrop: true, + content: ({ isOpen }) => , + }); + }; + return ( <> - - {({ isModalOpen }) => } - ); }; From 7aac5b1378f7be461b645f739d28007573581346 Mon Sep 17 00:00:00 2001 From: 10tentacion Date: Sat, 2 Aug 2025 10:12:13 +0900 Subject: [PATCH 5/7] =?UTF-8?q?refactor:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20open=20=ED=95=98=EB=8A=94=20=EC=97=AD?= =?UTF-8?q?=ED=95=A0=EC=9D=84=20=ED=95=98=EB=8A=94=20overlay=EB=A5=BC=20ut?= =?UTF-8?q?il=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{components/Overlay/Overlay.tsx => utils/overlay.tsx} | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) rename src/app/shared/{components/Overlay/Overlay.tsx => utils/overlay.tsx} (74%) diff --git a/src/app/shared/components/Overlay/Overlay.tsx b/src/app/shared/utils/overlay.tsx similarity index 74% rename from src/app/shared/components/Overlay/Overlay.tsx rename to src/app/shared/utils/overlay.tsx index f94a1399..5084f3a5 100644 --- a/src/app/shared/components/Overlay/Overlay.tsx +++ b/src/app/shared/utils/overlay.tsx @@ -1,4 +1,4 @@ -import { overlay } from 'overlay-kit'; +import { overlay as overlayKit } from 'overlay-kit'; import { ReactNode } from 'react'; @@ -7,8 +7,8 @@ interface OverlayProps { content: (props: { isOpen: boolean; close: () => void }) => ReactNode; } -export const Overlay = ({ content, backdrop = true }: OverlayProps) => { - overlay.open(({ isOpen, close }) => +export const overlay = ({ content, backdrop = true }: OverlayProps) => { + overlayKit.open(({ isOpen, close }) => isOpen ? (
Date: Sat, 2 Aug 2025 10:12:53 +0900 Subject: [PATCH 6/7] =?UTF-8?q?feat:=20overlay=20=EC=9C=A0=ED=8B=B8?= =?UTF-8?q?=ED=95=A8=EC=88=98=EB=AA=85=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Content/AllowedServiceGroupDetailContent.tsx | 7 ++++--- src/app/pages/AllowedServicePage/AllowedServicePage.tsx | 6 +++--- .../StatusAddBoxTodayTodo/StatusAddBoxTodayTodo.tsx | 5 +++-- src/app/pages/HomePage/HomePage.tsx | 8 ++++---- src/app/pages/TimerPage/Carousel/Carousel.tsx | 5 +++-- .../AccountContent/AccountContent.tsx | 6 +++--- src/app/shared/layout/Sidebar/Sidebar.tsx | 5 ++--- 7 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/app/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx b/src/app/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx index 3e6f8730..84556948 100644 --- a/src/app/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx +++ b/src/app/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx @@ -2,9 +2,10 @@ import { ReactNode } from 'react'; import Dropdown from '@/shared/components/Dropdown/Dropdown'; import FaviconImage from '@/shared/components/FaviconImage/FaviconImage'; -import { Overlay } from '@/shared/components/Overlay/Overlay'; 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'; @@ -67,7 +68,7 @@ export const AllowedServiceGroupDetailContentTableRow = ({ ...allowedSiteData }: AllowedServiceGroupDetailContentRootTableRowProps) => { const handleDomainAllowModal = () => { - Overlay({ + overlay({ backdrop: true, content: ({ close }) => ( { - Overlay({ + overlay({ backdrop: true, content: ({ close }) => ( { }, [allowedServiceGroupDetail, setTitleInput]); const handleFriendsModal = () => { - Overlay({ + overlay({ backdrop: true, content: ({ isOpen }) => , }); }; const handleRequireTitleModal = () => { - Overlay({ + overlay({ backdrop: true, content: ({ close }) => , }); diff --git a/src/app/pages/HomePage/BoxTodayTodo/StatusAddBoxTodayTodo/StatusAddBoxTodayTodo.tsx b/src/app/pages/HomePage/BoxTodayTodo/StatusAddBoxTodayTodo/StatusAddBoxTodayTodo.tsx index 4efdb7b9..4f9bec8d 100644 --- a/src/app/pages/HomePage/BoxTodayTodo/StatusAddBoxTodayTodo/StatusAddBoxTodayTodo.tsx +++ b/src/app/pages/HomePage/BoxTodayTodo/StatusAddBoxTodayTodo/StatusAddBoxTodayTodo.tsx @@ -2,9 +2,10 @@ import { useNavigate } from 'react-router-dom'; import BoxTodo from '@/shared/components/BoxTodo/BoxTodo'; import ButtonRadius5 from '@/shared/components/ButtonRadius5/ButtonRadius5'; -import { Overlay } from '@/shared/components/Overlay/Overlay'; 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'; @@ -63,7 +64,7 @@ const StatusAddBoxTodayTodo = ({ }; const handleRegisterServiceModal = () => { - Overlay({ + overlay({ backdrop: true, content: ({ close }) => ( { }; const handleFriendsModal = () => { - Overlay({ + overlay({ backdrop: true, content: ({ isOpen }) => , }); }; const handleTimerErrorModal = () => { - Overlay({ + overlay({ backdrop: true, content: ({ close }) => , }); }; const handleTimerRestrictionModal = () => { - Overlay({ + overlay({ backdrop: true, content: ({ close }) => , }); diff --git a/src/app/pages/TimerPage/Carousel/Carousel.tsx b/src/app/pages/TimerPage/Carousel/Carousel.tsx index 012b7aeb..bfc376bb 100644 --- a/src/app/pages/TimerPage/Carousel/Carousel.tsx +++ b/src/app/pages/TimerPage/Carousel/Carousel.tsx @@ -3,10 +3,11 @@ import { useRef } from 'react'; import ButtonArrowSVG from '@/shared/components/ButtonArrowSVG/ButtonArrowSVG'; import ButtonRadius8 from '@/shared/components/ButtonRadius8/ButtonRadius8'; import ModalContentsFriends from '@/shared/components/ModalContentsFriends/ModalContentsFriends'; -import { Overlay } from '@/shared/components/Overlay/Overlay'; import useCarousel from '@/shared/hooks/useCarousel'; +import { overlay } from '@/shared/utils/overlay'; + import { Direction } from '@/shared/types/global'; import { useGetTimerFriends } from '@/shared/apisV2/timer/timer.queries'; @@ -24,7 +25,7 @@ const Carousel = () => { const { handleNext, handlePrev } = useCarousel({ carouselRef }); const handleFriendsModal = () => { - Overlay({ + overlay({ backdrop: true, content: ({ isOpen }) => , }); diff --git a/src/app/shared/layout/Sidebar/ModalContentsSetting/AccountContent/AccountContent.tsx b/src/app/shared/layout/Sidebar/ModalContentsSetting/AccountContent/AccountContent.tsx index f7960827..00b0020a 100644 --- a/src/app/shared/layout/Sidebar/ModalContentsSetting/AccountContent/AccountContent.tsx +++ b/src/app/shared/layout/Sidebar/ModalContentsSetting/AccountContent/AccountContent.tsx @@ -2,9 +2,9 @@ import React, { useState } from 'react'; import ButtonRadius8 from '@/shared/components/ButtonRadius8/ButtonRadius8'; import ButtonStatusToggle from '@/shared/components/ButtonStatusToggle/ButtonStatusToggle'; -import { Overlay } from '@/shared/components/Overlay/Overlay'; import { reloginWithoutLogout } from '@/shared/utils/auth'; +import { overlay } from '@/shared/utils/overlay'; import { UserProfileType } from '@/shared/types/profile'; @@ -34,7 +34,7 @@ const AccountContent = ({ ...props }: AccountContentProps) => { }; const handleLogoutModal = () => { - Overlay({ + overlay({ backdrop: true, content: ({ close }) => ( @@ -43,7 +43,7 @@ const AccountContent = ({ ...props }: AccountContentProps) => { }; const handleDeleteAccounttModal = () => { - Overlay({ + overlay({ backdrop: true, content: ({ close }) => ( { }; const handleSettingModal = () => { - Overlay({ + overlay({ backdrop: true, content: ({ isOpen }) => , }); From b97bea04912146e4d6a6cf5fdab34c6f5b600339 Mon Sep 17 00:00:00 2001 From: 10tentacion Date: Sat, 2 Aug 2025 10:32:08 +0900 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=EB=A6=AC=EC=95=A1=ED=8A=B8=20?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=84=B0=20API=EB=A5=BC=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20=EB=A6=AC=EC=95=A1?= =?UTF-8?q?=ED=8A=B8=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20=EC=BB=A8=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=82=B4=EC=97=90=EC=84=9C=20=EC=8B=A4?= =?UTF-8?q?=ED=96=89=EB=90=98=EC=96=B4=EC=95=BC=20=ED=95=98=EA=B8=B0=20?= =?UTF-8?q?=EB=95=8C=EB=AC=B8=EC=97=90=20Provider=20=EC=9C=84=EC=B9=98=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/App.tsx | 10 ++- src/app/router/Router.tsx | 126 +++++++++++++++++++++----------------- 2 files changed, 73 insertions(+), 63 deletions(-) diff --git a/src/app/App.tsx b/src/app/App.tsx index 449ff4ef..49b688cc 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -1,5 +1,4 @@ import { Provider } from 'jotai'; -import { OverlayProvider } from 'overlay-kit'; import { RouterProvider } from 'react-router-dom'; @@ -16,11 +15,10 @@ const App = () => {
- - - - - + + + + ); }; diff --git a/src/app/router/Router.tsx b/src/app/router/Router.tsx index eced980a..055e109a 100644 --- a/src/app/router/Router.tsx +++ b/src/app/router/Router.tsx @@ -1,4 +1,5 @@ import type { Router } from '@remix-run/router'; +import { OverlayProvider } from 'overlay-kit'; import { Suspense, lazy } from 'react'; import { Outlet, createBrowserRouter, createHashRouter } from 'react-router-dom'; @@ -22,83 +23,94 @@ const TimerPage = lazy(() => import('@/pages/TimerPage/TimerPage')); const routerInfo = [ { - //public 라우트들 + // 리액트 라우터 컨텍스트 내에서 적용되어야 하는 프로바이더 (내부 컴포넌트가 리액트 라우터 API를 사용하는 경우 ) path: '/', element: ( - + - + ), children: [ { - path: ROUTES_CONFIG.login.path, + //public 라우트들 + path: '/', element: ( - }> - - + + + ), - }, - { - path: ROUTES_CONFIG.redirect.path, - element: , - }, - ], - }, - - { - //권한이 있어야 접근 가능한 라우트들 - path: '/', - element: , - children: [ - { - path: '', - element: , children: [ { - path: ROUTES_CONFIG.home.path, - element: ( - - - - ), - }, - { - path: ROUTES_CONFIG.onboarding.path, - element: ( - - - - ), - }, - { - path: ROUTES_CONFIG.timer.path, + path: ROUTES_CONFIG.login.path, element: ( }> - + ), }, { - path: ROUTES_CONFIG.allowedService.path, - element: ( - - - - ), + path: ROUTES_CONFIG.redirect.path, + element: , }, ], }, - ], - }, - { - //404 페이지 - path: '*', - element: ( - - - - ), + { + //권한이 있어야 접근 가능한 라우트들 + path: '/', + element: , + children: [ + { + path: '', + element: , + children: [ + { + path: ROUTES_CONFIG.home.path, + element: ( + + + + ), + }, + { + path: ROUTES_CONFIG.onboarding.path, + element: ( + + + + ), + }, + { + path: ROUTES_CONFIG.timer.path, + element: ( + }> + + + ), + }, + { + path: ROUTES_CONFIG.allowedService.path, + element: ( + + + + ), + }, + ], + }, + ], + }, + + { + //404 페이지 + path: '*', + element: ( + + + + ), + }, + ], }, ];