[선물방 메인] 삭제 모달 공통 컴포넌트로 분리, 플로팅 버튼 기능 추가

src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx

@@ -44,16 +44,18 @@ 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);
   };
 
   return (
     <S.GiftAddPageWrapper>
       {isModalOpen && (
         <DeleteModal
-          onClickCancel={() => setIsModalOpen(false)}
+          setIsModalOpen={setIsModalOpen}
           onClickDelete={handleClickConfirmDeleteBtn}
           clickedItem={clickedItem}
         >

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 (
     <S.GiftHomeSummaryWrapper>
@@ -28,8 +30,6 @@ export const GiftHomeSummary = ({ data }: GiftHomeSummaryProps) => {
       <S.Body09Text>선물 토너먼트까지</S.Body09Text>
 
       <CountDownTimer targetDate={new Date(data.tournamentStartDate)} giftee={data.gifteeName} />
-
-
     </S.GiftHomeSummaryWrapper>
   );
 };

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<React.SetStateAction<boolean>>;
+  clickedItem?: number | undefined;
 }
 
-const DeleteModal = ({ children, onClickDelete, onClickCancel, clickedItem }: DeleteModalProps) => {
+const DeleteModal = ({
+  children,
+  onClickDelete,
+  setIsModalOpen,
+  clickedItem,
+}: DeleteModalProps) => {
+  const onClickCancel = () => {
+    setIsModalOpen(false);
+  };
+
   return (
     <>
       <S.Overlay />

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 };
 };

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,15 +15,23 @@ 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}`);
   };
 
   return (
     <S.GiftHomeWrapper>
-      <GiftHomeSummary data={data?.data} />
-      {data?.data.roomMyGiftDtoList.length > 0 ? (
+      <GiftHomeSummary data={data?.data} isBtn={isBtn} />
+      {myItemsNum > 0 ? (
         <GiftHomeMyGifts
           roomId={Number(roomId)}
           data={data.data.roomMyGiftDtoList}
@@ -42,17 +51,21 @@ export default function GiftHome() {
         targetDate={data.data.tournamentStartDate}
         data={data.data.hotProductGiftDtoList}
       />
-      <BtnFill
-        children={'선물 등록하기'}
-        onClick={handleClickBtn}
-        customStyle={{
-          position: 'fixed',
-          bottom: '0',
-          marginBottom: '2rem',
-          width: '33.5rem',
-          padding: '1.5rem 8.1rem 1.6rem 8.1rem',
-        }}
-      />
+      {myItemsNum < 2 ? (
+        <BtnFill
+          children={'선물 등록하기'}
+          onClick={handleClickBtn}
+          customStyle={{
+            position: 'fixed',
+            bottom: '0',
+            marginBottom: '2rem',
+            width: '33.5rem',
+            padding: '1.5rem 8.1rem 1.6rem 8.1rem',
+          }}
+        />
+      ) : (
+        <></>
+      )}
     </S.GiftHomeWrapper>
   );
 }

src/style/GlobalStyle.ts

@@ -38,6 +38,10 @@ body {
 #root::-webkit-scrollbar {
     display: none; /* 크롬, 사파리, 오페라, 엣지 스크롤바 숨김 */
 }
+
+.custom-toast-margin{
+    margin-bottom: 6.4rem;
+}
 `;
 
 export default GlobalStyle;