diff --git a/frontend/src/components/dashboard/dashboard-edit/CardEditViewCard.tsx b/frontend/src/components/dashboard/dashboard-edit/CardEditViewCard.tsx index 325aef1a8..b3c308be0 100644 --- a/frontend/src/components/dashboard/dashboard-edit/CardEditViewCard.tsx +++ b/frontend/src/components/dashboard/dashboard-edit/CardEditViewCard.tsx @@ -32,7 +32,7 @@ export const CardEditViewCard = ({ cardCode }: CardEditViewCardProps) => { return null; // 카드 정보가 없는 경우 렌더링하지 않음 } - const { period, sizeX } = card; + const { period, sizeX, sizeY } = card; return (
  • @@ -41,6 +41,7 @@ export const CardEditViewCard = ({ cardCode }: CardEditViewCardProps) => { period={period} className="min-w-full" sizeX={sizeX} + sizeY={sizeY} onClickAddButton={handleAddCard} onClickDeleteButton={handleDeleteCard} > diff --git a/frontend/src/components/dashboard/dashboard-edit/EditCardContent.tsx b/frontend/src/components/dashboard/dashboard-edit/EditCardContent.tsx index 7668a7eb6..8e52d0605 100644 --- a/frontend/src/components/dashboard/dashboard-edit/EditCardContent.tsx +++ b/frontend/src/components/dashboard/dashboard-edit/EditCardContent.tsx @@ -6,6 +6,7 @@ import { PeakTimeContent, RealSalesContent, SalesByDayContent, + SalesTrendContent, SalesTypeContent, } from '@/components/sales'; import type { MetricCardCode } from '@/constants/dashboard'; @@ -17,6 +18,7 @@ import { PEAK_TIME, REAL_SALES, SALES_BY_DAY, + SALES_TREND, SALES_TYPE, } from '@/constants/sales'; @@ -63,6 +65,7 @@ const { EXAMPLE_TOP_DAY: SALES_BY_DAY_EXAMPLE_TOP_DAY, EXAMPLE_IS_SIGNIFICANT: SALES_BY_DAY_EXAMPLE_IS_SIGNIFICANT, } = SALES_BY_DAY; +const { EXAMPLE_DATA: SALES_TREND_EXAMPLE_DATA } = SALES_TREND; export const EditCardContent = ({ cardCode }: EditCardContentProps) => { switch (cardCode) { @@ -141,6 +144,15 @@ export const EditCardContent = ({ cardCode }: EditCardContentProps) => { items={PAYMENT_METHOD_EXAMPLE_PAYMENT_METHOD_DATA} /> ); + case 'SLS_09_04': + case 'SLS_10_07': + case 'SLS_11_07': + return ( + + ); case 'SLS_13_01': return ; case 'SLS_14_06': diff --git a/frontend/src/components/sales/dashboard-sales-trend/SalesTrendContent.tsx b/frontend/src/components/sales/dashboard-sales-trend/SalesTrendContent.tsx new file mode 100644 index 000000000..50b455d45 --- /dev/null +++ b/frontend/src/components/sales/dashboard-sales-trend/SalesTrendContent.tsx @@ -0,0 +1,81 @@ +import { BarLineChart } from '@/components/shared'; +import { + DASHBOARD_METRIC_CARDS, + type DASHBOARD_METRICS, + type ExtractCardCodesFromSection, +} from '@/constants/dashboard'; +import { SALES_TREND } from '@/constants/sales'; +import { PERIOD_PRESETS } from '@/constants/shared'; +import type { BarLineChartSeries } from '@/types/shared'; +import { cn } from '@/utils/shared'; + +type SalesTrendCardCode = ExtractCardCodesFromSection< + typeof DASHBOARD_METRICS.SALES.sections.SALES_TREND +>; + +interface SalesTrendContentProps { + cardCode: SalesTrendCardCode; + salesTrendData: BarLineChartSeries; + trendChartWidth?: number; + trendChartHeight?: number; + className?: string; +} + +export const SalesTrendContent = ({ + cardCode, + salesTrendData, + trendChartWidth, + trendChartHeight, + className, +}: SalesTrendContentProps) => { + const { period, label } = DASHBOARD_METRIC_CARDS[cardCode]; + const { + DEFAULT_TREND_CHART_WIDTH, + DEFAULT_TREND_CHART_WIDTH_FOR_RECENT_30_DAYS, + DEFAULT_TREND_CHART_HEIGHT, + } = SALES_TREND; + + const trendChartWidthValue = + trendChartWidth ?? + (period === PERIOD_PRESETS.recentDays7_14_30.recent30Days + ? DEFAULT_TREND_CHART_WIDTH_FOR_RECENT_30_DAYS + : DEFAULT_TREND_CHART_WIDTH); + + const trendChartHeightValue = trendChartHeight ?? DEFAULT_TREND_CHART_HEIGHT; + + return ( +
    +
    +

    {label}

    +
    +
    +
    + 실매출 +
    +
    +
    + 주문건수 +
    +
    +
    + +
    + ); +}; diff --git a/frontend/src/components/sales/dashboard-sales-trend/index.ts b/frontend/src/components/sales/dashboard-sales-trend/index.ts new file mode 100644 index 000000000..530088958 --- /dev/null +++ b/frontend/src/components/sales/dashboard-sales-trend/index.ts @@ -0,0 +1 @@ +export { SalesTrendContent } from './SalesTrendContent'; diff --git a/frontend/src/components/sales/index.ts b/frontend/src/components/sales/index.ts index 28b23e4fd..70173ff0b 100644 --- a/frontend/src/components/sales/index.ts +++ b/frontend/src/components/sales/index.ts @@ -14,3 +14,4 @@ export { PaymentMethodContent, } from './dashboard-sales-income'; export { PeakTimeContent, SalesByDayContent } from './dashboard-sales-pattern'; +export { SalesTrendContent } from './dashboard-sales-trend'; diff --git a/frontend/src/components/shared/bar-line-chart/BarLineSeries.tsx b/frontend/src/components/shared/bar-line-chart/BarLineSeries.tsx index d7c93eda6..72576a90d 100644 --- a/frontend/src/components/shared/bar-line-chart/BarLineSeries.tsx +++ b/frontend/src/components/shared/bar-line-chart/BarLineSeries.tsx @@ -28,20 +28,13 @@ export const BarLineSeries = ({ }: BarLineSeriesProps) => { return ( - + ); diff --git a/frontend/src/components/shared/edit-card-wrapper/EditCardWrapper.tsx b/frontend/src/components/shared/edit-card-wrapper/EditCardWrapper.tsx index 86ca1b95a..2e86b1cb6 100644 --- a/frontend/src/components/shared/edit-card-wrapper/EditCardWrapper.tsx +++ b/frontend/src/components/shared/edit-card-wrapper/EditCardWrapper.tsx @@ -19,6 +19,7 @@ interface EditCardWrapperProps { innerClassName?: string; // 자식 컴포넌트 클래스명 period: string; // 오늘, 이번주, 이번달 등 문구 sizeX?: number; // 가로 크기 + sizeY?: number; // 세로 크기 onClickDeleteButton?: () => void; // 대시보드에서 삭제하는 버튼 클릭 헨들러 onClickAddButton?: () => void; // 대시보드에 추가하는 버튼 클릭 핸들러 } @@ -31,6 +32,7 @@ export const EditCardWrapper = ({ className, innerClassName, sizeX = 1, + sizeY = 1, period = '기간없음', onClickDeleteButton, onClickAddButton, @@ -47,10 +49,12 @@ export const EditCardWrapper = ({
    {children}
    diff --git a/frontend/src/components/shared/index.ts b/frontend/src/components/shared/index.ts index 2ae1715e5..77c5b23a3 100644 --- a/frontend/src/components/shared/index.ts +++ b/frontend/src/components/shared/index.ts @@ -18,3 +18,4 @@ export { PeriodTag, EditCardWrapper } from './edit-card-wrapper'; export { ButtonGroup } from './button-group'; export { PaginationBar } from './pagenation'; export { LineChart } from './line-chart'; +export { BarLineChart } from './bar-line-chart'; diff --git a/frontend/src/constants/sales/dashboard-sales-trend/index.ts b/frontend/src/constants/sales/dashboard-sales-trend/index.ts new file mode 100644 index 000000000..ca8e4ee4c --- /dev/null +++ b/frontend/src/constants/sales/dashboard-sales-trend/index.ts @@ -0,0 +1 @@ +export { SALES_TREND } from './salesTrend'; diff --git a/frontend/src/constants/sales/dashboard-sales-trend/salesTrend.ts b/frontend/src/constants/sales/dashboard-sales-trend/salesTrend.ts new file mode 100644 index 000000000..fb7ea2239 --- /dev/null +++ b/frontend/src/constants/sales/dashboard-sales-trend/salesTrend.ts @@ -0,0 +1,74 @@ +const createXData = (labels: string[]) => + labels.map((label) => ({ amount: label, unit: '' })); + +const createYData = (values: number[]) => + values.map((value) => ({ amount: value, unit: '' })); + +export const SALES_TREND = { + DEFAULT_TREND_CHART_WIDTH: 1040, + DEFAULT_TREND_CHART_WIDTH_FOR_RECENT_30_DAYS: 700, + DEFAULT_TREND_CHART_HEIGHT: 120, + EXAMPLE_DATA: { + SLS_09_04: { + data: { + mainX: createXData([ + '1월 15일', + '1월 16일', + '1월 17일', + '1월 18일', + '1월 19일', + '1월 20일', + '오늘', + ]), + mainY: createYData([520, 180, 330, 470, 600, 460, 220]), + subX: createXData([ + '1월 15일', + '1월 16일', + '1월 17일', + '1월 18일', + '1월 19일', + '1월 20일', + '오늘', + ]), + subY: createYData([16, 20, 14, 23, 20, 23, 14]), + }, + color: 'var(--color-grey-400)', + }, + SLS_10_07: { + data: { + mainX: createXData([ + '12월 1~7일', + '12월 8~14일', + '12월 15~21일', + '12월 22~28일', + '12월 29일~1월 4일', + '1월 5~11일', + '1월 12~18일', + '이번주', + ]), + mainY: createYData([460, 150, 280, 280, 620, 490, 280, 280]), + subX: createXData([ + '12월 1~7일', + '12월 8~14일', + '12월 15~21일', + '12월 22~28일', + '12월 29일~1월 4일', + '1월 5~11일', + '1월 12~18일', + '이번주', + ]), + subY: createYData([14, 18, 12, 20, 18, 18, 20, 12]), + }, + color: 'var(--color-grey-400)', + }, + SLS_11_07: { + data: { + mainX: createXData(['8월', '9월', '10월', '11월', '12월', '이번달']), + mainY: createYData([540, 180, 310, 310, 310, 310]), + subX: createXData(['8월', '9월', '10월', '11월', '12월', '이번달']), + subY: createYData([18, 15, 24, 21, 24, 15]), + }, + color: 'var(--color-grey-400)', + }, + } as const, +}; diff --git a/frontend/src/constants/sales/index.ts b/frontend/src/constants/sales/index.ts index 9122a5ec5..d09fd3704 100644 --- a/frontend/src/constants/sales/index.ts +++ b/frontend/src/constants/sales/index.ts @@ -20,3 +20,4 @@ export { SALES_TYPE, } from './dashboard-sales-income'; export { PEAK_TIME, SALES_BY_DAY } from './dashboard-sales-pattern'; +export { SALES_TREND } from './dashboard-sales-trend'; diff --git a/frontend/src/types/sales/dashboard-sales-trend/index.ts b/frontend/src/types/sales/dashboard-sales-trend/index.ts new file mode 100644 index 000000000..ab7e5d7b1 --- /dev/null +++ b/frontend/src/types/sales/dashboard-sales-trend/index.ts @@ -0,0 +1 @@ +export type { SalesTrendItem } from './salesTrend'; diff --git a/frontend/src/types/sales/dashboard-sales-trend/salesTrend.ts b/frontend/src/types/sales/dashboard-sales-trend/salesTrend.ts new file mode 100644 index 000000000..bb359e1c6 --- /dev/null +++ b/frontend/src/types/sales/dashboard-sales-trend/salesTrend.ts @@ -0,0 +1,5 @@ +export interface SalesTrendItem { + label: string; + netAmount: number; + orderCount: number; +} diff --git a/frontend/src/types/sales/dto/getSalesTrendDto.ts b/frontend/src/types/sales/dto/getSalesTrendDto.ts new file mode 100644 index 000000000..66860a071 --- /dev/null +++ b/frontend/src/types/sales/dto/getSalesTrendDto.ts @@ -0,0 +1,5 @@ +import type { SalesTrendItem } from '../dashboard-sales-trend'; + +export interface GetSalesTrendResponseDto { + items: SalesTrendItem[]; +} diff --git a/frontend/src/types/sales/dto/index.ts b/frontend/src/types/sales/dto/index.ts index 2c9747f31..2e7cec780 100644 --- a/frontend/src/types/sales/dto/index.ts +++ b/frontend/src/types/sales/dto/index.ts @@ -12,3 +12,4 @@ export type { GetDetailSalesByDayResponseDto, GetDashboardSalesByDayResponseDto, } from './getSalesByDayDto'; +export type { GetSalesTrendResponseDto } from './getSalesTrendDto'; diff --git a/frontend/src/types/sales/index.ts b/frontend/src/types/sales/index.ts index 60ba30d7f..de423677a 100644 --- a/frontend/src/types/sales/index.ts +++ b/frontend/src/types/sales/index.ts @@ -10,6 +10,7 @@ export type { GetDashboardPeakTimeResponseDto, GetDetailSalesByDayResponseDto, GetDashboardSalesByDayResponseDto, + GetSalesTrendResponseDto, } from './dto'; export type { SalesIncomeStructureInsight } from './dashboard-sales-income'; export type { PeakTimeItem, PeakTimeSummary } from './dashboard-sales-pattern';