From 60a5e95749c18aff5fd509de6a23449cea91848e Mon Sep 17 00:00:00 2001 From: urjimyu <92876819+urjimyu@users.noreply.github.com> Date: Thu, 29 Feb 2024 14:06:28 +0900 Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20Delete=20Modal=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GiftAddPageLayout/GiftAddPageLayout.tsx | 8 +++++--- src/components/common/Modal/DeleteModal.tsx | 17 +++++++++++++---- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx b/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx index d20de60d..21880d5a 100644 --- a/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx +++ b/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx @@ -44,8 +44,10 @@ const GiftAddPageLayout = ({ targetDate, roomId, setStep, setItemNum }: GiftAddP setStep(1); }; - const handleClickConfirmDeleteBtn = (giftId: number) => { - mutation.mutate(giftId); + const handleClickConfirmDeleteBtn = (giftId?: number) => { + if (giftId !== undefined) { + mutation.mutate(giftId); + } setIsModalOpen(false); }; @@ -53,7 +55,7 @@ const GiftAddPageLayout = ({ targetDate, roomId, setStep, setItemNum }: GiftAddP {isModalOpen && ( setIsModalOpen(false)} + setIsModalOpen={setIsModalOpen} onClickDelete={handleClickConfirmDeleteBtn} clickedItem={clickedItem} > diff --git a/src/components/common/Modal/DeleteModal.tsx b/src/components/common/Modal/DeleteModal.tsx index 6e764e5e..24c0dcf7 100644 --- a/src/components/common/Modal/DeleteModal.tsx +++ b/src/components/common/Modal/DeleteModal.tsx @@ -5,12 +5,21 @@ import { IcCancel } from '../../../assets/svg'; interface DeleteModalProps { children: React.ReactNode; - onClickDelete: (giftId: number) => void; - onClickCancel: () => void; - clickedItem: number | undefined; + onClickDelete: (giftId?: number) => void; + setIsModalOpen: React.Dispatch>; + clickedItem?: number | undefined; } -const DeleteModal = ({ children, onClickDelete, onClickCancel, clickedItem }: DeleteModalProps) => { +const DeleteModal = ({ + children, + onClickDelete, + setIsModalOpen, + clickedItem, +}: DeleteModalProps) => { + const onClickCancel = () => { + setIsModalOpen(false); + }; + return ( <> From e2761d8806c2e65a032a105d11299f6eb89ed1fb Mon Sep 17 00:00:00 2001 From: urjimyu <92876819+urjimyu@users.noreply.github.com> Date: Thu, 29 Feb 2024 14:35:31 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=ED=94=8C=EB=A1=9C=ED=8C=85=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=97=90=20=EB=94=B0=EB=9D=BC=20=ED=86=A0?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GiftHomeSummary/GiftHomeSummary.tsx | 8 ++-- src/hooks/useCopyClip.tsx | 43 +++++++++++-------- src/pages/GiftHome/GiftHome.tsx | 39 +++++++++++------ src/style/GlobalStyle.ts | 4 ++ 4 files changed, 58 insertions(+), 36 deletions(-) diff --git a/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.tsx b/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.tsx index a53a5fa8..06caa639 100644 --- a/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.tsx +++ b/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.tsx @@ -6,11 +6,13 @@ import * as S from './GiftHomeSummary.styled'; interface GiftHomeSummaryProps { data: RoomInfoType; + isBtn: boolean; } -export const GiftHomeSummary = ({ data }: GiftHomeSummaryProps) => { +export const GiftHomeSummary = ({ data, isBtn }: GiftHomeSummaryProps) => { const baseURL = import.meta.env.VITE_APP_BASE_URL_KAKAO; - const { handleCopyToClipboard } = useClipboard(); + console.log('isBtn', isBtn); + const { handleCopyToClipboard } = useClipboard(isBtn); return ( @@ -28,8 +30,6 @@ export const GiftHomeSummary = ({ data }: GiftHomeSummaryProps) => { 선물 토너먼트까지 - - ); }; diff --git a/src/hooks/useCopyClip.tsx b/src/hooks/useCopyClip.tsx index f87434c9..19b28257 100644 --- a/src/hooks/useCopyClip.tsx +++ b/src/hooks/useCopyClip.tsx @@ -1,25 +1,30 @@ import { useCallback } from 'react'; import { toast } from 'react-toastify'; -const useClipboard = () => { - const handleCopyToClipboard = useCallback(async (text: string) => { - try { - await navigator.clipboard.writeText(text); - toast.info('링크 복사가 완료되었어요', { - position: 'bottom-center', - autoClose: 700, - hideProgressBar: true, - closeOnClick: false, - pauseOnHover: false, - draggable: false, - progress: undefined, - theme: 'colored', - icon: false, - }); - } catch (err) { - console.log(err); - } - }, []); +const useClipboard = (isBtn?: boolean) => { + console.log('FINAL isBTN', isBtn); + const handleCopyToClipboard = useCallback( + async (text: string) => { + try { + await navigator.clipboard.writeText(text); + toast.info('링크 복사가 완료되었어요', { + position: 'bottom-center', + autoClose: 700, + hideProgressBar: true, + closeOnClick: false, + pauseOnHover: false, + draggable: false, + progress: undefined, + theme: 'colored', + icon: false, + className: isBtn ? 'custom-toast-margin' : '', + }); + } catch (err) { + console.log(err); + } + }, + [isBtn], + ); return { handleCopyToClipboard }; }; diff --git a/src/pages/GiftHome/GiftHome.tsx b/src/pages/GiftHome/GiftHome.tsx index 49b09f7c..b054dcbd 100644 --- a/src/pages/GiftHome/GiftHome.tsx +++ b/src/pages/GiftHome/GiftHome.tsx @@ -6,6 +6,7 @@ import BtnFill from '../../components/common/Button/Cta/fill/BtnFill'; import * as S from './GiftHome.styled'; import useGetRoomInfo from '../../hooks/queries/room/useGetRoomInfo'; import GiftHomeMyGifts from './GiftHomeMyGifts/GiftHomeMyGifts'; +import { useEffect, useState } from 'react'; export default function GiftHome() { const params = useParams(); @@ -14,6 +15,14 @@ export default function GiftHome() { const { data } = useGetRoomInfo({ roomId: Number(roomId) }); const tournamentStartTime = data?.data.tournamentStartDate; + const myItemsNum = data?.data.roomMyGiftDtoList.length; + + const [isBtn, setIsBtn] = useState(myItemsNum < 2); + + useEffect(() => { + console.log('myItemsNum', myItemsNum); + setIsBtn(myItemsNum < 2); + }, [myItemsNum]); const handleClickBtn = () => { navigate(`/add-gift/${roomId}/${tournamentStartTime}`); @@ -21,8 +30,8 @@ export default function GiftHome() { return ( - - {data?.data.roomMyGiftDtoList.length > 0 ? ( + + {myItemsNum > 0 ? ( - + {myItemsNum < 2 ? ( + + ) : ( + <> + )} ); } diff --git a/src/style/GlobalStyle.ts b/src/style/GlobalStyle.ts index 3babbce8..cbbf090e 100644 --- a/src/style/GlobalStyle.ts +++ b/src/style/GlobalStyle.ts @@ -38,6 +38,10 @@ body { #root::-webkit-scrollbar { display: none; /* 크롬, 사파리, 오페라, 엣지 스크롤바 숨김 */ } + +.custom-toast-margin{ + margin-bottom: 6.4rem; +} `; export default GlobalStyle;