동기화

2026-05-14 01:21:27 +09:00
parent acea2afce5
commit 958fe6b980
379 changed files with 21786 additions and 423 deletions
@@ -0,0 +1,59 @@
+import { Steps, Typography } from 'antd';
+import { IconCheck, IconX, IconClock } from '@tabler/icons-react';
+import { ApprovalRequestStep } from '@/api/approval';
+import { COLOR_SUCCESS, COLOR_ERROR, COLOR_PRIMARY, GRAY } from '@/theme/tokens';
+
+const { Text } = Typography;
+
+interface Props {
+  steps: ApprovalRequestStep[];
+  currentStep: number;
+}
+
+function stepIcon(status: string) {
+  if (status === 'APPROVED') return <IconCheck size={14} style={{ color: COLOR_SUCCESS }} />;
+  if (status === 'REJECTED') return <IconX size={14} style={{ color: COLOR_ERROR }} />;
+  return <IconClock size={14} style={{ color: COLOR_PRIMARY }} />;
+}
+
+function stepStatus(status: string): 'finish' | 'error' | 'process' | 'wait' {
+  if (status === 'APPROVED') return 'finish';
+  if (status === 'REJECTED') return 'error';
+  if (status === 'IN_PROGRESS') return 'process';
+  return 'wait';
+}
+
+/**
+ * 결재선 진행 시각화 컴포넌트.
+ * Steps 수평 렌더링 + 단계별 상태 색상.
+ */
+export default function ApprovalProgress({ steps, currentStep }: Props) {
+  const items = steps.map((s) => ({
+    title: (
+      <Text style={{ fontSize: 12, fontWeight: 600, color: GRAY[700] }}>
+        {s.approverName}
+      </Text>
+    ),
+    description: (
+      <div style={{ fontSize: 11, color: GRAY[500] }}>
+        {s.comment && <div style={{ marginTop: 2, color: GRAY[600] }}>{s.comment}</div>}
+        {s.processedAt && (
+          <div style={{ marginTop: 2 }}>
+            {s.processedAt.slice(0, 10)}
+          </div>
+        )}
+      </div>
+    ),
+    icon: stepIcon(s.status),
+    status: stepStatus(s.status),
+  }));
+
+  return (
+    <Steps
+      size="small"
+      current={currentStep - 1}
+      items={items}
+      style={{ marginTop: 8 }}
+    />
+  );
+}