Initial import

src/components/dashboard/multiProgress/MultiProgressUI.tsx

@@ -0,0 +1,51 @@
+import { Flex, Typography } from 'antd';
+
+const { Text } = Typography;
+
+export type MultiProgressItem = {
+  label: string;
+  percent: number;
+  color: string;
+};
+
+export type MultiProgressUIProps = {
+  label: string;
+  meta?: string;
+  data: MultiProgressItem[];
+};
+
+export function MultiProgressUI({ label, meta, data }: MultiProgressUIProps) {
+  return (
+    <Flex vertical gap={12} className="dashboard-multi-progress-ui">
+      <div className="dashboard-multi-progress-ui__header">
+        <div className="dashboard-multi-progress-ui__copy">
+          <Text className="dashboard-multi-progress-ui__label">{label}</Text>
+          {meta ? <Text type="secondary">{meta}</Text> : null}
+        </div>
+      </div>
+
+      <div className="dashboard-multi-progress-ui__bar">
+        {data.map((item) => (
+          <div
+            key={item.label}
+            className="dashboard-multi-progress-ui__segment"
+            style={{ width: `${item.percent}%`, backgroundColor: item.color }}
+          />
+        ))}
+      </div>
+
+      <Flex vertical gap={8}>
+        {data.map((item) => (
+          <div key={item.label} className="dashboard-multi-progress-ui__legend">
+            <span
+              className="dashboard-multi-progress-ui__swatch"
+              style={{ backgroundColor: item.color }}
+            />
+            <Text>{item.label}</Text>
+            <Text className="dashboard-multi-progress-ui__percent">{item.percent}%</Text>
+          </div>
+        ))}
+      </Flex>
+    </Flex>
+  );
+}

src/components/dashboard/multiProgress/index.ts

@@ -0,0 +1,2 @@
+export { MultiProgressUI } from './MultiProgressUI';
+export type { MultiProgressItem, MultiProgressUIProps } from './MultiProgressUI';

src/components/dashboard/multiProgress/plugins/index.ts

@@ -0,0 +1 @@
+export { createMultiProgressMetaPlugin, createMultiProgressSortPlugin } from './multi-progress.plugin';

src/components/dashboard/multiProgress/plugins/multi-progress.plugin.ts

@@ -0,0 +1,16 @@
+import type { PropsPlugin } from '../../../../types/component-plugin';
+import type { MultiProgressUIProps } from '../types';
+
+export function createMultiProgressMetaPlugin(meta: string): PropsPlugin<MultiProgressUIProps> {
+  return (props) => ({
+    ...props,
+    meta,
+  });
+}
+
+export function createMultiProgressSortPlugin(): PropsPlugin<MultiProgressUIProps> {
+  return (props) => ({
+    ...props,
+    data: [...props.data].sort((left, right) => right.percent - left.percent),
+  });
+}

src/components/dashboard/multiProgress/samples/BaseSample.tsx

@@ -0,0 +1,28 @@
+import type { SampleMeta } from '../../../../widgets/core';
+import { MultiProgressUI } from '../MultiProgressUI';
+
+export const sampleMeta: SampleMeta = {
+  id: 'dashboard-multi-progress-base',
+  componentId: 'dashboard-multi-progress',
+  title: 'Dashboard Multi Progress',
+  description: '여러 단계 진행률을 하나의 막대와 범례로 함께 보여주는 컴포넌트입니다.',
+  category: 'Components',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 11,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <MultiProgressUI
+      label="오늘 처리 현황"
+      meta="입고 / 피킹 / 출고"
+      data={[
+        { label: '입고', percent: 28, color: '#165dff' },
+        { label: '피킹', percent: 34, color: '#52c41a' },
+        { label: '출고', percent: 38, color: '#fa8c16' },
+      ]}
+    />
+  );
+}

src/components/dashboard/multiProgress/samples/Sample.tsx

@@ -0,0 +1,36 @@
+import type { SampleMeta } from '../../../../widgets/core';
+import { plugins } from '../../../../types/component-plugin';
+import { MultiProgressUI } from '../MultiProgressUI';
+import {
+  createMultiProgressMetaPlugin,
+  createMultiProgressSortPlugin,
+} from '../plugins';
+import type { MultiProgressUIProps } from '../types';
+
+export const sampleMeta: SampleMeta = {
+  id: 'dashboard-multi-progress',
+  componentId: 'dashboard-multi-progress',
+  title: 'Dashboard Multi Progress',
+  description: '여러 상태 비중을 하나의 bar와 범례로 표현하는 대시보드 컴포넌트입니다.',
+  category: 'Components',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 11,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const props = plugins<MultiProgressUIProps>(
+    {
+      label: '배송 상태 비중',
+      data: [
+        { label: '배송 완료', percent: 54, color: '#28c76f' },
+        { label: '배송 중', percent: 28, color: '#00cfe8' },
+        { label: '지연', percent: 18, color: '#ea5455' },
+      ],
+    },
+    [createMultiProgressMetaPlugin('오늘 기준'), createMultiProgressSortPlugin()],
+  );
+
+  return <MultiProgressUI {...props} />;
+}

src/components/dashboard/multiProgress/types/index.ts

@@ -0,0 +1 @@
+export type { MultiProgressItem, MultiProgressUIProps } from './multi-progress';

src/components/dashboard/multiProgress/types/multi-progress.ts

@@ -0,0 +1,11 @@
+export type MultiProgressItem = {
+  label: string;
+  percent: number;
+  color: string;
+};
+
+export type MultiProgressUIProps = {
+  label: string;
+  meta?: string;
+  data: MultiProgressItem[];
+};

src/components/dashboard/progress/ProgressUI.tsx

@@ -0,0 +1,26 @@
+import { Flex, Progress, Typography } from 'antd';
+import type { ProgressUIProps } from './types';
+
+const { Text } = Typography;
+
+export function ProgressUI({ label, meta, data }: ProgressUIProps) {
+  return (
+    <Flex vertical gap={8} className="dashboard-progress-ui">
+      <div className="dashboard-progress-ui__header">
+        <div className="dashboard-progress-ui__copy">
+          <Text className="dashboard-progress-ui__label">{label}</Text>
+          {meta ? <Text type="secondary">{meta}</Text> : null}
+        </div>
+        <Text className="dashboard-progress-ui__percent">{data.percent}%</Text>
+      </div>
+
+      <Progress
+        percent={data.percent}
+        size="small"
+        showInfo={false}
+        strokeColor={data.color}
+        className="dashboard-progress-ui__bar"
+      />
+    </Flex>
+  );
+}

src/components/dashboard/progress/index.ts

@@ -0,0 +1,3 @@
+export { ProgressUI } from './ProgressUI';
+export { createProgressColorPlugin, createProgressMetaPlugin } from './plugins';
+export type { ProgressUIData, ProgressUIProps } from './types';

src/components/dashboard/progress/plugins/index.ts

@@ -0,0 +1 @@
+export { createProgressColorPlugin, createProgressMetaPlugin } from './progress.plugin';

src/components/dashboard/progress/plugins/progress.plugin.ts

@@ -0,0 +1,19 @@
+import type { PropsPlugin } from '../../../../types/component-plugin';
+import type { ProgressUIProps } from '../types';
+
+export function createProgressMetaPlugin(meta: string): PropsPlugin<ProgressUIProps> {
+  return (props) => ({
+    ...props,
+    meta,
+  });
+}
+
+export function createProgressColorPlugin(color: string): PropsPlugin<ProgressUIProps> {
+  return (props) => ({
+    ...props,
+    data: {
+      ...props.data,
+      color,
+    },
+  });
+}

src/components/dashboard/progress/samples/BaseSample.tsx

@@ -0,0 +1,27 @@
+import type { SampleMeta } from '../../../../widgets/core';
+import { ProgressUI } from '../ProgressUI';
+
+export const sampleMeta: SampleMeta = {
+  id: 'dashboard-progress-base',
+  componentId: 'dashboard-progress',
+  title: 'Dashboard Progress',
+  description: '라벨, 메타, 진행률을 함께 표현하는 대시보드 progress 컴포넌트입니다.',
+  category: 'Components',
+  kind: 'base',
+  variantLabel: 'Base',
+  order: 10,
+  features: ['docs'],
+};
+
+export function Sample() {
+  return (
+    <ProgressUI
+      label="배송 완료"
+      meta="오늘 기준"
+      data={{
+        percent: 72,
+        color: '#165dff',
+      }}
+    />
+  );
+}

src/components/dashboard/progress/samples/Sample.tsx

@@ -0,0 +1,32 @@
+import type { SampleMeta } from '../../../../widgets/core';
+import { plugins } from '../../../../types/component-plugin';
+import { ProgressUI } from '../ProgressUI';
+import { createProgressColorPlugin, createProgressMetaPlugin } from '../plugins';
+import type { ProgressUIProps } from '../types';
+
+export const sampleMeta: SampleMeta = {
+  id: 'dashboard-progress',
+  componentId: 'dashboard-progress',
+  title: 'Dashboard Progress',
+  description: '라벨, 메타, 진행률을 함께 표현하는 대시보드 progress 컴포넌트입니다.',
+  category: 'Components',
+  kind: 'feature',
+  variantLabel: 'Showcase',
+  order: 10,
+  features: ['docs'],
+};
+
+export function Sample() {
+  const props = plugins<ProgressUIProps>(
+    {
+      label: '배송 완료',
+      data: {
+        percent: 72,
+        color: '#28c76f',
+      },
+    },
+    [createProgressMetaPlugin('오늘 기준'), createProgressColorPlugin('#165dff')],
+  );
+
+  return <ProgressUI {...props} />;
+}

src/components/dashboard/progress/types/index.ts

@@ -0,0 +1 @@
+export type { ProgressUIData, ProgressUIProps } from './progress';

src/components/dashboard/progress/types/progress.ts

@@ -0,0 +1,10 @@
+export type ProgressUIData = {
+  percent: number;
+  color: string;
+};
+
+export type ProgressUIProps = {
+  label: string;
+  meta?: string;
+  data: ProgressUIData;
+};