[FIX] 에러상황에서의 폴백 UI 개선 (#515)

Author: rkdwoals159

frontend/src/api/lib/constant.ts …ontend/src/api/constants/errorCodeMap.tsfrontend/src/api/lib/constant.ts renamed to frontend/src/api/constants/errorCodeMap.ts frontend/src/api/lib/constant.ts renamed to frontend/src/api/constants/errorCodeMap.ts

@@ -1,6 +1,9 @@
 import { API_ERROR_MESSAGES } from "@/api/constants";
 import { getApiErrorMessageByBackendErrorCode } from "@/api/lib/errorCode";
-import { STATUS_ERROR_MESSAGE_MAP, RESPONSE_PATH_ERROR_MESSAGE_MAP } from "@/api/lib/constant";
+import {
+  STATUS_ERROR_MESSAGE_MAP,
+  RESPONSE_PATH_ERROR_MESSAGE_MAP,
+} from "@/api/constants/errorCodeMap";
 import type { ApiHttpError, ErrorResponse } from "@/api/lib/type";
 
 export const toApiHttpError = async (

frontend/src/api/lib/error.ts

@@ -1,5 +1,8 @@
 import { API_ERROR_MESSAGES } from "@/api/constants";
-import { BACKEND_ERROR_CODE_MAP, BACKEND_ERROR_CODE_TO_API_ERROR_KEY } from "@/api/lib/constant";
+import {
+  BACKEND_ERROR_CODE_MAP,
+  BACKEND_ERROR_CODE_TO_API_ERROR_KEY,
+} from "@/api/constants/errorCodeMap";
 import type { BackendErrorCode } from "@/api/lib/type";
 
 // backend/src/main/java/com/moong/exception/errorcode/ErrorCode.java 기준

frontend/src/api/lib/errorCode.ts

@@ -1,5 +1,5 @@
 import type { ToastOptions } from "@/components/ui/Toast/toast.type";
-import type { BACKEND_ERROR_CODE_MAP } from "@/api/lib/constant";
+import type { BACKEND_ERROR_CODE_MAP } from "@/api/constants/errorCodeMap";
 
 export type ErrorResponse = {
   code?: unknown;

frontend/src/api/lib/type.ts

@@ -3,8 +3,7 @@ import { formatAmount } from "@/utils/amount";
 import CategoryAnalysisChart from "./CategoryAnalysisChart";
 import MedicalAnalysisChart from "./MedicalAnalysisChart";
 import { formatRatio } from "@/app/(sidebar)/analysis/_utils";
-import ServerComponentErrorFallback from "@/components/ui/ErrorBoundary/ServerComponentErrorFallback";
-
+import AnalysisChartEmpty from "./AnalysisChartEmpty";
 import type { components } from "@/types/schema";
 import type {
   CategoryAnalysisChartCardProps,
@@ -16,7 +15,7 @@ export async function CategoryAnalysisChartCard({
 }: CategoryAnalysisChartCardProps) {
   const categoryData = await categoryPromise;
   if (categoryData instanceof Error) {
-    return <ServerComponentErrorFallback message={categoryData.message} />;
+    return <AnalysisChartEmpty message={categoryData.message} />;
   }
 
   const { items: categoryItems } = categoryData;
@@ -51,12 +50,12 @@ export async function MedicalAnalysisChartCard({
 }: MedicalAnalysisChartCardProps) {
   const petInfo = await petInfoPromise;
   if (petInfo instanceof Error) {
-    return <ServerComponentErrorFallback message={petInfo.message} />;
+    return <AnalysisChartEmpty message={petInfo.message} />;
   }
 
   const medicalData = await medicalPromise;
   if (medicalData instanceof Error) {
-    return <ServerComponentErrorFallback message={medicalData.message} />;
+    return <AnalysisChartEmpty message={medicalData.message} />;
   }
 
   const petName = petInfo?.petName ?? "반려동물";

frontend/src/app/(sidebar)/analysis/_components/chart/AnalysisCharts.tsx

@@ -18,6 +18,8 @@ vi.mock("@/app/(sidebar)/analysis/_components/chart/CategoryAnalysisChart", () =
   default: () => null,
 }));
 
+vi.mock("@/assets/icons/analysis/ic_warning.svg", () => ({ default: () => null }));
+
 describe("MedicalAnalysisChartCard", () => {
   it("반려동물 정보가 없으면 기본 이름으로 제목을 노출한다", async () => {
     const ui = await MedicalAnalysisChartCard({

frontend/src/app/(sidebar)/analysis/_components/chart/test/AnalysisCharts.test.tsx

@@ -3,46 +3,55 @@ import { formatAmount } from "@/utils/amount";
 import { buildExpenseColumns } from "@/app/(sidebar)/analysis/_lib/ExpenseColumns";
 import type { AnalysisTableSectionProps } from "@/app/(sidebar)/analysis/_types/componentPropsType.type";
 import AnalysisTableEmpty from "./AnalysisTableEmpty";
-import ServerComponentErrorFallback from "@/components/ui/ErrorBoundary/ServerComponentErrorFallback";
+import AnalysisTableWrapper from "./AnalysisTableWrapper";
 
 export default async function AnalysisTable({
   petInfoPromise,
   expensesPromise,
 }: AnalysisTableSectionProps) {
   const petInfo = await petInfoPromise;
-  if (petInfo instanceof Error) {
-    return <ServerComponentErrorFallback message={petInfo.message} />;
-  }
-
   const rows = await expensesPromise;
-  if (rows instanceof Error) {
-    return <ServerComponentErrorFallback message={rows.message} />;
+  if (petInfo instanceof Error || rows instanceof Error) {
+    return (
+      <AnalysisTableWrapper>
+        <AnalysisTableEmpty
+          message={
+            petInfo instanceof Error
+              ? petInfo.message
+              : rows instanceof Error
+                ? rows.message
+                : undefined
+          }
+        />
+      </AnalysisTableWrapper>
+    );
   }
 
   const petName = petInfo?.petName ?? "반려동물";
   const totalCost = rows.reduce((sum, row) => sum + (row.cost ?? 0), 0);
   const totalLabel = `총 ${formatAmount(totalCost)}`;
 
   return (
-    <section className="flex flex-col gap-400">
-      <div className="flex flex-col gap-200">
-        <p className="typo-body-l-bold text-gray-500">우리 가족이 {petName}에게 쓴 비용</p>
-        <p className="typo-headline-l-bold text-text-base">{totalLabel}</p>
-      </div>
-      <div className="relative h-[336px]">
-        <DataTable
-          className="h-full border-gray-50 rounded-600"
-          columns={buildExpenseColumns()}
-          data={rows}
-          rowKey={(row, index) => row.expenseId ?? `empty-${index}`}
-        />
-        {!rows.length ? (
-          // 테이블 헤드 유지하면서 비어 있는 상태를 테이블 영역 위에 오버레이로 표시
-          <div className="absolute inset-x-0 bottom-0 top-[48px] flex items-center justify-center border-t border-gray-50 bg-white-100">
-            <AnalysisTableEmpty />
-          </div>
-        ) : null}
-      </div>
-    </section>
+    <AnalysisTableWrapper
+      header={
+        <>
+          <p className="typo-body-l-bold text-gray-500">우리 가족이 {petName}에게 쓴 비용</p>
+          <p className="typo-headline-l-bold text-text-base">{totalLabel}</p>
+        </>
+      }
+    >
+      <DataTable
+        className="h-full border-gray-50 rounded-600"
+        columns={buildExpenseColumns()}
+        data={rows}
+        rowKey={(row, index) => row.expenseId ?? `empty-${index}`}
+      />
+      {!rows.length ? (
+        // 테이블 헤드 유지하면서 비어 있는 상태를 테이블 영역 위에 오버레이로 표시
+        <div className="absolute inset-x-0 bottom-0 top-[48px] flex items-center justify-center border-t border-gray-50 bg-white-100">
+          <AnalysisTableEmpty />
+        </div>
+      ) : null}
+    </AnalysisTableWrapper>
   );
 }

frontend/src/app/(sidebar)/analysis/_components/table/AnalysisTable.tsx

@@ -1,10 +1,10 @@
 import WarningIcon from "@/assets/icons/analysis/ic_warning.svg";
 
-export default function AnalysisTableEmpty() {
+export default function AnalysisTableEmpty({ message }: { message?: string }) {
   return (
     <div className="flex flex-col items-center gap-200">
       <WarningIcon className="h-[60px] w-[60px] text-text-sub" />
-      <p className="typo-body-m-medium text-text-sub">지출 데이터가 아직 없어요</p>
+      <p className="typo-body-m-medium text-text-sub">{message ?? "지출 데이터가 아직 없어요"}</p>
     </div>
   );
 }

frontend/src/app/(sidebar)/analysis/_components/table/AnalysisTableEmpty.tsx

@@ -0,0 +1,14 @@
+export default function AnalysisTableWrapper({
+  header,
+  children,
+}: {
+  header?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="flex flex-col gap-400">
+      <div className="flex flex-col gap-200">{header}</div>
+      <div className="relative h-[336px] flex items-center justify-center">{children}</div>
+    </section>
+  );
+}

frontend/src/app/(sidebar)/analysis/_components/table/AnalysisTableWrapper.tsx

@@ -1,9 +1,11 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import { render } from "@testing-library/react";
 
 import AnalysisTable from "@/app/(sidebar)/analysis/_components/table/AnalysisTable";
 import type { components } from "@/types/schema";
 
+vi.mock("@/assets/icons/analysis/ic_warning.svg", () => ({ default: () => null }));
+
 type GroupExpenseResponse = components["schemas"]["GroupExpenseResponse"];
 
 const rows: GroupExpenseResponse[] = Array.from({ length: 30 }, (_, index) => ({