[FE] 대시보드 편집창 - 매출추이 지표 카드 추가 by lee0jae330 · Pull Request #299 · softeerbootcamp-7th/WEB-Team3-CheckMate

lee0jae330 · 2026-02-17T07:15:15Z

#️⃣ 변경 사항

대시보드 편집 기능 내 매출 추이(Sales Trend) 관련 컴포넌트를 신규 추가하고, 다양한 카드 크기에 대응할 수 있도록 대시보드 편집 카드(EditCardWrapper)의 레이아웃 계산 로직을 개선했습니다. 또한, 차트의 시각적 피드백을 세밀하게 제어하기 위한 기능 수정을 포함합니다.

#️⃣ 작업 상세 내용

매출 추이(Sales Trend) 컴포넌트 및 관련 로직 구현
- SalesTrendContent 컴포넌트 신규 추가: 실매출(Bar)과 주문건수(Line)를 동시에 시각화하는 BarLineChart 적용
- 기간(7일, 30일, 월간 등)에 따른 차트 너비 및 높이 자동 계산 로직 추가
- 매출 추이 관련 DTO(GetSalesTrendResponseDto) 및 타입 정의 추가
- 대시보드 편집 화면(EditCardContent)에 매출 추이 카드(SLS_09_04, SLS_10_07, SLS_11_07) 연동
대시보드 편집 카드 레이아웃 및 CSS 개선
- EditCardWrapper에서 세로 크기(sizeY)를 지원하도록 계산 로직 수정: GRID_GAP을 고려한 높이 산출
- transform-origin을 left top으로 변경하여 스케일 조정 시 레이아웃 정렬 최적화
- CardEditViewCard에서 sizeY 속성 전달 및 그리드 스팬 관련 스타일 보정
차트 컴포넌트 기능 고도화
- BarLineChart에서 툴팁이 비활성화(activeTooltip={false})된 경우, 불필요한 hover 효과(색상 변경, 밝기 조절)가 발생하지 않도록 BarLineSeries 수정
- 차트 내 가이드라인 개수 조절(yGuideLineCount) 및 X축 화살표 타입 등 UI 옵션 강화
기타 코드 품질 개선
- 모듈 관리 효율화를 위한 배럴 파일(index.ts) 추가 및 정리
- Nullish 연산자(??) 관련 우선순위 및 상수 정의 구조 개선

#️⃣ 관련 이슈

📸 스크린샷 (선택)

변경 전

변경 후

📎 참고할만한 자료 (선택)

gemini-code-assist · 2026-02-17T07:15:18Z

Warning

You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again!

Copilot

Pull request overview

이 PR은 대시보드 편집 기능에 매출 추이(Sales Trend) 지표 카드를 추가하고, 다양한 카드 크기를 지원하기 위해 EditCardWrapper의 레이아웃 계산 로직을 개선합니다. 또한 툴팁이 비활성화된 경우 차트의 hover 효과를 제거하는 기능도 포함합니다.

Changes:

매출 추이(SalesTrendContent) 컴포넌트 및 관련 타입, 상수 정의 추가
EditCardWrapper에서 sizeY(세로 크기) 지원 추가 및 레이아웃 계산 로직 수정
BarLineSeries에서 툴팁 비활성화 시 hover 효과 제거

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
frontend/src/types/sales/index.ts	GetSalesTrendResponseDto 타입 export 추가
frontend/src/types/sales/dto/index.ts	GetSalesTrendResponseDto export 추가
frontend/src/types/sales/dto/getSalesTrendDto.ts	매출 추이 API 응답 DTO 인터페이스 정의
frontend/src/types/sales/dashboard-sales-trend/salesTrend.ts	SalesTrendItem 인터페이스 정의 (label, netAmount, orderCount)
frontend/src/types/sales/dashboard-sales-trend/index.ts	SalesTrendItem 타입 export
frontend/src/constants/sales/index.ts	SALES_TREND 상수 export 추가
frontend/src/constants/sales/dashboard-sales-trend/salesTrend.ts	매출 추이 차트 관련 상수 및 예제 데이터 정의
frontend/src/constants/sales/dashboard-sales-trend/index.ts	SALES_TREND 상수 export
frontend/src/components/shared/index.ts	BarLineChart 컴포넌트 export 추가
frontend/src/components/shared/edit-card-wrapper/EditCardWrapper.tsx	sizeY 지원 추가 및 레이아웃 계산 로직 수정
frontend/src/components/shared/bar-line-chart/BarLineSeries.tsx	툴팁 비활성화 시 hover 효과 제거
frontend/src/components/sales/index.ts	SalesTrendContent 컴포넌트 export 추가
frontend/src/components/sales/dashboard-sales-trend/index.ts	SalesTrendContent export
frontend/src/components/sales/dashboard-sales-trend/SalesTrendContent.tsx	매출 추이 컴포넌트 구현 (Bar+Line 차트 활용)
frontend/src/components/dashboard/dashboard-edit/EditCardContent.tsx	매출 추이 카드(SLS_09_04, SLS_10_07, SLS_11_07) 연동
frontend/src/components/dashboard/dashboard-edit/CardEditViewCard.tsx	sizeY 속성 전달 추가

Copilot · 2026-02-17T07:21:03Z

frontend/src/components/sales/dashboard-sales-trend/SalesTrendContent.tsx

+  const trendChartWidthValue =
+    trendChartWidth ??
+    (period === PERIOD_PRESETS.recentDays7_14_30.recent30Days
+      ? DEFAULT_TREND_CHART_WIDTH_FOR_RECENT_30_DAYS
+      : DEFAULT_TREND_CHART_WIDTH);


삼항 연산자와 nullish coalescing 연산자(??)를 함께 사용할 때는 괄호로 우선순위를 명확히 해야 합니다. 현재 코드는 연산자 우선순위로 인해 의도한 대로 동작하지만, 가독성과 명확성을 위해 다음과 같이 수정하는 것을 권장합니다:

trendChartWidth ?? (period === PERIOD_PRESETS.recentDays7_14_30.recent30Days ? DEFAULT_TREND_CHART_WIDTH_FOR_RECENT_30_DAYS : DEFAULT_TREND_CHART_WIDTH)

Copilot · 2026-02-17T07:21:03Z

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

        width:
-          Math.max(EDIT_CARD_WRAPPER.MIN_WIDTH, computedCardWidth) * sizeX +
-          GRID_GAP * (sizeX - 1), // 최소 너비 220px, gap 20px
+          Math.max(EDIT_CARD_WRAPPER.MIN_WIDTH, computedCardWidth) +


width 계산 로직에서 sizeX를 곱하지 않아 여러 그리드 셀을 차지하는 카드의 너비가 잘못 계산됩니다. sizeX > 1인 경우(예: SLS_09_04의 sizeX=3), 카드가 의도한 것보다 훨씬 좁게 표시됩니다.

이전 로직처럼 Math.max(EDIT_CARD_WRAPPER.MIN_WIDTH, computedCardWidth) * sizeX + GRID_GAP * (sizeX - 1)로 수정해야 합니다.

Suggested change

Math.max(EDIT_CARD_WRAPPER.MIN_WIDTH, computedCardWidth) +

Math.max(EDIT_CARD_WRAPPER.MIN_WIDTH, computedCardWidth) * sizeX +

이렇게 하면 높이 계산 때와 마찬가지로 너무 커지는 문제 있어 수정했습니다.

frontend/src/components/sales/dashboard-sales-trend/SalesTrendContent.tsx

lee0jae330 · 2026-02-17T11:06:51Z

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

        width:
-          Math.max(EDIT_CARD_WRAPPER.MIN_WIDTH, computedCardWidth) * sizeX +
-          GRID_GAP * (sizeX - 1), // 최소 너비 220px, gap 20px
+          Math.max(EDIT_CARD_WRAPPER.MIN_WIDTH, computedCardWidth) +


이렇게 하면 높이 계산 때와 마찬가지로 너무 커지는 문제 있어 수정했습니다.

lee0jae330 · 2026-02-17T11:07:58Z

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

+            transformOrigin: 'left top',
          }}
          ref={childRef}
-          className={cn(isAdded ? 'opacity-10' : 'opacity-100')}
+          className={cn('w-full', isAdded ? 'opacity-10' : 'opacity-100')}


이 부분도 sizeX가 2이상일 때 스타일이 깨지는 문제가 있어서 수정했습니다.

lwjmcn · 2026-02-17T20:05:26Z

frontend/src/components/sales/dashboard-sales-trend/SalesTrendContent.tsx

+        className,
+      )}
+    >
+      <div className="flex items-center gap-3">


[p2] 제가 생각하기에는 다른 지표카드들과 마찬가지로 "일별 매출 추이"와 같은 제목(label)은 표시하지 않는 게 좋을 것 같습니다!
실매출 주문건수 같은 범례는 기간 옆에 표시될 수는 있을 것 같은데 이건 힘들 것 같고요 ㅎㅎ;;

이건 디자인이 없어서 임의로 추가했는데, 이미 해당 카드 카테고리에 명시되어 있네요
제거하겠스빈다 ~

lwjmcn · 2026-02-17T20:07:22Z

frontend/src/components/shared/bar-line-chart/BarLineSeries.tsx

-        className="peer z-1"
-        pointerEvents="all"
-      />
+      <path d={interactionPathD} fill="transparent" stroke="transparent" />


[p4] 툴팁 인터랙션 없애신 건가요? 상세분석에서 필요할 텐데 props로 내리지 않고 날려버리신 이유가 있나요..?

BarLineSeriesRenderer에서 조건부 렌더링하도록 변경ㄹ했습니다 ~

lwjmcn · 2026-02-17T20:09:55Z

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

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


[p4] 매출유입구조(도넛차트) 지표 카드에서 아래 height가 조금 남는데 정렬 문제일까요?

음...?! 저는 괜찮은 것 같지만.. 내일 다같이 한번 보죠 ?!

lwjmcn

차트가 결실을 보네요ㅎㅎ
고생하셨습니다 ~~

p.s. 영상에서 봤는데 파일 변경사항에는 없네요... SalesByDayContent에서 XGuideLine 빼주세요!

lee0jae330 added 9 commits February 17, 2026 07:54

feat: 매출 추이 관련 DTO 추가

f7306a1

feat: 툴팁이 없는 bar line chart의 경우, hover 효과 제거

4c5edbf

feat: 매출 추이 type 수정

f762ac0

feat: 매출 추이 content 관련 상수 추가

b29662a

feat: 매출 추이 content 관련 상수 추가

64083f2

feat: 대시보드 편집 카드 wrapper 크기 계산 변경 및 css 수정

f342e78

feat: 대시보드 편집 카드에 매출 추이 관련 컴포넌트 추가

0358dd4

chore: 배럴 파일 추가

6f3ea5a

chore: nullish 연산자 관련 우선순위 변경

d588755

lee0jae330 added the ✨ feat 새로운 기능이나 서비스 로직을 추가합니다. label Feb 17, 2026

lee0jae330 self-assigned this Feb 17, 2026

lee0jae330 requested review from Copilot, lwjmcn and mskwon02 February 17, 2026 07:17

Copilot started reviewing on behalf of lee0jae330 February 17, 2026 07:17 View session

Copilot AI reviewed Feb 17, 2026

View reviewed changes

lee0jae330 commented Feb 17, 2026

View reviewed changes

chore: 불필요한 코드 제거

c38887d

lee0jae330 linked an issue Feb 17, 2026 that may be closed by this pull request

[FE] 3-1-9. 대시보드 매출 추이 지표 카드 추가 #287

Closed

4 tasks

lwjmcn reviewed Feb 17, 2026

View reviewed changes

lwjmcn approved these changes Feb 17, 2026

View reviewed changes

lee0jae330 changed the base branch from feature/#275-fe-bar-line-chart to develop February 18, 2026 13:54

lee0jae330 merged commit 6bf2b38 into develop Feb 18, 2026
1 check passed

lee0jae330 mentioned this pull request Feb 19, 2026

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

Merged

	Math.max(EDIT_CARD_WRAPPER.MIN_WIDTH, computedCardWidth) +
	Math.max(EDIT_CARD_WRAPPER.MIN_WIDTH, computedCardWidth) * sizeX +

Conversation

lee0jae330 commented Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

#️⃣ 변경 사항

#️⃣ 작업 상세 내용

#️⃣ 관련 이슈

📸 스크린샷 (선택)

변경 전

변경 후

📎 참고할만한 자료 (선택)

Uh oh!

gemini-code-assist bot commented Feb 17, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lwjmcn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

lee0jae330 commented Feb 17, 2026 •

edited

Loading