Merge branch 'dev' into Feat/FeedPage

Author: jiyeeeah

components/ui/DatePicker/Date.tsx

@@ -26,7 +26,7 @@ export default function Date({
         <div className="flex gap-1 caption1">
           <span>{format(selectedDate, 'MMM yyyy')}</span>
           <button type="button" onClick={onChangePickerType}>
-            <CaretDownIcon />
+            <CaretDownIcon className="w-4 h-4" />
           </button>
         </div>
         <div className="flex gap-2">

components/ui/DatePicker/Month.tsx

@@ -27,7 +27,7 @@ export default function Month({
         <span className="flex gap-1 caption1">
           {format(selectedDate, 'yyyy')}
           <button type="button" onClick={onChangePickerType}>
-            <CaretDownIcon />
+            <CaretDownIcon className="w-4 h-4" />
           </button>
         </span>
         <div>

components/ui/Modal/AddChatRoomModal/index.tsx

@@ -42,7 +42,7 @@ export default function AddChatRoomModal({ open, onClose }: ModalProps) {
     const { name, description } = data;
     setIsLoading(true);
     try {
-      const response = await postChatRoom({
+      const { chatroomId } = await postChatRoom({
         image: imageFile as File,
         body: {
           name,
@@ -52,23 +52,26 @@ export default function AddChatRoomModal({ open, onClose }: ModalProps) {
           locationLimit: true,
         },
       });
-      if (response.chatroomId) {
+      if (chatroomId) {
         Toast.success('채팅룸 오픈! 🦊');
-        router.push(`/chat/${response.chatroomId}`);
-      } else {
-        throw new Error(response.message);
+        router.push(`/chat/${chatroomId}`);
       }
     } catch (error) {
-      console.error(error);
+      if (error instanceof Error) Toast.error(error.message);
     } finally {
       setIsLoading(false);
     }
   };
   const onSubmit: SubmitHandler<FormData> = (data) => {
+    const LIMIT_IMAGE_SIZE = 2097152;
     if (!imageFile) {
       Toast.error('커버이미지를 업로드 해주세요. 🐈');
       return;
     }
+    if (imageFile.size > LIMIT_IMAGE_SIZE) {
+      Toast.error('2MB 이상 이미지는 업로드할 수 없어요.');
+      return;
+    }
     onCreateChatRoom(data);
   };
   return (

components/ui/Modal/ImageUploadModal/index.tsx

@@ -5,6 +5,7 @@ import { uploadChatImage } from '@/service/chatRoom';
 import { useState } from 'react';
 import LoadingIcon from '@/public/loading.svg';
 import prettyBytes from 'pretty-bytes';
+import Toast from '@/utils/notification';
 import Modal from '..';
 import Button from '../../Button';
 
@@ -21,13 +22,18 @@ export default function ImageUploadModal({
   const [isLoading, setIsLoading] = useState(false);
 
   const handleUploadImage = async () => {
+    const LIMIT_IMAGE_SIZE = 2097152;
+
     try {
       if (imageFile) {
         setIsLoading(true);
+        if (imageFile.size > LIMIT_IMAGE_SIZE) {
+          throw new Error('2MB 이상 이미지는 업로드할 수 없어요.');
+        }
         await uploadChatImage(roomId, imageFile);
       }
     } catch (error) {
-      console.error(error);
+      if (error instanceof Error) Toast.error(error.message);
     } finally {
       setIsLoading(false);
       onClose();

hooks/mutations/useCreateSchedule.ts

@@ -19,9 +19,6 @@ export default function useCreateSchedule(closeModal: () => void) {
       closeModal();
       return queryClient.invalidateQueries([queryKeys.SCHEDULE_LIST]);
     },
-    onError: (error: Error) => {
-      Toast.error(error.message);
-    },
   });
   return { mutate, isLoading };
 }

hooks/mutations/useDelegateRoomOwner.ts

@@ -18,11 +18,9 @@ export default function useDelegateRoomOwner({
       delegateRoomOwner(roomId, userId),
     onSuccess: () => {
       Toast.success(`${user}님에게 방장을 넘겨주었어요.🐶`);
-      modalClose();
       queryClient.invalidateQueries([queryKeys.CHATROOM_USER_LIST]);
     },
-    onError: (error: Error) => {
-      Toast.error(error.message);
+    onSettled: () => {
       modalClose();
     },
   });

hooks/mutations/useDeleteSchedule.ts

@@ -13,9 +13,6 @@ export default function useDeleteSchedule() {
       Toast.success('스케줄을 삭제했어요. 🐹');
       return queryClient.invalidateQueries([queryKeys.SCHEDULE_LIST]);
     },
-    onError: (error: Error) => {
-      Toast.error(error.message);
-    },
   });
   return { mutate };
 }

hooks/mutations/useInviteUserToChatroom.ts

@@ -22,7 +22,6 @@ export default function useInviteUserToChatroom(successCb: () => void) {
         refetchType: 'all',
       });
     },
-    onError: () => Toast.error('잠시후 다시 시도해주세요.'),
   });
   return { mutate };
 }

hooks/mutations/useJoinSchedule.ts

@@ -12,9 +12,6 @@ export default function useJoinSchedule() {
     onSuccess: () => {
       Toast.success('스케줄에 참여하였습니다.🐾');
     },
-    onError: (error: Error) => {
-      Toast.error(error.message);
-    },
     onSettled: () => queryClient.invalidateQueries([queryKeys.SCHEDULE_LIST]),
   });
   return { mutate, isLoading };

hooks/mutations/useWithdrawSchedule.ts

@@ -13,9 +13,6 @@ export default function useWithdrawSchedule() {
       Toast.success('일정을 취소했어요. 🐾');
       return queryClient.invalidateQueries([queryKeys.SCHEDULE_LIST]);
     },
-    onError: () => {
-      Toast.error('일정취소를 실패했어요. 🥲 잠시후 다시 시도해주세요.');
-    },
   });
   return { mutate };
 }

hooks/queries/ReactQueryProvider.tsx

@@ -1,9 +1,41 @@
-"use client";
+'use client';
 
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AuthError } from '@/lib/error';
+import Toast from '@/utils/notification';
 
-const queryClient = new QueryClient();
+import {
+  MutationCache,
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query';
 
-export default function ReactQueryProvider({ children }: { children: React.ReactNode }) {
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+// 에러핸들링 함수 만약 에러클래스를 여러개 정의한다면 에러별로 공통된 에러핸들링을 정의할 수 있음.
+const handleError = (error: unknown) => {
+  if (error instanceof Error) Toast.error(error.message);
+  if (error instanceof AuthError) {
+    Toast.error(error.message);
+    window.location.assign(`/auth/login`);
+  }
+};
+
+const queryClient = new QueryClient({
+  // useMutation 과 useQuery 훅의 에러를 한곳에서 공통적으로 처리할수 있도록 하였습니다.
+  mutationCache: new MutationCache({
+    onError: (error) => handleError(error),
+  }),
+  // useQuery의 onError callback 이 deprecated(더 이상 사용되지않음) 되었기 때문에 추가하였습니다. useQuery 훅이 작동할때 에러가 발생한다면 에러 토스트알림을 띄웁니다.
+  queryCache: new QueryCache({
+    onError: (error) => handleError(error),
+  }),
+});
+
+export default function ReactQueryProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
 }