feat: 플로팅 버튼에 따라 토스트 위치 변경

SWEET-DEVELOPERS · Feb 29, 2024 · e2761d8 · e2761d8
1 parent 213df48
commit e2761d8
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 36 deletions.
diff --git 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 (
     <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>
   );
 };

diff --git 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
@@ -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>
   );
 }
diff --git 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;