[FE] 대시보드 편집창 - 매출분석 지표 카드 추가 (매출추이 카테고리 제외) by lee0jae330 · Pull Request #274 · softeerbootcamp-7th/WEB-Team3-CheckMate

lee0jae330 · 2026-02-15T11:31:18Z

#️⃣ 변경 사항

매출 분석 대시보드 UI 구현 및 관련 도메인 로직(DTO, 상수, 유틸리티)이 대거 추가되었습니다. 주요 변경 사항은 다음과 같습니다.

매출 지표 카드 구현: 실매출, 주문건수, 주문 평균가 등 주요 매출 지표를 표시하는 카드 컴포넌트와 이전 기간 대비 변동 경향성(상승, 하락, 유지)을 시각화하는 로직을 추가했습니다.
매출 유입 구조 분석: 판매유형별, 주문수단별, 결제수단별 매출 비중을 도넛 차트로 시각화하고, 주요 인사이트를 브리핑 메시지로 제공하는 기능을 구현했습니다.
매출 패턴 시각화: 피크타임(라인 차트) 및 요일별 매출 패턴(바 차트) 분석 컴포넌트를 추가하여 실시간 및 통계적 매출 데이터를 확인할 수 있도록 했습니다.
대시보드 편집 기능 고도화: 대시보드 편집 모드에서 각 지표 카드의 미리보기를 제공하기 위해 EditCardContent 컴포넌트를 구현하고 예시 데이터를 연결했습니다.
차트 및 공통 UI 리팩터링: LineChart와 BarChart의 유연성을 높이기 위해 강조 색상 지정 및 좌표 계산 로직을 개선하고, 카드 래퍼(EditCardWrapper)의 스타일과 인터페이스를 수정했습니다.
도메인 구조 세분화: sales 도메인의 상수, 타입, 유틸리티 함수들을 현황(current-sales), 유입 구조(sales-income), 패턴(sales-pattern) 서브 도메인으로 분리하여 관리 효율성을 높였습니다.

#️⃣ 작업 상세 내용

신규 컴포넌트 추가:
- RealSalesContent, OrderCountContent, AveragePriceContent: 매출 현황 지표 카드 전용 컨텐츠.
- SalesTypeContent, OrderMethodContent, PaymentMethodContent: 도넛 차트 기반 매출 유입 구조 컨텐츠.
- PeakTimeContent, SalesByDayContent: 라인/바 차트 기반 매출 패턴 분석 컨텐츠.
- EditCardContent: 대시보드 편집 화면에서 카드별 예시 데이터를 렌더링하는 통합 컴포넌트.
데이터 처리 및 유틸리티:
- getSalesCurrentComparisonMessage: 지표 변동에 따른 동적 브리핑 메시지 생성.
- getMetricTrend: 데이터 비교를 통한 상승/하락/유지 경향성 판단 로직.
- createPeakTimeSeries: 피크타임 차트용 데이터 변환 유틸리티.
- 각 매출 지표별 DTO 정의 및 타입 가드 추가.
기존 컴포넌트 개선:
- BarChart: 특정 인덱스의 막대를 강조할 수 있는 기능 추가.
- LineChart: svg viewbox 기반의 높이/너비 계산 방식으로 변경하여 렌더링 정확도 개선.
- EditCardWrapper: 카드 사이즈(sizeX) 및 추가/삭제 버튼(Shadcn UI 교체) 로직 수정.
기타:
- 매출 단위 및 변동성 이미지 에셋 추가.
- 배럴 파일(index.ts) 정리를 통한 임포트 경로 최적화.
- MSW 인증 갱신 비활성화 및 관련 상수 정리.

추가 설명

매출분석 공통

createMessageToken 활용

첨부한 사진처럼 텍스트의 일부가 강조되는 형식이 불규칙했습니다. 위와 같은 UI에 대응하기 위해 createMessageToken 유틸 함수를 추가했습니다.

createMessageToken은 문장을 토큰 배열로 분해해 하나의 문장에서 강조할 구간만 색상 스타일을 줄 수 있게 합니다.
구조는 다음과 같습니다.

반환 타입: MessageToken[]
토큰 구조: { text, isHighlight, highlightColor }

핵심 포인트는 "문구 생성 로직은 유틸에서, 스타일 적용은 UI 컴포넌트에서 분리"하는 것입니다.

사용 방식

메시지 생성 유틸(getSalesCurrentComparisonMessage 등)에서 문장을 토큰 배열로 생성
UI 컴포넌트(CurrentSalesContent.ComparisonMessage)에서 map으로 렌더링
isHighlight === true인 토큰만 highlightColor 클래스 적용

예시 코드

메시지 유틸에서 토큰 생성

return [
  createMessageToken('지난주 이 시간보다 '),
  createMessageToken(
    `${formattedComparisonAmount}${unit} 늘었어요.`,
    true,
    'primary',
  ),
];

UI에서 토큰 렌더링

<p className="title-large-semibold">
  {comparisonMessageTokens.map(({ text, isHighlight, highlightColor }, index) => (
    <span
      key={index}
      className={cn('text-grey-900 break-keep whitespace-pre-wrap', isHighlight && highlightColor)}
    >
      {text}
    </span>
  ))}
</p>

위와 같이 활용할 수 있습니다.

Compound 패턴 활용

CurrentSalesContent, DashboardMainContent 라는 공통 컴포넌트 추가

return (
  <CurrentSalesContent className={className}>
    <CurrentSalesContent.TrendBadge trend={metricTrend} />
    <CurrentSalesContent.Amount amount={netAmount} unit={SALES_UNIT.WON} />
    <CurrentSalesContent.ComparisonMessage
      comparisonMessageTokens={comparisonMessageTokens}
    />
  </CurrentSalesContent>
);

위와 같이 compound 패턴을 통해 비슷하지만 UI가 달라지는 부분에 대응하였습니다.

각 카테고리에서 활용하는 공통 컴포넌트는 아래와 같습니다.

매출 현황: CurrentSalesContent
매출 유입 구조: DashboardMainContent

차트 관련 변경사항

대시보드 카드가 css transform: scale(...) 환경에서 렌더링될 때, 화면 픽셀 기준(getBoundingClientRect) 좌표와 SVG 내부 좌표계가 어긋나서 차트가 viewbox의 크기보다 한참 작게 렌더링되는 문제가 있었습니다.

때문에, getBoundingClientRect 기반에서 svg viewbox를 기준으로 좌표를 계산하도록 수정했습니다.

EditCardWrapper 변경사항

EditCardWrapper의 height가 비정상적으로 높게 계산되는 문제를 해결했습니다. 자식 컴포넌트의 높이가 최소 카드 높이 이상일 때도 sizeY를 곱하여, 자식 컴포넌트의 높이와 최소 카드 높이에 sizeY를 곱하지 않도록 하였습니다.
또한, EditCardWrapper의 자식 content를 감싸는 div를 커스텀할 수 있게 innerClassName도 추가했습니다.

#️⃣ 관련 이슈

📸 스크린샷 (선택)

변경 전

변경 후

2026-02-15.8.32.15.mov

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

Copilot

Pull request overview

대시보드 편집 모드에서 **매출분석 지표 카드(매출추이 카테고리 제외)**를 미리보기/렌더링할 수 있도록, 관련 UI 컴포넌트와 매출 도메인 타입/상수/유틸 및 차트 렌더링 로직을 확장한 PR입니다.

Changes:

매출 현황/유입 구조/패턴 카드 컨텐츠 컴포넌트 및 편집 화면용 EditCardContent 추가
브리핑 메시지 토큰화(createMessageToken) 및 비교/트렌드 계산 유틸 추가
SVG 좌표 계산을 viewBox 기준으로 변경하고 Bar/Line 차트 기능(활성 인덱스 강조 등) 개선

Reviewed changes

Copilot reviewed 93 out of 94 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
frontend/src/utils/shared/period-select/createPeriodTypeProvider.tsx	Context 기본값을 `undefined`로 변경해 오용 방지
frontend/src/utils/shared/nullable.ts	`Nullable` 유틸 타입 추가
frontend/src/utils/shared/line-chart/getXCoordinate.ts	X좌표 계산 입력을 `svgWidth`로 변경
frontend/src/utils/shared/index.ts	shared 유틸 export 정리(Nullable/assertNever 추가 등)
frontend/src/utils/shared/getCoordinate.ts	좌표 계산 입력을 `svgWidth`로 변경
frontend/src/utils/shared/assertNever.ts	exhaustive check용 `assertNever` 추가
frontend/src/utils/sales/index.ts	매출 대시보드 유틸 export 추가
frontend/src/utils/sales/dashboard/index.ts	메시지 토큰 유틸 barrel 추가
frontend/src/utils/sales/dashboard/createMessageToken.ts	브리핑 메시지 토큰 생성 유틸 추가
frontend/src/utils/sales/dashboard-sales-pattern/index.ts	매출 패턴 유틸 barrel 추가
frontend/src/utils/sales/dashboard-sales-pattern/getSalesPatternPeaktimeMessage.ts	피크타임 브리핑 메시지 유틸 추가
frontend/src/utils/sales/dashboard-sales-pattern/getSalesPatternByDayMessage.ts	요일별 브리핑 메시지 유틸 추가
frontend/src/utils/sales/dashboard-sales-pattern/createPeakTimeSeries.ts	피크타임 차트 시리즈 변환 유틸 추가
frontend/src/utils/sales/dashboard-sales-income/index.ts	매출 유입 구조 메시지 유틸 barrel 추가
frontend/src/utils/sales/dashboard-sales-income/getSalesIncomeStructureComparisionMessage.ts	유입 구조 비교 브리핑 메시지 생성 유틸 추가
frontend/src/utils/sales/dashboard-current-sales/index.ts	매출 현황 메시지 유틸 barrel 추가
frontend/src/utils/sales/dashboard-current-sales/getSalesCurrentComparisonMessage.ts	매출 현황 비교 브리핑 메시지 유틸 추가
frontend/src/utils/dashboard/index.ts	대시보드 유틸 export에 `getMetricTrend` 추가
frontend/src/utils/dashboard/getMetricTrend.ts	변동값 기반 트렌드 계산 유틸 추가
frontend/src/types/shared/line-chart/lineChartDataType.ts	LineChart datum을 공통 ChartDatum으로 통일
frontend/src/types/shared/line-chart/index.ts	LineChart 타입 export 정리
frontend/src/types/shared/index.ts	shared 타입 export에 chart 공통 타입 추가
frontend/src/types/shared/chart/index.ts	chart 공통 타입 barrel 추가
frontend/src/types/shared/chart/chartDataType.ts	Bar/Line 공통 datum/series 타입 추가
frontend/src/types/shared/bar-chart/barChartDataType.ts	BarChart datum을 ChartDatum으로 통일
frontend/src/types/sales/index.ts	매출 도메인 타입 export 대거 추가
frontend/src/types/sales/dto/index.ts	매출 DTO barrel 추가
frontend/src/types/sales/dto/getSalesByDayDto.ts	요일별 매출 DTO 추가
frontend/src/types/sales/dto/getRealTimeSalesDto.ts	실시간 매출 DTO 추가
frontend/src/types/sales/dto/getPeakTimeDto.ts	피크타임 DTO 추가
frontend/src/types/sales/dto/getOrderCountDto.ts	주문건수 DTO 추가
frontend/src/types/sales/dto/getIncomStructureBySalesTypeDto.ts	판매유형별 유입 구조 DTO 추가
frontend/src/types/sales/dto/getIncomStructureByPaymentMethodDto.ts	결제수단별 유입 구조 DTO 추가
frontend/src/types/sales/dto/getIncomStructureByOrderMethodDto.ts	주문수단별 유입 구조 DTO 추가
frontend/src/types/sales/dto/getAveragePriceDto.ts	평균가 DTO 추가
frontend/src/types/sales/dashboard-sales-pattern/salesByDay.ts	요일별 패턴 타입 추가
frontend/src/types/sales/dashboard-sales-pattern/peakTime.ts	피크타임 타입 추가
frontend/src/types/sales/dashboard-sales-pattern/index.ts	매출 패턴 타입 barrel 추가
frontend/src/types/sales/dashboard-sales-income/salesIncomeStructureInsight.ts	유입 구조 인사이트 타입 추가
frontend/src/types/sales/dashboard-sales-income/index.ts	유입 구조 타입 barrel 추가
frontend/src/mocks/auth/authHandler.ts	refresh mock 동작 변경(현재 passthrough)
frontend/src/hooks/shared/line-chart/useLineChart.ts	viewBox 기반 좌표 계산으로 변경
frontend/src/hooks/shared/bar-chart/useBarChart.ts	viewBox 기반 좌표 계산으로 변경
frontend/src/constants/sales/salesUnit.ts	매출 단위 상수 추가
frontend/src/constants/sales/salesSource.ts	Sales source 타입가드 추가 및 색상 조정
frontend/src/constants/sales/index.ts	sales 도메인 상수 export 확장
frontend/src/constants/sales/dashboard/index.ts	dashboard 하위 상수 barrel 추가
frontend/src/constants/sales/dashboard/briefingMessageHighlightColor.ts	브리핑 하이라이트 컬러 클래스 상수 추가
frontend/src/constants/sales/dashboard-sales-pattern/salesByDay.ts	요일별 패턴 예시 데이터/차트 상수 추가
frontend/src/constants/sales/dashboard-sales-pattern/peakTime.ts	피크타임 예시 데이터 상수 추가
frontend/src/constants/sales/dashboard-sales-pattern/index.ts	매출 패턴 상수 barrel 추가
frontend/src/constants/sales/dashboard-sales-income/salesType.ts	판매유형별 예시 데이터/차트 타이틀 상수 추가
frontend/src/constants/sales/dashboard-sales-income/paymentMethod.ts	결제수단별 예시 데이터/차트 타이틀 상수 추가
frontend/src/constants/sales/dashboard-sales-income/orderMethod.ts	주문수단별 예시 데이터/차트 타이틀 상수 추가
frontend/src/constants/sales/dashboard-sales-income/index.ts	유입 구조 상수 barrel 추가
frontend/src/constants/sales/dashboard-current-sales/realSales.ts	실매출 카드 상수 추가
frontend/src/constants/sales/dashboard-current-sales/orderCount.ts	주문건수 카드 상수 추가
frontend/src/constants/sales/dashboard-current-sales/index.ts	매출 현황 상수 barrel 추가
frontend/src/constants/sales/dashboard-current-sales/averagePrice.ts	평균가 카드 상수 추가
frontend/src/constants/dashboard/metricTrend.ts	METRIC_TREND 상수/타입 추가
frontend/src/constants/dashboard/index.ts	dashboard constants export 정리
frontend/src/constants/dashboard/dashboardMetric.ts	섹션 키 오탈자 수정 및 타입 유틸 추가
frontend/src/components/shared/line-chart/YGuideLine.tsx	가이드라인 렌더링을 `svgWidth` 기반으로 변경
frontend/src/components/shared/line-chart/XGuideLine.tsx	svgRect 의존 제거 및 경량화
frontend/src/components/shared/line-chart/LineChart.tsx	viewBox 기반 hook 사용으로 변경
frontend/src/components/shared/index.ts	shared export에 LineChart 추가
frontend/src/components/shared/images/images.stories.tsx	trend 아이콘 이미지 목록 추가
frontend/src/components/shared/edit-card-wrapper/TrashCanIconButton.tsx	shadcn Button으로 교체
frontend/src/components/shared/edit-card-wrapper/PlusIconButton.tsx	shadcn Button으로 교체
frontend/src/components/shared/edit-card-wrapper/EditCardWrapper.tsx	높이 계산/innerClassName 추가 및 transformOrigin 변경
frontend/src/components/shared/default-card-wrapper/DefaultCardWrapper.tsx	width/height props 제거
frontend/src/components/shared/default-card-wrapper/DefaultCardWrapper.stories.tsx	story args를 className 기반으로 변경
frontend/src/components/shared/bar-chart/BarSeries.tsx	활성 막대 강조를 index 기반으로 변경
frontend/src/components/shared/bar-chart/BarChart.tsx	activeDataIndex 지원 및 viewBox 기반 hook 사용
frontend/src/components/shared/bar-chart/BarChart.stories.tsx	activeDataIndex 데모 및 리얼타임 예제 보강
frontend/src/components/sales/sales-source/sales-source-chart/index.ts	legend export 추가
frontend/src/components/sales/sales-source/index.ts	sales-source export 확장
frontend/src/components/sales/index.ts	대시보드 카드 컨텐츠 export 추가
frontend/src/components/sales/dashboard-sales-pattern/index.ts	패턴 컨텐츠 barrel 추가
frontend/src/components/sales/dashboard-sales-pattern/SalesByDayContent.tsx	요일별 패턴 카드 UI 추가(BarChart 연동)
frontend/src/components/sales/dashboard-sales-pattern/PeakTimeContent.tsx	피크타임 카드 UI 추가(LineChart 연동)
frontend/src/components/sales/dashboard-sales-pattern/PeakTimeChartCaption.tsx	피크타임 차트 캡션 컴포넌트 추가
frontend/src/components/sales/dashboard-sales-income/index.ts	유입 구조 컨텐츠 barrel 추가
frontend/src/components/sales/dashboard-sales-income/SalesTypeContent.tsx	판매유형별 유입 구조 카드 컨텐츠 추가
frontend/src/components/sales/dashboard-sales-income/PaymentMethodContent.tsx	결제수단별 유입 구조 카드 컨텐츠 추가
frontend/src/components/sales/dashboard-sales-income/OrderMethodContent.tsx	주문수단별 유입 구조 카드 컨텐츠 추가
frontend/src/components/sales/dashboard-sales-income/DashboardSalesIncomeContent.tsx	유입 구조 공통 레이아웃/compound 컴포넌트 추가
frontend/src/components/sales/dashboard-current-sales/index.ts	매출 현황 컨텐츠 barrel 추가
frontend/src/components/sales/dashboard-current-sales/RealSalesContent.tsx	실매출 카드 컨텐츠 추가
frontend/src/components/sales/dashboard-current-sales/OrderCountContent.tsx	주문건수 카드 컨텐츠 추가
frontend/src/components/sales/dashboard-current-sales/CurrentSalesContent.tsx	매출 현황 공통 compound 컴포넌트 추가
frontend/src/components/sales/dashboard-current-sales/AveragePriceContent.tsx	평균가 카드 컨텐츠 추가
frontend/src/components/dashboard/dashboard-edit/EditCardContent.tsx	편집 화면 카드별 미리보기 컨텐츠 스위처 추가
frontend/src/components/dashboard/dashboard-edit/CardEditViewCard.tsx	카드 미리보기를 EditCardContent로 대체

Comments suppressed due to low confidence (1)

frontend/src/mocks/auth/authHandler.ts:53

/auth/refresh MSW 핸들러에서 HttpResponse.json(...)을 호출만 하고 반환하지 않아 응답이 무시됩니다. 현재는 항상 passthrough()가 반환되어 실제 네트워크로 빠지는데, 의도한 동작이 ‘목 응답’이라면 HttpResponse.json(...)을 return 하도록 수정하고 passthrough()를 제거해 주세요. 반대로 ‘갱신 비활성화’가 목적이라면 HttpResponse.json(...) 호출을 제거해 dead code가 없도록 정리해 주세요.

frontend/src/types/sales/dto/index.ts

frontend/src/utils/sales/dashboard-sales-income/getSalesIncomeStructureComparisonMessage.ts

frontend/src/utils/sales/dashboard-sales-income/getSalesIncomeStructureComparisionMessage.ts

frontend/src/utils/sales/dashboard-sales-pattern/getSalesPatternPeaktimeMessage.ts

frontend/src/components/sales/dashboard-current-sales/OrderCountContent.tsx

frontend/src/components/sales/dashboard-sales-income/OrderMethodContent.tsx

Copilot · 2026-02-15T11:55:39Z

frontend/src/utils/shared/nullable.ts

+export type Nullable<T> = {
+  [P in keyof T]?: T[P];
+};


Nullable<T>가 실제로는 모든 프로퍼티를 optional로 만드는 형태라 Partial<T>와 동일하며, 일반적으로 기대하는 T | null/null 허용과 의미가 다릅니다. 용도에 맞게 이름을 PartialProps/Optional 등으로 바꾸거나(또는 Partial<T>를 직접 사용) 진짜 nullable 의미가 필요하다면 T | null/프로퍼티 T[P] | null 형태로 정의를 조정해 주세요.

아 Partial 있는데 ts 까막눈 이슈네요.. 삭제하겠습니다.

frontend/src/components/sales/dashboard-current-sales/RealSalesContent.tsx

frontend/src/components/sales/dashboard-sales-income/SalesTypeContent.tsx

frontend/src/components/sales/dashboard-sales-income/PaymentMethodContent.tsx

lwjmcn · 2026-02-17T18:42:21Z

frontend/src/utils/shared/assertNever.ts

@@ -0,0 +1,3 @@
+export const assertNever = (value: never, message?: string): never => {


[p5] 디폴트 케이스 처리 좋네요

lwjmcn · 2026-02-17T18:45:11Z

frontend/src/utils/sales/dashboard/createMessageToken.ts

@@ -0,0 +1,20 @@
+import {


[p5] 하이라이트를 마주하고 소리 지르는 영재님이 상상되네요 ... 객체로 처리하니 깔끔하고 좋습니다~

lwjmcn · 2026-02-17T18:47:37Z

frontend/src/utils/sales/dashboard-current-sales/getSalesCurrentComparisonMessage.ts

+}: GetSalesCurrentComparisonMessageArgs): MessageToken[] => {
+  const weekday = DAY_OF_WEEK_LIST[new Date().getDay()];
+
+  const PERIOD_TEXT = {


[p3] getPeriodComparisonMessage.ts 파일에서 같은 일을 하고 있는데 파일 삭제하고, 이를 사용하고 있는 SalesComparison.tsx 컴포넌트를 작업하신 내용 바탕으로 리팩터링 부탁 드립니다!

이거는 대시보드 SSE 작업하는데에서 반영하겠습니다 ! 이 브랜치에서 반영하면 지금 올린 PR들에도 다 반영되어야해서 ㅠㅠ

lwjmcn · 2026-02-17T18:58:48Z

frontend/src/types/sales/dashboard-sales-income/salesIncomeStructureInsight.ts

@@ -0,0 +1,19 @@
+export type SalesIncomeStructureTopType =


[p2] salesSource.ts에 있는 const 객체에서 DeepValueOf 유틸 함수를 통해 이렇게 타입을 뽑아낼 수 있어요. 중복 정의되고 있는 것 같아서 말씀 드린 방식으로 바꿔주시면 감사하겠습니다!

feature/#302-fe-dashbard-card-ui
이 브랜치에 반영해놓겠습니다 ~

lwjmcn · 2026-02-17T19:00:58Z

frontend/src/types/sales/dto/getIncomeStructureBySalesTypeDto.ts

+} from '../dashboard-sales-income';
+
+interface SalesTypeItem {
+  salesType: Extract<SalesIncomeStructureTopType, '홀' | '포장' | '배달'>;


[p3] salesType, payMethod, orderChannel 타입 따로 export 하면 SalesSourceType 대신 타입 내러잉 하는 데 재사용 될 수 있을 것 같아요. 그리고 Extract 대신 SALES_SOURCE.SALE_TYPE 상수에서 ValueOf로 뽑아낼 수도 있을 것 같습니다.

feature/#302-fe-dashbard-card-ui 해당 브랜치에서 반영했습니다 ~

lwjmcn · 2026-02-17T19:01:30Z

frontend/src/types/sales/dto/getIncomeStructureByOrderMethodDto.ts

+} from '../dashboard-sales-income';
+
+interface OrderMethodItem {
+  orderChannel: Extract<


[p4] order method / order channel 명칭 통일해주면 좋을 것 같습니다!

이건 백엔드 DTO명을 그대로 따라서..
orderChannel로 맞춰야겠네요 ..

lwjmcn · 2026-02-17T19:04:47Z

frontend/src/constants/sales/salesSource.ts

+  ...Object.values(SALES_SOURCE.PAYMENT_METHOD),
+];
+
+export const isSalesSourceType = (value: string): value is SalesSourceType => {


[p3] 여기도 마찬가지로 DeepValueOf 함수 사용해서 만든 타입과 비교하면 더 깔끔하게 할 수 있을 것 같네요.

이부분은 value가 string 타입인데, 위에 있는 객체에 object.values로 접근하면 value에 타입 단언을 해줘야해서 저렇게 했습니다 !

lwjmcn · 2026-02-17T19:07:35Z

frontend/src/constants/dashboard/dashboardMetric.ts

+ * 결과: 'SLS_01_01' | 'SLS_01_02' | 'SLS_01_03' | 'SLS_02_01' | 'SLS_02_02' | 'SLS_02_03' | 'SLS_03_01' | 'SLS_03_02' | 'SLS_03_03';
+ *
+ */
+export type ExtractCardCodesFromSection<T> = T extends MetricSection


[p5] 타입스크립트의 마스터가 되셨군요 굿굿

lwjmcn · 2026-02-17T19:09:49Z

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
+          Math.max(EDIT_CARD_WRAPPER.MIN_HEIGHT, computedCardHeight) + GRID_GAP, // 최소 높이 147px,


[p2] 스크린샷 보니 미묘하게 아래에 마진이 남고 있어요. 높이에 GRID_GAP이 들어가지 않아도 될 것 같습니다!

이거 대시보드 SSE 브랜치에서 (gap * sizeY - 1)로 변경했습니다 !

lwjmcn · 2026-02-17T19:13:47Z

frontend/src/components/sales/dashboard-current-sales/AveragePriceContent.tsx

+  METRIC_LABEL,
+} = AVERAGE_PRICE;
+
+type AveragePriceCardCodes = ExtractCardCodes<


[p5] 타입 내러잉 좋습니다! 상세분석 컴포넌트들도 리팩터링이 ,, 필요하겠군요

lwjmcn · 2026-02-17T19:19:13Z

frontend/src/components/sales/dashboard-sales-income/DashboardSalesIncomeContent.tsx

+      )}
+    >
+      <div className="h-45 w-45">
+        <DoughnutChart title={title} chartData={chartData} />


[p3] 여기 도넛차트 애니메이션 끄는 게 나을 것 같은데 어떻게 생각하시나요?

음.. 일단 기능적인 결함은 아니어서 이번주에 기능 개발끝나고 생각해보죠 !

lwjmcn

상수 양이 정말 어마어마어마어마 하네요...
1875 line changed가 이해가 됩니다
수많은 분기 처리 추상화도 하시고 예시 데이터도 뚝딱뚝딱 만드시느라 고생 정말 많으셨습니다!

mskwon02

[p5]메뉴분석 지표카드 만들 때 많이 참고했습니다! 감사합니다~~

lee0jae330 added 30 commits February 12, 2026 23:38

feat: dashboard card code type 추가

e38bc4c

chore: 대시보드 편집 카드 추가, 삭제 버튼 shadcn button으로 교체

ce16b2f

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

b01ffa8

feat: 특정 section의 카드 type 추출 함수 추가

95cb8dc

feat: 지표 방향성 관련 상수 추가

6709840

feat: edit card wrapper inner class 추가

9223f5b

feat: 미니뷰 metricCardCode 타입 가드 추가

59bce54

feat: 매출 현황 관련 카드 content 공통 컴포넌트 추가

14059ca

feat: 각 지표 방향성을 반환하는 함수 추가

57d2bfc

feat: interface의 모든 속성을 nullable하게 만드는 유틸 타입 추가

ba4ab76

feat: 매출현황 관련 dto 추가

1c708d6

feat: 매출현황 - 실매출 카드 컨텐트 추가

4565f8f

feat: 카드 편집패널에 실매출 카드 임시로 추가

de5b24f

feat: 매출 관련 단위 상수 정의

cd1eba4

feat: 실매출 관련 상수 정의

3d6f7ff

chore: 지표 경향성 계산 관련 유틸 메서드 args interface 분리

baf029c

feat: 지표 관련 비교 message 반환함수 추가

ff516c0

feat: 매출현황에 변화율이 없는 경우에 대한 조건부 렌더링 추가

cb456d8

feat: 실매출 관련 카드 content 추가

4c6d274

feat: 불필요한 값 제거

77b4284

feat: 변동성이 없는 경우에 대한 image asset 추가

b779b49

feat: 매출 지표 주문 관련 상수 추가

94a6abf

chore: 매출 지표 주문건수 dto명 수정

e8ed673

feat: 지표에 변동성이 없는 경우, 변동성 없음에 대한 이미지 추가

aa06e10

feat: 주문 건수 관련 카드 content 추가

94c165f

chore: 상수 위치 수정

0e196de

fix: 이맘때쯤이 2번 나오는 문제 해결

15f792c

chore: ooCardContent에서 ooContent로 네이밍 수정

ff4bf99

feat: 주문건수 지표 카드 content 추가

9eaddc0

style: 여백 제거

532c129

lee0jae330 requested review from Copilot, lwjmcn and mskwon02 February 15, 2026 11:50

lee0jae330 self-assigned this Feb 15, 2026

Copilot started reviewing on behalf of lee0jae330 February 15, 2026 11:50 View session

Copilot AI reviewed Feb 15, 2026

View reviewed changes

lee0jae330 added 10 commits February 16, 2026 00:40

style: edit card wrapper transform origin 로직 롤백

98f0e74

chore: shadcn import 경로 수정

1a5cfdf

chore: dto 네이밍 오타 수정

127ae41

chore: 파일명 오타수정

2a6e257

chore: 조건식 삼항 연산자로 변경

83d21cc

chore: Peaktime -> PeakTime 오타 수정

247a210

chore: type import 제거

bf4a482

chore: nullable 타입 삭제

65ac399

chore: git 오류로 인한 커밋

b7f3339

chore: 파일명 수정

f405e8b

lwjmcn reviewed Feb 17, 2026

View reviewed changes

lwjmcn approved these changes Feb 17, 2026

View reviewed changes

mskwon02 approved these changes Feb 18, 2026

View reviewed changes

lwjmcn merged commit 92e66e4 into develop Feb 18, 2026
1 check passed

		@@ -0,0 +1,3 @@
		export const assertNever = (value: never, message?: string): never => {

Conversation

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

Uh oh!

#️⃣ 변경 사항

#️⃣ 작업 상세 내용

추가 설명

매출분석 공통

Compound 패턴 활용

차트 관련 변경사항

EditCardWrapper 변경사항

#️⃣ 관련 이슈

📸 스크린샷 (선택)

변경 전

변경 후

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

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

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 Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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 Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

lee0jae330 commented Feb 15, 2026 •

edited

Loading

lwjmcn Feb 17, 2026 •

edited

Loading

lwjmcn Feb 17, 2026 •

edited

Loading

lwjmcn Feb 17, 2026 •

edited

Loading