[#247] Modify: Suspense, ErrorBoundary 설정 (#250)

package.json

@@ -21,8 +21,10 @@
     "@sentry/react": "^7.107.0",
     "@sentry/tracing": "^7.107.0",
     "@stomp/stompjs": "^7.0.0",
-    "@tanstack/react-query": "^5.18.1",
-    "@tanstack/react-router": "^1.20.5",
+    "@suspensive/react": "^2.0.1",
+    "@suspensive/react-query": "^2.0.0",
+    "@tanstack/react-query": "^5.37.1",
+    "@tanstack/react-router": "^1.33.7",
     "@tanstack/router-vite-plugin": "^1.15.22",
     "@toss/use-overlay": "^1.3.8",
     "axios": "^1.6.7",
@@ -32,7 +34,6 @@
     "lucide-react": "^0.330.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.12",
     "react-helmet-async": "^2.0.4",
     "react-masonry-css": "^1.0.16",
     "react-toastify": "^10.0.4",

src/components/common/Chat/index.tsx

@@ -1,11 +1,10 @@
-import { Fragment, Suspense, useEffect, useRef } from "react";
+import { Fragment, useEffect, useRef } from "react";
 import { useAtomValue, useSetAtom } from "jotai";
-import { ErrorBoundary } from "@sentry/react";
-import { cn } from "@/utils/tailwind";
+import { QueryErrorBoundary } from "@suspensive/react-query";
 import { debounce } from "@/utils/debounce";
+import ErrorBoundaryFallback from "../Fallback/ErrorBoundaryFallback";
 import MessagePeek from "./MessagePeek";
 import ZzalMessage from "./ZzalMessage";
-import { $isChatOpen } from "@/store/chat";
 import useChat from "@/hooks/chat/useChat";
 import useGetChat from "@/hooks/api/chat/useGetChat";
 import useIntersectionObserver from "@/hooks/common/useIntersectionObserver";
@@ -41,7 +40,6 @@ const ChatRoom = () => {
     }, 200);
 
     scrollTracker?.addEventListener("scroll", handleScroll);
-
     return () => scrollTracker?.removeEventListener("scroll", handleScroll);
   }, [setScrollDirection]);
 
@@ -68,25 +66,10 @@ const ChatRoom = () => {
   );
 };
 
-const Chat = () => {
-  const isChatOpen = useAtomValue($isChatOpen);
-
-  return (
-    <Fragment>
-      <div
-        className={cn(
-          "absolute right-0 h-full w-full overflow-hidden px-6 py-4 transition-[opacity_transform] duration-500 ease-in-out md:w-[33%]",
-          isChatOpen ? "opacity-100" : "translate-x-full opacity-0",
-        )}
-      >
-        <ErrorBoundary fallback={() => <div>채팅 연결 중 에러 발생</div>}>
-          <Suspense fallback={"chatroom pending..."}>
-            <ChatRoom />
-          </Suspense>
-        </ErrorBoundary>
-      </div>
-    </Fragment>
-  );
-};
+const Chat = () => (
+  <QueryErrorBoundary fallback={ErrorBoundaryFallback}>
+    <ChatRoom />
+  </QueryErrorBoundary>
+);
 
 export default Chat;

src/components/common/Fallback/ErrorBoundaryFallback.tsx

@@ -0,0 +1,17 @@
+import { ErrorBoundaryFallbackProps } from "@suspensive/react";
+
+const ErrorBoundaryFallback = ({ reset }: ErrorBoundaryFallbackProps) => (
+  <div className="flex h-full flex-1 flex-col items-center text-lg">
+    <div role="alert" className=" alert flex flex-col items-center">
+      <div className="font-bold">잠시 후 다시 시도해주세요</div>
+      <p className="text-center text-sm">
+        해당 요청을 처리하는데 <br /> 실패했습니다
+      </p>
+      <button className="btn btn-outline btn-wide" onClick={reset}>
+        다시 시도
+      </button>
+    </div>
+  </div>
+);
+
+export default ErrorBoundaryFallback;

src/components/common/Fallback/MasonrySkeleton.tsx

@@ -0,0 +1,17 @@
+import { cn } from "@/utils/tailwind";
+import MasonryLayout from "@/components/common/MasonryLayout";
+
+const MasonrySkeleton = () => {
+  return (
+    <MasonryLayout className="mt-15pxr w-full">
+      {Array.from(Array(15)).map((_, index) => (
+        <div
+          key={`home-${index}`}
+          className={cn(`skeleton mb-10pxr w-72`, index % 2 ? "h-56" : "h-72")}
+        ></div>
+      ))}
+    </MasonryLayout>
+  );
+};
+
+export default MasonrySkeleton;