From 45a36c9b07b091b4a23885087c7c09d2952781ab Mon Sep 17 00:00:00 2001 From: Wang HoEun Date: Sun, 10 Mar 2024 18:33:21 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20delete=20modal=20=ED=99=95=EC=9D=B8?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EC=8B=9C=20clickedItem=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EC=98=B5=EC=84=9C=EB=85=88=20=EC=8B=A4?= =?UTF-8?q?=ED=96=89=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Modal/DeleteModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/Modal/DeleteModal.tsx b/src/components/common/Modal/DeleteModal.tsx index 5f73dc50..3fb26afa 100644 --- a/src/components/common/Modal/DeleteModal.tsx +++ b/src/components/common/Modal/DeleteModal.tsx @@ -39,7 +39,7 @@ const DeleteModal = ({ backgroundColor: 'white', color: 'black', }} - onClick={() => (clickedItem ? onClickDelete(clickedItem) : onClickCancel())} + onClick={() => (clickedItem ? onClickDelete(clickedItem) : onClickDelete())} > 네, 삭제할게요 From f95957d0ce56573aa1f010fc25217c6ff7047173 Mon Sep 17 00:00:00 2001 From: Wang HoEun Date: Sun, 10 Mar 2024 18:35:01 +0900 Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20=EB=84=98=EA=B2=A8=EB=B0=9B?= =?UTF-8?q?=EB=8A=94=20=ED=99=95=EC=9D=B8=20=EB=B2=84=ED=8A=BC=20=EB=A9=98?= =?UTF-8?q?=ED=8A=B8=20props=EB=A1=9C=20=EB=B0=94=EA=BE=B8=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx | 1 + src/components/common/Modal/DeleteModal.tsx | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx b/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx index 6f949358..be3ef881 100644 --- a/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx +++ b/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx @@ -64,6 +64,7 @@ const GiftAddPageLayout = ({ setIsModalOpen={setIsModalOpen} onClickDelete={handleClickConfirmDeleteBtn} clickedItem={clickedItem} + okButtonText='네, 삭제할게요' > 정말 상품을 삭제하시겠어요? diff --git a/src/components/common/Modal/DeleteModal.tsx b/src/components/common/Modal/DeleteModal.tsx index 3fb26afa..8555547e 100644 --- a/src/components/common/Modal/DeleteModal.tsx +++ b/src/components/common/Modal/DeleteModal.tsx @@ -9,6 +9,7 @@ interface DeleteModalProps { onClickDelete: (giftId?: number) => void; setIsModalOpen: React.Dispatch>; clickedItem?: number | undefined; + okButtonText: string; } const DeleteModal = ({ @@ -16,6 +17,7 @@ const DeleteModal = ({ onClickDelete, setIsModalOpen, clickedItem, + okButtonText, }: DeleteModalProps) => { const onClickCancel = () => { setIsModalOpen(false); @@ -41,7 +43,7 @@ const DeleteModal = ({ }} onClick={() => (clickedItem ? onClickDelete(clickedItem) : onClickDelete())} > - 네, 삭제할게요 + {okButtonText} 아니오 From 3a978fb16027449280b19ffa806e11673b4e9d69 Mon Sep 17 00:00:00 2001 From: Wang HoEun Date: Sun, 10 Mar 2024 18:46:19 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80=ED=95=98?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Button/Logout/BtnLogout.tsx | 16 +---- src/pages/MyPage/MyPage.tsx | 59 ++++++++++++++----- 2 files changed, 46 insertions(+), 29 deletions(-) diff --git a/src/components/common/Button/Logout/BtnLogout.tsx b/src/components/common/Button/Logout/BtnLogout.tsx index 853b929e..d90b978e 100644 --- a/src/components/common/Button/Logout/BtnLogout.tsx +++ b/src/components/common/Button/Logout/BtnLogout.tsx @@ -1,26 +1,16 @@ import { ButtonHTMLAttributes } from 'react'; import * as S from './BtnLogout.style'; -import { logOutInstance } from '../../../../apis/client'; -import { useNavigate } from 'react-router'; type BtnLogoutProps = ButtonHTMLAttributes & { disabled?: boolean; children: React.ReactNode; customStyle?: React.CSSProperties; + handleButtonClick: VoidFunction; }; -const BtnLogout = ({ disabled, children, customStyle }: BtnLogoutProps) => { - const navigate = useNavigate(); - const fetchAuth = async () => logOutInstance.post(`/oauth/logout`); - const handleClick = () => { - fetchAuth().then((response: any) => { - console.log(response); - }); - localStorage.clear(); - navigate('/'); - }; +const BtnLogout = ({ disabled, children, customStyle, handleButtonClick }: BtnLogoutProps) => { return ( - + {children} ); diff --git a/src/pages/MyPage/MyPage.tsx b/src/pages/MyPage/MyPage.tsx index 505c1ed5..bf763178 100644 --- a/src/pages/MyPage/MyPage.tsx +++ b/src/pages/MyPage/MyPage.tsx @@ -7,6 +7,9 @@ import useGetMyPage from '../../hooks/queries/member/useGetMypage'; import { MyPageType } from '../../types/member'; import * as S from './MyPage.style'; import { useNavigate } from 'react-router'; +import { useState } from 'react'; +import DeleteModal from '../../components/common/Modal/DeleteModal'; +import { logOutInstance } from '../../apis/client'; interface MyPage { memberData: MyPageType; } @@ -15,6 +18,8 @@ const MAX_USERNAME_LENGTH = 5; const MyPage = () => { const navigate = useNavigate(); + const [isModalOpen, setIsModalOpen] = useState(false); + const fetchAuth = async () => logOutInstance.post(`/oauth/logout`); const memberData = useGetMyPage(); @@ -35,6 +40,17 @@ const MyPage = () => { ); }; + const isLogout = () => { + fetchAuth().then((response: any) => { + console.log(response); + }); + localStorage.clear(); + navigate('/'); + }; + const handleButtonClick = () => { + setIsModalOpen(true); + }; + const renderUserName = () => { const userName = memberData?.data?.memberInfo.nickname; const translatedUserName = @@ -49,22 +65,33 @@ const MyPage = () => { }; return ( - - - - - - - {renderUserName()} - - 로그아웃 - - - 새로운 선물 준비하기 - - - {renderGiftRoom()} - + <> + {isModalOpen && ( + + 정말 로그아웃하시겠어요? + + )} + + + + + + + {renderUserName()} + + 로그아웃 + + + 새로운 선물 준비하기 + + + {renderGiftRoom()} + + ); }; From 0858034d99f5310b8f4d481a7c25847398225002 Mon Sep 17 00:00:00 2001 From: Wang HoEun Date: Tue, 12 Mar 2024 00:06:08 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=EC=95=88=EC=93=B0=EB=8A=94=20import?= =?UTF-8?q?=20=EB=AC=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx b/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx index 6735509f..be3ef881 100644 --- a/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx +++ b/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx @@ -6,9 +6,8 @@ import GiftAddPageLayoutHeader from './GiftAddPageLayoutHeader'; import useGetMyGift from '../../../hooks/queries/gift/useGetMyGift'; import EmptyGiftAddButtonsWrapper from '../GiftAddButtons/EmptyGiftAddButtonsWrapper'; import useDeleteMyGift from '../../../hooks/queries/gift/useDeleteMyGift'; -import { Suspense, useState } from 'react'; +import { useState } from 'react'; import DeleteModal from '../../common/Modal/DeleteModal'; -import GiftAddPageLayoutSkeleton from './GiftAddPageLayoutSkeleton'; interface GiftAddPageLayoutProps { roomId: string; From da1135950657753f1948b8f672ae0557a54f979d Mon Sep 17 00:00:00 2001 From: Wang HoEun Date: Tue, 12 Mar 2024 00:08:16 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20suspense=20=EC=9E=AC=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GiftAddPageLayout/GiftAddPageLayout.tsx | 55 ++++++++++--------- 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx b/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx index be3ef881..6b69d956 100644 --- a/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx +++ b/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx @@ -6,8 +6,9 @@ import GiftAddPageLayoutHeader from './GiftAddPageLayoutHeader'; import useGetMyGift from '../../../hooks/queries/gift/useGetMyGift'; import EmptyGiftAddButtonsWrapper from '../GiftAddButtons/EmptyGiftAddButtonsWrapper'; import useDeleteMyGift from '../../../hooks/queries/gift/useDeleteMyGift'; -import { useState } from 'react'; +import { Suspense, useState } from 'react'; import DeleteModal from '../../common/Modal/DeleteModal'; +import GiftAddPageLayoutSkeleton from './GiftAddPageLayoutSkeleton'; interface GiftAddPageLayoutProps { roomId: string; @@ -59,31 +60,33 @@ const GiftAddPageLayout = ({ return ( - {isModalOpen && ( - - 정말 상품을 삭제하시겠어요? - - )} - - - - {myGiftData.map((item, index) => ( - handleClickDeleteClick(item.giftId)} - /> - ))} - {Array.from({ length: 2 - myGiftData.length }).map((_, index) => ( - - ))} - - + }> + {isModalOpen && ( + + 정말 상품을 삭제하시겠어요? + + )} + + + + {myGiftData.map((item, index) => ( + handleClickDeleteClick(item.giftId)} + /> + ))} + {Array.from({ length: 2 - myGiftData.length }).map((_, index) => ( + + ))} + + + ); };