[FE] 대시보드 편집창 - 매출분석 지표 카드 추가 (매출추이 카테고리 제외)

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

@@ -7,9 +7,12 @@ import {
 } from '@/constants/dashboard';
 import { useEditCard } from '@/hooks/dashboard';
 
+import { EditCardContent } from './EditCardContent';
+
 interface CardEditViewCardProps {
   cardCode: MetricCardCode;
 }
+
 export const CardEditViewCard = ({ cardCode }: CardEditViewCardProps) => {
   const { addCard, removeCard, isAdded } = useEditCard();
 
@@ -29,7 +32,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 +41,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,157 @@
+import {
+  AveragePriceContent,
+  OrderCountContent,
+  OrderMethodContent,
+  PaymentMethodContent,
+  PeakTimeContent,
+  RealSalesContent,
+  SalesByDayContent,
+  SalesTypeContent,
+} from '@/components/sales';
+import type { MetricCardCode } from '@/constants/dashboard';
+import {
+  AVERAGE_PRICE,
+  ORDER_COUNT,
+  ORDER_METHOD,
+  PAYMENT_METHOD,
+  PEAK_TIME,
+  REAL_SALES,
+  SALES_BY_DAY,
+  SALES_TYPE,
+} from '@/constants/sales';
+
+interface EditCardContentProps {
+  cardCode: MetricCardCode;
+}
+
+const {
+  EXAMPLE_AMOUNT: REAL_SALES_EXAMPLE_AMOUNT,
+  EXAMPLE_CHANGE_RATE: REAL_SALES_EXAMPLE_CHANGE_RATE,
+  EXAMPLE_HAS_PREVIOUS_DATA: REAL_SALES_EXAMPLE_HAS_PREVIOUS_DATA,
+} = REAL_SALES;
+const {
+  EXAMPLE_AMOUNT: ORDER_COUNT_EXAMPLE_AMOUNT,
+  EXAMPLE_CHANGE_RATE: ORDER_COUNT_EXAMPLE_CHANGE_RATE,
+  EXAMPLE_HAS_PREVIOUS_DATA: ORDER_COUNT_EXAMPLE_HAS_PREVIOUS_DATA,
+} = ORDER_COUNT;
+const {
+  EXAMPLE_AMOUNT: AVERAGE_PRICE_EXAMPLE_AMOUNT,
+  EXAMPLE_COMPARISON_AMOUNT: AVERAGE_PRICE_EXAMPLE_COMPARISON_AMOUNT,
+  EXAMPLE_HAS_PREVIOUS_DATA: AVERAGE_PRICE_EXAMPLE_HAS_PREVIOUS_DATA,
+} = AVERAGE_PRICE;
+const {
+  EXAMPLE_TOP_TYPE: SALES_TYPE_EXAMPLE_TOP_TYPE,
+  EXAMPLE_TOP_SHARE: SALES_TYPE_EXAMPLE_TOP_SHARE,
+  EXAMPLE_DELTA_SHARE: SALES_TYPE_EXAMPLE_DELTA_SHARE,
+  EXAMPLE_SALES_SOURCE_DATA: SALES_TYPE_EXAMPLE_SALES_SOURCE_DATA,
+} = SALES_TYPE;
+const {
+  EXAMPLE_TOP_TYPE: ORDER_METHOD_EXAMPLE_TOP_TYPE,
+  EXAMPLE_TOP_SHARE: ORDER_METHOD_EXAMPLE_TOP_SHARE,
+  EXAMPLE_DELTA_SHARE: ORDER_METHOD_EXAMPLE_DELTA_SHARE,
+  EXAMPLE_ORDER_METHOD_DATA: ORDER_METHOD_EXAMPLE_ORDER_METHOD_DATA,
+} = ORDER_METHOD;
+const {
+  EXAMPLE_TOP_TYPE: PAYMENT_METHOD_EXAMPLE_TOP_TYPE,
+  EXAMPLE_TOP_SHARE: PAYMENT_METHOD_EXAMPLE_TOP_SHARE,
+  EXAMPLE_DELTA_SHARE: PAYMENT_METHOD_EXAMPLE_DELTA_SHARE,
+  EXAMPLE_PAYMENT_METHOD_DATA: PAYMENT_METHOD_EXAMPLE_PAYMENT_METHOD_DATA,
+} = PAYMENT_METHOD;
+const { EXAMPLE_DATA: PEAK_TIME_EXAMPLE_DATA } = PEAK_TIME;
+const {
+  EXAMPLE_DATA: SALES_BY_DAY_EXAMPLE_DATA,
+  EXAMPLE_TOP_DAY: SALES_BY_DAY_EXAMPLE_TOP_DAY,
+  EXAMPLE_IS_SIGNIFICANT: SALES_BY_DAY_EXAMPLE_IS_SIGNIFICANT,
+} = SALES_BY_DAY;
+
+export const EditCardContent = ({ cardCode }: EditCardContentProps) => {
+  switch (cardCode) {
+    case 'SLS_01_01':
+    case 'SLS_01_02':
+    case 'SLS_01_03':
+      return (
+        <RealSalesContent
+          cardCode={cardCode}
+          netAmount={REAL_SALES_EXAMPLE_AMOUNT}
+          changeRate={REAL_SALES_EXAMPLE_CHANGE_RATE}
+          hasPreviousData={REAL_SALES_EXAMPLE_HAS_PREVIOUS_DATA}
+        />
+      );
+    case 'SLS_02_01':
+    case 'SLS_02_02':
+    case 'SLS_02_03':
+      return (
+        <OrderCountContent
+          cardCode={cardCode}
+          orderCount={ORDER_COUNT_EXAMPLE_AMOUNT}
+          changeRate={ORDER_COUNT_EXAMPLE_CHANGE_RATE}
+          hasPreviousData={ORDER_COUNT_EXAMPLE_HAS_PREVIOUS_DATA}
+        />
+      );
+    case 'SLS_03_01':
+    case 'SLS_03_02':
+    case 'SLS_03_03':
+      return (
+        <AveragePriceContent
+          cardCode={cardCode}
+          averageOrderAmount={AVERAGE_PRICE_EXAMPLE_AMOUNT}
+          differenceAmount={AVERAGE_PRICE_EXAMPLE_COMPARISON_AMOUNT}
+          hasPreviousData={AVERAGE_PRICE_EXAMPLE_HAS_PREVIOUS_DATA}
+        />
+      );
+    case 'SLS_06_01':
+    case 'SLS_06_02':
+    case 'SLS_06_03':
+      return (
+        <SalesTypeContent
+          cardCode={cardCode}
+          insight={{
+            topType: SALES_TYPE_EXAMPLE_TOP_TYPE,
+            topShare: SALES_TYPE_EXAMPLE_TOP_SHARE,
+            deltaShare: SALES_TYPE_EXAMPLE_DELTA_SHARE,
+          }}
+          items={SALES_TYPE_EXAMPLE_SALES_SOURCE_DATA}
+        />
+      );
+    case 'SLS_07_01':
+    case 'SLS_07_02':
+    case 'SLS_07_03':
+      return (
+        <OrderMethodContent
+          cardCode={cardCode}
+          insight={{
+            topType: ORDER_METHOD_EXAMPLE_TOP_TYPE,
+            topShare: ORDER_METHOD_EXAMPLE_TOP_SHARE,
+            deltaShare: ORDER_METHOD_EXAMPLE_DELTA_SHARE,
+          }}
+          items={ORDER_METHOD_EXAMPLE_ORDER_METHOD_DATA}
+        />
+      );
+    case 'SLS_08_01':
+    case 'SLS_08_02':
+    case 'SLS_08_03':
+      return (
+        <PaymentMethodContent
+          cardCode={cardCode}
+          insight={{
+            topType: PAYMENT_METHOD_EXAMPLE_TOP_TYPE,
+            topShare: PAYMENT_METHOD_EXAMPLE_TOP_SHARE,
+            deltaShare: PAYMENT_METHOD_EXAMPLE_DELTA_SHARE,
+          }}
+          items={PAYMENT_METHOD_EXAMPLE_PAYMENT_METHOD_DATA}
+        />
+      );
+    case 'SLS_13_01':
+      return <PeakTimeContent peakTimeData={PEAK_TIME_EXAMPLE_DATA} />;
+    case 'SLS_14_06':
+      return (
+        <SalesByDayContent
+          salesByDayItems={SALES_BY_DAY_EXAMPLE_DATA}
+          topDay={SALES_BY_DAY_EXAMPLE_TOP_DAY}
+          isSignificant={SALES_BY_DAY_EXAMPLE_IS_SIGNIFICANT}
+        />
+      );
+    default:
+      return null;
+  }
+};

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

@@ -0,0 +1,64 @@
+import {
+  DASHBOARD_METRIC_CARDS,
+  DASHBOARD_METRICS,
+  type ExtractCardCodes,
+} from '@/constants/dashboard';
+import { AVERAGE_PRICE, SALES_UNIT } from '@/constants/sales';
+import type { GetAveragePriceResponseDto } from '@/types/sales';
+import { getMetricTrend } from '@/utils/dashboard';
+import { getSalesCurrentComparisonMessage } from '@/utils/sales';
+
+import { CurrentSalesContent } from './CurrentSalesContent';
+
+const {
+  EXAMPLE_AMOUNT,
+  EXAMPLE_COMPARISON_AMOUNT,
+  EXAMPLE_HAS_PREVIOUS_DATA,
+  MIN_CHANGE_RATE,
+  MAX_CHANGE_RATE,
+  METRIC_LABEL,
+} = AVERAGE_PRICE;
+
+type AveragePriceCardCodes = ExtractCardCodes<
+  typeof DASHBOARD_METRICS.SALES.sections.CURRENT_SALES.items.AVERAGE_PRICE
+>;
+
+interface AveragePriceContentProps extends GetAveragePriceResponseDto {
+  cardCode: AveragePriceCardCodes;
+  className?: string;
+}
+
+export const AveragePriceContent = ({
+  cardCode,
+  averageOrderAmount = EXAMPLE_AMOUNT,
+  differenceAmount = EXAMPLE_COMPARISON_AMOUNT,
+  hasPreviousData = EXAMPLE_HAS_PREVIOUS_DATA,
+  className,
+}: AveragePriceContentProps) => {
+  const periodType = DASHBOARD_METRIC_CARDS[cardCode].period;
+  const metricTrend = getMetricTrend({
+    comparisonAmount: differenceAmount,
+    minValue: MIN_CHANGE_RATE,
+    maxValue: MAX_CHANGE_RATE,
+  });
+  const comparisonMessageTokens = getSalesCurrentComparisonMessage({
+    periodType,
+    hasPreviousData,
+    metricTrend,
+    metricLabel: METRIC_LABEL,
+    comparisonAmount: differenceAmount,
+    unit: SALES_UNIT.WON,
+  });
+  return (
+    <CurrentSalesContent className={className}>
+      <CurrentSalesContent.TrendBadge trend={metricTrend} />
+      <CurrentSalesContent.Amount
+        amount={averageOrderAmount}
+        unit={SALES_UNIT.WON}
+      />
+      <CurrentSalesContent.ComparisonMessage
+        comparisonMessageTokens={comparisonMessageTokens}
+      />
+    </CurrentSalesContent>
+  );
+};

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

@@ -0,0 +1,107 @@
+import { type ReactNode, useMemo } from 'react';
+
+import { METRIC_TREND, type MetricTrend } from '@/constants/dashboard';
+import { CDN_BASE_URL } from '@/constants/shared';
+import type { MessageToken } from '@/utils/sales/dashboard/createMessageToken';
+import { cn, formatNumber } from '@/utils/shared';
+
+interface CurrentSalesContentProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const CurrentSalesContent = ({
+  children,
+  className,
+}: CurrentSalesContentProps) => {
+  return (
+    <article
+      className={cn(
+        'flex w-75 flex-col items-start justify-start gap-1',
+        className,
+      )}
+    >
+      {children}
+    </article>
+  );
+};
+
+interface CurrentSalesTrendBadgeProps {
+  trend: MetricTrend;
+}
+
+const CurrentSalesTrendBadge = ({ trend }: CurrentSalesTrendBadgeProps) => {
+  const iconSrc = useMemo(() => {
+    switch (trend) {
+      case METRIC_TREND.UP:
+        return '/assets/images/graph_up.svg';
+      case METRIC_TREND.DOWN:
+        return '/assets/images/graph_down.svg';
+      case METRIC_TREND.SAME:
+        return '/assets/images/graph_same.svg';
+      default:
+        return null;
+    }
+  }, [trend]);
+
+  if (!iconSrc) {
+    return <div className="size-6" />;
+  }
+
+  return <object data={`${CDN_BASE_URL}${iconSrc}`} className="size-6" />;
+};
+
+interface CurrentSalesContentAmountProps {
+  amount: number;
+  unit: string;
+  className?: string;
+}
+
+const CurrentSalesContentAmount = ({
+  amount,
+  unit,
+  className,
+}: CurrentSalesContentAmountProps) => {
+  return (
+    <span className={cn('flex items-center gap-1', className)}>
+      <span className="headline-medium-bold text-grey-900">
+        {formatNumber(amount)}
+      </span>
+      <span className="title-medium-semibold text-grey-900">{unit}</span>
+    </span>
+  );
+};
+
+interface CurrentSalesContentComparisonMessageProps {
+  comparisonMessageTokens: MessageToken[];
+  className?: string;
+}
+
+const CurrentSalesContentComparisonMessage = ({
+  comparisonMessageTokens,
+  className,
+}: CurrentSalesContentComparisonMessageProps) => {
+  return (
+    <p className={cn('title-large-semibold', className)}>
+      {comparisonMessageTokens.map(
+        ({ text, isHighlight, highlightColor }, index) => {
+          return (
+            <span
+              key={index}
+              className={cn(
+                'text-grey-900 break-keep whitespace-pre-wrap',
+                isHighlight && highlightColor,
+              )}
+            >
+              {text}
+            </span>
+          );
+        },
+      )}
+    </p>
+  );
+};
+
+CurrentSalesContent.TrendBadge = CurrentSalesTrendBadge;
+CurrentSalesContent.Amount = CurrentSalesContentAmount;
+CurrentSalesContent.ComparisonMessage = CurrentSalesContentComparisonMessage;