Refector/글로벌에러바운더리

package.json

@@ -38,6 +38,7 @@
     "react": "^18",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18",
+    "react-error-boundary": "^4.1.2",
     "react-hook-form": "^7.53.0",
     "react-intersection-observer": "^9.13.1",
     "tailwind-merge": "^2.5.4",

src/apis/groups.api.ts

@@ -9,34 +9,26 @@ import { Task } from '@/types/tasks.types';
 import { axiosInstance } from './_axiosInstance';
 
 export const getGroup = async (id: number) => {
-  try {
-    const response = await axiosInstance<GetGroupResponse>({
-      method: 'GET',
-      url: `groups/${id}`,
-    });
-    return response.data;
-  } catch (error) {
-    throw new Error('팀 정보를 가져오는 데 실패했습니다.');
-  }
+  const response = await axiosInstance<GetGroupResponse>({
+    method: 'GET',
+    url: `groups/${id}`,
+  });
+  return response.data;
 };
 
 export const postGroup = async ({ name, image }: PostGroupRequest) => {
-  try {
-    const response = await axiosInstance.post<GetGroupResponse>(
-      'groups',
-      { name, image },
-      {
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      }
-    );
-    const body = response.data;
+  const response = await axiosInstance.post<GetGroupResponse>(
+    'groups',
+    { name, image },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  );
+  const body = response.data;
 
-    return body;
-  } catch (error) {
-    throw new Error('팀 생성하는 데 실패했습니다.');
-  }
+  return body;
 };
 
 export const patchGroup = async ({ id, name, image }: UpdateGroupRequest) => {
@@ -63,22 +55,18 @@ export async function postInviteGroup({
   userEmail,
   token,
 }: InviteGroupRequest) {
-  try {
-    const response = await axiosInstance.post<string>(
-      'groups/accept-invitation',
-      { userEmail, token },
-      {
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      }
-    );
-    const body = response.data;
+  const response = await axiosInstance.post<string>(
+    'groups/accept-invitation',
+    { userEmail, token },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  );
+  const body = response.data;
 
-    return body;
-  } catch (error) {
-    throw new Error('그룹 참여에 실패했습니다.');
-  }
+  return body;
 }
 
 export const getInviteGroup = async (id: number) => {
@@ -90,44 +78,32 @@ export const getInviteGroup = async (id: number) => {
 };
 
 export const postTaskList = async (groupId: number, name: string) => {
-  try {
-    const response = await axiosInstance<TaskList>({
-      method: 'POST',
-      url: `/groups/${groupId}/task-lists`,
-      data: { name },
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    return response.data;
-  } catch (error) {
-    throw new Error('할 일 목록를 생성하는 데 실패했습니다.');
-  }
+  const response = await axiosInstance<TaskList>({
+    method: 'POST',
+    url: `/groups/${groupId}/task-lists`,
+    data: { name },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return response.data;
 };
 
 export async function getTasks(id: number, date: string) {
-  try {
-    const response = await axiosInstance<Task[]>({
-      method: 'GET',
-      url: `groups/${id}/tasks`,
-      data: { date },
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    return response.data;
-  } catch (error) {
-    throw new Error('할 일을 불러오는 데 실패했습니다.');
-  }
+  const response = await axiosInstance<Task[]>({
+    method: 'GET',
+    url: `groups/${id}/tasks`,
+    data: { date },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return response.data;
 }
 
 export async function deleteMember(groupId: number, memberUserId: number) {
-  try {
-    await axiosInstance({
-      method: 'DELETE',
-      url: `groups/${groupId}/member/${memberUserId}`,
-    });
-  } catch (error) {
-    throw new Error('멤버 삭제에 실패했습니다.');
-  }
+  await axiosInstance({
+    method: 'DELETE',
+    url: `groups/${groupId}/member/${memberUserId}`,
+  });
 }

src/apis/taskList.api.ts

@@ -2,32 +2,24 @@ import { TaskList } from '@/types/tasklist.types';
 import { axiosInstance } from './_axiosInstance';
 
 export const postTaskList = async (groupId: number, name: string) => {
-  try {
-    const response = await axiosInstance<TaskList>({
-      method: 'POST',
-      url: `/groups/${groupId}/task-lists`,
-      data: { name },
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    return response.data;
-  } catch (error) {
-    throw new Error('할 일 목록를 생성하는 데 실패했습니다.');
-  }
+  const response = await axiosInstance<TaskList>({
+    method: 'POST',
+    url: `/groups/${groupId}/task-lists`,
+    data: { name },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return response.data;
 };
 
 export const deleteTaskList = async (groupId: number, taskListId: number) => {
-  try {
-    const response = await axiosInstance({
-      method: 'DELETE',
-      url: `/groups/${groupId}/task-lists/${taskListId}`,
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    return response;
-  } catch (error) {
-    throw new Error('');
-  }
+  const response = await axiosInstance({
+    method: 'DELETE',
+    url: `/groups/${groupId}/task-lists/${taskListId}`,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return response;
 };

src/components/TaskList/TaskLists.tsx

@@ -41,7 +41,7 @@ function TaskItem({ taskList, taskListColor, isMember }: TaskItemProps) {
 
   const handleTaskClick = (e: React.MouseEvent) => {
     setSelectedTaskList(taskList);
-    router.push(`/${taskList.groupId}/tasks`);
+    router.push(`/teams/${taskList.groupId}/tasks`);
     e.stopPropagation();
   };
 

src/components/common/Badge.tsx

@@ -12,11 +12,11 @@ function Badge(props: BadgeProps): JSX.Element {
   const no = count === 0 && left === 0;
   const badgeClass = `flex items-center gap-1 rounded-2xl 
   bg-primary pb-1 pl-2 pr-2 pt-1 shadow-md`;
-  const ongoingSrc = 'icons/Progress_ongoing.svg';
-  const checkSrc = 'icons/Progress_done.svg';
-  const bestSrc = 'icons/Best.svg';
-  const doneSrc = 'icons/Check_lightGreen.svg';
-  const xSrc = 'icons/X.svg';
+  const ongoingSrc = '../icons/Progress_ongoing.svg';
+  const checkSrc = '../icons/Progress_done.svg';
+  const bestSrc = '../icons/Best.svg';
+  const doneSrc = '../icons/Check_lightGreen.svg';
+  const xSrc = '../icons/X.svg';
 
   let imageSrc;
   let altText;

src/components/common/error/ErrorBoundary.tsx

@@ -0,0 +1,19 @@
+import { QueryErrorResetBoundary } from '@tanstack/react-query';
+import { ErrorBoundary } from 'react-error-boundary';
+import ErrorFallback from './ErrorFallback';
+
+export default function GlobalBoundary({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary onReset={reset} FallbackComponent={ErrorFallback}>
+          {children}
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+}

src/components/common/error/ErrorFallback.tsx

@@ -0,0 +1,62 @@
+import Button, {
+  ButtonBackgroundColor,
+  ButtonBorderColor,
+  ButtonPadding,
+  ButtonStyle,
+  TextColor,
+  TextSize,
+} from '@/components/common/Button/Button';
+
+import axios from 'axios';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { FallbackProps } from 'react-error-boundary';
+
+export default function ErrorFallback({
+  error,
+  resetErrorBoundary,
+}: FallbackProps) {
+  const [redirected, setRedirected] = useState(false);
+  const router = useRouter();
+  if (
+    axios.isAxiosError(error) &&
+    error.response?.status === 401 &&
+    !redirected
+  ) {
+    router.push('/signin'); // 로그인 페이지로 리다이렉트
+    setRedirected(true);
+    return;
+  }
+  return (
+    <div className="flex h-screen flex-col items-center justify-center">
+      <div className="flex flex-col items-center">
+        <h1
+          className="relative mt-[50px] text-[10rem] text-brand-primary 
+         mob:text-[6rem]"
+        >
+          <span className="relative inline-block animate-bounce404-1">E</span>
+          <span className="relative inline-block animate-bounce404-2">R</span>
+          <span className="relative inline-block animate-bounce404-1">R</span>
+          <span className="relative inline-block animate-bounce404-2">O</span>
+          <span className="relative inline-block animate-bounce404-3">R</span>
+        </h1>
+      </div>
+      <p className="mb-10 text-2xl mob:text-xl-semibold">
+        {redirected ? '로그인 후 시도해주세요!' : error.response?.data.message}
+      </p>
+
+      <Button
+        textSize={TextSize.Large}
+        buttonStyle={ButtonStyle.Box}
+        textColor={TextColor.White}
+        buttonBackgroundColor={ButtonBackgroundColor.None}
+        buttonBorderColor={ButtonBorderColor.LightGray}
+        buttonPadding={ButtonPadding.Large}
+        className="border-2"
+        onClick={() => resetErrorBoundary()}
+      >
+        {redirected ? '로그인하기' : '재시도하기'}
+      </Button>
+    </div>
+  );
+}

src/components/layouts/ui/header/ui/header.menu.tsx

@@ -35,7 +35,7 @@ export function HeaderMenu({
             className="flex items-center justify-center"
           >
             <Link
-              href={`/${membership.groupId}/editteam`}
+              href={`/teams/${membership.groupId}/editteam`}
               className="p-4 hover:bg-tertiary"
             >
               수정하기

src/components/layouts/ui/header/ui/header.nav.tsx

@@ -108,7 +108,7 @@ export default function HeaderNav() {
             {memberships &&
               memberships.map((m) => (
                 <li key={m.groupId} className="relative flex items-center">
-                  <Link href={`/${m.groupId}`}>
+                  <Link href={`/teams/${m.groupId}`}>
                     <Menu.Trigger
                       className="flex"
                       menuId={GROUP_MENU}

src/components/layouts/ui/membership/MembershipItem.tsx

@@ -32,7 +32,7 @@ export const MembershipItem = memo(
             <ImageIcon width={32} height={32} />
           )}
           <Link
-            href={`/${groupId}`}
+            href={`/teams/${groupId}`}
             type="button"
             className={cn([
               'w-36 overflow-hidden text-ellipsis whitespace-nowrap',
@@ -64,7 +64,7 @@ export const MembershipItem = memo(
               className="flex items-center justify-center"
             >
               <Link
-                href={`/${groupId}/editteam`}
+                href={`/teams/${groupId}/editteam`}
                 className="p-4 hover:bg-tertiary"
               >
                 수정하기