🔄 서비스 흐름도
로그인 → 공급사 상품 등록(단건·대량) → Enhancement 자동 추천 → 매니저 승인 관리까지 전체 플로우
flowchart TD
subgraph LOGIN["🔐 로그인"]
L1([앱 접속]) --> L2{역할 선택}
L2 -->|공급사| L3[공급사 선택\n+ 아이디·비밀번호 입력]
L2 -->|매니저| L4[아이디·비밀번호 입력]
L3 --> L5[로그인]
L4 --> L5
L5 --> L6{인증}
L6 -->|실패| L7[오류 메시지]
L7 --> L2
L6 -->|성공| L8[대시보드 진입]
end
subgraph SUPPLIER["📦 공급사 — 상품 등록"]
S1([상품 등록 메뉴]) --> S2{등록 방식 선택}
S2 -->|단건 등록| S3[상품 정보 직접 입력\n상품명·그룹ID·카테고리 등]
S2 -->|대량 등록| S4[엑셀 데이터 테이블 입력]
S3 --> S5[Enhancement 자동 추천\n그룹 코드 패널 노출]
S4 --> S6[Enhancement 서브행 추천\n행별 groupId·name·카테고리]
S5 --> S7{추천 선택}
S6 --> S7
S7 -->|적용| S8[셀 값 자동 입력\n녹색 하이라이트]
S7 -->|미적용| S9[해당 항목 회색 처리]
S8 --> S10[등록 요청 제출]
S9 --> S10
S10 --> S11[승인 대기 / 등록 이력 확인]
end
subgraph MANAGER["🛠️ 매니저 — 승인 관리"]
M1([승인 관리 메뉴]) --> M2[승인 대기 목록 확인]
M2 --> M3[상품 내용 검토\n히어로코드 매핑·카테고리 확정]
M3 --> M4{승인 여부}
M4 -->|승인| M5[서비스 반영\n카카오 알림톡 발송]
M4 -->|거절| M6[사유 입력 후 거절\n카카오 알림톡 발송]
M6 --> M7[공급사 재등록 대기]
end
subgraph ENHANCE["✨ Enhancement v1.7 — 자동 추천"]
E1[상품명 입력 감지] --> E2[그룹 코드 추천 패널]
E1 --> E3[카테고리 추천 패널]
E2 --> E4[항목 클릭 → 그룹ID 자동 입력\n확인 모달 경유]
E3 --> E5[항목 클릭 → 카테고리 자동 입력]
end
L8 --> S1
L8 --> M1
S3 --> E1
S4 --> E1
style LOGIN fill:#EFF6FF,stroke:#3B82F6
style SUPPLIER fill:#F0FDF4,stroke:#22C55E
style MANAGER fill:#FFF7ED,stroke:#F97316
style ENHANCE fill:#FDF4FF,stroke:#A855F7
🏗️ 시스템 구조도
프론트엔드 컴포넌트 구성, 번들 라이브러리, Enhancement 스크립트 레이어
flowchart LR
subgraph CLIENT["🌐 단일 HTML 파일 (index.html)"]
subgraph REACT["⚛️ React 앱 (번들)"]
C1[LoginPage\n역할 선택·인증]
C2[SingleRegisterPage\n단건 등록 폼]
C3[UploadDetailPage\n등록 상세 확인·미리보기]
C4[MobilePreviewPopup\n팝업 미리보기]
C5[BulkRegisterPage\n대량 등록 테이블]
C6[ApprovalPage\n승인 관리·검토·승인·거절]
end
subgraph LIBS["📦 번들 라이브러리"]
L1[React + ReactDOM]
L2[Lucide React 아이콘]
L3[SheetJS — 엑셀 처리]
L4[TailwindCSS v4]
end
subgraph ENHANCE["✨ Enhancement v1.7\n(IIFE 스크립트)"]
E1[MutationObserver\nDOM 변경 감지]
E2[그룹 코드 추천 패널\noh-code-panel]
E3[카테고리 추천 패널\noh-cat-panel]
E4[대량 등록 서브행\noh-rec-row]
E5[매니저 로그아웃 버튼]
E6[중량·상품명 자동 정규화]
E7[그룹코드 매핑 확인 모달]
E8[단건 폼 누락 필드 주입]
end
end
subgraph BROWSER["🖥️ 브라우저"]
B1[DOM 렌더링]
B2[로컬 이벤트 처리]
B3[엑셀 파일 다운로드]
end
C1 -->|공급사| C2
C1 -->|공급사| C5
C1 -->|매니저| C6
C2 --> C3
C5 --> C3
C3 --> C4
REACT --> LIBS
E1 -->|300ms 디바운스| E2
E1 --> E3
E1 --> E4
E1 --> E5
CLIENT --> B1
B1 --> B2
C5 --> B3
style REACT fill:#EFF6FF,stroke:#3B82F6
style LIBS fill:#F0FDF4,stroke:#22C55E
style ENHANCE fill:#FDF4FF,stroke:#A855F7
style BROWSER fill:#FFF7ED,stroke:#F97316
flowchart TD
subgraph ROLES["👤 역할별 기능 접근"]
R1([공급사]) -->|등록·이력 관리| F1[단건 상품 등록]
R1 --> F2[대량 상품 등록]
R1 --> F3[등록 상품 조회\n승인 완료 상품 목록]
R1 --> F7[등록 이력 조회\n승인대기·완료·거절 확인]
R2([매니저/담당자]) -->|승인·거절 관리| F4[승인 관리]
R2 --> F5[상품 검토 및 수정]
R2 --> F6[로그아웃 버튼 노출]
end
subgraph ENHANCE["✨ Enhancement 레이어 — 공급사 등록 시 적용"]
F1 --> E1[그룹 코드 자동추천]
F1 --> E2[카테고리 자동추천]
F2 --> E3[행별 추천 서브행]
E3 --> E4{적용 / 미적용}
E4 -->|적용| E5[셀 값 업데이트\n취소 가능]
E4 -->|미적용| E6[흐리게 처리]
end
style ROLES fill:#EFF6FF,stroke:#3B82F6
style ENHANCE fill:#FDF4FF,stroke:#A855F7