🔄 서비스 흐름도
로그인 → 상품 조회 → 대량 등록 → 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[상품 카드 클릭]
S3 --> S4[상품 상세 확인\n중량·보관·배송·과세·원산지 등]
S4 --> S5[모바일 미리보기]
S5 --> S6[장바구니 담기]
S6 --> S7[주문 진행]
end
subgraph MANAGER["🛠️ 매니저 — 상품 등록 및 관리"]
M1([상품 등록 메뉴]) --> M2{등록 방식 선택}
M2 -->|단건 등록| M3[상품 정보 직접 입력\n상품명·그룹ID·카테고리 등]
M2 -->|대량 등록| M4[엑셀 데이터 테이블 입력]
M3 --> M5[Enhancement 자동 추천\n그룹 코드 패널 노출]
M4 --> M6[Enhancement 서브행 추천\n행별 groupId·name·카테고리]
M5 --> M7{추천 선택}
M6 --> M7
M7 -->|적용| M8[셀 값 자동 입력\n녹색 하이라이트]
M7 -->|미적용| M9[해당 항목 회색 처리]
M8 --> M10[등록 완료]
M9 --> M10
M10 --> M11[(DB 저장)]
end
subgraph ENHANCE["✨ Enhancement v1.6 — 자동 추천"]
E1[상품명 입력 감지] --> E2[그룹 코드 추천 패널]
E1 --> E3[카테고리 추천 패널]
E2 --> E4[항목 클릭 → 그룹ID 자동 입력]
E3 --> E5[항목 클릭 → 카테고리 자동 입력]
end
L8 --> S1
L8 --> M1
M3 --> E1
M4 --> 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[ProductListPage\n상품 목록·검색·필터]
C3[ProductDetailPage\n상세 정보·장바구니]
C4[MobilePreviewPopup\n팝업 미리보기]
C5[BulkRegisterPage\n대량 등록 테이블]
end
subgraph LIBS["📦 번들 라이브러리"]
L1[React + ReactDOM]
L2[Lucide React 아이콘]
L3[SheetJS — 엑셀 처리]
L4[TailwindCSS v4]
end
subgraph ENHANCE["✨ Enhancement v1.6\n(IIFE 스크립트)"]
E1[MutationObserver\nDOM 변경 감지]
E2[그룹 코드 추천 패널\noh-code-panel]
E3[카테고리 추천 패널\noh-cat-panel]
E4[대량 등록 서브행\noh-rec-row]
E5[매니저 로그아웃 버튼]
end
end
subgraph BROWSER["🖥️ 브라우저"]
B1[DOM 렌더링]
B2[로컬 이벤트 처리]
B3[엑셀 파일 다운로드]
end
C1 --> C2
C2 --> C3
C2 --> C5
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[모바일 미리보기]
R1 --> F4[장바구니 · 주문]
R2([매니저]) -->|등록·수정·관리| F5[단건 상품 등록]
R2 --> F6[대량 상품 등록]
R2 --> F7[로그아웃 버튼 노출]
end
subgraph ENHANCE["✨ Enhancement 레이어 — 공통 적용"]
F5 --> E1[그룹 코드 자동추천]
F5 --> E2[카테고리 자동추천]
F6 --> E3[행별 추천 서브행]
E3 --> E4{적용 / 미적용}
E4 -->|적용| E5[셀 값 업데이트\n취소 가능]
E4 -->|미적용| E6[흐리게 처리]
end
style ROLES fill:#EFF6FF,stroke:#3B82F6
style ENHANCE fill:#FDF4FF,stroke:#A855F7