[FE] 대시보드 지표 카드 UI 추가 및 SSE 연결, 각 지표들의 실시간 데이터 업데이트 기능 추가

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

@@ -6,8 +6,8 @@ import {
 } from '@/components/menu';
 import {
   AveragePriceContent,
+  OrderChannelContent,
   OrderCountContent,
-  OrderMethodContent,
   PaymentMethodContent,
   PeakTimeContent,
   RealSalesContent,
@@ -24,16 +24,15 @@ import {
 } from '@/constants/menu';
 import {
   AVERAGE_PRICE,
+  ORDER_CHANNEL,
   ORDER_COUNT,
-  ORDER_METHOD,
   PAYMENT_METHOD,
   PEAK_TIME,
   REAL_SALES,
   SALES_BY_DAY,
   SALES_TREND,
   SALES_TYPE,
 } from '@/constants/sales';
-
 interface EditCardContentProps {
   cardCode: MetricCardCode;
 }
@@ -60,11 +59,11 @@ const {
   EXAMPLE_SALES_SOURCE_DATA: SALES_TYPE_EXAMPLE_SALES_SOURCE_DATA,
 } = SALES_TYPE;
 const {
-  EXAMPLE_TOP_TYPE: ORDER_METHOD_EXAMPLE_TOP_TYPE,
-  EXAMPLE_TOP_SHARE: ORDER_METHOD_EXAMPLE_TOP_SHARE,
-  EXAMPLE_DELTA_SHARE: ORDER_METHOD_EXAMPLE_DELTA_SHARE,
-  EXAMPLE_ORDER_METHOD_DATA: ORDER_METHOD_EXAMPLE_ORDER_METHOD_DATA,
-} = ORDER_METHOD;
+  EXAMPLE_TOP_TYPE: ORDER_CHANNEL_EXAMPLE_TOP_TYPE,
+  EXAMPLE_TOP_SHARE: ORDER_CHANNEL_EXAMPLE_TOP_SHARE,
+  EXAMPLE_DELTA_SHARE: ORDER_CHANNEL_EXAMPLE_DELTA_SHARE,
+  EXAMPLE_ORDER_CHANNEL_DATA: ORDER_CHANNEL_EXAMPLE_ORDER_CHANNEL_DATA,
+} = ORDER_CHANNEL;
 const {
   EXAMPLE_TOP_TYPE: PAYMENT_METHOD_EXAMPLE_TOP_TYPE,
   EXAMPLE_TOP_SHARE: PAYMENT_METHOD_EXAMPLE_TOP_SHARE,
@@ -138,14 +137,14 @@ export const EditCardContent = ({ cardCode }: EditCardContentProps) => {
     case 'SLS_07_02':
     case 'SLS_07_03':
       return (
-        <OrderMethodContent
+        <OrderChannelContent
           cardCode={cardCode}
           insight={{
-            topType: ORDER_METHOD_EXAMPLE_TOP_TYPE,
-            topShare: ORDER_METHOD_EXAMPLE_TOP_SHARE,
-            deltaShare: ORDER_METHOD_EXAMPLE_DELTA_SHARE,
+            topType: ORDER_CHANNEL_EXAMPLE_TOP_TYPE,
+            topShare: ORDER_CHANNEL_EXAMPLE_TOP_SHARE,
+            deltaShare: ORDER_CHANNEL_EXAMPLE_DELTA_SHARE,
           }}
-          items={ORDER_METHOD_EXAMPLE_ORDER_METHOD_DATA}
+          items={ORDER_CHANNEL_EXAMPLE_ORDER_CHANNEL_DATA}
         />
       );
     case 'SLS_08_01':

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

@@ -1,17 +1,22 @@
 import { Link } from 'react-router-dom';
 
+import { useSuspenseQuery } from '@tanstack/react-query';
+
 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';
 
 export const DashboardEditButton = () => {
-  const { tabs, currentTabIndex } = useDashboardTabsContext();
+  const { data: tabs } = useSuspenseQuery(dashboardOptions.list);
+
+  const { currentDashboardId } = useDashboardTabsContext();
 
   return (
     <Link
       to={{
         pathname: ROUTE_PATHS.DASHBOARD.EDIT,
-        search: `?tab=${tabs[currentTabIndex]}`,
+        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"

frontend/src/components/dashboard/dashboard-layout/DashboardLayout.tsx

@@ -1,21 +1,30 @@
+import { Suspense } from 'react';
+
 import { Tabs } from '@/components/shared/shadcn-ui';
-import { useDashboardTabsContext } from '@/hooks/dashboard';
+import {
+  useDashboardSseConnection,
+  useDashboardTabsContext,
+} from '@/hooks/dashboard';
 
 import { DashboardHeader } from '../dashboard-header';
 import { DashboardMain } from '../dashboard-main';
+import { DashboardMainSuspense } from '../dashboard-main';
 
 export const DashboardLayout = () => {
-  const { tabs, currentTabIndex, setCurrentTabIndex } =
+  const { currentDashboardId, setCurrentDashboardId } =
     useDashboardTabsContext();
+  useDashboardSseConnection();
 
   return (
     <Tabs
-      value={tabs[currentTabIndex]}
-      onValueChange={(tabName) => setCurrentTabIndex(tabs.indexOf(tabName))}
+      value={currentDashboardId.toString()}
+      onValueChange={(value) => setCurrentDashboardId(Number(value))}
       className="mt-8 w-265"
     >
       <DashboardHeader />
-      <DashboardMain />
+      <Suspense fallback={<DashboardMainSuspense />}>
+        <DashboardMain />
+      </Suspense>
     </Tabs>
   );
 };

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

@@ -0,0 +1,68 @@
+import type { MetricCardCode } from '@/constants/dashboard';
+
+import {
+  DashboardIngredientUsageRankingCard,
+  DashboardMenuSalesRankingCard,
+  DashboardPopularMenuCombinationCard,
+  DashboardTimeSlotMenuOrderCountCard,
+} from '../dashboard-menu';
+import {
+  DashboardAveragePriceCard,
+  DashboardIncomeStructureOrderChannelCard,
+  DashboardIncomeStructurePaymentMethodCard,
+  DashboardIncomeStructureSalesTypeCard,
+  DashboardOrderCountCard,
+  DashboardPeakTimeCard,
+  DashboardRealSalesCard,
+  DashboardSalesByDayCard,
+  DashboardSalesTrendCard,
+} from '../dashboard-sales';
+
+export const DashboardCard = ({ cardCode }: { cardCode: MetricCardCode }) => {
+  switch (cardCode) {
+    case 'SLS_01_01':
+    case 'SLS_01_02':
+    case 'SLS_01_03':
+      return <DashboardRealSalesCard cardCode={cardCode} />;
+    case 'SLS_02_01':
+    case 'SLS_02_02':
+    case 'SLS_02_03':
+      return <DashboardOrderCountCard cardCode={cardCode} />;
+    case 'SLS_03_01':
+    case 'SLS_03_02':
+    case 'SLS_03_03':
+      return <DashboardAveragePriceCard cardCode={cardCode} />;
+    case 'SLS_06_01':
+    case 'SLS_06_02':
+    case 'SLS_06_03':
+      return <DashboardIncomeStructureSalesTypeCard cardCode={cardCode} />;
+    case 'SLS_07_01':
+    case 'SLS_07_02':
+    case 'SLS_07_03':
+      return <DashboardIncomeStructureOrderChannelCard cardCode={cardCode} />;
+    case 'SLS_08_01':
+    case 'SLS_08_02':
+    case 'SLS_08_03':
+      return <DashboardIncomeStructurePaymentMethodCard cardCode={cardCode} />;
+    case 'SLS_09_04':
+    case 'SLS_10_07':
+    case 'SLS_11_07':
+      return <DashboardSalesTrendCard cardCode={cardCode} />;
+    case 'SLS_13_01':
+      return <DashboardPeakTimeCard cardCode={cardCode} />;
+    case 'SLS_14_06':
+      return <DashboardSalesByDayCard cardCode={cardCode} />;
+    case 'MNU_01_01':
+    case 'MNU_01_04':
+    case 'MNU_01_05':
+      return <DashboardMenuSalesRankingCard cardCode={cardCode} />;
+    case 'MNU_03_01':
+      return <DashboardTimeSlotMenuOrderCountCard cardCode={cardCode} />;
+    case 'MNU_04_01':
+      return <DashboardIngredientUsageRankingCard cardCode={cardCode} />;
+    case 'MNU_05_04':
+      return <DashboardPopularMenuCombinationCard cardCode={cardCode} />;
+    default:
+      return null;
+  }
+};

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

@@ -1,22 +1,19 @@
-import { useDashboardTabsContext } from '@/hooks/dashboard';
-import { gridItems } from '@/mocks/data/dashboard';
+import {
+  useDashboardCardList,
+  useDashboardCardSubscription,
+} from '@/hooks/dashboard';
 
 import { DashboardEmptyContent } from './DashboardEmptyContent';
 import { DashboardMainContent } from './DashboardMainContent';
 
 export const DashboardMain = () => {
-  const { tabs, currentTabIndex } = useDashboardTabsContext();
+  const { cardList } = useDashboardCardList();
 
-  const mockedGridItems =
-    tabs[currentTabIndex] === '홈 대시보드' ? gridItems : null;
+  useDashboardCardSubscription({ cardList });
 
-  return (
-    <>
-      {mockedGridItems ? (
-        <DashboardMainContent cards={mockedGridItems} />
-      ) : (
-        <DashboardEmptyContent />
-      )}
-    </>
-  );
+  if (!cardList || cardList.length === 0) {
+    return <DashboardEmptyContent />;
+  }
+
+  return <DashboardMainContent cards={cardList} />;
 };

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

@@ -1,26 +1,58 @@
-import { DASHBOARD_METRIC_CARDS } from '@/constants/dashboard';
+import { useNavigate } from 'react-router-dom';
+
+import { DefaultCardWrapper, FetchBoundary } from '@/components/shared';
+import {
+  DASHBOARD_METRIC_CARDS,
+  isMenuMetricCardCode,
+  isSalesMetricCardCode,
+  type MetricCardCode,
+} from '@/constants/dashboard';
+import { ROUTE_PATHS } from '@/constants/shared';
 import type { DashboardCard } from '@/types/dashboard';
 
+import { DashboardCard as DashboardCardComponent } from './DashboardCard';
+
 interface DashboardMainContentProps {
   cards: DashboardCard[];
 }
 
 export const DashboardMainContent = ({ cards }: DashboardMainContentProps) => {
+  const navigate = useNavigate();
+
+  const handleClickChevronRightIcon = (cardCode: MetricCardCode) => {
+    const analysisPath = ROUTE_PATHS.ANALYSIS.BASE;
+    if (isSalesMetricCardCode(cardCode)) {
+      navigate(`${analysisPath}/${ROUTE_PATHS.ANALYSIS.SALES}`);
+      return;
+    }
+    if (isMenuMetricCardCode(cardCode)) {
+      navigate(`${analysisPath}/${ROUTE_PATHS.ANALYSIS.MENU}`);
+      return;
+    }
+  };
+
   return (
     <div className="mb-10 grid h-181 w-full grid-cols-3 grid-rows-3 gap-5">
       {cards.map((item) => {
         const card = DASHBOARD_METRIC_CARDS[item.cardCode];
+
         return (
-          <div
-            key={`dashboard-card-${item.cardCode}`}
-            className="rounded-400 bg-special-card-bg p-5"
-            style={{
-              gridColumn: `${item.colNo} / span ${card.sizeX}`,
-              gridRow: `${item.rowNo} / span ${card.sizeY}`,
-            }}
-          >
-            카드 {item.cardCode}
-          </div>
+          <FetchBoundary key={`dashboard-card-${item.cardCode}`}>
+            <DefaultCardWrapper
+              className="rounded-400 bg-special-card-bg size-full p-5"
+              style={{
+                gridColumn: `${item.colNo} / span ${card.sizeX}`,
+                gridRow: `${item.rowNo} / span ${card.sizeY}`,
+              }}
+              title={card.label}
+              hasChevronRightIcon
+              onClickChevronRightIcon={() =>
+                handleClickChevronRightIcon(item.cardCode)
+              }
+            >
+              <DashboardCardComponent cardCode={item.cardCode} />
+            </DefaultCardWrapper>
+          </FetchBoundary>
         );
       })}
     </div>

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

@@ -0,0 +1,16 @@
+import { Skeleton } from '@/components/shared/shadcn-ui';
+
+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) => {
+        return (
+          <Skeleton
+            key={`dashboard-card-${index}`}
+            className="rounded-400 bg-special-card-bg"
+          />
+        );
+      })}
+    </div>
+  );
+};

frontend/src/components/dashboard/dashboard-main/index.ts

@@ -1 +1,2 @@
 export { DashboardMain } from './DashboardMain';
+export { DashboardMainSuspense } from './DashboardMainSuspense';

frontend/src/components/dashboard/dashboard-menu/DashboardIngredientUsageRankingCard.tsx

@@ -0,0 +1,34 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { IngredientUsageRankingCardContent } from '@/components/menu';
+import {
+  DASHBOARD_METRICS,
+  type ExtractCardCodes,
+} from '@/constants/dashboard';
+import { useDashboardCardDetailQueryOption } from '@/hooks/dashboard';
+import type { GetIngredientUsageRankingResponseDto } from '@/types/menu';
+
+type DashboardIngredientUsageRankingCardCodes = ExtractCardCodes<
+  typeof DASHBOARD_METRICS.MENU.sections.INGREDIENT_CONSUMPTION_RANK.items.INGREDIENT_CONSUMPTION_RANK
+>;
+interface DashboardIngredientUsageRankingCardProps {
+  cardCode: DashboardIngredientUsageRankingCardCodes;
+}
+
+export const DashboardIngredientUsageRankingCard = ({
+  cardCode,
+}: DashboardIngredientUsageRankingCardProps) => {
+  const { createCardDetailQuery } = useDashboardCardDetailQueryOption();
+
+  const queryOption =
+    createCardDetailQuery<GetIngredientUsageRankingResponseDto>(cardCode);
+
+  const { data } = useSuspenseQuery(queryOption);
+
+  return (
+    <IngredientUsageRankingCardContent
+      hasIngredient={data.hasIngredient}
+      items={data.items}
+    />
+  );
+};

frontend/src/components/dashboard/dashboard-menu/DashboardMenuSalesRankingCard.tsx

@@ -0,0 +1,30 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { MenuSalesRankingCardContent } from '@/components/menu';
+import {
+  DASHBOARD_METRICS,
+  type ExtractCardCodes,
+} from '@/constants/dashboard';
+import { useDashboardCardDetailQueryOption } from '@/hooks/dashboard';
+import type { GetMenuSalesRankingResponseDto } from '@/types/menu';
+
+type DashboardMenuSalesRankingCardCodes = ExtractCardCodes<
+  typeof DASHBOARD_METRICS.MENU.sections.POPULAR_MENU.items.MENU_SALES_RANKING
+>;
+
+interface DashboardMenuSalesRankingCardProps {
+  cardCode: DashboardMenuSalesRankingCardCodes;
+}
+
+export const DashboardMenuSalesRankingCard = ({
+  cardCode,
+}: DashboardMenuSalesRankingCardProps) => {
+  const { createCardDetailQuery } = useDashboardCardDetailQueryOption();
+
+  const queryOption =
+    createCardDetailQuery<GetMenuSalesRankingResponseDto>(cardCode);
+
+  const { data } = useSuspenseQuery(queryOption);
+
+  return <MenuSalesRankingCardContent items={data.items} />;
+};