From c239d4d86dfe137ac0b2df956a8173031dd9e221 Mon Sep 17 00:00:00 2001 From: hanseo Date: Thu, 8 May 2025 15:03:59 +0900 Subject: [PATCH 01/15] =?UTF-8?q?refactor:=20'=EC=95=B1'=20=ED=83=AD=20?= =?UTF-8?q?=EC=97=86=EC=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/AllowedServicePage/AllowedServicePage.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/AllowedServicePage/AllowedServicePage.tsx b/src/pages/AllowedServicePage/AllowedServicePage.tsx index ea5beba0..511d296d 100644 --- a/src/pages/AllowedServicePage/AllowedServicePage.tsx +++ b/src/pages/AllowedServicePage/AllowedServicePage.tsx @@ -300,9 +300,6 @@ const AllowedServicePage = () => { setCurrentTap('WEB')} isActive={currentTap === 'WEB'}> 웹사이트 - - 앱 - From 38fbff25693b400f0c5c67db7cd4fdbc02bd8241 Mon Sep 17 00:00:00 2001 From: hanseo Date: Thu, 8 May 2025 15:18:24 +0900 Subject: [PATCH 02/15] =?UTF-8?q?feat:=20=EB=AA=A8=EB=A6=BD=20=ED=8C=8C?= =?UTF-8?q?=EB=B9=84=EC=BD=98=EC=97=90=EC=84=9C=20=EC=B2=B4=EC=9D=B8=20?= =?UTF-8?q?=ED=8C=8C=EB=B9=84=EC=BD=98=EC=9C=BC=EB=A1=9C=20url=20default?= =?UTF-8?q?=20=ED=8C=8C=EB=B9=84=EC=BD=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/assets/svgs/default_url_favicon.svg | 5 +++++ src/shared/components/FaviconImage/FaviconImage.tsx | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 src/shared/assets/svgs/default_url_favicon.svg diff --git a/src/shared/assets/svgs/default_url_favicon.svg b/src/shared/assets/svgs/default_url_favicon.svg new file mode 100644 index 00000000..487dce24 --- /dev/null +++ b/src/shared/assets/svgs/default_url_favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/components/FaviconImage/FaviconImage.tsx b/src/shared/components/FaviconImage/FaviconImage.tsx index ce48cfba..52bebb70 100644 --- a/src/shared/components/FaviconImage/FaviconImage.tsx +++ b/src/shared/components/FaviconImage/FaviconImage.tsx @@ -1,15 +1,15 @@ import { ImgHTMLAttributes } from 'react'; -import LogoPath from '@/shared/assets/svgs/logo_icon.svg'; +import DefaultFaviconImage from '@/shared/assets/svgs/default_url_favicon.svg'; export const FaviconImage = ({ src, className, ...rest }: ImgHTMLAttributes) => { return ( { - e.currentTarget.src = LogoPath; + e.currentTarget.src = DefaultFaviconImage; e.currentTarget.alt = '모립 로고 아이콘'; }} /> From 962d88f24435bc78c3ad4ecc8fd029f7e1678a9c Mon Sep 17 00:00:00 2001 From: hanseo Date: Thu, 8 May 2025 15:57:40 +0900 Subject: [PATCH 03/15] =?UTF-8?q?fix:=20=ED=97=88=EC=9A=A9=EC=84=9C?= =?UTF-8?q?=EB=B9=84=EC=8A=A4=20=EA=B7=B8=EB=A3=B9=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=EC=8B=9C=20=EC=9E=90=EB=8F=99=20=EC=84=A0=ED=83=9D=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AllowedServiceList/AllowedServiceList.tsx | 7 +--- .../AllowedServicePage/AllowedServicePage.tsx | 38 ++++++++----------- 2 files changed, 17 insertions(+), 28 deletions(-) diff --git a/src/pages/AllowedServicePage/AllowedServiceList/AllowedServiceList.tsx b/src/pages/AllowedServicePage/AllowedServiceList/AllowedServiceList.tsx index 25017fee..11a09dda 100644 --- a/src/pages/AllowedServicePage/AllowedServiceList/AllowedServiceList.tsx +++ b/src/pages/AllowedServicePage/AllowedServiceList/AllowedServiceList.tsx @@ -63,29 +63,26 @@ const AllowedServiceListContent = ({ children }: { children: ReactNode }) => { }; interface AllowedServiceListItemProps extends AllowedServiceGroupType { - index: number; activeGroupId: number | null; activeGroupTitleInput: string; onSelectActiveGroup: (activeGroupId: number | null) => void; - onDeleteAllowedServiceGroup: (groupId: number, isActive: boolean, currentIndex: number) => void; + onDeleteAllowedServiceGroup: (groupId: number) => void; isEditingTitle: boolean; } const AllowedServiceListItem = ({ - index, activeGroupId, activeGroupTitleInput, onSelectActiveGroup, onDeleteAllowedServiceGroup, isEditingTitle, - ...allowedServiceGroupData }: AllowedServiceListItemProps) => { const isActive = activeGroupId === allowedServiceGroupData.id; const handleDeleteAllowedServiceGroup = (e: MouseEvent) => { e.stopPropagation(); - onDeleteAllowedServiceGroup(allowedServiceGroupData.id, isActive, index); + onDeleteAllowedServiceGroup(allowedServiceGroupData.id); }; const handleSelectActiveGroupId = () => { diff --git a/src/pages/AllowedServicePage/AllowedServicePage.tsx b/src/pages/AllowedServicePage/AllowedServicePage.tsx index 511d296d..c219218f 100644 --- a/src/pages/AllowedServicePage/AllowedServicePage.tsx +++ b/src/pages/AllowedServicePage/AllowedServicePage.tsx @@ -150,29 +150,14 @@ const AllowedServicePage = () => { } }; - const handleDeleteAllowedServiceGroup = (groupId: number, isActive: boolean, currentIndex: number) => { + const handleDeleteAllowedServiceGroup = (groupId: number) => { deleteAllowedServiceGroup( { allowedGroupId: groupId }, { onSuccess: () => { - queryClient.setQueryData( - allowedServiceKeys.allowedServiceList({ connectType: currentTap }), - (oldData: GetAllowedServiceListRes) => { - if (!oldData) return oldData; - return { - ...oldData, - data: oldData.data.filter((group) => group.id !== groupId), - }; - }, - ); - - if (isActive) { - if (allowedServiceList && allowedServiceList.data.length > 1) { - setActiveGroupId(allowedServiceList.data[currentIndex + 1].id); - } else { - handleEnableAddingAllowedServiceGroup(); - } - } + queryClient.invalidateQueries({ + queryKey: allowedServiceKeys.allowedServiceList({ connectType: currentTap }), + }); }, }, ); @@ -221,9 +206,17 @@ const AllowedServicePage = () => { }; // NOTE: 첫 렌더링 시 api를 통해 받은 첫번째 allowed service group id를 activeGroupId로 설정 + // 리스트 삭제 후, 현재 active 그룹이 리스트에 없는 경우 첫 번째 그룹으로 설정 useEffect(() => { - if (activeGroupId === null && allowedServiceList && allowedServiceList?.data.length > 0) { - setActiveGroupId(allowedServiceList.data[0].id); + if (allowedServiceList && allowedServiceList.data.length > 0) { + const activeGroupExists = activeGroupId && allowedServiceList.data.some((group) => group.id === activeGroupId); + + if (!activeGroupId || !activeGroupExists) { + setActiveGroupId(allowedServiceList.data[0].id); + } + } else if (allowedServiceList && allowedServiceList.data.length === 0 && activeGroupId !== null) { + // 리스트가 비어있고 선택된 그룹이 있으면 입력 모드로 전환 + handleEnableAddingAllowedServiceGroup(); } }, [allowedServiceList]); @@ -261,10 +254,9 @@ const AllowedServicePage = () => { {activeGroupId === null && ( )} - {allowedServiceList?.data.map((allowedServiceGroupData, index) => ( + {allowedServiceList?.data.map((allowedServiceGroupData) => ( Date: Thu, 8 May 2025 16:05:54 +0900 Subject: [PATCH 04/15] =?UTF-8?q?feat:=20=EC=B6=94=EC=B2=9C=EC=84=9C?= =?UTF-8?q?=EB=B9=84=EC=8A=A4=20=ED=8C=8C=EB=B9=84=EC=BD=98=20=EC=84=9C?= =?UTF-8?q?=EB=B2=84=EC=97=90=EC=84=9C=20=EB=B0=9B=EC=95=84=EC=98=A8=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20url=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RecommendService/RecommendService.tsx | 8 +------- src/shared/types/api/allowedService.ts | 1 + 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/pages/AllowedServicePage/RecommendService/RecommendService.tsx b/src/pages/AllowedServicePage/RecommendService/RecommendService.tsx index d567af2d..386d7e6e 100644 --- a/src/pages/AllowedServicePage/RecommendService/RecommendService.tsx +++ b/src/pages/AllowedServicePage/RecommendService/RecommendService.tsx @@ -8,8 +8,6 @@ import useCarousel from '@/shared/hooks/useCarousel'; import { RecommendSiteType } from '@/shared/types/allowedService'; import { Direction } from '@/shared/types/global'; -import { getServiceFavicon } from '@/pages/OnboardingPage/utils/serviceUrl'; - interface RecommendServiceItemProps extends ButtonHTMLAttributes { recommendSite: RecommendSiteType; } @@ -19,11 +17,7 @@ const RecommendServiceItem = ({ recommendSite, ...props }: RecommendServiceItemP {...props} className="flex w-[23.9rem] flex-shrink-0 items-center gap-[1.5rem] rounded-[8px] bg-gray-bg-01 p-[2rem] hover:bg-gray-bg-04 active:bg-gray-bg-02" > - favicon + favicon

{recommendSite.siteName}

); diff --git a/src/shared/types/api/allowedService.ts b/src/shared/types/api/allowedService.ts index bc16922a..55daaefb 100644 --- a/src/shared/types/api/allowedService.ts +++ b/src/shared/types/api/allowedService.ts @@ -64,6 +64,7 @@ export interface GetRecommendedSitesRes { recommendSites: { siteName: string; siteUrl: string; + favicon: string; }[]; }; } From c51bbf535d8e456e2c0f36e537ae2e274820567b Mon Sep 17 00:00:00 2001 From: hanseo Date: Thu, 8 May 2025 16:50:43 +0900 Subject: [PATCH 05/15] =?UTF-8?q?feat:=20minus=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EB=8C=80=EC=8B=A0=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AllowedServiceGroupDetailContent.tsx | 14 +++++++++---- .../AllowedServicePage/AllowedServicePage.tsx | 21 ++++++++++++++----- .../ModalContentsAlert/ModalContentsAlert.tsx | 21 +++++++++++++++++++ 3 files changed, 47 insertions(+), 9 deletions(-) create mode 100644 src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx diff --git a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx index b5987014..6ad80655 100644 --- a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx +++ b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx @@ -1,11 +1,12 @@ import { ReactNode } from 'react'; +import Dropdown from '@/shared/components/Dropdown/Dropdown'; import FaviconImage from '@/shared/components/FaviconImage/FaviconImage'; import Spacer from '@/shared/components/Spacer/Spacer'; import { AllowedServiceGroupDetailSiteType } from '@/shared/types/allowedService'; -import MinusBtn from '@/shared/assets/svgs/minus_btn.svg?react'; +import MeatBallDefaultIcon from '@/shared/assets/svgs/common/ic_meatball_default.svg?react'; export interface AllowedServiceGroupDetailContentProps { children: ReactNode; @@ -77,9 +78,14 @@ export const AllowedServiceGroupDetailContentTableRow = ({
- + + + + + + + +
diff --git a/src/pages/AllowedServicePage/AllowedServicePage.tsx b/src/pages/AllowedServicePage/AllowedServicePage.tsx index c219218f..b1fcdfe9 100644 --- a/src/pages/AllowedServicePage/AllowedServicePage.tsx +++ b/src/pages/AllowedServicePage/AllowedServicePage.tsx @@ -11,11 +11,11 @@ import TextField from '@/shared/components/TextField/TextField'; import { isUrlValid } from '@/shared/utils/validation'; import { ColorPaletteType } from '@/shared/types/allowedService'; -import { GetAllowedServiceListRes } from '@/shared/types/api/allowedService'; import BellIcon from '@/shared/assets/svgs/bell.svg?react'; import FriendSettingIcon from '@/shared/assets/svgs/friend_setting.svg?react'; +import ModalContentsAlert from '@/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert'; import { allowedServiceKeys } from '@/shared/apisV2/allowedService/allowedService.keys'; import { useDeleteAllowedService, @@ -47,6 +47,7 @@ const AllowedServicePage = () => { const queryClient = useQueryClient(); const friendsModalRef = useRef(null); + const actionFeedbackRef = useRef(null); const handleChangeTitleInput = (e: ChangeEvent) => { setTitleInput(e.target.value); @@ -232,6 +233,14 @@ const AllowedServicePage = () => { friendsModalRef.current?.open(); }; + const handleOpenActionFeedbackModal = () => { + actionFeedbackRef.current?.open(); + }; + + const handleCloseActionFeedbackModal = () => { + actionFeedbackRef.current?.close(); + }; + return (
@@ -311,15 +320,14 @@ const AllowedServicePage = () => { 사이트 등록하기 - {allowedServiceGroupDetail && allowedServiceGroupDetail.data.allowedSites.map((allowedSiteData, index) => ( - handleDeleteAllowedService(allowedSiteData.id, allowedSiteData.siteUrl) - } + onDeleteAllowedSite={() => { + handleDeleteAllowedService(allowedSiteData.id, allowedSiteData.siteUrl); + }} {...allowedSiteData} /> ))} @@ -341,6 +349,9 @@ const AllowedServicePage = () => { {({ isModalOpen }) => } + + {({ isModalOpen }) => } + ); }; diff --git a/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx b/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx new file mode 100644 index 00000000..74478c38 --- /dev/null +++ b/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx @@ -0,0 +1,21 @@ +import { forwardRef } from 'react'; + +interface ActionFeedbackProps { + isModalOpen: boolean; +} + +const ActionFeedback = forwardRef(({ isModalOpen }, ref) => { + return ( +
+ 삭제되었습니다! +
+ ); +}); + +ActionFeedback.displayName = 'ActionFeedback'; + +const ModalContentsAlert = { + ActionFeedback, +}; + +export default ModalContentsAlert; From 2c829d4f971fc2d3e96db0aea8ede3b45204a17a Mon Sep 17 00:00:00 2001 From: hanseo Date: Thu, 8 May 2025 16:54:45 +0900 Subject: [PATCH 06/15] =?UTF-8?q?feat:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20zIndex=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Content/AllowedServiceGroupDetailContent.tsx | 3 ++- src/shared/components/Dropdown/Dropdown.tsx | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx index 6ad80655..32ebec75 100644 --- a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx +++ b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx @@ -83,7 +83,8 @@ export const AllowedServiceGroupDetailContentTableRow = ({ - + +
diff --git a/src/shared/components/Dropdown/Dropdown.tsx b/src/shared/components/Dropdown/Dropdown.tsx index 882e012f..2e54f21b 100644 --- a/src/shared/components/Dropdown/Dropdown.tsx +++ b/src/shared/components/Dropdown/Dropdown.tsx @@ -49,7 +49,7 @@ const DropdownRoot = ({ children, onOpenChange }: DropdownRootProps) => { return ( -
+
{children}
@@ -95,7 +95,7 @@ const DropdownContent = forwardRef(
    {open && children}
From e153392efd62808008c104be730f9843f31086f1 Mon Sep 17 00:00:00 2001 From: hanseo Date: Thu, 8 May 2025 17:40:19 +0900 Subject: [PATCH 07/15] =?UTF-8?q?feat:=20=EC=82=AD=EC=A0=9C=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=88=8C=EB=A0=80=EC=9D=84=20=EB=95=8C=20=EB=9C=A8?= =?UTF-8?q?=EB=8A=94=20=ED=99=95=EC=9D=B8=20=EB=AA=A8=EB=8B=AC,=20?= =?UTF-8?q?=ED=97=88=EC=9A=A9=EC=84=9C=EB=B9=84=EC=8A=A4=20=EC=A0=9C?= =?UTF-8?q?=EB=AA=A9=20=EC=97=86=EC=9D=B4=20Url=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=ED=95=A0=20=EB=95=8C=20=EB=9C=A8=EB=8A=94=20alert=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EB=A1=9C=EC=A7=81=20=EA=B4=80=EB=A6=AC=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EC=83=81=ED=83=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AllowedServiceGroupDetailContent.tsx | 3 +- .../AllowedServicePage/AllowedServicePage.tsx | 31 +++++++++++++++++-- .../ModalContentsAlert/ModalContentsAlert.tsx | 31 ++++++++++++++----- 3 files changed, 55 insertions(+), 10 deletions(-) diff --git a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx index 32ebec75..4fb35e48 100644 --- a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx +++ b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx @@ -82,13 +82,14 @@ export const AllowedServiceGroupDetailContentTableRow = ({ - +
+ ; ); }; diff --git a/src/pages/AllowedServicePage/AllowedServicePage.tsx b/src/pages/AllowedServicePage/AllowedServicePage.tsx index b1fcdfe9..d601d963 100644 --- a/src/pages/AllowedServicePage/AllowedServicePage.tsx +++ b/src/pages/AllowedServicePage/AllowedServicePage.tsx @@ -35,6 +35,10 @@ import AllowedServiceGroupDetail from './AllowedServiceGroupDetail/AllowedServic import AllowedServiceList from './AllowedServiceList/AllowedServiceList'; import RecommendService from './RecommendService/RecommendService'; +interface ModalState { + variant: 'confirm-delete' | 'title-required'; + pageName?: string; +} // NOTE: 리렌더링 최적화 필요 const AllowedServicePage = () => { const [activeGroupId, setActiveGroupId] = useState(null); @@ -43,6 +47,10 @@ const AllowedServicePage = () => { const [isEditingTitle, setIsEditingTitle] = useState(false); const [urlInput, setUrlInput] = useState(''); const [selectedColor, setSelectedColor] = useState('#868C93'); + const [modalState, setModalState] = useState({ + variant: 'confirm-delete', + pageName: '', + }); const queryClient = useQueryClient(); @@ -165,6 +173,12 @@ const AllowedServicePage = () => { }; const handleAddAllowedService = (urlInput: string, activeGroupId: number | null) => { + if (!activeGroupId) { + handleOpenActionFeedbackModal({ + variant: 'title-required', + }); + return; + } if (activeGroupId && !isPending) { postAddAllowedService( { @@ -195,6 +209,10 @@ const AllowedServicePage = () => { ) { resetAllowedService(); } + handleOpenActionFeedbackModal({ + variant: 'confirm-delete', + pageName: deleteUrl, + }); }, }, ); @@ -202,6 +220,7 @@ const AllowedServicePage = () => { const handleKeyDownUrlInput = (e: KeyboardEvent) => { if (e.key === 'Enter' && !e.nativeEvent.isComposing) { + e.preventDefault(); handleAddAllowedService(urlInput, activeGroupId); } }; @@ -233,7 +252,8 @@ const AllowedServicePage = () => { friendsModalRef.current?.open(); }; - const handleOpenActionFeedbackModal = () => { + const handleOpenActionFeedbackModal = (state: Partial = {}) => { + setModalState((prev) => ({ ...prev, ...state })); actionFeedbackRef.current?.open(); }; @@ -350,7 +370,14 @@ const AllowedServicePage = () => { {({ isModalOpen }) => } - {({ isModalOpen }) => } + {({ isModalOpen }) => ( + + )} ); diff --git a/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx b/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx index 74478c38..5021fcba 100644 --- a/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx +++ b/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx @@ -1,16 +1,33 @@ import { forwardRef } from 'react'; +type ActionFeedbackVariant = 'title-required' | 'confirm-delete'; interface ActionFeedbackProps { isModalOpen: boolean; + onClick: () => void; + variant: ActionFeedbackVariant; + pageName?: string; } -const ActionFeedback = forwardRef(({ isModalOpen }, ref) => { - return ( -
- 삭제되었습니다! -
- ); -}); +const ActionFeedback = forwardRef( + ({ isModalOpen, onClick, variant, pageName }, ref) => { + const getMessage = () => { + switch (variant) { + case 'title-required': + return '허용서비스 리스트의 이름을\n먼저 입력해주세요.'; + case 'confirm-delete': + return `'${pageName}' 허용 사이트가\n삭제되었습니다.`; + default: + return ''; + } + }; + return ( +
+ {getMessage()} + +
+ ); + }, +); ActionFeedback.displayName = 'ActionFeedback'; From dcf91acb23872387097443a87e0229f6a61740ca Mon Sep 17 00:00:00 2001 From: hanseo Date: Thu, 8 May 2025 18:11:08 +0900 Subject: [PATCH 08/15] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModalContentsAlert/ModalContentsAlert.tsx | 25 ++++++++++++++++--- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx b/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx index 5021fcba..1e8e7fcd 100644 --- a/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx +++ b/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx @@ -1,5 +1,7 @@ import { forwardRef } from 'react'; +import ButtonRadius5 from '@/shared/components/ButtonRadius5/ButtonRadius5'; + type ActionFeedbackVariant = 'title-required' | 'confirm-delete'; interface ActionFeedbackProps { isModalOpen: boolean; @@ -15,15 +17,30 @@ const ActionFeedback = forwardRef( case 'title-required': return '허용서비스 리스트의 이름을\n먼저 입력해주세요.'; case 'confirm-delete': - return `'${pageName}' 허용 사이트가\n삭제되었습니다.`; + return ( + <> + ' + + {pageName} + + ' 허용 사이트가 +
+ 삭제되었습니다. + + ); default: return ''; } }; return ( -
- {getMessage()} - +
+

{getMessage()}

+ + 확인 +
); }, From ffb9a44d0d128cae2c92f052da5393dbf4b9009c Mon Sep 17 00:00:00 2001 From: hanseo Date: Thu, 8 May 2025 18:44:13 +0900 Subject: [PATCH 09/15] =?UTF-8?q?feat:=20=EC=83=81=EC=9C=84=20=EB=8F=84?= =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=ED=97=88=EC=9A=A9=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AllowedServiceGroupDetailContent.tsx | 29 ++++++++++++-- .../ModalContentsAlert/ModalContentsAlert.tsx | 40 ++++++++++++++++++- 2 files changed, 65 insertions(+), 4 deletions(-) diff --git a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx index 4fb35e48..6b0cf4d7 100644 --- a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx +++ b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx @@ -1,13 +1,16 @@ -import { ReactNode } from 'react'; +import { ReactNode, useRef } 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 { AllowedServiceGroupDetailSiteType } from '@/shared/types/allowedService'; import MeatBallDefaultIcon from '@/shared/assets/svgs/common/ic_meatball_default.svg?react'; +import ModalContentsAlert from '@/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert'; + export interface AllowedServiceGroupDetailContentProps { children: ReactNode; } @@ -60,6 +63,15 @@ export const AllowedServiceGroupDetailContentTableRow = ({ onDeleteAllowedSite, ...allowedSiteData }: AllowedServiceGroupDetailContentRootTableRowProps) => { + const domainAllowModalRef = useRef(null); + + const handleOpenDomainAllowModal = () => { + domainAllowModalRef.current?.open(); + }; + + const handleCloseDomainAllowModal = () => { + domainAllowModalRef.current?.close(); + }; return (
@@ -83,13 +95,24 @@ export const AllowedServiceGroupDetailContentTableRow = ({ - +
- ; + + {({ isModalOpen }) => ( + { + handleCloseDomainAllowModal(); + }} + onCancel={handleCloseDomainAllowModal} + isModalOpen={isModalOpen} + /> + )} +
); }; diff --git a/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx b/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx index 1e8e7fcd..c33f17cf 100644 --- a/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx +++ b/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx @@ -35,7 +35,7 @@ const ActionFeedback = forwardRef( return (

{getMessage()}

@@ -46,10 +46,48 @@ const ActionFeedback = forwardRef( }, ); +interface DomainAllowConfirmProps { + isModalOpen: boolean; + onConfirm: () => void; + onCancel: () => void; + siteName?: string; +} + +const DomainAllowConfirm = forwardRef( + ({ isModalOpen, onConfirm, onCancel, siteName }, ref) => { + return ( +
+

+ ' + + {siteName} + + '의
+ 상위 도메인을 허용할까요? +

+

해당 사이트 이름을 가진 링크들이 하나로 통합돼요.

+
+ + 허용 + + + 취소하기 + +
+
+ ); + }, +); + ActionFeedback.displayName = 'ActionFeedback'; +DomainAllowConfirm.displayName = 'DomainAllowConfirm'; const ModalContentsAlert = { ActionFeedback, + DomainAllowConfirm, }; export default ModalContentsAlert; From 392bd045022031fb8f9ff90495d4e467b1a0d4b1 Mon Sep 17 00:00:00 2001 From: hanseo Date: Thu, 8 May 2025 19:53:36 +0900 Subject: [PATCH 10/15] =?UTF-8?q?feat:=20=EC=83=81=EC=9C=84=EB=8F=84?= =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=ED=97=88=EC=9A=A9=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Content/AllowedServiceGroupDetailContent.tsx | 10 ++++++++++ src/pages/AllowedServicePage/AllowedServicePage.tsx | 2 ++ .../apisV2/allowedService/allowedService.api.ts | 12 ++++++++++++ .../allowedService/allowedService.mutations.ts | 12 ++++++++++++ src/shared/types/api/allowedService.ts | 6 ++++++ 5 files changed, 42 insertions(+) diff --git a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx index 6b0cf4d7..bdfa5510 100644 --- a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx +++ b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx @@ -10,6 +10,7 @@ import { AllowedServiceGroupDetailSiteType } from '@/shared/types/allowedService import MeatBallDefaultIcon from '@/shared/assets/svgs/common/ic_meatball_default.svg?react'; import ModalContentsAlert from '@/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert'; +import { usePatchMergeToParentDomain } from '@/shared/apisV2/allowedService/allowedService.mutations'; export interface AllowedServiceGroupDetailContentProps { children: ReactNode; @@ -57,10 +58,12 @@ export const AllowedServiceGroupDetailContentTable = ({ export interface AllowedServiceGroupDetailContentRootTableRowProps extends AllowedServiceGroupDetailSiteType { onDeleteAllowedSite: () => void; + activeGroupId: number; } export const AllowedServiceGroupDetailContentTableRow = ({ onDeleteAllowedSite, + activeGroupId, ...allowedSiteData }: AllowedServiceGroupDetailContentRootTableRowProps) => { const domainAllowModalRef = useRef(null); @@ -72,6 +75,8 @@ export const AllowedServiceGroupDetailContentTableRow = ({ const handleCloseDomainAllowModal = () => { domainAllowModalRef.current?.close(); }; + const allowToMergeParentDomain = usePatchMergeToParentDomain(); + return (
@@ -106,6 +111,11 @@ export const AllowedServiceGroupDetailContentTableRow = ({ { + allowToMergeParentDomain.mutate({ + allowedGroupId: activeGroupId!, + allowedSiteId: allowedSiteData.id, + siteUrl: 'https://' + allowedSiteData.siteUrl, + }); handleCloseDomainAllowModal(); }} onCancel={handleCloseDomainAllowModal} diff --git a/src/pages/AllowedServicePage/AllowedServicePage.tsx b/src/pages/AllowedServicePage/AllowedServicePage.tsx index d601d963..b42276af 100644 --- a/src/pages/AllowedServicePage/AllowedServicePage.tsx +++ b/src/pages/AllowedServicePage/AllowedServicePage.tsx @@ -342,9 +342,11 @@ const AllowedServicePage = () => { {allowedServiceGroupDetail && + activeGroupId && allowedServiceGroupDetail.data.allowedSites.map((allowedSiteData, index) => ( { handleDeleteAllowedService(allowedSiteData.id, allowedSiteData.siteUrl); }} diff --git a/src/shared/apisV2/allowedService/allowedService.api.ts b/src/shared/apisV2/allowedService/allowedService.api.ts index 0a7f7c22..0294a9cf 100644 --- a/src/shared/apisV2/allowedService/allowedService.api.ts +++ b/src/shared/apisV2/allowedService/allowedService.api.ts @@ -11,6 +11,7 @@ import { PatchChangeAllowedServiceGroupNameReq, PostAddAllowedServiceGroupReq, PostAddAllowedServiceReq, + PostMergeAllowedSiteReq, } from '@/shared/types/api/allowedService'; import { authClient } from '../client'; @@ -25,6 +26,7 @@ const ALLOWED_SERVICE_ENDPOINT = { GET_RECOMMENDED_SITES: 'api/v2/recommendSite', POST_ADD_ALLOWED_SERVICE: 'api/v2/allowedSite/:allowedGroupId', DELETE_ALLOWED_SERVICE: 'api/v2/allowedSite/:allowedSiteId', + POST_MERGE_ALLOWED_SITE: 'api/v2/allowedSite/:allowedGroupId/:allowedSiteId', }; export const postAddAllowedServiceGroup = async ({ name, colorCode }: PostAddAllowedServiceGroupReq) => { @@ -103,3 +105,13 @@ export const deleteAllowedService = async ({ allowedSiteId }: DeleteAllowedServi ); return data; }; + +export const patchMergeAllowedSite = async ({ allowedGroupId, allowedSiteId, siteUrl }: PostMergeAllowedSiteReq) => { + const url = ALLOWED_SERVICE_ENDPOINT.POST_MERGE_ALLOWED_SITE.replace( + ':allowedGroupId', + String(allowedGroupId), + ).replace(':allowedSiteId', String(allowedSiteId)); + + const { data } = await authClient.patch(url, { siteUrl }); + return data; +}; diff --git a/src/shared/apisV2/allowedService/allowedService.mutations.ts b/src/shared/apisV2/allowedService/allowedService.mutations.ts index dfb55c44..644928f7 100644 --- a/src/shared/apisV2/allowedService/allowedService.mutations.ts +++ b/src/shared/apisV2/allowedService/allowedService.mutations.ts @@ -8,6 +8,7 @@ import { deleteAllowedServiceGroup, patchChangeAllowedServiceGroupColor, patchChangeAllowedServiceGroupName, + patchMergeAllowedSite, postAddAllowedService, postAddAllowedServiceGroup, } from './allowedService.api'; @@ -77,3 +78,14 @@ export const useDeleteAllowedService = () => { }, }); }; + +export const usePatchMergeToParentDomain = () => { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: patchMergeAllowedSite, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: allowedServiceKeys.allowedService }); + }, + }); +}; diff --git a/src/shared/types/api/allowedService.ts b/src/shared/types/api/allowedService.ts index 55daaefb..9cb4237b 100644 --- a/src/shared/types/api/allowedService.ts +++ b/src/shared/types/api/allowedService.ts @@ -81,3 +81,9 @@ export interface DeleteAllowedServiceReq { export interface GetRecommendedSitesReq { allowedGroupId: number; } + +export interface PostMergeAllowedSiteReq { + allowedGroupId: number; + allowedSiteId: number; + siteUrl: string; +} From c506fa20b827a7d8fe4aa00064e539c51e76395f Mon Sep 17 00:00:00 2001 From: hanseo Date: Thu, 8 May 2025 19:55:50 +0900 Subject: [PATCH 11/15] =?UTF-8?q?refactor:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AllowedServiceGroupDetailContent.tsx | 3 +- .../AllowedServicePage/AllowedServicePage.tsx | 3 +- .../ModalContentsAlert/ModalContentsAlert.tsx | 72 +++++++++---------- 3 files changed, 36 insertions(+), 42 deletions(-) diff --git a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx index bdfa5510..6b48a2dd 100644 --- a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx +++ b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx @@ -107,7 +107,7 @@ export const AllowedServiceGroupDetailContentTableRow = ({
- {({ isModalOpen }) => ( + {() => ( { @@ -119,7 +119,6 @@ export const AllowedServiceGroupDetailContentTableRow = ({ handleCloseDomainAllowModal(); }} onCancel={handleCloseDomainAllowModal} - isModalOpen={isModalOpen} /> )} diff --git a/src/pages/AllowedServicePage/AllowedServicePage.tsx b/src/pages/AllowedServicePage/AllowedServicePage.tsx index b42276af..ddaa8da2 100644 --- a/src/pages/AllowedServicePage/AllowedServicePage.tsx +++ b/src/pages/AllowedServicePage/AllowedServicePage.tsx @@ -372,10 +372,9 @@ const AllowedServicePage = () => { {({ isModalOpen }) => } - {({ isModalOpen }) => ( + {() => ( diff --git a/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx b/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx index c33f17cf..486b09ad 100644 --- a/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx +++ b/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx @@ -4,57 +4,53 @@ import ButtonRadius5 from '@/shared/components/ButtonRadius5/ButtonRadius5'; type ActionFeedbackVariant = 'title-required' | 'confirm-delete'; interface ActionFeedbackProps { - isModalOpen: boolean; onClick: () => void; variant: ActionFeedbackVariant; pageName?: string; } -const ActionFeedback = forwardRef( - ({ isModalOpen, onClick, variant, pageName }, ref) => { - const getMessage = () => { - switch (variant) { - case 'title-required': - return '허용서비스 리스트의 이름을\n먼저 입력해주세요.'; - case 'confirm-delete': - return ( - <> - ' - - {pageName} - - ' 허용 사이트가 -
- 삭제되었습니다. - - ); - default: - return ''; - } - }; - return ( -
-

{getMessage()}

- - 확인 - -
- ); - }, -); +const ActionFeedback = forwardRef(({ onClick, variant, pageName }, ref) => { + const getMessage = () => { + switch (variant) { + case 'title-required': + return '허용서비스 리스트의 이름을\n먼저 입력해주세요.'; + case 'confirm-delete': + return ( + <> + ' + + {pageName} + + ' 허용 사이트가 +
+ 삭제되었습니다. + + ); + default: + return ''; + } + }; + return ( +
+

{getMessage()}

+ + 확인 + +
+ ); +}); interface DomainAllowConfirmProps { - isModalOpen: boolean; onConfirm: () => void; onCancel: () => void; siteName?: string; } const DomainAllowConfirm = forwardRef( - ({ isModalOpen, onConfirm, onCancel, siteName }, ref) => { + ({ onConfirm, onCancel, siteName }, ref) => { return (
Date: Thu, 8 May 2025 20:20:11 +0900 Subject: [PATCH 12/15] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20variant=20?= =?UTF-8?q?=ED=95=B4=EC=B2=B4=20=EB=B0=8F=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=83=81=ED=83=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AllowedServiceGroupDetailContent.tsx | 29 +++++++- .../AllowedServicePage/AllowedServicePage.tsx | 37 +++-------- .../ModalContentsAlert/ModalContentsAlert.tsx | 66 +++++++++++-------- 3 files changed, 74 insertions(+), 58 deletions(-) diff --git a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx index 6b48a2dd..5cf54a50 100644 --- a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx +++ b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx @@ -67,6 +67,7 @@ export const AllowedServiceGroupDetailContentTableRow = ({ ...allowedSiteData }: AllowedServiceGroupDetailContentRootTableRowProps) => { const domainAllowModalRef = useRef(null); + const confirmDeleteModalRef = useRef(null); const handleOpenDomainAllowModal = () => { domainAllowModalRef.current?.open(); @@ -75,6 +76,15 @@ export const AllowedServiceGroupDetailContentTableRow = ({ const handleCloseDomainAllowModal = () => { domainAllowModalRef.current?.close(); }; + + const handleOpenConfirmDeleteModal = () => { + confirmDeleteModalRef.current?.open(); + }; + + const handleCloseConfirmDeleteModal = () => { + confirmDeleteModalRef.current?.close(); + }; + const allowToMergeParentDomain = usePatchMergeToParentDomain(); return ( @@ -101,7 +111,13 @@ export const AllowedServiceGroupDetailContentTableRow = ({ - + { + handleOpenConfirmDeleteModal(); + }} + />
@@ -122,6 +138,17 @@ export const AllowedServiceGroupDetailContentTableRow = ({ /> )} + + {() => ( + { + handleCloseConfirmDeleteModal(); + onDeleteAllowedSite(); + }} + pageName={allowedSiteData.pageName} + /> + )} +
); }; diff --git a/src/pages/AllowedServicePage/AllowedServicePage.tsx b/src/pages/AllowedServicePage/AllowedServicePage.tsx index ddaa8da2..fbb0b8c7 100644 --- a/src/pages/AllowedServicePage/AllowedServicePage.tsx +++ b/src/pages/AllowedServicePage/AllowedServicePage.tsx @@ -35,10 +35,6 @@ import AllowedServiceGroupDetail from './AllowedServiceGroupDetail/AllowedServic import AllowedServiceList from './AllowedServiceList/AllowedServiceList'; import RecommendService from './RecommendService/RecommendService'; -interface ModalState { - variant: 'confirm-delete' | 'title-required'; - pageName?: string; -} // NOTE: 리렌더링 최적화 필요 const AllowedServicePage = () => { const [activeGroupId, setActiveGroupId] = useState(null); @@ -47,15 +43,11 @@ const AllowedServicePage = () => { const [isEditingTitle, setIsEditingTitle] = useState(false); const [urlInput, setUrlInput] = useState(''); const [selectedColor, setSelectedColor] = useState('#868C93'); - const [modalState, setModalState] = useState({ - variant: 'confirm-delete', - pageName: '', - }); const queryClient = useQueryClient(); const friendsModalRef = useRef(null); - const actionFeedbackRef = useRef(null); + const requireTitleModalRef = useRef(null); const handleChangeTitleInput = (e: ChangeEvent) => { setTitleInput(e.target.value); @@ -174,9 +166,7 @@ const AllowedServicePage = () => { const handleAddAllowedService = (urlInput: string, activeGroupId: number | null) => { if (!activeGroupId) { - handleOpenActionFeedbackModal({ - variant: 'title-required', - }); + handleOpenRequireTitleModal(); return; } if (activeGroupId && !isPending) { @@ -209,10 +199,6 @@ const AllowedServicePage = () => { ) { resetAllowedService(); } - handleOpenActionFeedbackModal({ - variant: 'confirm-delete', - pageName: deleteUrl, - }); }, }, ); @@ -252,13 +238,12 @@ const AllowedServicePage = () => { friendsModalRef.current?.open(); }; - const handleOpenActionFeedbackModal = (state: Partial = {}) => { - setModalState((prev) => ({ ...prev, ...state })); - actionFeedbackRef.current?.open(); + const handleOpenRequireTitleModal = () => { + requireTitleModalRef.current?.open(); }; - const handleCloseActionFeedbackModal = () => { - actionFeedbackRef.current?.close(); + const handleCloseRequireTitleModal = () => { + requireTitleModalRef.current?.close(); }; return ( @@ -371,14 +356,8 @@ const AllowedServicePage = () => { {({ isModalOpen }) => } - - {() => ( - - )} + + {() => } ); diff --git a/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx b/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx index 486b09ad..0b1a1a3c 100644 --- a/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx +++ b/src/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert.tsx @@ -2,40 +2,48 @@ import { forwardRef } from 'react'; import ButtonRadius5 from '@/shared/components/ButtonRadius5/ButtonRadius5'; -type ActionFeedbackVariant = 'title-required' | 'confirm-delete'; -interface ActionFeedbackProps { +interface RequireTitleProps { onClick: () => void; - variant: ActionFeedbackVariant; - pageName?: string; } -const ActionFeedback = forwardRef(({ onClick, variant, pageName }, ref) => { - const getMessage = () => { - switch (variant) { - case 'title-required': - return '허용서비스 리스트의 이름을\n먼저 입력해주세요.'; - case 'confirm-delete': - return ( - <> - ' - - {pageName} - - ' 허용 사이트가 -
- 삭제되었습니다. - - ); - default: - return ''; - } - }; +const RequireTitle = forwardRef(({ onClick }, ref) => { return (
-

{getMessage()}

+

+ 허용서비스 리스트의 이름을 +
+ 먼저 입력해주세요. +

+ + 확인 + +
+ ); +}); + +interface ConfirmDeleteProps { + onClick: () => void; + pageName: string; +} + +const ConfirmDelete = forwardRef(({ onClick, pageName }, ref) => { + return ( +
+

+ ' + + {pageName} + + ' 허용 사이트가 +
+ 삭제되었습니다. +

확인 @@ -78,12 +86,14 @@ const DomainAllowConfirm = forwardRef( }, ); -ActionFeedback.displayName = 'ActionFeedback'; +RequireTitle.displayName = 'RequireTitle'; +ConfirmDelete.displayName = 'ConfirmDelete'; DomainAllowConfirm.displayName = 'DomainAllowConfirm'; const ModalContentsAlert = { - ActionFeedback, + RequireTitle, DomainAllowConfirm, + ConfirmDelete, }; export default ModalContentsAlert; From 43080990433104a14a6d8444276f84de53de6165 Mon Sep 17 00:00:00 2001 From: hanseo Date: Thu, 8 May 2025 21:37:56 +0900 Subject: [PATCH 13/15] =?UTF-8?q?refactor:=20post=20->=20patch=EB=A1=9C=20?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/apisV2/allowedService/allowedService.api.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/apisV2/allowedService/allowedService.api.ts b/src/shared/apisV2/allowedService/allowedService.api.ts index 0294a9cf..086752bd 100644 --- a/src/shared/apisV2/allowedService/allowedService.api.ts +++ b/src/shared/apisV2/allowedService/allowedService.api.ts @@ -26,7 +26,7 @@ const ALLOWED_SERVICE_ENDPOINT = { GET_RECOMMENDED_SITES: 'api/v2/recommendSite', POST_ADD_ALLOWED_SERVICE: 'api/v2/allowedSite/:allowedGroupId', DELETE_ALLOWED_SERVICE: 'api/v2/allowedSite/:allowedSiteId', - POST_MERGE_ALLOWED_SITE: 'api/v2/allowedSite/:allowedGroupId/:allowedSiteId', + PATCH_MERGE_ALLOWED_SITE: 'api/v2/allowedSite/:allowedGroupId/:allowedSiteId', }; export const postAddAllowedServiceGroup = async ({ name, colorCode }: PostAddAllowedServiceGroupReq) => { @@ -107,7 +107,7 @@ export const deleteAllowedService = async ({ allowedSiteId }: DeleteAllowedServi }; export const patchMergeAllowedSite = async ({ allowedGroupId, allowedSiteId, siteUrl }: PostMergeAllowedSiteReq) => { - const url = ALLOWED_SERVICE_ENDPOINT.POST_MERGE_ALLOWED_SITE.replace( + const url = ALLOWED_SERVICE_ENDPOINT.PATCH_MERGE_ALLOWED_SITE.replace( ':allowedGroupId', String(allowedGroupId), ).replace(':allowedSiteId', String(allowedSiteId)); From b840c7e45fc0eb9f30cd29284fcabc0c67efdfab Mon Sep 17 00:00:00 2001 From: hanseo Date: Thu, 8 May 2025 23:18:12 +0900 Subject: [PATCH 14/15] =?UTF-8?q?fix:=20post=20=EC=9A=94=EC=B2=AD=20?= =?UTF-8?q?=EB=AA=85=EC=84=B8=EC=84=9C=EC=97=90=20=EB=A7=9E=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AllowedServiceGroupDetailContent.tsx | 9 ++++----- .../allowedService/allowedService.api.ts | 19 ++++++++++++------- .../allowedService.mutations.ts | 6 +++--- src/shared/types/api/allowedService.ts | 1 - 4 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx index 5cf54a50..0c7a4dac 100644 --- a/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx +++ b/src/pages/AllowedServicePage/AllowedServiceGroupDetail/Content/AllowedServiceGroupDetailContent.tsx @@ -10,7 +10,7 @@ import { AllowedServiceGroupDetailSiteType } from '@/shared/types/allowedService import MeatBallDefaultIcon from '@/shared/assets/svgs/common/ic_meatball_default.svg?react'; import ModalContentsAlert from '@/pages/AllowedServicePage/ModalContentsAlert/ModalContentsAlert'; -import { usePatchMergeToParentDomain } from '@/shared/apisV2/allowedService/allowedService.mutations'; +import { usePostMergeToParentDomain } from '@/shared/apisV2/allowedService/allowedService.mutations'; export interface AllowedServiceGroupDetailContentProps { children: ReactNode; @@ -85,7 +85,7 @@ export const AllowedServiceGroupDetailContentTableRow = ({ confirmDeleteModalRef.current?.close(); }; - const allowToMergeParentDomain = usePatchMergeToParentDomain(); + const allowToMergeParentDomain = usePostMergeToParentDomain(); return (
@@ -128,9 +128,8 @@ export const AllowedServiceGroupDetailContentTableRow = ({ siteName={allowedSiteData.siteName} onConfirm={() => { allowToMergeParentDomain.mutate({ - allowedGroupId: activeGroupId!, - allowedSiteId: allowedSiteData.id, - siteUrl: 'https://' + allowedSiteData.siteUrl, + allowedGroupId: activeGroupId, + siteUrl: allowedSiteData.siteUrl, }); handleCloseDomainAllowModal(); }} diff --git a/src/shared/apisV2/allowedService/allowedService.api.ts b/src/shared/apisV2/allowedService/allowedService.api.ts index 086752bd..84a8b618 100644 --- a/src/shared/apisV2/allowedService/allowedService.api.ts +++ b/src/shared/apisV2/allowedService/allowedService.api.ts @@ -26,7 +26,7 @@ const ALLOWED_SERVICE_ENDPOINT = { GET_RECOMMENDED_SITES: 'api/v2/recommendSite', POST_ADD_ALLOWED_SERVICE: 'api/v2/allowedSite/:allowedGroupId', DELETE_ALLOWED_SERVICE: 'api/v2/allowedSite/:allowedSiteId', - PATCH_MERGE_ALLOWED_SITE: 'api/v2/allowedSite/:allowedGroupId/:allowedSiteId', + POST_MERGE_ALLOWED_SITE: 'api/v2/allowedSite/merge/:allowedGroupId', }; export const postAddAllowedServiceGroup = async ({ name, colorCode }: PostAddAllowedServiceGroupReq) => { @@ -106,12 +106,17 @@ export const deleteAllowedService = async ({ allowedSiteId }: DeleteAllowedServi return data; }; -export const patchMergeAllowedSite = async ({ allowedGroupId, allowedSiteId, siteUrl }: PostMergeAllowedSiteReq) => { - const url = ALLOWED_SERVICE_ENDPOINT.PATCH_MERGE_ALLOWED_SITE.replace( - ':allowedGroupId', - String(allowedGroupId), - ).replace(':allowedSiteId', String(allowedSiteId)); +export const postMergeAllowedSite = async ({ allowedGroupId, siteUrl }: PostMergeAllowedSiteReq) => { + const url = ALLOWED_SERVICE_ENDPOINT.POST_MERGE_ALLOWED_SITE.replace(':allowedGroupId', String(allowedGroupId)); - const { data } = await authClient.patch(url, { siteUrl }); + const { data } = await authClient.post( + url, + {}, + { + params: { + siteUrl, + }, + }, + ); return data; }; diff --git a/src/shared/apisV2/allowedService/allowedService.mutations.ts b/src/shared/apisV2/allowedService/allowedService.mutations.ts index 644928f7..8ad6269f 100644 --- a/src/shared/apisV2/allowedService/allowedService.mutations.ts +++ b/src/shared/apisV2/allowedService/allowedService.mutations.ts @@ -8,9 +8,9 @@ import { deleteAllowedServiceGroup, patchChangeAllowedServiceGroupColor, patchChangeAllowedServiceGroupName, - patchMergeAllowedSite, postAddAllowedService, postAddAllowedServiceGroup, + postMergeAllowedSite, } from './allowedService.api'; import { allowedServiceKeys } from './allowedService.keys'; @@ -79,11 +79,11 @@ export const useDeleteAllowedService = () => { }); }; -export const usePatchMergeToParentDomain = () => { +export const usePostMergeToParentDomain = () => { const queryClient = useQueryClient(); return useMutation({ - mutationFn: patchMergeAllowedSite, + mutationFn: postMergeAllowedSite, onSuccess: () => { queryClient.invalidateQueries({ queryKey: allowedServiceKeys.allowedService }); }, diff --git a/src/shared/types/api/allowedService.ts b/src/shared/types/api/allowedService.ts index 9cb4237b..90cda72c 100644 --- a/src/shared/types/api/allowedService.ts +++ b/src/shared/types/api/allowedService.ts @@ -84,6 +84,5 @@ export interface GetRecommendedSitesReq { export interface PostMergeAllowedSiteReq { allowedGroupId: number; - allowedSiteId: number; siteUrl: string; } From cf681a2e737d8af2b71538369e4c0214bfd51775 Mon Sep 17 00:00:00 2001 From: hanseo Date: Fri, 9 May 2025 18:31:31 +0900 Subject: [PATCH 15/15] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RecommendService/RecommendService.tsx | 6 +++++- src/shared/apisV2/allowedService/allowedService.api.ts | 4 +--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/pages/AllowedServicePage/RecommendService/RecommendService.tsx b/src/pages/AllowedServicePage/RecommendService/RecommendService.tsx index 386d7e6e..86996815 100644 --- a/src/pages/AllowedServicePage/RecommendService/RecommendService.tsx +++ b/src/pages/AllowedServicePage/RecommendService/RecommendService.tsx @@ -17,7 +17,11 @@ const RecommendServiceItem = ({ recommendSite, ...props }: RecommendServiceItemP {...props} className="flex w-[23.9rem] flex-shrink-0 items-center gap-[1.5rem] rounded-[8px] bg-gray-bg-01 p-[2rem] hover:bg-gray-bg-04 active:bg-gray-bg-02" > - favicon + {`${recommendSite.siteName}

{recommendSite.siteName}

); diff --git a/src/shared/apisV2/allowedService/allowedService.api.ts b/src/shared/apisV2/allowedService/allowedService.api.ts index 84a8b618..b754b743 100644 --- a/src/shared/apisV2/allowedService/allowedService.api.ts +++ b/src/shared/apisV2/allowedService/allowedService.api.ts @@ -107,10 +107,8 @@ export const deleteAllowedService = async ({ allowedSiteId }: DeleteAllowedServi }; export const postMergeAllowedSite = async ({ allowedGroupId, siteUrl }: PostMergeAllowedSiteReq) => { - const url = ALLOWED_SERVICE_ENDPOINT.POST_MERGE_ALLOWED_SITE.replace(':allowedGroupId', String(allowedGroupId)); - const { data } = await authClient.post( - url, + ALLOWED_SERVICE_ENDPOINT.POST_MERGE_ALLOWED_SITE.replace(':allowedGroupId', String(allowedGroupId)), {}, { params: {