[FE] 대시보드 편집창 - 메뉴 분석 지표카드 추가

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

@@ -7,6 +7,8 @@ import {
 } from '@/constants/dashboard';
 import { useEditCard } from '@/hooks/dashboard';
 
+import { EditCardContent } from './EditCardContent';
+
 interface CardEditViewCardProps {
   cardCode: MetricCardCode;
 }
@@ -29,7 +31,7 @@ export const CardEditViewCard = ({ cardCode }: CardEditViewCardProps) => {
     return null; // 카드 정보가 없는 경우 렌더링하지 않음
   }
 
-  const { code, label, type, period, sizeX, sizeY } = card;
+  const { period, sizeX } = card;
 
   return (
     <li style={{ gridColumn: `span ${sizeX}` }}>
@@ -38,17 +40,10 @@ export const CardEditViewCard = ({ cardCode }: CardEditViewCardProps) => {
         period={period}
         className="min-w-full"
         sizeX={sizeX}
-        sizeY={sizeY}
         onClickAddButton={handleAddCard}
         onClickDeleteButton={handleDeleteCard}
       >
-        {label}
-        <br />
-        {code}
-        <br />
-        {type}
-        <br />
-        {sizeX} x {sizeY}
+        <EditCardContent cardCode={cardCode} />
       </EditCardWrapper>
     </li>
   );

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

@@ -0,0 +1,57 @@
+import {
+  IngredientUsageRankingCardContent,
+  MenuSalesRankingCardContent,
+  PopularMenuCombinationCardContent,
+  TimeSlotMenuOrderCountCardContent,
+} from '@/components/menu';
+import type { MetricCardCode } from '@/constants/dashboard';
+import {
+  INGREDIENT_USAGE_RANKING,
+  MENU_SALES_RANKING,
+  ORDER_COUNT,
+  POPULAR_MENU_COMBINATION,
+} from '@/constants/menu';
+
+interface EditCardContentProps {
+  cardCode: MetricCardCode;
+}
+
+const { EXAMPLE_HAS_INGREDIENT, EXAMPLE_INGREDIENT_USAGE_RANKING_ITEMS } =
+  INGREDIENT_USAGE_RANKING;
+const { EXAMPLE_MENU_SALES_RANKING_ITEMS } = MENU_SALES_RANKING;
+const { EXAMPLE_TIME_SLOT_2H, EXAMPLE_MENU_NAME } = ORDER_COUNT;
+const { EXAMPLE_FIRST_MENU_NAME, EXAMPLE_SECOND_MENU_NAME } =
+  POPULAR_MENU_COMBINATION;
+export const EditCardContent = ({ cardCode }: EditCardContentProps) => {
+  switch (cardCode) {
+    case 'MNU_01_01':
+    case 'MNU_01_04':
+    case 'MNU_01_05':
+      return (
+        <MenuSalesRankingCardContent items={EXAMPLE_MENU_SALES_RANKING_ITEMS} />
+      );
+    case 'MNU_03_01':
+      return (
+        <TimeSlotMenuOrderCountCardContent
+          timeSlot2H={EXAMPLE_TIME_SLOT_2H}
+          menuName={EXAMPLE_MENU_NAME}
+        />
+      );
+    case 'MNU_04_01':
+      return (
+        <IngredientUsageRankingCardContent
+          hasIngredient={EXAMPLE_HAS_INGREDIENT}
+          items={EXAMPLE_INGREDIENT_USAGE_RANKING_ITEMS}
+        />
+      );
+    case 'MNU_05_04':
+      return (
+        <PopularMenuCombinationCardContent
+          firstMenuName={EXAMPLE_FIRST_MENU_NAME}
+          secondMenuName={EXAMPLE_SECOND_MENU_NAME}
+        />
+      );
+    default:
+      return null;
+  }
+};

frontend/src/components/menu/dashboard-menu-combination/PopularMenuCombinationCardContent.tsx

@@ -0,0 +1,22 @@
+import { POPULAR_MENU_COMBINATION } from '@/constants/menu';
+import type { GetDashboardPopularMenuCombinationResponseDto } from '@/types/menu/dto';
+
+import { PopularMenuCombinationContent } from './PopularMenuCombinationContent';
+
+const { EXAMPLE_FIRST_MENU_NAME, EXAMPLE_SECOND_MENU_NAME } =
+  POPULAR_MENU_COMBINATION;
+interface PopularMenuCombinationCardContentProps extends GetDashboardPopularMenuCombinationResponseDto {
+  className?: string;
+}
+
+export const PopularMenuCombinationCardContent = ({
+  firstMenuName = EXAMPLE_FIRST_MENU_NAME,
+  secondMenuName = EXAMPLE_SECOND_MENU_NAME,
+}: PopularMenuCombinationCardContentProps) => {
+  return (
+    <PopularMenuCombinationContent
+      baseMenuName={firstMenuName}
+      pairedMenu={secondMenuName}
+    />
+  );
+};

frontend/src/components/menu/dashboard-menu-combination/PopularMenuCombinationContent.tsx

@@ -0,0 +1,33 @@
+import { cn } from '@/utils/shared';
+
+interface PopularMenuCombinationContentProps {
+  className?: string;
+  baseMenuName?: string;
+  pairedMenu?: string;
+}
+
+export const PopularMenuCombinationContent = ({
+  className,
+  baseMenuName,
+  pairedMenu,
+}: PopularMenuCombinationContentProps) => {
+  return (
+    <p
+      className={cn(
+        'title-large-semibold text-grey-900 flex w-75 flex-col',
+        className,
+      )}
+    >
+      <span>최고 인기 조합은</span>
+      <span className="title-large-bold text-brand-main min-w-0 truncate">
+        {baseMenuName}
+      </span>
+      <span className="flex w-full items-center gap-1">
+        <span className="title-large-bold text-brand-main min-w-0 truncate">
+          &{pairedMenu}
+        </span>
+        <span className="whitespace-nowrap">입니다</span>
+      </span>
+    </p>
+  );
+};

frontend/src/components/menu/dashboard-menu-combination/index.ts

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

frontend/src/components/menu/dashboard-menu-order/TimeSlotMenuOrderCountCardContent.tsx

@@ -0,0 +1,23 @@
+import { ORDER_COUNT } from '@/constants/menu';
+import type { GetDashboardTimeSlotMenuOrderCountResponseDto } from '@/types/menu/dto';
+import type { Nullable } from '@/utils/shared';
+
+import { TimeSlotMenuOrderCountContent } from './TimeSlotMenuOrderCountContent';
+
+const { EXAMPLE_TIME_SLOT_2H, EXAMPLE_MENU_NAME } = ORDER_COUNT;
+// 현재 주문건수가 가장 많은 메뉴 카드
+interface TimeSlotMenuOrderCountCardContentProps extends Nullable<GetDashboardTimeSlotMenuOrderCountResponseDto> {
+  className?: string;
+}
+
+export const TimeSlotMenuOrderCountCardContent = ({
+  timeSlot2H = EXAMPLE_TIME_SLOT_2H,
+  menuName = EXAMPLE_MENU_NAME,
+}: TimeSlotMenuOrderCountCardContentProps) => {
+  return (
+    <TimeSlotMenuOrderCountContent
+      timeSlot2H={timeSlot2H}
+      menuName={menuName}
+    />
+  );
+};

frontend/src/components/menu/dashboard-menu-order/TimeSlotMenuOrderCountContent.tsx

@@ -0,0 +1,28 @@
+import { cn, getNextHour } from '@/utils/shared';
+
+interface TimeSlotMenuOrderCountContentProps {
+  className?: string;
+  timeSlot2H: number;
+  menuName: string;
+}
+// 현재 주문건수가 가장 많은 메뉴 카드
+export const TimeSlotMenuOrderCountContent = ({
+  className,
+  timeSlot2H,
+  menuName,
+}: TimeSlotMenuOrderCountContentProps) => {
+  return (
+    <p
+      className={cn(
+        'title-large-semibold text-grey-900 flex w-75 flex-col',
+        className,
+      )}
+    >
+      <span className="title-large-bold text-brand-main flex w-70">
+        <span className="min-w-0 truncate">{menuName}</span>
+        <span className="shrink-0">{`는 ${timeSlot2H}~${getNextHour(timeSlot2H)}시`}</span>
+      </span>
+      <span>주문이 가장 많아요</span>
+    </p>
+  );
+};

frontend/src/components/menu/dashboard-menu-order/index.ts

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

frontend/src/components/menu/dashboard-menu-ranking/DashboardRankingContent.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react';
+
+import type { DashboardRankItem } from '@/types/menu';
+import { cn } from '@/utils/shared';
+
+import { RankItem } from './RankItem';
+
+interface MenuSalesRankingCardContentProps {
+  className?: string;
+  children?: ReactNode;
+  tHeadLabels?: string[];
+}
+
+// 메뉴분석에서 '메뉴 매출 랭킹', '식자재 소진량 랭킹' 카드에서 공통으로 사용하는 순위 컴포넌트
+export const DashboardRankingContent = ({
+  className,
+  children,
+  tHeadLabels = ['순위', '메뉴명', '매출액'], // 테이블 각 열의 이름, sr-only 클래스로 화면에서는 보이지 않지만 스크린 리더로 읽을 수 있도록 함
+}: MenuSalesRankingCardContentProps) => {
+  return (
+    <table
+      className={cn(
+        'w-75 table-fixed border-separate border-spacing-y-2',
+        className,
+      )}
+    >
+      <colgroup>
+        <col className="w-10" />
+        <col className="w-32" />
+        <col className="w-auto" />
+      </colgroup>
+      <thead>
+        {/* 테이블 각 열의 이름 지정*/}
+        <tr className="sr-only">
+          {tHeadLabels.map((label) => (
+            <th key={label}>{label}</th>
+          ))}
+        </tr>
+      </thead>
+      {children}
+    </table>
+  );
+};
+
+interface DashboardRankingContentTableBodyProps {
+  rankItems: DashboardRankItem[];
+}
+const DashboardRankingContentTableBody = ({
+  rankItems,
+}: DashboardRankingContentTableBodyProps) => {
+  return (
+    <tbody>
+      {rankItems.map(({ rank, itemName, totalAmount, unit }) => (
+        <RankItem
+          key={rank}
+          rank={rank}
+          itemName={itemName}
+          totalAmount={totalAmount}
+          unit={unit}
+        />
+      ))}
+    </tbody>
+  );
+};
+
+DashboardRankingContent.TableBody = DashboardRankingContentTableBody;

frontend/src/components/menu/dashboard-menu-ranking/IngredientUnregisteredContent.tsx

@@ -0,0 +1,28 @@
+import { CDN_BASE_URL } from '@/constants/shared';
+import { cn } from '@/utils/shared';
+
+interface IngredientUnregisteredContentProps {
+  className?: string;
+}
+
+// 등록된 식재료가 없는 경우 화면에 보여질 컴포넌트
+export const IngredientUnregisteredContent = ({
+  className,
+}: IngredientUnregisteredContentProps) => {
+  return (
+    <div className={cn('flex w-75 flex-col items-center', className)}>
+      <div className="flex flex-col items-center gap-1">
+        <img
+          src={`${CDN_BASE_URL}/assets/images/empty_ingridient.svg`}
+          alt="식재료 미등록 이미지"
+          className="size-18"
+        />
+        <span className="body-large-bold">식재료 미등록</span>
+        <span className="body-small-medium text-grey-700 text-center">
+          자동으로 식재료 파악하고,
+          <br /> 간편하게 매장을 운영하세요.
+        </span>
+      </div>
+    </div>
+  );
+};

frontend/src/components/menu/dashboard-menu-ranking/IngredientUsageRankingCardContent.tsx

@@ -0,0 +1,70 @@
+// 대시보드>메뉴분석에서 식재료별 소진량 랭킹 카드
+import { useMemo } from 'react';
+
+import { DASHBOARD_RANKING } from '@/constants/menu';
+import type { DashboardRankItem } from '@/types/menu';
+import type {
+  GetIngredientUsageRankingResponseDto,
+  IngredientUsage,
+} from '@/types/menu/dto';
+
+import { DashboardRankingContent } from './DashboardRankingContent';
+import { IngredientUnregisteredContent } from './IngredientUnregisteredContent';
+
+// dto를 대시보드의 식재료 소진량 랭킹 카드 UI에서 사용하는 데이터 형태로 변환
+interface GetDashboardIngredientRankItemsParams {
+  items: IngredientUsage[];
+}
+const getDashboardIngredientRankItems = ({
+  items,
+}: GetDashboardIngredientRankItemsParams): DashboardRankItem[] => {
+  if (!items) {
+    return [];
+  }
+  // 사용량 기준으로 내림차순 정렬
+  // 단 kg , L 단위는 g, ml로 변환하여 비교해야 함
+  const sortedItems = [...items].sort((a, b) => {
+    const aQuantity =
+      a.baseUnit === 'kg' || a.baseUnit === 'L'
+        ? a.totalQuantity * 1000
+        : a.totalQuantity;
+    const bQuantity =
+      b.baseUnit === 'kg' || b.baseUnit === 'L'
+        ? b.totalQuantity * 1000
+        : b.totalQuantity;
+    return bQuantity - aQuantity;
+  });
+  return sortedItems
+    .map((item, index) => ({
+      rank: index + 1,
+      itemName: item.ingredientName,
+      totalAmount: item.totalQuantity,
+      unit: item.baseUnit as DashboardRankItem['unit'],
+    }))
+    .slice(0, DASHBOARD_RANKING.MAX_DISPLAYED_RANK_ITEMS); // 최대 4등까지만 보여줌
+};
+
+interface IngredientUsageRankingCardContentProps extends GetIngredientUsageRankingResponseDto {
+  className?: string;
+}
+
+export const IngredientUsageRankingCardContent = ({
+  hasIngredient,
+  items,
+}: IngredientUsageRankingCardContentProps) => {
+  // dto -> 대시보드의 메뉴>식재료 소진량 랭킹 카드 UI 데이터 형태로 변환
+  const ingredientRankItems = useMemo(
+    () => getDashboardIngredientRankItems({ items }),
+    [items],
+  );
+  // 등록된 식재료가 없는 경우 카드 내용
+  if (!hasIngredient) {
+    return <IngredientUnregisteredContent />;
+  }
+  // tHeadLabels를 통해 테이블 각 열의 이름을 지정
+  return (
+    <DashboardRankingContent tHeadLabels={['순위', '식재료명', '소진량']}>
+      <DashboardRankingContent.TableBody rankItems={ingredientRankItems} />
+    </DashboardRankingContent>
+  );
+};