fix(common): 커스텀 토스트를 쓰지 않는 문제 해결

apps/admin/src/components/Provider.tsx

@@ -3,21 +3,32 @@
 import { GlobalStyle } from '@maru/design-system';
 import { OverlayProvider } from '@toss/use-overlay';
 import type { ReactNode } from 'react';
-import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { RecoilRoot } from 'recoil';
+import { Toast } from '@maru/ui';
+import { useToast } from '@maru/hooks';
 
 interface Props {
   children: ReactNode;
 }
 
+const GlobalToast = () => {
+  const { showToast, toastMessage, toastType, device } = useToast();
+
+  return showToast ? (
+    <Toast type={toastType} device={device}>
+      {toastMessage}
+    </Toast>
+  ) : null;
+};
+
 const Provider = ({ children }: Props) => {
   return (
     <RecoilRoot>
       <OverlayProvider>
         <GlobalStyle />
         {children}
-        <ToastContainer />
+        <GlobalToast />
       </OverlayProvider>
     </RecoilRoot>
   );

apps/admin/src/services/auth/mutations.ts

@@ -5,7 +5,7 @@ import { useApiError } from '@/hooks';
 import type { PostLoginAuthReq } from '@/types/auth/remote';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
-import { toast } from 'react-toastify';
+import { useToast } from '@maru/hooks';
 import { deleteLogoutAdmin, postLoginAdmin } from './api';
 import type { AxiosResponse } from 'axios';
 import checkIsAdmin from '@/utils/functions/checkIsAdmin';
@@ -23,6 +23,7 @@ const removeTokens = () => {
 export const useLoginAdminMutation = ({ phoneNumber, password }: PostLoginAuthReq) => {
   const router = useRouter();
   const { handleError } = useApiError();
+  const { toast } = useToast();
 
   const { mutate: loginAdminMutate, ...restMutation } = useMutation({
     mutationFn: () => postLoginAdmin({ phoneNumber, password }),
@@ -34,12 +35,12 @@ export const useLoginAdminMutation = ({ phoneNumber, password }: PostLoginAuthRe
         if (authority) {
           router.replace(ROUTES.FORM);
         } else {
-          toast('어드민 권한이 없습니다.', { type: 'error' });
+          toast('어드민 권한이 없습니다.', 'ERROR');
           removeTokens();
           router.replace(ROUTES.MAIN);
         }
       } catch (e) {
-        toast('관리자 정보 조회 실패', { type: 'error' });
+        toast('관리자 정보 조회 실패', 'ERROR');
         removeTokens();
         router.replace(ROUTES.MAIN);
       }
@@ -52,16 +53,17 @@ export const useLoginAdminMutation = ({ phoneNumber, password }: PostLoginAuthRe
 
 export const useLogoutAdminMutation = () => {
   const router = useRouter();
+  const { toast } = useToast();
 
   const { mutate: logoutAdminMutate, ...restMutation } = useMutation({
     mutationFn: deleteLogoutAdmin,
     onSuccess: () => {
-      toast('로그아웃 되었습니다.', { type: 'success' });
+      toast('로그아웃 되었습니다.', 'SUCCESS');
       removeTokens();
       router.replace(ROUTES.MAIN);
     },
     onError: () => {
-      toast('잠시후 다시 시도해주세요.', { type: 'error' });
+      toast('잠시후 다시 시도해주세요.', 'ERROR');
     },
   });
   return { logoutAdminMutate, ...restMutation };

apps/admin/src/services/fair/mutations.ts

@@ -2,16 +2,16 @@ import { useMutation } from '@tanstack/react-query';
 import type { FairApiRequestBody } from '@/components/fair/FairForm/fair.hooks';
 import { postFairReq } from '@/services/fair/api';
 import { useApiError } from '@/hooks';
-import { toast } from 'react-toastify';
+import { useToast } from '@maru/hooks';
 
 export const useCreateFairMutation = () => {
   const { handleError } = useApiError();
+  const { toast } = useToast();
+
   return useMutation({
     mutationFn: (data: FairApiRequestBody) => postFairReq(data),
     onSuccess: () => {
-      toast.success('입학 설명회 일정이 만들어졌습니다.', {
-        type: 'success',
-      });
+      toast('입학 설명회 일정이 만들어졌습니다.', 'SUCCESS');
     },
     onError: handleError,
   });

apps/admin/src/services/faq/mutations.ts

@@ -3,19 +3,18 @@ import { useRouter } from 'next/navigation';
 import { deleteFaq, postFaq, putFaq } from './api';
 import type { PostFaqReq, PutFaqReq } from '@/types/faq/remote';
 import { useMutation } from '@tanstack/react-query';
-import { toast } from 'react-toastify';
 import { ROUTES } from '@/constants/common/constant';
+import { useToast } from '@maru/hooks';
 
 export const usePostFaqMutation = () => {
   const { handleError } = useApiError();
   const router = useRouter();
+  const { toast } = useToast();
 
   const { mutate: postFaqMutate, ...restMutation } = useMutation({
     mutationFn: (params: PostFaqReq) => postFaq(params),
     onSuccess: ({ data }) => {
-      toast('게시물이 게시되었습니다.', {
-        type: 'success',
-      });
+      toast('게시물이 게시되었습니다.', 'SUCCESS');
       router.push(`${ROUTES.FAQ}/${data.id}`);
     },
     onError: handleError,
@@ -27,13 +26,12 @@ export const usePostFaqMutation = () => {
 export const usePutFaqMutation = (id: number) => {
   const { handleError } = useApiError();
   const router = useRouter();
+  const { toast } = useToast();
 
   const { mutate: putFaqMutate, ...restMutation } = useMutation({
     mutationFn: (params: PutFaqReq) => putFaq(id, params),
     onSuccess: () => {
-      toast('게시물이 수정되었습니다.', {
-        type: 'success',
-      });
+      toast('게시물이 수정되었습니다.', 'SUCCESS');
       router.push(`${ROUTES.FAQ}/${id}`);
     },
     onError: handleError,
@@ -45,13 +43,12 @@ export const usePutFaqMutation = (id: number) => {
 export const useDeleteFaqMutation = (id: number) => {
   const { handleError } = useApiError();
   const router = useRouter();
+  const { toast } = useToast();
 
   const { mutate: deleteFaqMutate, ...restMutation } = useMutation({
     mutationFn: () => deleteFaq(id),
     onSuccess: () => {
-      toast('게시물이 삭제되었습니다.', {
-        type: 'success',
-      });
+      toast('게시물이 삭제되었습니다.', 'SUCCESS');
       router.push(ROUTES.FAQ);
     },
     onError: handleError,

apps/admin/src/services/form/mutations.ts

@@ -7,7 +7,7 @@ import {
   patchSecondRoundResultAuto,
   patchSecondScoreFormat,
 } from './api';
-import { toast } from 'react-toastify';
+import { useToast } from '@maru/hooks';
 import { KEY } from '@/constants/common/constant';
 import type { PatchSecondRoundResultReq } from '@/types/form/remote';
 import { useSetIsSecondRoundResultEditingStore } from '@/store/form/isSecondRoundResultEditing';
@@ -18,17 +18,19 @@ import type { ReceiveStatusValue } from '@/types/form/client';
 export const useUploadSecondScoreFormatMutation = (handleCloseModal: () => void) => {
   const queryClient = useQueryClient();
   const { handleError } = useApiError();
+  const { toast } = useToast();
+
   const { mutate: uploadSecondScoreFormat, ...restMutation } = useMutation({
     mutationFn: patchSecondScoreFormat,
     onSuccess: async (data) => {
       const contentType = data.headers?.['content-type'];
       const blob = data.data;
       if (data.status === 204) {
-        toast('파일이 입력되었습니다.', { type: 'success' });
+        toast('파일이 입력되었습니다.', 'SUCCESS');
         queryClient.invalidateQueries({ queryKey: [KEY.FORM_LIST] });
         handleCloseModal();
       } else if (contentType?.includes('application/json')) {
-        toast.error('잘못된 파일입니다.');
+        toast('잘못된 파일입니다.', 'ERROR');
         handleCloseModal();
       } else if (data.status === 400) {
         const url = window.URL.createObjectURL(blob);
@@ -39,7 +41,7 @@ export const useUploadSecondScoreFormatMutation = (handleCloseModal: () => void)
         link.click();
         link.remove();
         window.URL.revokeObjectURL(url);
-        toast.error('오류가 있는 파일이 다운로드되었습니다.');
+        toast('오류가 있는 파일이 다운로드되었습니다.', 'ERROR');
         handleCloseModal();
       }
     },
@@ -54,16 +56,15 @@ export const useEditSecondRoundResultMutation = (
 ) => {
   const { handleError } = useApiError();
   const queryClient = useQueryClient();
+  const { toast } = useToast();
 
   const setIsSecondRoundResultEditing = useSetIsSecondRoundResultEditingStore();
   const setSecondRoundResult = useSetSecondRoundResultStore();
 
   const { mutate: editSecondRoundResult, ...restMutation } = useMutation({
     mutationFn: () => patchSecondRoundResult(secondRoundResultData),
     onSuccess: () => {
-      toast('2차 합격 여부가 반영되었습니다.', {
-        type: 'success',
-      });
+      toast('2차 합격 여부가 반영되었습니다.', 'SUCCESS');
       queryClient.invalidateQueries({ queryKey: [KEY.FORM_LIST] });
       setIsSecondRoundResultEditing(false);
       setSecondRoundResult({});
@@ -77,13 +78,12 @@ export const useEditSecondRoundResultMutation = (
 export const useAutoSecondRoundResultMutation = () => {
   const { handleError } = useApiError();
   const queryClient = useQueryClient();
+  const { toast } = useToast();
 
   const { mutate: autoSecondRoundResult, ...restMutation } = useMutation({
     mutationFn: patchSecondRoundResultAuto,
     onSuccess: () => {
-      toast('2차 합격 여부가 모두 반영되었습니다.', {
-        type: 'success',
-      });
+      toast('2차 합격 여부가 모두 반영되었습니다.', 'SUCCESS');
       queryClient.invalidateQueries({ queryKey: [KEY.FORM_LIST] });
     },
     onError: handleError,
@@ -117,13 +117,12 @@ export const usePrintFormUrlMutation = () => {
 export const useReceiveStatusChangeMutation = (formId: number, onClose: () => void) => {
   const { handleError } = useApiError();
   const queryClient = useQueryClient();
+  const { toast } = useToast();
 
   const { mutate: changeReceiveStatus, ...restMutation } = useMutation({
     mutationFn: (status: ReceiveStatusValue) => patchReceiveStatus(formId, status),
     onSuccess: () => {
-      toast('접수 상태가 변경되었습니다.', {
-        type: 'success',
-      });
+      toast('접수 상태가 변경되었습니다.', 'SUCCESS');
       queryClient.invalidateQueries({ queryKey: [KEY.FORM_LIST] });
       queryClient.invalidateQueries({ queryKey: [KEY.FORM_DETAIL, formId] });
       onClose();

apps/admin/src/services/message/mutations.ts

@@ -1,18 +1,19 @@
 import { useApiError } from '@/hooks';
 import { useMutation } from '@tanstack/react-query';
-import { toast } from 'react-toastify';
+import { useToast } from '@maru/hooks';
 import { postMessageByStatus, postMessageByType, postMessageToAll } from './api';
 import { useSetMessageFormStore } from '@/store/message/messageForm';
 import type { MessageForm } from '@/types/message/client';
 
 export const usePostMessageByStatusMutation = () => {
   const { handleError } = useApiError();
   const setMessageForm = useSetMessageFormStore();
+  const { toast } = useToast();
 
   const { mutate: postMessageByStatusMutate, ...restMutation } = useMutation({
     mutationFn: postMessageByStatus,
     onSuccess: () => {
-      toast('메시지를 성공적으로 전송했습니다.', { type: 'success' });
+      toast('메시지를 성공적으로 전송했습니다.', 'SUCCESS');
       setMessageForm({
         title: '',
         recipient: '' as MessageForm['recipient'],
@@ -28,11 +29,12 @@ export const usePostMessageByStatusMutation = () => {
 export const usePostMessageByTypeMutation = () => {
   const { handleError } = useApiError();
   const setMessageForm = useSetMessageFormStore();
+  const { toast } = useToast();
 
   const { mutate: postMessageByTypeMutate, ...restMutation } = useMutation({
     mutationFn: postMessageByType,
     onSuccess: () => {
-      toast('메시지를 성공적으로 전송했습니다.', { type: 'success' });
+      toast('메시지를 성공적으로 전송했습니다.', 'SUCCESS');
       setMessageForm({
         title: '',
         recipient: '' as MessageForm['recipient'],
@@ -48,11 +50,12 @@ export const usePostMessageByTypeMutation = () => {
 export const usePostMessageToAllMutation = () => {
   const { handleError } = useApiError();
   const setMessageForm = useSetMessageFormStore();
+  const { toast } = useToast();
 
   const { mutate: postMessageToAllMutate, ...restMutation } = useMutation({
     mutationFn: postMessageToAll,
     onSuccess: () => {
-      toast('메시지를 성공적으로 전송했습니다.', { type: 'success' });
+      toast('메시지를 성공적으로 전송했습니다.', 'SUCCESS');
       setMessageForm({
         title: '',
         recipient: '' as MessageForm['recipient'],

apps/admin/src/services/notice/mutations.ts

@@ -1,7 +1,7 @@
 import { useApiError } from '@/hooks';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
-import { toast } from 'react-toastify';
+import { useToast } from '@maru/hooks';
 import {
   deleteNotice,
   postNotice,
@@ -15,13 +15,12 @@ import type { PostNoticeReq, PutNoticeReq } from '@/types/notice/remote';
 export const usePostNoticeMutation = () => {
   const { handleError } = useApiError();
   const router = useRouter();
+  const { toast } = useToast();
 
   const { mutate: postNoticeMutate, ...restMutation } = useMutation({
     mutationFn: (params: PostNoticeReq) => postNotice(params),
     onSuccess: ({ data }) => {
-      toast('공지사항이 게시되었습니다.', {
-        type: 'success',
-      });
+      toast('공지사항이 게시되었습니다.', 'SUCCESS');
       router.push(`${ROUTES.NOTICE}/${data.id}`);
     },
     onError: handleError,
@@ -33,13 +32,12 @@ export const usePostNoticeMutation = () => {
 export const usePutNoticeMutation = (id: number) => {
   const { handleError } = useApiError();
   const router = useRouter();
+  const { toast } = useToast();
 
   const { mutate: putNoticeMutate, ...restMutation } = useMutation({
     mutationFn: (params: PutNoticeReq) => putNotice(id, params),
     onSuccess: () => {
-      toast('공지사항이 수정되었습니다.', {
-        type: 'success',
-      });
+      toast('공지사항이 수정되었습니다.', 'SUCCESS');
       router.push(`${ROUTES.NOTICE}/${id}`);
     },
     onError: handleError,
@@ -50,6 +48,7 @@ export const usePutNoticeMutation = (id: number) => {
 
 export const useNoticeFileUrlMutation = () => {
   const { handleError } = useApiError();
+  const { toast } = useToast();
 
   const { mutate: noticeFileUrlMutate, ...restMutation } = useMutation({
     mutationFn: async (files: File[]) => {
@@ -67,9 +66,7 @@ export const useNoticeFileUrlMutation = () => {
       }
     },
     onSuccess: () => {
-      toast('파일이 업로드되었습니다.', {
-        type: 'success',
-      });
+      toast('파일이 업로드되었습니다.', 'SUCCESS');
     },
     onError: handleError,
   });
@@ -80,13 +77,12 @@ export const useNoticeFileUrlMutation = () => {
 export const useDeleteNoticeMutation = (id: number) => {
   const { handleError } = useApiError();
   const router = useRouter();
+  const { toast } = useToast();
 
   const { mutate: deleteNoticeMutate, ...restMutation } = useMutation({
     mutationFn: () => deleteNotice(id),
     onSuccess: () => {
-      toast('공지사항이 삭제되었습니다.', {
-        type: 'success',
-      });
+      toast('공지사항이 삭제되었습니다.', 'SUCCESS');
       router.push(ROUTES.NOTICE);
     },
     onError: handleError,

apps/user/src/app/form/FinalSubmission/FinalSubmission.hook.ts

@@ -1,8 +1,9 @@
-import { useUser, useDownloadFile, useToast } from '@/hooks';
+import { useUser, useDownloadFile } from '@/hooks';
 import { useUploadFormMutation } from '@/services/form/mutations';
 import { useExportFormQuery } from '@/services/form/queries';
 import { useFinalFormStore, useFinalFormValueStore } from '@/stores/form/finalForm';
 import { useCallback, useEffect, useState } from 'react';
+import { useToast } from '@maru/hooks';
 
 export const useCTAButton = (openPdfLoader: () => void, closePdfLoader: () => void) => {
   const { userData } = useUser();