[Feat/#481] useToastHandler 훅 추가, 토스트 전부 상단으로 위치 (+ alert 제거), 핑크색으로 글자 칠해지도록 기능 구현

src/components/commons/bottomSheet/actionsBottomSheet/phoneNumber/PhoneNumber.tsx

@@ -25,7 +25,7 @@ const PhoneNumber = ({ phone }: PhoneNumProps) => {
           <S.Copy />
         </S.PhoneNumLayout>
       </S.PhoneNumWrapper>
-      <Toast icon={<IconCheck />} isVisible={isToastVisible} toastBottom={30}>
+      <Toast icon={<IconCheck />} isVisible={isToastVisible} isTop={true}>
         클립보드에 복사되었습니다!
       </Toast>
     </>

src/hooks/index.ts

@@ -3,5 +3,6 @@ import useHeader from "./useHeader.ts";
 import useLogin from "./useLogin.ts";
 import useModal from "./useModal.ts";
 import useToast from "./useToast.ts";
+import useToastHandler from "./useToastHandler.ts";
 
-export { useHamburger, useHeader, useLogin, useModal, useToast };
+export { useHamburger, useHeader, useLogin, useModal, useToast, useToastHandler };

src/hooks/useToastHandler.ts

@@ -0,0 +1,32 @@
+import { useToast } from "@hooks";
+import { useState } from "react";
+
+interface ToastConfigProps {
+  message: string;
+  isTop: boolean;
+}
+
+//top & bottom, 혹은 메세지를 변경해야하는 경우 사용해야하는 훅
+const useToastHandler = () => {
+  const { showToast, isToastVisible } = useToast();
+  const [toastConfig, setToastConfig] = useState<ToastConfigProps>({
+    message: "클립보드에 복사되었습니다!",
+    isTop: true,
+  });
+
+  //토스트 메세지, 위치를 정하는 유틸 함수
+  const handleToastVisible = (message: string, position: "top" | "bottom") => {
+    const isTop = position === "top" ? true : false;
+    setToastConfig({ message, isTop });
+    showToast();
+  };
+
+  /*
+  toastConfig: Toast 속성에 사용,
+  isToastVisible : Toast의 isVisible 속성에 사용
+  handleToastVisible : Toast를 사용하기 위한 함수
+  */
+  return { toastConfig, isToastVisible, handleToastVisible };
+};
+
+export default useToastHandler;

src/pages/book/components/paidBook/PaidBook.tsx

@@ -89,7 +89,7 @@ const PaidBook = ({
         </S.FloatingWrapper>
       </S.Wrapper>
       <S.DepositBox>
-        <Toast icon={<IconCheck />} isVisible={isToastVisible} toastBottom={52}>
+        <Toast icon={<IconCheck />} isVisible={isToastVisible} isTop={true}>
           클립보드에 복사되었습니다!
         </Toast>
       </S.DepositBox>

src/pages/cancel/Cancel.tsx

@@ -80,7 +80,6 @@ const Cancel = () => {
     };
 
     confirmCancelAction(requestData);
-    alert("hi");
   };
 
   if (!state) {

src/pages/gig/components/performanceIntroduce/Contact.tsx

@@ -34,7 +34,7 @@ const Contact = ({ contact }: ContactProps) => {
           <S.IconCopy $width={24} $height={24} />
         </S.Contact>
       )}
-      <Toast icon={<IconCheck />} isVisible={isToastVisible} toastBottom={100}>
+      <Toast icon={<IconCheck />} isVisible={isToastVisible} isTop={true}>
         클립보드에 복사되었습니다!
       </Toast>
     </S.ContactContainer>

src/pages/gig/components/performanceIntroduce/PerformanceIntroduce.tsx

@@ -127,7 +127,7 @@ const PerformanceIntroduce = ({
         <Contact contact={contact} />
 
         <div style={{ width: "100%", display: "flex", justifyContent: "center" }}>
-          <Toast icon={<IconCheck />} isVisible={isToastVisible} toastBottom={30}>
+          <Toast icon={<IconCheck />} isVisible={isToastVisible} isTop={true}>
             클립보드에 복사되었습니다!
           </Toast>
         </div>

src/pages/test/TestPage.tsx

@@ -93,7 +93,7 @@ const TestPage = () => {
         <Button size="medium" variant="primary" onClick={showToast}>
           토스트 보이기
         </Button>
-        <Toast icon={<IconCheck />} isVisible={isToastVisible} toastBottom={30}>
+        <Toast icon={<IconCheck />} isVisible={isToastVisible} isTop={true}>
           클립보드에 복사되었습니다!
         </Toast>
         <Spacing marginBottom="3" />

src/pages/test/modalTest/BankAccount.tsx

@@ -49,7 +49,7 @@ const BankAccount = ({ bankName, number, accountName, accountNumber, price }: Ba
         </Button>
       </BtnWrapper>
 
-      <Toast icon={<IconCheck />} isVisible={isToastVisible} toastBottom={30}>
+      <Toast icon={<IconCheck />} isVisible={isToastVisible} isTop={true}>
         클립보드에 복사되었습니다!
       </Toast>
     </Wrapper>

src/pages/ticketholderlist/TicketHolderList.tsx

@@ -27,9 +27,9 @@ import SelectedChips from "./components/selectedChips/SelectedChips";
 import { convertingBookingStatus } from "@constants/convertingBookingStatus";
 import { IconCheck } from "@assets/svgs";
 import Toast from "@components/commons/toast/Toast";
-import { useToast } from "@hooks";
 import NonExistent from "./components/nonExistent/NonExistent.";
 import { getUA, isChrome } from "react-device-detect";
+import { useToastHandler } from "@hooks";
 
 export type PaymentType =
   | "CHECKING_PAYMENT"
@@ -66,10 +66,7 @@ const headers = [
 ];
 
 const TicketHolderList = () => {
-  const [toastConfig, setToastConfig] = useState<ToastConfigProps>({
-    message: "클립보드에 복사되었습니다!",
-    isTop: false,
-  });
+  const { toastConfig, isToastVisible, handleToastVisible } = useToastHandler();
   const [paymentData, setPaymentData] = useState<BookingListProps[]>();
   const [allBookings, setAllBookings] = useState<BookingListProps[]>([]); // 전체 예매자 정보 (필터 적용 안 된)
 
@@ -102,9 +99,7 @@ const TicketHolderList = () => {
     filterList
   );
   const { openConfirm, closeConfirm } = useModal();
-
   const [checkedBookingId, setCheckedBookingId] = useState<number[]>([]);
-  const { showToast, isToastVisible } = useToast();
   // 체크된 리스트 확인
   const handleBookingIdCheck = (bookingId: number) => {
     setCheckedBookingId((prev) =>
@@ -114,13 +109,6 @@ const TicketHolderList = () => {
 
   const { mutate: updateMutate, isPending: updateIsPending } = useTicketUpdate();
 
-  //토스트 메세지, 위치를 정하는 유틸 함수
-  const handleToastVisible = (message: string, position: "top" | "bottom") => {
-    const isTop = position === "top" ? true : false;
-    setToastConfig({ message, isTop });
-    showToast();
-  };
-
   const handlePaymentFixAxiosFunc = () => {
     if (updateIsPending) {
       return;
@@ -477,7 +465,7 @@ const TicketHolderList = () => {
 
   const handleCopyClipBoard = (text: string) => {
     navigator.clipboard.writeText(text);
-    handleToastVisible("클립보드에 복사되었습니다!", "bottom");
+    handleToastVisible("클립보드에 복사되었습니다!", "top");
   };
 
   return (