fix : 에러바운더리 수정

4bujak-4bujak · Jun 22, 2024 · d0f62cb · d0f62cb
1 parent 721c916
commit d0f62cb
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 20 deletions.
diff --git a/public/error.png b/public/error.png
diff --git a/src/components/community/shared/PostDetail.tsx b/src/components/community/shared/PostDetail.tsx
@@ -6,6 +6,7 @@ import { cancelLike, registerLike } from '../remote/post';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { usePostDetail } from '../factory/postDetailFactory';
+import ErrorBoundary from '@/components/shared/ErrorBoundary';
 
 const PostDetail = () => {
   const router = useRouter();
@@ -53,7 +54,7 @@ const PostDetail = () => {
         {/* 유저 사진 */}
         <div className="w-[42px] h-[42px]">
           <Image
-            src={`${postData.writer.profile}`}
+            src={`${postData?.writer?.profile}`}
             alt="image"
             priority={true}
             className="rounded-[50%] w-full h-full"
@@ -67,12 +68,12 @@ const PostDetail = () => {
         <div className="flex flex-col flex-1">
           {/* 유저 이름 */}
           <div className="flex justify-between">
-            <div className="text-sm font-semibold">{postData.writer.nickname}</div>
-            {postData.isWriter && (
+            <div className="text-sm font-semibold">{postData?.writer?.nickname}</div>
+            {postData?.isWriter && (
               <div
                 onClick={() => {
                   setOpen(true);
-                  setDeleteId(String(postData.postId));
+                  setDeleteId(String(postData?.postId));
                   setCategory('post');
                 }}
                 className="text-gray-500 text-sm font-normal underline cursor-pointer">
@@ -87,13 +88,13 @@ const PostDetail = () => {
       </div>
 
       {/* 제목자리 */}
-      <div className="mt-6 text-lg font-bold">{postData.title}</div>
+      <div className="mt-6 text-lg font-bold">{postData?.title}</div>
 
       {/* 컨텐츠 내용자리 */}
-      <div className="mt-3">{postData.content}</div>
+      <div className="mt-3">{postData?.content}</div>
 
       {/* 사진자리 */}
-      {(postData.images?.length as number) > 0 ? (
+      {(postData?.images?.length as number) > 0 ? (
         <div className="flex flex-col gap-2 mt-5">
           {postData.images?.map((image: string, i: number) => (
             <div className="w-[360px] h-[280px]" key={i}>
@@ -117,29 +118,29 @@ const PostDetail = () => {
       <div className="flex items-center mt-3 text-gray-500 text-xs font-normal">
         {/* 일자 */}
         <div className="border-r border-neutral-300 pr-2">
-          {formatDate(postData.createdDate)}
+          {formatDate(postData?.createdDate)}
         </div>
         {/* 시간 */}
-        <div className="pl-2">{formatTime(postData.createdDate)}</div>
+        <div className="pl-2">{formatTime(postData?.createdDate)}</div>
       </div>
 
       {/* 좋아요 조회수 자리 */}
       <div className=" mt-7 flex items-center justify-center text-sm text-gray-800 gap-[37px]">
         {/* 좋아요 */}
         <div
           onClick={() => {
-            if (postData.isLiked) {
-              cancelLikeMutate(postData.postId);
+            if (postData?.isLiked) {
+              cancelLikeMutate(postData?.postId);
             } else {
-              registerLikeMutate(postData.postId);
+              registerLikeMutate(postData?.postId);
             }
           }}
           className="flex items-center justify-center gap-1 cursor-pointer">
           <img src={heartImg} alt="" />
 
           <div className="flex items-center justify-center gap-1">
             <div>좋아요</div>
-            <div>{postData.likeCount}</div>
+            <div>{postData?.likeCount}</div>
           </div>
         </div>
 
@@ -151,12 +152,33 @@ const PostDetail = () => {
           <img src="/community/viewCount.svg" alt="" />
           <div className="flex items-center justify-center gap-1">
             <div>조회수</div>
-            <div>{postData.viewCount}</div>
+            <div>{postData?.viewCount}</div>
           </div>
         </div>
       </div>
     </div>
   );
 };
 
-export default PostDetail;
+export default WrapErrorBoundary;
+
+function WrapErrorBoundary() {
+  return (
+    <ErrorBoundary
+      fallbackComponent={
+        <div className="mt-[100px] mb-[170px]">
+          <div className="flex flex-col items-center justify-center">
+            <Image src="/error.png" width={100} height={100} alt="error" />
+            <div className="text-space-purple font-bold text-lg">
+              글을 가져오는 중 일시적인 오류가 발생했습니다.
+            </div>
+            <div className="text-gray-500 text-md font-semibold">
+              잠시 후 다시 시도해주세요
+            </div>
+          </div>
+        </div>
+      }>
+      <PostDetail />
+    </ErrorBoundary>
+  );
+}
diff --git a/src/components/shared/ErrorBoundary.tsx b/src/components/shared/ErrorBoundary.tsx
@@ -0,0 +1,35 @@
+import React, { ErrorInfo } from 'react';
+
+interface Props {
+  children: React.ReactNode;
+  fallbackComponent?: React.ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.log({ error, errorInfo });
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallbackComponent != null) {
+        return <>{this.props.fallbackComponent}</>;
+      }
+
+      return <div>문제가 발생했어요.</div>;
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
@@ -2,10 +2,12 @@ import { authHandlers } from './authHandler';
 import { questionHandlers } from './questionHandler';
 import { notificationHandler } from './notificationHandler';
 import { postHandlers } from './postHandler';
+import { mainErrorHandlers } from './mainPageHandler';
 
 export const handlers = [
   ...authHandlers,
   ...questionHandlers,
   ...notificationHandler,
-  ...postHandlers
+  ...postHandlers,
+  ...mainErrorHandlers
 ];
diff --git a/src/mocks/mainPageHandler/index.ts b/src/mocks/mainPageHandler/index.ts
@@ -0,0 +1,12 @@
+import { http, HttpResponse } from 'msw';
+
+export const mainErrorHandlers = [
+  http.get(`https://joo-api.store/branches/27/available-count`, () => {
+    return new HttpResponse('Not found', {
+      status: 400,
+      headers: {
+        'Content-Type': 'text/plain'
+      }
+    });
+  })
+];
diff --git a/src/mocks/mainPageHandler/mocks.ts b/src/mocks/mainPageHandler/mocks.ts
@@ -0,0 +1,6 @@
+export const MOCK_MAIN_DATA = {
+  status: 400,
+  errorCode: null,
+  data: null,
+  message: '오늘의 일정을 가져오는 중 에러 발생'
+};
diff --git a/src/mocks/postHandler/index.ts b/src/mocks/postHandler/index.ts
@@ -3,7 +3,9 @@ import { MOCK_POSTDETAIL_DATA } from './mocks';
 
 export const postHandlers = [
   /* ----- 글 상세 데이터 가져오기 api ----- */
-  http.get(`https://joo-api.store/posts/39`, () => {
-    return HttpResponse.json(MOCK_POSTDETAIL_DATA);
+  http.get(`https://joo-api.store/posts/25`, () => {
+    return HttpResponse.json('Not found', {
+      status: 404
+    });
   })
 ];
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,3 +1,4 @@
+import ErrorBoundary from '@/components/shared/ErrorBoundary';
 import Layout from '@/components/shared/Layout';
 import LoadingSpinner from '@/components/shared/LoadingSpinner';
 import { AuthorizationProvider } from '@/providers/Authentication';
@@ -42,8 +43,10 @@ export default function App({ Component, pageProps }: AppProps) {
             <AuthorizationProvider>
               <QueryClientProvider client={queryClient}>
                 <Hydrate state={pageProps.dehydratedState}>
-                  {loading && <LoadingSpinner />}
-                  <Component {...pageProps} />
+                  <ErrorBoundary>
+                    {loading && <LoadingSpinner />}
+                    <Component {...pageProps} />
+                  </ErrorBoundary>
                 </Hydrate>
                 <ReactQueryDevtools initialIsOpen={false} />
               </QueryClientProvider>