[FE] 대시보드 편집창 - 메뉴 분석 지표카드 추가 by mskwon02 · Pull Request #277 · softeerbootcamp-7th/WEB-Team3-CheckMate

mskwon02 · 2026-02-15T21:02:10Z

#️⃣ 변경 사항

이번 PR에서는 대시보드의 메뉴 분석 카드 컴포넌트들을 구현했습니다.

메뉴 분석 카드 컴포넌트 신규 구현: 메뉴 매출 랭킹, 식재료 소진량 랭킹, 시간대별 인기 메뉴, 인기 메뉴 조합 카드의 콘텐츠 컴포넌트 구현
공통 랭킹 UI 시스템 구축: 메뉴와 식재료 랭킹에서 공통으로 사용하는 DashboardRankingContent 및 RankItem 컴포넌트 추상화
데이터 모델(DTO) 최신화: MNU_03 (시간대별 메뉴 주문건수), MNU_05 (인기 메뉴 조합)의 경우 SSE 연동 및 대시보드 전용으로 변경된 백엔드 DTO 구조에 맞춰 타입 정의 및 유틸리티 함수 업데이트

#️⃣ 작업 상세 내용

대시보드 메뉴 분석 카드 콘텐츠 구현
- MenuSalesRankingCardContent: 매출액 기준 상위 메뉴 랭킹 표시 (최대 4개)
- IngredientUsageRankingCardContent: 식재료 소진량 랭킹 표시 (최대 4개)
- TimeSlotMenuOrderCountCardContent: 특정 시간대에 주문이 집중되는 메뉴 정보 표시
- PopularMenuCombinationCardContent: 함께 주문되는 빈도가 높은 메뉴 조합 정보 표시
공통 컴포넌트 및 UI 개선
- DashboardRankingContent: 테이블 기반의 랭킹 레이아웃 공통화 및 스크린 리더 지원(sr-only)
- IngredientUnregisteredContent: 식재료 사용량 랭킹 카드에서 식재료 데이터가 없는 경우의 안내 UI 구현
- RankBadge: 중간 사이즈인 smmd(size-7) 속성 추가

추가 설명

MNU_03 (시간대별 메뉴 주문건수), MNU_05 (인기 메뉴 조합)의 경우 상세분석과 대시보드에서의 response DTO 다름. 백엔드랑 합의 완
response DTO 자세히 보기

📊 MNU_03 – 시간대별 메뉴 주문건수

1️⃣ DetailTimeSlotMenuOrderCountResponse
: 상세분석에서 response

✅ 샘플 Response
```
{
  "items": [
    {
      "timeSlot2H": 10,
      "totalOrderCount": 50,
      "menus": [
        { "menuName": "불고기 버거", "orderCount": 30 },
        { "menuName": "치즈버거", "orderCount": 20 }
      ]
    }
  ]
}
```
2️⃣ DashboardTimeSlotMenuOrderCountResponse
: 대시보드에서 sse response

✅ 샘플 Response
```
{
  "timeSlot2H": 10,
  "menuName": "불고기 버거"
}
```
📊 MNU_05 – 인기 메뉴 조합

3️⃣ DetailPopularMenuCombinationResponse
: 상세분석에서 response

✅ 샘플 Response
```
{
  "items": [
    {
      "baseMenuName": "불고기 버거",
      "pairedMenus": [
        { "menuName": "감자튀김", "count": 80 },
        { "menuName": "콜라", "count": 70 }
      ]
    }
  ]
}
```
4️⃣ DashboardPopularMenuCombinationResponse
: 대시보드에서 sse response

✅ 샘플 Response
```
{
  "firstMenuName": "불고기 버거",
  "secondMenuName": "감자튀김"
}
```
MNU_01 (메뉴별 매출 랭킹), MNU_04 (식재료 소진량) 의 경우 겹치는 UI가 있어 공통 컴포넌트(DashboardRankingContent.tsx) 사용
IngredientUsageRankingCardContent.tsx와 MenuSalesRankingCardContent.tsx는 components/menu/dashboard-menu-ranking 폴더 내에 함께 위치
MNU_01 (메뉴별 매출 랭킹), MNU_04 (식재료 소진량)의 경우 response DTO로 받아온 데이터를 RankItem (랭킹 목록에서 한 행에 해당) 컴포넌트에서 사용할 수 있는 데이터로 변환하는 함수 존재
- RankItem(랭킹 한 행)에서 사용하는 데이터 구조
```
  export interface DashboardRankItem {
    rank: number;
    itemName: string;
    totalAmount: number;
    unit: '원' | IngredientUnit;
  }
```
- MNU_01 (메뉴별 매출 랭킹) 에서 dto -> DashboardRankItem 변환 함수
  - getDashboardMenuRankItems
- MNU_04 (식재료 소진량) 에서 dto -> DashboardRankItem 변환 함수
  - getDashboardIngredientRankItems
    - 식재료의 경우 g, kg, ml, L와 같이 규모가 다른 단위 섞여 있음
      -> kg의 경우 1000g으로, L의 경우 1000ml로 변환 후 소진량 비교해 정렬
      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; });

#️⃣ 관련 이슈

📸 스크린샷 (선택)

2026-02-15.11.24.25.mov

…shboard-menu-card

gemini-code-assist

Code Review

대시보드 편집 화면에 메뉴 분석 관련 지표 카드를 추가하는 변경 사항입니다. 새로운 컴포넌트와 타입, 상수가 다수 추가되었으며, 일부 공통 컴포넌트가 수정되었습니다. 리뷰에서는 주로 타입 정의의 명확성, 네이밍 컨벤션, 그리고 오타 수정과 같은 코드의 일관성 및 유지보수성에 대한 개선점을 제시했습니다.

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

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

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

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

frontend/src/constants/menu/dashboard-menu-ranking/dashboardRanking.ts

lee0jae330

고생하셨습니다 ~ cdn assets 이름 반영해주시면 감사하겠습니다 !
또 리뷰 반영해주시면 감사하겠습니다 !

lee0jae330 · 2026-02-17T11:14:28Z

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

p2: 오우 제 형식이랑 맞추어주셨군요 감사합니다 !

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

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

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

lee0jae330 · 2026-02-17T11:21:30Z

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

+interface IngredientUsageRankingCardContentProps extends GetIngredientUsageRankingResponseDto {
+  className?: string;
+}
+
+export const IngredientUsageRankingCardContent = ({
+  hasIngredient,
+  items,
+}: IngredientUsageRankingCardContentProps) => {


p3: 여기도 dto 누락되었습니다 !

dto 가 누락되었다는게 className이 누락되었다는 말씀이신가요??

아 className입니다 ㅠㅠ

lee0jae330 · 2026-02-17T11:22:02Z

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

+interface MenuSalesRankingCardContentProps extends GetMenuSalesRankingResponseDto {
+  className?: string;
+}
+
+export const MenuSalesRankingCardContent = ({
+  items,
+}: MenuSalesRankingCardContentProps) => {
+  // dto -> 대시보드의 메뉴>매출 랭킹 카드 UI 데이터 형태로 변환


p3: 여기도 누락되었습니다 !

frontend/src/utils/shared/nullable.ts

frontend/src/mocks/data/dashboard/menu/dashboardMenuIngredientRankItems.ts

frontend/src/components/shared/rank-badge/RankBadgeVariant.ts

lwjmcn · 2026-02-17T19:39:14Z

frontend/src/components/shared/edit-card-wrapper/EditCardWrapper.tsx

-        height:
-          Math.max(EDIT_CARD_WRAPPER.MIN_HEIGHT, computedCardHeight) * sizeY +
-          GRID_GAP * (sizeY - 1), // 최소 높이 147px, gap 20px
+        height: Math.max(EDIT_CARD_WRAPPER.MIN_HEIGHT, computedCardHeight), // 최소 높이 147px,


[p2] 지금 식재료소진량 카드는 computedCardHeight가 다른 것보다 큰 것 같은데 확인 부탁 드립니다.

랭킹 테이블 자체 위아래 여백이 있어서 발생한 문제였습니다. 테이블 자체 위아래 여백 제거했습니다!

lwjmcn · 2026-02-17T19:40:26Z

frontend/src/components/shared/edit-card-wrapper/EditCardWrapper.tsx

      <div
        style={{ marginTop: `${EDIT_CARD_WRAPPER.HEADER_MAIN_GAP}px` }}
-        className="flex min-w-0 flex-1 items-end justify-center"
+        className={cn(


[p3] 메뉴 판매 패턴, 인기 메뉴 조합 지표가 justify-center 때문에 중앙 정렬이 된 것 같은데 디자인 상 아래로 정렬되어야 해요. 확인 부탁드립니다.

justify-center는 가로 가운데 정렬 용이어서 관련이 없는 부분입니다!
메뉴 판매 패턴, 인기 메뉴 조합 지표의 문구가 아래가 아닌 위에 뜨는 문제는 메뉴 판매 패턴, 인기 메뉴 조합 지표 컨텐츠의 height를 원래 텍스트 높이보다 더 크게 주어서 윗 부분 여백 생기게 하는 방식으로 해결했습니다!

2026-02-18.11.55.19.mov

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

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

lwjmcn

dto가 정말 많으네요 . . .
백엔드 분들이랑 협의 하시느라 고생 많으셨어요.
공통 컴포넌트도 굿굿입니다!

mskwon02 and others added 30 commits February 13, 2026 10:04

chore: 임시커밋

c23463b

feat: dashboard metric card 상수 변경 및 관련 타입 제너릭 정의

8b25224

chore: cherry-pick 오류 해결(타입가드)

be20d12

feat: 식자재 소진량 매출 랭킹 카드

62ec726

feat: 메뉴 주문 건수 카드

c448d48

feat: 주문건수 가장 많은 메뉴 카드

1c7d312

feat: 메뉴별 매출 랭킹 카드

a376748

chore: 랭킹 배지에 size 7인 smmd이름의 사이즈 속성 추가

20ee6d2

feat: nullable 타입 추가

df7f858

feat: 대시보드의 메뉴파트에서 메뉴랭킹, 식자재 랭킹 UI에서 공통으로 사용되는 랭킹 아이템 타입 정의

ef370cb

feat: 메뉴별 매출 랭킹 DTO 타입 정의

98a4895

feat: 대시보드의 메뉴파트에서 메뉴랭킹, 식자재 랭킹 UI에서 공통으로 사용되는 랭킹 아이템 컴포넌트 구현

4809bbf

feat: 대시보드 메뉴의 메뉴별 매출 랭킹 카드 구현

0bd7d6a

feat: 백엔드에서 보내주는 식자재별 소진량 dto 정의

9d8b24b

chore: 대시보드 랭킹 테이블에서 사용하는 행 아이템 컴포넌트 주석 수정

9d591e5

chore: 메뉴 매출 랭킹에서 사용하던 랭킹 테이블 컴포넌트를 식재료 소진량 랭킹에서도 사용할 수 있도록 수정

33ab632

feat: 대시보드 메뉴분석에서 식재료 사용량 랭킹 카드 구현

94d8af2

chore: nullable한 특징에 맞게 유틸 함수의 파라미터 타입도 변형

065551a

chore: 식자재별 소진량 랭킹 카드 DTO 주석 수정

5cec2f1

feat: 인기 메뉴 조합 랭킹에 사용되는 dto 정의

9650a63

feat: 인기 메뉴 조합 카드 콘텐츠 컴포넌트 구현

c952c16

feat: 시간대별 메뉴 주문 건수, 인기 메뉴 조합 카드 새로 바뀐 dto 정의

4145ea3

feat: 다음 시간 구하는 유틸 함수 정의

f28e5d0

feat: 대시보드>메뉴분석>현재 주문건수 가장 많은 메뉴 카드

bc7f262

chore: 대시보드 랭킹 컴포넌트 css 일부 수정

e321250

chore: 인기메뉴 조합 랭킹 카드를 새로 바뀐 대시보드용 dto(SSE용)를 사용하는 방식으로 변경ㅇ

88118f3

chore: 식재료 소진량 DTO 구조 변경에 맞추어 카드 수정

5d34697

chore: 대시보드 카드 랭킹 테이블에서 양 옆 여백 생기는 문제 해결

3e322ff

chore: 폴더 구조 및 파일 위치 변경. 상수 분리

709410b

chore: editCardWrapper 수정

2e94468

mskwon02 added 3 commits February 15, 2026 22:55

chore: 대시보드 메뉴분석 상수들 as const로 export

2b9a00d

Merge remote-tracking branch 'origin/develop' into feature/#262-fe-da…

7627ae7

…shboard-menu-card

chore: 편집모드 패널에 대시보드 메뉴분석 컨텐츠 사용

6335aef

gemini-code-assist bot reviewed Feb 15, 2026

View reviewed changes

mskwon02 added 2 commits February 16, 2026 06:34

chore: null값이 props로 들어올 수 없기 때문에 불필요한 null 체크 제거

a699e1e

chore: PR리뷰반영-오타 수정

6bf2446

mskwon02 requested review from lee0jae330 and lwjmcn February 15, 2026 21:46

mskwon02 self-assigned this Feb 15, 2026

lee0jae330 approved these changes Feb 17, 2026

View reviewed changes