바이어 Import — 현행 구조 & 화면별 UI/UX 분석

0개요

진입점 → 3단계 마법사 → SSE 파이프라인 → 완료 모달.

1파일 맵

2전체 흐름 (FE ↔ BE)

FE state machine (AddBuyersPage):  group → upload → mapping → (모달들)

[화면1 그룹]   StepGroupSelect ──onGroupResolved(groupId,wsId)──┐
                                                              ▼
[화면2 업로드] StepUpload ──POST /smart-import/analyze──▶ analyzeFileColumns()
                  │  ◀── {columns, suggestedMapping(LLM), totalRows}
                  └──onAnalyzed(file,mapping)──▶
[화면3 매핑]   StepMapping
                  │  parseCsvForPreview() (클라 미리보기/제외후보)
                  ├─ records>0 ─▶ [화면4] ExclusionPreviewModal ─확인─┐
                  └─ records=0 ────────────────────────────────────────┤
                                                                        ▼
                       POST /smart-import/start (SSE) ──▶ runSmartImportPipelineLocked()
[화면5 진행]   ImportStatusDialog ◀─ SSE events:
                  pipeline_step(parsing/dedup/verifying/importing)
                  verify_progress · import_progress
                  pipeline_complete {imported, addedToGroup, ...}
                  │
[화면5 완료]   완료 요약 ──"바이어 보기"──▶ /leads?groupId=…
                  (이후) GET /:jobId/unresolved ─▶ 미해결(중복) 행 수동 검토

3화면 0 — 오케스트레이터 AddBuyersPage

┌─────────────────────────┐
│ ← 뒤로                   │
│ ┌─[group] 대상그룹 배너─┐ │
│ │ 👥 "독일_레더 (818)"  │ │
│ └───────────────────────┘ │
│                          │
│   [ 단계별 컴포넌트 ]    │
│   group→upload→mapping  │
│                          │
└─────────────────────────┘

4화면 1 — 그룹 선택 StepGroupSelect

┌──────────────────────────┐
│   그룹을 선택하세요       │
│  ┌────────┬────────┐     │
│  │ 기존 ● │  새로  │     │
│  └────────┴────────┘     │
│  ┌──────────────────────┐│
│  │ 📁 독일_레더 (818) ▾ ││
│  └──────────────────────┘│
│  [뒤로]          [다음→] │
└──────────────────────────┘

5화면 2 — 파일 업로드 StepUpload

┌──────────────────────────┐
│ 파일 업로드  [CSV][XLSX]↓│
│ ┌──────────────────────┐ │
│ │      ⬆               │ │
│ │  드래그 또는 클릭     │ │
│ │  .csv .xlsx .xls 50MB│ │
│ └──────────────────────┘ │
│ ✨ 파싱→중복→검증→저장   │
└──────────────────────────┘

6화면 3 — 컬럼 매핑 StepMapping (핵심)

┌────────────────────────────┐
│ 컬럼 매핑                    │
│ ⚠ 확인할 칸 2개  /  ✓ 자동완료│
│ 📄 buyers.csv          [✕]  │
│ ⓘ 이메일 없음 — 보강 필요   │
│ ┌─저장항목──┬─내 파일데이터─┐│
│ │ 회사명 ▾  │ Gap Inc.      ││
│ │ 이메일 ▾  │ a@gap.com     ││
│ │ 가져안함▾ │ (메모)        ││
│ └───────────┴───────────────┘│
│            [업로드 시작]     │
└────────────────────────────┘

7화면 4 — 제외 미리보기 StepExclusion

┌────────────────────────────┐
│ 자동 제외 미리보기 (모달)   │
│ ─────────────────────────── │
│ 중복/억제로 빠질 행 N건     │
│ ☑ 회사명 중복  ☑ 이메일중복 │
│ ┌──────────────────────────┐│
│ │ 행 · 회사 · 사유          ││
│ └──────────────────────────┘│
│   [취소]        [그대로 진행]│
└────────────────────────────┘

8화면 5 — 진행 & 완료 ImportStatusDialog

── 진행중 ──         ── 완료 ──
┌──────────────┐   ┌──────────────┐
│  ◌ 회전       │   │   ✓          │
│ 업로드 중…    │   │ 추가 완료!    │
│ ✓ 파일 분석   │   │ 4명 추가됨    │
│ ✓ 중복 제거   │   │ 기존 1 편입   │
│ ◌ 이메일 검증 │   │ 중복 12 제외  │
│ · 리드 등록   │   │ [바이어 보기]│
└──────────────┘   └──────────────┘

9백엔드 API & 파이프라인

runSmartImportPipelineLocked  [워크스페이스당 1실행 락]
 0 preflight  식별자(회사명/URL/이메일) ≥1 필수, 아니면 400
 1 parse      빈 행 제거 → emptyRowsSkipped
 2 dedup      email → url → 회사명 → {unique, duplicates}
              duplicates → import_jobs.unresolvedData (복구 가능)
 2.5 verify   MillionVerifier — 배달불가·위험(≤20) 제거
 3 import     bulkImportLeads(unique) + 그룹 멤버 추가
 3.5 group    DB매칭 중복(matchedLeadId) → 그룹 편입
 ✓ complete   imported / duplicates / addedToGroup / existingAddedToGroup

10눈여겨볼 UX 결정