[FE] Feat: add error-boundary(#145)

jungle-6-3 · Nov 14, 2024 · 25e4499 · 25e4499
2 parents b44033a + b610421
commit 25e4499
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 42 deletions.
diff --git a/src/components/Conversation/Save/Summary.tsx b/src/components/Conversation/Save/Summary.tsx
@@ -24,7 +24,6 @@ const ConversationSaveSummaryViewer = ({
   const editor = useCreateBlockNote();
 
   const debouncedSetSummary = debounce((markdown: string) => {
-    console.log(markdown)
     setSummary(markdown);
   }, 300);
 

diff --git a/src/components/Conversation/Share/ErrorBoundary.tsx b/src/components/Conversation/Share/ErrorBoundary.tsx
@@ -0,0 +1,44 @@
+import React, { ReactNode } from "react";
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends React.Component <ErrorBoundaryProps, ErrorBoundaryState>{
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="absolute left-1/2 top-1/2 flex h-screen -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4">
+          <p className="text-center text-2xl font-bold text-gray-600">
+            이 화면은 현재 볼 수 없어요.
+            <br />
+            회의를 진행한 사람에게 권한을 요청하세요.
+          </p>
+          <p
+            onClick={() => window.history.back()}
+            className="cursor-pointer text-center text-sm font-bold text-gray-600 underline"
+          >
+            되돌아가기
+          </p>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/src/components/Conversation/Share/ShareTabs.tsx b/src/components/Conversation/Share/ShareTabs.tsx
@@ -25,42 +25,44 @@ const ConversationShareTabs = () => {
 
   return (
     <>
-      <ConversationShareHeader title={shareData.title} />
-      <Tabs defaultValue="summary">
-        <TabsList>
-          {summaryData && <TabsTrigger value="summary">Summary</TabsTrigger>}
-          {noteData && <TabsTrigger value="note">Note</TabsTrigger>}
+        <ConversationShareHeader title={shareData.title} />
+        <Tabs defaultValue="summary">
+          <TabsList>
+            {summaryData && <TabsTrigger value="summary">Summary</TabsTrigger>}
+            {noteData && <TabsTrigger value="note">Note</TabsTrigger>}
+            {drawBoardData && (
+              <TabsTrigger value="drawBoard">DrawBoard</TabsTrigger>
+            )}
+            {voiceData && chatData && (
+              <TabsTrigger value="chat">Chat</TabsTrigger>
+            )}
+          </TabsList>
+          {summaryData && (
+            <TabsContent value="summary">
+              <ConversationShareSummaryViewer data={summaryData.data.data} />
+            </TabsContent>
+          )}
+          {noteData && (
+            <TabsContent value="drawBoard">
+              <ConversationShareDrawBoardViewer
+                data={drawBoardData.data.data}
+              />
+            </TabsContent>
+          )}
           {drawBoardData && (
-            <TabsTrigger value="drawBoard">DrawBoard</TabsTrigger>
+            <TabsContent value="note">
+              <ConversationShareNoteViewer data={noteData.data.data} />
+            </TabsContent>
           )}
           {voiceData && chatData && (
-            <TabsTrigger value="chat">Chat</TabsTrigger>
+            <TabsContent value="chat">
+              <ConversationShareChatViewer
+                chats={chatData.data.data}
+                voice={voiceData.data.data}
+              />
+            </TabsContent>
           )}
-        </TabsList>
-        {summaryData && (
-          <TabsContent value="summary">
-            <ConversationShareSummaryViewer data={summaryData.data.data} />
-          </TabsContent>
-        )}
-        {noteData && (
-          <TabsContent value="drawBoard">
-            <ConversationShareDrawBoardViewer data={drawBoardData.data.data} />
-          </TabsContent>
-        )}
-        {drawBoardData && (
-          <TabsContent value="note">
-            <ConversationShareNoteViewer data={noteData.data.data} />
-          </TabsContent>
-        )}
-        {voiceData && chatData && (
-          <TabsContent value="chat">
-            <ConversationShareChatViewer
-              chats={chatData.data.data}
-              voice={voiceData.data.data}
-            />
-          </TabsContent>
-        )}
-      </Tabs>
+        </Tabs>
     </>
   );
 };

diff --git a/src/hooks/Conversation/usePreviousRoomQuery.tsx b/src/hooks/Conversation/usePreviousRoomQuery.tsx
@@ -41,14 +41,12 @@ export const usePreviouseRoomPatchMutate = (dataPk: string) => {
 };
 
 export const usePreviousShareRoomQuery = (shareId: string) => {
-  const {
-    data: shareData,
-    isError,
-    isLoading,
-  } = useSuspenseQuery({
+  const { data: shareData } = useSuspenseQuery({
     queryKey: ["share", shareId],
     queryFn: () => getPreviousShareRoom(shareId),
+    retry: 0,
+    staleTime: 0,
   });
 
-  return { shareData, isError, isLoading };
+  return { shareData };
 };
diff --git a/src/pages/room/RoomSharePage.tsx b/src/pages/room/RoomSharePage.tsx
@@ -1,3 +1,4 @@
+import ErrorBoundary from "@/components/Conversation/Share/ErrorBoundary";
 import ConversationShareTabs from "@/components/Conversation/Share/ShareTabs";
 import { Suspense } from "react";
 import { Link } from "react-router-dom";
@@ -15,9 +16,11 @@ const RoomSavePage = () => {
         </Link>
       </div>
       <div className="px-24 pb-6 pt-6">
-        <Suspense>
-          <ConversationShareTabs />
-        </Suspense>
+        <ErrorBoundary>
+          <Suspense>
+            <ConversationShareTabs />
+          </Suspense>
+        </ErrorBoundary>
       </div>
     </>
   );