[FE] 대시보드 카드 편집 API 연동 및 에러 fallback 처리

frontend/src/components/dashboard/dashboard-edit/CardEditView.tsx

@@ -1,27 +1,53 @@
 import { useNavigate } from 'react-router-dom';
 
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
 import { ButtonGroup } from '@/components/shared';
 import { useDragAndDropCard, useEditCard } from '@/hooks/dashboard';
 import { useEditCardContext } from '@/hooks/dashboard/useEditCardContext';
+import { dashboardOptions, putDashboardCardList } from '@/services/dashboard';
+import type {
+  PutDashboardCardListParam,
+  PutDashboardCardListRequestDto,
+} from '@/types/dashboard';
 
 import { CardEditViewTabs } from './CardEditViewTabs';
 
 export const CardEditView = () => {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   const { isDirty } = useEditCard();
 
-  const { isOverList } = useEditCardContext();
+  const { isOverList, placedCards, dashboardId } = useEditCardContext();
 
   const { handleListDragEnter, handleListDragLeave, handleListDrop } =
     useDragAndDropCard();
 
+  const mutateCardList = useMutation({
+    mutationFn: ({
+      param,
+      body,
+    }: {
+      param: PutDashboardCardListParam;
+      body: PutDashboardCardListRequestDto;
+    }) => putDashboardCardList(param, body),
+  });
+
   const handleCancel = () => {
     navigate(-1);
   };
+
   const handleSave = () => {
-    // TODO 저장 로직 구현
-    navigate(-1);
+    mutateCardList.mutate(
+      { param: { dashboardId }, body: placedCards },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries(dashboardOptions.cardList(dashboardId));
+          navigate(-1);
+        },
+      },
+    );
   };
 
   return (

frontend/src/components/dashboard/dashboard-edit/CardEditViewCard.tsx

@@ -49,7 +49,7 @@ export const CardEditViewCard = ({ cardCode }: CardEditViewCardProps) => {
       }
       onDragEnd={handleDragEnd}
       className="translate-x-0 cursor-grab active:cursor-grabbing"
-      onClick={handleAddCard}
+      onClick={!memoisedIsAdded ? handleAddCard : undefined}
     >
       <EditCardWrapper
         isAdded={memoisedIsAdded}

frontend/src/components/dashboard/dashboard-edit/CardEditViewTabContentItem.tsx

@@ -11,7 +11,7 @@ export const CardEditViewTabContentItem = memo(
   ({ items }: CardEditViewTabContentItemProps) => {
     return (
       <li>
-        <h3 className="body-medium-semibold text-grey-800 bg-grey-200 rounded-150 mt-5 mb-3.75 px-300 py-150">
+        <h3 className="body-medium-semibold text-grey-800 bg-grey-200 rounded-150 mt-6 mb-3 px-300 py-150">
           {items.label}
         </h3>
         <ul className="grid grid-cols-3 gap-5">

frontend/src/components/dashboard/dashboard-edit/DashboardEditLayout.tsx

@@ -1,14 +1,25 @@
+import { ErrorBoundary } from 'react-error-boundary';
+
+import { FetchBoundary } from '@/components/shared';
+
 import { CardEditView } from './CardEditView';
 import { EditCardProvider } from './EditCardProvider';
+import { EditErrorFallback } from './EditErrorFallback';
 import { MiniView } from './MiniView';
 
 export const DashboardEditLayout = () => {
   return (
-    <div className="flex size-full">
-      <EditCardProvider>
-        <MiniView />
-        <CardEditView />
-      </EditCardProvider>
+    <div className="flex size-full overflow-y-hidden">
+      <FetchBoundary>
+        <ErrorBoundary
+          fallbackRender={(props) => <EditErrorFallback {...props} />}
+        >
+          <EditCardProvider>
+            <MiniView />
+            <CardEditView />
+          </EditCardProvider>
+        </ErrorBoundary>
+      </FetchBoundary>
     </div>
   );
 };

frontend/src/components/dashboard/dashboard-edit/EditCardProvider.tsx

@@ -1,11 +1,29 @@
 import { type PropsWithChildren, useRef, useState } from 'react';
 
+import { useSuspenseQuery } from '@tanstack/react-query';
+
 import { EditCardContext } from '@/constants/dashboard/editCardContext';
+import { dashboardOptions } from '@/services/dashboard';
 import type { DashboardCard, DragState, GhostState } from '@/types/dashboard';
 
 export const EditCardProvider = ({ children }: PropsWithChildren) => {
-  // TODO: 초기 그리드 상태 서버에서 받아오기
-  const initPlacedCards: DashboardCard[] = [];
+  const { data: tabs } = useSuspenseQuery(dashboardOptions.list);
+
+  const searchParams = new URLSearchParams(window.location.search);
+  const dashboardName = searchParams.get('tab') ?? undefined;
+  const currentDashboard = tabs.find((tab) => tab.name === dashboardName);
+
+  if (!currentDashboard) {
+    throw new Error('존재하지 않는 대시보드입니다.');
+  } else if (currentDashboard.isDefault) {
+    throw new Error('기본 대시보드는 편집할 수 없습니다.');
+  }
+
+  const { data: cardList } = useSuspenseQuery(
+    dashboardOptions.cardList(currentDashboard.id),
+  );
+
+  const initPlacedCards: DashboardCard[] = cardList;
 
   // 카드 그리드 상태
   const [placedCards, setPlacedCards] =
@@ -22,6 +40,7 @@ export const EditCardProvider = ({ children }: PropsWithChildren) => {
   return (
     <EditCardContext.Provider
       value={{
+        dashboardId: currentDashboard.id,
         initPlacedCards,
         placedCards,
         setPlacedCards,

frontend/src/components/dashboard/dashboard-edit/EditErrorFallback.tsx

@@ -0,0 +1,16 @@
+import type { FallbackProps } from 'react-error-boundary';
+import { useNavigate } from 'react-router-dom';
+
+import { ErrorFallback } from '@/components/shared';
+
+export const EditErrorFallback = (props: FallbackProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <ErrorFallback
+      buttonText="나가기"
+      onClickButton={() => navigate(-1)}
+      {...props}
+    />
+  );
+};

frontend/src/components/dashboard/dashboard-edit/MiniView.tsx

@@ -21,14 +21,14 @@ export const MiniView = () => {
         <h1 className="title-large-bold text-grey-900">{title}</h1>
       </header>
       <div
-        className="relative mx-auto min-h-181 min-w-137.5"
+        className="relative mx-auto min-h-[410.4px] min-w-153"
         ref={gridRef}
         onDragOver={handleGridDragOver}
         onDragLeave={handleGridDragLeave}
         onDrop={handleGridDrop}
       >
         {/* 그리드 셀 가이드라인 */}
-        <div className="grid h-full grow grid-cols-3 grid-rows-3 gap-5">
+        <div className="grid h-full grow grid-cols-3 grid-rows-3 gap-3">
           {Array.from({ length: GRID_ROW_SIZE * GRID_COL_SIZE }).map(
             (_, index) => (
               <MiniViewEmptyCard key={`grid-${index}`} />

frontend/src/components/dashboard/dashboard-edit/MiniViewActiveCard.tsx

@@ -74,6 +74,7 @@ export const MiniViewActiveCard = ({
         <img
           src={`${CDN_BASE_URL}/assets/images/${type}.svg`}
           alt={`${label} 미니 뷰`}
+          className="size-10"
           draggable={false}
         />
         <p className="body-small-medium text-grey-900 mt-200 mb-100 text-center break-keep">

frontend/src/components/dashboard/dashboard-edit/MiniViewEmptyCard.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 
 export const MiniViewEmptyCard = memo(() => {
   return (
-    <div className="rounded-400 border-grey-500 border-[1.5px] border-dashed" />
+    <div className="rounded-400 outline-grey-500 outline-1 -outline-offset-3 outline-dashed" />
   );
 });
 

frontend/src/components/dashboard/dashboard-header/DashboardEditButton.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { useSuspenseQuery } from '@tanstack/react-query';
@@ -6,20 +7,29 @@ import CardsIcon from '@/assets/icons/cards.svg?react';
 import { ROUTE_PATHS } from '@/constants/shared';
 import { useDashboardTabsContext } from '@/hooks/dashboard';
 import { dashboardOptions } from '@/services/dashboard/options';
+import { cn } from '@/utils/shared';
 
 export const DashboardEditButton = () => {
   const { data: tabs } = useSuspenseQuery(dashboardOptions.list);
 
   const { currentDashboardId } = useDashboardTabsContext();
 
+  const disabled = useMemo(() => {
+    return tabs.find((tab) => tab.isDefault)?.id === currentDashboardId;
+  }, [tabs, currentDashboardId]);
+
   return (
     <Link
       to={{
         pathname: ROUTE_PATHS.DASHBOARD.EDIT,
         search: `?tab=${tabs.find((tab) => tab.id === currentDashboardId)?.name}`,
       }}
       aria-label="현재 탭의 지표카드 편집"
-      className="bg-grey-0 text-grey-700 body-medium-medium rounded-200 flex w-fit gap-200 border-none p-300 pl-250 shadow-none"
+      className={cn(
+        'bg-grey-0 text-grey-700 body-medium-medium rounded-200 flex w-fit gap-200 border-none p-300 pl-250 shadow-none',
+        disabled && 'cursor-default opacity-50',
+      )}
+      onClick={(e) => disabled && e.preventDefault()}
     >
       <CardsIcon className="size-5" />
       카드 편집

frontend/src/components/dashboard/dashboard-main/DashboardMainSuspense.tsx

@@ -1,9 +1,10 @@
 import { Skeleton } from '@/components/shared/shadcn-ui';
+import { GRID_COL_SIZE, GRID_ROW_SIZE } from '@/constants/dashboard';
 
 export const DashboardMainSuspense = () => {
   return (
     <div className="mb-10 grid h-181 w-full grid-cols-3 grid-rows-3 gap-5">
-      {Array.from({ length: 9 }).map((_, index) => {
+      {Array.from({ length: GRID_COL_SIZE * GRID_ROW_SIZE }).map((_, index) => {
         return (
           <Skeleton
             key={`dashboard-card-${index}`}

frontend/src/components/dashboard/dashboard-tab-list/AddTabDialogTrigger.tsx

@@ -10,10 +10,11 @@ import {
   TooltipTrigger,
 } from '@/components/shared/shadcn-ui';
 import { DASHBOARD_TABS_DIALOG_MODE } from '@/constants/dashboard';
+import { LOCAL_STORAGE_KEY } from '@/constants/shared/localStorageKey';
 import { useDashboardTabsContext } from '@/hooks/dashboard';
 import { dashboardOptions } from '@/services/dashboard/options';
 
-const TOOLTIP_DISMISSED_KEY = 'dashboard_add_tooltip_dismissed_v1';
+const { TOOLTIP_DISMISSED: storageKey } = LOCAL_STORAGE_KEY;
 const TWELVE_HOURS_MS = 12 * 60 * 60 * 1000;
 
 const firstActiveDatetime = new Date(); // mocked
@@ -27,11 +28,11 @@ export const AddTabDialogTrigger = () => {
   const [showTooltip, setShowTooltip] = useState(
     tabs.length === 1 &&
       new Date().getTime() - firstActiveDatetime.getTime() <= TWELVE_HOURS_MS &&
-      !localStorage.getItem(TOOLTIP_DISMISSED_KEY),
+      !localStorage.getItem(storageKey),
   );
 
   const dismissPermanently = useCallback(() => {
-    localStorage.setItem(TOOLTIP_DISMISSED_KEY, '1');
+    localStorage.setItem(storageKey, '1');
     setShowTooltip(false);
   }, []);
 

frontend/src/components/dashboard/dashboard-tabs-provider/DashboardTabsProvider.tsx

@@ -6,14 +6,43 @@ import {
   DashboardTabsContext,
   type DashboardTabsDialogMode,
 } from '@/constants/dashboard';
+import { LOCAL_STORAGE_KEY } from '@/constants/shared';
 import { dashboardOptions } from '@/services/dashboard';
 
 export const DashboardTabsProvider = ({ children }: PropsWithChildren) => {
   const { data: tabs } = useSuspenseQuery(dashboardOptions.list);
 
-  const [currentDashboardId, setCurrentDashboardId] = useState<number>(
-    () => tabs.find((tab) => tab.isDefault)?.id ?? 1,
+  // localStorage에 대시보드 ID 저장
+  const { CURRENT_DASHBOARD_ID: storageKey } = LOCAL_STORAGE_KEY;
+
+  const getSavedDashboardId = () => {
+    if (localStorage.getItem(storageKey)) {
+      const parsedId = Number(localStorage.getItem(storageKey));
+      if (tabs.some((t) => t.id === parsedId)) {
+        return parsedId;
+      }
+    }
+  };
+  const saveDashboardId = (id: number) => {
+    try {
+      localStorage.setItem(storageKey, String(id));
+    } catch (e) {
+      if (e instanceof Error) {
+        console.error(e.message);
+      } else {
+        console.error('선택한 대시보드 정보를 저장할 수 없어요.', e);
+      }
+    }
+  };
+
+  const [currentDashboardId, setCurrentDashboardIdState] = useState<number>(
+    getSavedDashboardId() ?? tabs.find((tab) => tab.isDefault)?.id ?? 1,
   );
+  const setCurrentDashboardId = (id: number) => {
+    setCurrentDashboardIdState(id);
+    saveDashboardId(id);
+  };
+
   const [dialogState, setDialogState] = useState<{
     open: boolean;
     mode: DashboardTabsDialogMode | null;

frontend/src/components/shared/error-fallback/ErrorFallback.tsx

@@ -0,0 +1,39 @@
+import { type FallbackProps } from 'react-error-boundary';
+
+import { Button } from '@/components/shared/shadcn-ui';
+
+interface ErrorFallbackProps extends FallbackProps {
+  errorMessage?: string;
+  buttonText?: string;
+  onClickButton?: () => void;
+}
+export const ErrorFallback = ({
+  error,
+  errorMessage,
+  buttonText = '다시 시도',
+  onClickButton,
+  resetErrorBoundary,
+}: ErrorFallbackProps) => {
+  const handleClick = () => {
+    resetErrorBoundary(); // 에러 바운더리의 에러상태 초기화 -> 이걸 해야 에러 바운더리가 다시 자식 컴포넌트를 렌더링 시도함
+    onClickButton?.();
+  };
+
+  const message =
+    error instanceof Error ? error.message : '오류가 발생했습니다.';
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-3">
+      <p className="body-medium-medium text-center">
+        {errorMessage ?? message}
+      </p>
+
+      <Button
+        className="rounded-200 body-medium-medium bg-brand-main text-grey-50 px-4 py-3"
+        onClick={handleClick}
+      >
+        {buttonText}
+      </Button>
+    </div>
+  );
+};

frontend/src/components/shared/error-fallback/index.ts

@@ -0,0 +1 @@
+export { ErrorFallback } from './ErrorFallback';