From cf6e592618b995faaf4c8188e81a433ff2a9111a Mon Sep 17 00:00:00 2001 From: chpark Date: Fri, 15 May 2026 17:05:28 +0900 Subject: [PATCH] =?UTF-8?q?docs(manual):=20=EC=99=B8=EB=B6=80=20=EC=BB=A4?= =?UTF-8?q?=EB=84=A5=EC=85=98=C2=B7=EA=B2=B0=EC=9E=AC=EC=83=81=EC=8B=A0?= =?UTF-8?q?=C2=B7=ED=99=94=EB=A9=B4=20=EB=94=94=EC=9E=90=EC=9D=B4=EB=84=88?= =?UTF-8?q?=20=EC=83=81=EC=84=B8=20=EA=B0=80=EC=9D=B4=EB=93=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 새 섹션 + 화면 목업(ASCII) 으로 핵심 기능 사용법 보강: §4 Amaranth(ERP) 연계 확장 - 4.1 외부 커넥션 관리 — 페이지 레이아웃 ASCII 목업 + 등록 7종 표 - 4.2 REST API 신규 등록 가이드 — 4 STEP (모달 화면 / 필드 설명 / [테스트] 검증 / 백엔드 활용). accessToken·hashKey 자동 암호화 동작. - 4.3 결재상신 워크플로 (사용자 시점) — 견적관리 그리드 → SweetAlert → Amaranth 결재창 → webhook 까지 ASCII 흐름도 + 가드 6조건 표 + 백엔드 내부 11단계. §6 화면 관리 — 사용자 정의 화면 만들기 (신규) - 6.1 화면 디자이너 개요 — 카드 레이아웃 목업 (테이블/버튼/플로우/미리보기) - 6.2 신규 화면 4 STEP (기본정보→테이블 매핑→버튼 추가→저장) - 6.3 조인/다중 테이블 매핑 - 6.4 버튼 타입 6종 (MODAL/EDIT/DELETE/OPENMODALWITHDATA/FLOW/EXTERNAL) + 플로우 편집기(DataFlowDesigner) 노드 흐름 - 6.5 데이터 흐름 — 견적→수주, 수주→출하 등 화면간 자동 연계 §9 FAQ — REST API 테스트 실패 / 새 화면 메뉴 누락 / 사용자 정의 저장 실패 3건 추가. 기존 §6 품질관리 → §7, §7 공통UI → §8, §8 FAQ → §9 로 재번호. --- docs/manual/RPS_시스템_사용자_매뉴얼.html | 415 +++++++++++++++++++--- 1 file changed, 370 insertions(+), 45 deletions(-) diff --git a/docs/manual/RPS_시스템_사용자_매뉴얼.html b/docs/manual/RPS_시스템_사용자_매뉴얼.html index e85c6f42..6b5994d6 100644 --- a/docs/manual/RPS_시스템_사용자_매뉴얼.html +++ b/docs/manual/RPS_시스템_사용자_매뉴얼.html @@ -123,11 +123,21 @@
  • Amaranth(ERP) 연계
  • 대시보드 관리
  • +
  • 화면 관리 — 사용자 정의 화면 + +
  • 품질관리 메뉴 가이드
  • 공통 UI 사용법
  • 자주 묻는 질문
  • @@ -401,58 +411,187 @@

    -

    4.1 외부 커넥션 관리

    +

    4.1 외부 커넥션 관리 — 한눈에 보기

    -

    위치: 관리자 > 자동화 관리 > 외부 커넥션 관리 > REST API 연결

    - - - - - - - - - -
    연결명엔드포인트용도
    Amaranth - 결재(SSO/결재 호출 시 path 지정)전자결재 SSO URL 발급, 결재함 조회
    Amaranth - Wehago 사용자/apiproxy/api99u01A11사용자 인증 토큰 발급
    Amaranth - 거래처/apiproxy/api16S11거래처 마스터 동기화
    Amaranth - 부서/apiproxy/api16S10부서 마스터 동기화
    Amaranth - 사원/apiproxy/api16S05사원 마스터 동기화
    Amaranth - 창고/apiproxy/api20A00S00801창고 마스터 동기화
    Amaranth - 계정과목/apiproxy/api11A02계정과목 마스터 동기화
    -

    각 커넥션 카드의 [테스트] 버튼을 누르면 실 호출이 발생하고 성공 / 실패 가 표시됩니다.

    +

    위치: 관리자 > 자동화 관리 > 외부 커넥션 관리

    +

    외부 시스템(ERP / 마스터 / 공공 API) 과의 모든 연결을 한 곳에서 관리합니다. 두 종류의 탭이 있습니다:

    +
    ┌────────────────────────────────────────────────────────────────────────────┐
    +│  외부 커넥션 관리   외부 데이터베이스 및 REST API 연결 정보를 관리합니다.   │
    +├────────────────────────────────────────────────────────────────────────────┤
    +│  [🗄 데이터베이스 연결]  [🌐 REST API 연결]  ← 탭 전환                       │
    +│                                                                            │
    +│  🔍 [연결명 또는 URL로 검색...]  [전체 ▾]  [전체 ▾]   총 7건   [+ 새 연결] │
    +├──────────────────────┬─────────────┬──────────────────────┬────────────────┤
    +│ 연결명               │ 회사         │ 기본 URL              │ 상태   테스트  │
    +├──────────────────────┼─────────────┼──────────────────────┼────────────────┤
    +│ Amaranth - 계정과목   │ COMPANY_16  │ https://erp.rps...    │ 활성   [테스트] │
    +│ Amaranth - 부서       │ COMPANY_16  │ https://erp.rps...    │ 활성   [테스트] │
    +│ Amaranth - 거래처     │ COMPANY_16  │ https://erp.rps...    │ 활성   [테스트] │
    +│ Amaranth - 결재       │ COMPANY_16  │ https://erp.rps...    │ 활성   [테스트] │
    +└──────────────────────┴─────────────┴──────────────────────┴────────────────┘
    +

    각 행의 [테스트] 버튼을 누르면 실제 호출이 발생하고 성공 / 실패 로 즉시 결과가 표시됩니다.

    -

    auth_config 필드

    -
    {
    -  "callerName": "API_gcmsAmaranth40578",     // 평문 (수정 시 즉시 적용)
    -  "groupSeq":   "gcmsAmaranth40578",         // 평문
    -  "accessToken": "MN5Kz...",                 // AES-256-GCM 자동 암호화 저장
    -  "hashKey":     "22519103...",              // AES-256-GCM 자동 암호화 저장
    -  "aesKey":      "8441e27489d402cd"          // 결재 SSO empSeq AES-128-CBC 키
    -}
    -

    - 💡 암호화 동작 - 신규 등록/수정 시 accessToken·hashKey 는 자동으로 iv:authTag:cipher 3-part hex 로 변환되어 저장됩니다. - 복호화 키는 환경변수 DB_PASSWORD_SECRET 입니다. +

    등록된 Amaranth 커넥션 (운영 기준 7종)

    + + + + + + + + + +
    연결명엔드포인트 path용도
    Amaranth - 결재(SSO/결재 호출 시 path 지정)전자결재 SSO URL 발급, 결재함 조회
    Amaranth - Wehago 사용자/apiproxy/api99u01A11사용자 인증 토큰 발급
    Amaranth - 거래처/apiproxy/api16S11거래처 마스터 동기화
    Amaranth - 부서/apiproxy/api16S10부서 마스터 동기화
    Amaranth - 사원/apiproxy/api16S05사원 마스터 동기화
    Amaranth - 창고/apiproxy/api20A00S00801창고 마스터 동기화
    Amaranth - 계정과목/apiproxy/api11A02계정과목 마스터 동기화
    + + +

    4.2 REST API 신규 등록 가이드 (URL + 키만 입력하면 끝)

    +

    + 외부 시스템과 새로 연동할 때 코드 수정 없이 UI에서 URL/인증 키만 입력하면 RPS PLM 어디서든 호출할 수 있습니다. + Amaranth 외에 ITS 교통정보, 기상특보, 환율, 자체 백오피스 API 등도 동일하게 등록 가능합니다.

    - -

    4.2 결재상신 워크플로

    +

    STEP 1 · [+ 새 연결] 버튼 클릭 → 등록 모달 오픈

    +
    ┌──────────────────────────────────────────────────────┐
    +│  REST API 연결 등록                              [X] │
    +├──────────────────────────────────────────────────────┤
    +│  ▶ 기본 정보                                          │
    +│    연결명 *        [Amaranth - 사원_____________]     │
    +│    설명           [api16S05 — 사원 마스터________]     │
    +│    회사 코드       [COMPANY_16 ▾]                     │
    +│                                                      │
    +│  ▶ 엔드포인트                                         │
    +│    기본 URL *      [https://erp.rps-korea.com___]     │
    +│    엔드포인트 path  [/apiproxy/api16S05_________]     │
    +│    HTTP 메서드     [POST ▾]   ⏱ Timeout [5000] ms    │
    +│                                                      │
    +│  ▶ 인증 정보                                          │
    +│    인증 타입       [Wehago / Amaranth ▾]              │
    +│    callerName     [API_gcmsAmaranth40578________]     │
    +│    accessToken    [••••••••••••••••••••••••••••]🔒    │
    +│    hashKey        [••••••••••••••••••••••••••••]🔒    │
    +│    groupSeq       [gcmsAmaranth40578____________]     │
    +│                                                      │
    +│  ▶ 기본 헤더 / 기본 요청 본문 (JSON, 선택)             │
    +│                                                      │
    +│              [테스트]   [취소]   [저장]                │
    +└──────────────────────────────────────────────────────┘
    + +

    STEP 2 · 필드 작성 가이드

    + + + + + + + + + + + + +
    필드설명예시
    연결명 *유일 식별자. 백엔드가 이 이름으로 조회 (amaranthApprovalClient).Amaranth - 결재
    설명운영자 참고용. 자유 입력."전자결재 통합 — 인증토큰/SSO/결재함"
    기본 URL *스킴+호스트까지만. path는 별도. 끝의 / 는 자동 제거.https://erp.rps-korea.com
    엔드포인트 path고정 path. 호출 시 함수에서 override 가능./apiproxy/api11A02
    HTTP 메서드GET / POST / PUT / DELETE.POST
    인증 타입API_KEY / BEARER / BASIC / OAUTH2 / WEHAGO_AMARANTH 중 선택.Wehago/Amaranth
    callerNameWehago 발급 API 이름. 평문 저장.API_gcmsAmaranth40578
    accessTokenWehago 발급 토큰. 저장 시 AES-256-GCM 자동 암호화.MN5Kz... (저장 후 마스킹)
    hashKeyHMAC 서명용 키. 자동 암호화.22519103...
    groupSeqWehago 그룹 시퀀스. 평문.gcmsAmaranth40578
    + +

    + 🔐 자동 암호화 + accessToken·hashKey·password·clientSecret 같은 민감 필드는 저장 직전에 + iv:authTag:cipher 3-part hex 형식으로 변환됩니다. + 복호화 키는 환경변수 DB_PASSWORD_SECRET 이며, 코드(amaranthApprovalClient.loadApprovalConnection)에서 + 자동 복호화됩니다. 직접 평문 입력해도 자동 처리되므로 사용자가 별도로 암호화할 필요가 없습니다. +

    + +

    STEP 3 · [테스트] 버튼으로 즉시 검증

    +

    저장 전에 [테스트] 를 누르면 실제 외부 서버로 호출을 보내 응답을 표시합니다:

    +
    ┌────────────────────────────────────────────────┐
    +│  ✅ 연결 성공                                    │
    +│  HTTP 200 · 응답시간 234ms                       │
    +│  마지막 테스트: 2026-05-13 09:42                  │
    +└────────────────────────────────────────────────┘
    +

    실패 시 응답 본문이 그대로 표시되어 토큰 오타 / IP 화이트리스트 / 시그니처 불일치를 즉시 디버그할 수 있습니다.

    + +

    STEP 4 · 저장 후 백엔드 호출에서 활용

    +

    등록된 커넥션은 즉시 코드 어디서나 이름으로 조회 가능합니다:

    +
    // backend-node/src/services/amaranthApprovalClient.ts
    +const conn = await loadApprovalConnection();   // connection_name='Amaranth - 결재'
    +// conn.baseUrl, conn.callerName, conn.accessToken(복호화됨), ...
    +const url = conn.baseUrl + "/apiproxy/api99u02A01";
    +

    업무 화면이 호출하는 모든 ERP API는 이 헬퍼를 거치므로, 키가 만료되면 코드 수정 없이 외부 커넥션 관리에서 토큰만 갱신해주면 됩니다.

    + +

    auth_config 저장 구조 (참고)

    +
    {
    +  "callerName": "API_gcmsAmaranth40578",                    // 평문
    +  "groupSeq":   "gcmsAmaranth40578",                        // 평문
    +  "accessToken": "fa9c..:b3e8..:7d2a..",                    // iv:authTag:cipher
    +  "hashKey":     "3a91..:c2f4..:8e6b..",                    // iv:authTag:cipher
    +  "aesKey":      "8441e27489d402cd"                         // 결재 SSO empSeq AES-128-CBC 키
    +}
    + + +

    4.3 결재상신 워크플로 (사용자 시점)

    +

    견적관리·주문서관리·품의서관리·ECR관리·CS관리 등 결재 대상 화면에서 동일한 흐름으로 작동합니다.

    + +

    사용자 화면 흐름

    +
    ┌─ 견적관리 ──────────────────────────────────────────────────────────────┐
    +│ [삭제] [+ 견적요청등록] [✎ 견적작성] [✈ 결재상신] [📧 메일발송] [초기화] │
    +├─────────────────────────────────────────────────────────────────────────┤
    +│ ☑ 영업번호    주문유형  접수일      고객사         품명      견적현황    │
    +│ ☑ 26C-0801   수리      2026-05-06  라온기술       10인치... 📁          │
    +│ ☐ 26C-0800   수리      2026-04-28  에스에프에이.. 12인치... 📁          │
    +└─────────────────────────────────────────────────────────────────────────┘
    +              ↓ ① 견적행 1건 체크
    +              ↓ ② [✈ 결재상신] 버튼 클릭
    +┌─ Sweet Alert 확인 ─────────────────────────────────────┐
    +│  결재상신                                                │
    +│  결재상신 하시겠습니까?                                  │
    +│  * 결재완료 후 메일발송이 가능합니다.                     │
    +│                                  [취소]    [결재상신 →]  │
    +└────────────────────────────────────────────────────────┘
    +              ↓ ③ 백엔드가 Amaranth SSO URL 발급
    +              ↓ ④ 새 창 자동 오픈 (1200x900 popup)
    +┌─ Amaranth 결재 작성 화면 (외부 시스템) ────────────────┐
    +│  견적서 결재 - 26C-0801                                 │
    +│  ┌──────────────────────────────────────────────────┐  │
    +│  │ 결재선: [부서장] → [임원] → [대표]                │  │
    +│  │ 첨부:   견적서 PDF (자동 합본)                    │  │
    +│  │ 본문:   기안자 코멘트 작성...                     │  │
    +│  │                            [임시저장] [상신]      │  │
    +│  └──────────────────────────────────────────────────┘  │
    +└────────────────────────────────────────────────────────┘
    +              ↓ ⑤ 사용자가 [상신] 클릭 시 Amaranth 가 PLM 으로 webhook
    +              ↓ ⑥ PLM 의 amaranth_approval.status 가 inProcess 로 변경
    +              ↓ ⑦ 결재완료 시 status=complete + 견적관리 그리드 "결재상태" 컬럼 갱신
    + +

    가드 조건 (버튼 비활성 / 토스트)

    + + + + + + + + +
    상황처리
    행 미선택"결재상신할 행을 선택해주십시오." 토스트
    견적서 미작성 (est_objid 없음)"견적서를 먼저 작성해주세요." 토스트 → [견적작성] 유도
    이미 inProcess 상태"결재 진행중인 건은 상신할 수 없습니다." 토스트
    complete 상태"결재 완료된 건은 상신할 수 없습니다." 토스트
    approval_required='N' (결재불필요로 처리됨)"결재불필요로 처리된 건입니다." 토스트
    reject / delete / create재상신 허용 (새 approKey 발급)
    + +

    백엔드 내부 처리 11 단계

    -

    견적관리/주문서관리/품의서관리/ECR 관리/CS관리 등 결재 대상 화면에서 [결재상신] 버튼을 누를 때 동작하는 흐름입니다.

      -
    1. 프론트에서 행 선택 후 [결재상신] 클릭
    2. -
    3. 백엔드 POST /api/sales/estimate/:id/amaranth-approval 호출
    4. -
    5. 현재 사용자의 emp_seq 를 user_info 에서 조회 (없으면 401 에러 반환)
    6. -
    7. 견적서(estimate_template) 최신 차수 objid 를 추출하여 target_objid 로 사용
    8. -
    9. amaranth_approval 테이블에서 기존 매핑 조회 +
    10. 프론트 → POST /api/sales/estimate/:id/amaranth-approval
    11. +
    12. JWT 에서 userId 추출 → user_info.emp_seq 조회 (없으면 401)
    13. +
    14. 최신 차수 estimate_template.objid 추출 → target_objid
    15. +
    16. amaranth_approval 기존 매핑 조회 (target_type + target_objid)
        -
      • 없음 → 신규 approKey 생성
      • -
      • 상태가 reject/delete/create → 재상신용 신규 approKey
      • -
      • 그 외(inProcess/complete) → 기존 approKey 재사용
      • +
      • 없음 → 신규 approKey = UB_ + UUID
      • +
      • status ∈ {reject, delete, create} → 재상신: 새 approKey 발급
      • +
      • 그 외 → 기존 approKey 재사용
    17. -
    18. Amaranth 인증: callerName/accessToken/hashKey 로 wehago-sign(HMAC-SHA256) 헤더 생성
    19. -
    20. SSO URL 발급 API 호출 → fullUrl 응답 수신
    21. -
    22. amaranth_approval INSERT/UPDATE (approKey + sso_url)
    23. -
    24. 프론트로 fullUrl 반환
    25. -
    26. 프론트가 window.open(fullUrl, "amaranthApproval") 으로 결재 팝업 오픈
    27. -
    28. 사용자가 Amaranth 결재창에서 작성·상신 → 완료 시 Amaranth 의 webhook 으로 상태 변경
    29. +
    30. [외부 커넥션 관리]에서 Amaranth - 결재 레코드 조회 + 자동 복호화
    31. +
    32. wehago-sign 헤더 생성 (HMAC-SHA256, transaction-id, timestamp)
    33. +
    34. empSeq AES-128-CBC 암호화 (KST yyyyMMddHHmmss▦empSeq)
    35. +
    36. SSO URL 발급 API 호출 → fullUrl 수신
    37. +
    38. amaranth_approval INSERT 또는 UPDATE
    39. +
    40. 프론트로 {fullUrl, approKey, status} 반환
    41. +
    42. 프론트가 window.open(fullUrl, "amaranthApproval", "width=1200,height=900")
    @@ -550,7 +689,163 @@

    -

    6. 품질관리 메뉴 가이드

    +

    6. 화면 관리 — 사용자 정의 화면 만들기 (코딩 없이)

    + +

    + RPS PLM 의 가장 강력한 기능 중 하나는 관리자가 코드 수정 없이 새 업무 화면을 직접 만들 수 있다는 점입니다. + 테이블 선택 → 컬럼 매핑 → 버튼 / 데이터 흐름 정의 → 저장만으로 즉시 메뉴에 노출됩니다. +

    + +

    6.1 화면 디자이너 개요

    +
    +

    위치: 관리자 > 화면 관리 > 화면관리

    +
    ┌─────────────────────────────────────────────────────────────────────────┐
    +│  ● 하이큐마그 영업 수주관리 화면                              #6456  [↻] │
    +├─────────────────────────────────────────────────────────────────────────┤
    +│  sales_order_detail                                                      │
    +│                                                                          │
    +│  메인 테이블:  sales_order_detail                                        │
    +│  컴포넌트:    버튼 4                                                     │
    +├──────────────────────────────────┬──────────────────────────────────────┤
    +│  🗄 테이블                    1  │  ▼ 미리보기 영역                      │
    +│  ┌────────────────────────────┐  │  ● 하이큐마그 영업 수주관리 화면      │
    +│  │ sales_order_detail         │  │                                      │
    +│  │ 메인 · 0 컬럼 사용중  [설정]│  │       ⌛ 화면 로딩 중...               │
    +│  └────────────────────────────┘  │                                      │
    +│                                  │                                      │
    +│  🔘 버튼                      4  │                                      │
    +│  [수주 등록 · MODAL · 플로우 1]  │                                      │
    +│  [수정     · EDIT  · 플로우 1]  │                                      │
    +│  [삭제     · DELETE          ]  │                                      │
    +│  [출하계획 · OPENMODALWITHDATA] │                                      │
    +│                                  │                                      │
    +│  → 데이터 흐름                0  │                                      │
    +│  데이터 흐름이 없어요             │                                      │
    +│                                  │                                      │
    +│           [↗ 화면 디자이너에서 편집]                                       │
    +└──────────────────────────────────┴──────────────────────────────────────┘
    +

    화면 카드 한 장에 ① 메인 테이블 / ② 버튼 N 개 / ③ 데이터 흐름 N 개 / ④ 미리보기 가 통합되어 있어 + 설정 변경 즉시 결과가 우측에 표시됩니다.

    +
    + +

    6.2 신규 화면 만들기 — 4단계

    + +

    STEP 1 · [+ 새 화면] 클릭 → 기본 정보 입력

    +
    ┌──────────────────────────────────────────────────┐
    +│  새 화면 만들기                              [X]  │
    +├──────────────────────────────────────────────────┤
    +│  화면명 *      [영업 수주관리 화면_________]      │
    +│  설명         [수주 마스터/디테일 관리_____]      │
    +│  화면 코드     [SALES_ORDER_MGMT_______]          │
    +│  그룹         [영업관리 ▾]                        │
    +│  화면 종류     ○ 일반 화면  ● POP 화면            │
    +│  메뉴 노출    ☑ 좌측 메뉴 / 권한 그룹 자동 매핑   │
    +│                                                  │
    +│                  [취소]  [생성]                   │
    +└──────────────────────────────────────────────────┘
    + +

    STEP 2 · 메인 테이블 매핑

    +

    [테이블] 섹션의 [설정] 버튼을 누르면 컬럼 매핑 모달이 열립니다:

    +
    ┌─ 테이블 컬럼 매핑 ─────────────────────────────────────────┐
    +│  메인 테이블: sales_order_detail                            │
    +│                                                            │
    +│  ☑ 사용  컬럼명          데이터타입    그리드 라벨    필터 │
    +│  ──────────────────────────────────────────────────────── │
    +│  ☑      objid           BIGINT       PK             —     │
    +│  ☑      order_no        VARCHAR(50)  주문번호       text  │
    +│  ☑      customer_objid  BIGINT       고객사         FK→client_mng │
    +│  ☑      product_objid   BIGINT       제품           FK→part_mng   │
    +│  ☑      quantity        NUMERIC      수량           number │
    +│  ☐      writer          VARCHAR(50)  작성자(숨김)    —     │
    +│  ☑      reg_date        TIMESTAMP    등록일         date  │
    +│                                                            │
    +│              [취소]  [저장]                                │
    +└────────────────────────────────────────────────────────────┘
    +

    체크박스만 토글하면 즉시 미리보기 그리드에 컬럼이 추가/제거됩니다. FK 매핑이 잡힌 컬럼은 자동으로 select 드롭다운으로 렌더링됩니다.

    + +

    STEP 3 · 버튼 추가 (등록 / 수정 / 삭제 / 모달 등)

    + + + + + + + + +
    버튼 타입동작예시
    MODAL등록/수정 폼 모달 오픈"+ 수주 등록"
    EDIT선택 행 인라인 수정 모드"✎ 수정"
    DELETE선택 행 삭제 (확인 다이얼로그)"🗑 삭제"
    OPENMODALWITHDATA현재 행 데이터를 다른 화면 모달에 전달"출하계획" → 출하 화면 자동 채움
    FLOW데이터 흐름(워크플로) 실행견적→수주 자동 전환
    EXTERNAL외부 커넥션 호출 + 결과 매핑"거래처 동기화" → Amaranth API
    + +

    STEP 4 · 저장 → 즉시 메뉴에 노출

    +

    화면 디자이너 우상단 [저장] 클릭 시:

    +
      +
    1. screen_definitions 테이블에 화면 정의 INSERT
    2. +
    3. 좌측 [메뉴 관리]에서 자동으로 신규 메뉴 후보로 표시 → 활성화하면 즉시 사이드바 등장
    4. +
    5. 권한 그룹 자동 매핑 (관리자 그룹 전체 허용으로 기본 등록)
    6. +
    7. 다른 사용자는 새로고침(F5) 후 메뉴에서 클릭 → 새 화면 사용 시작
    8. +
    + +

    6.3 테이블 매핑 — 조인 / 다중 테이블

    +
    +

    한 화면에 메인 1개 + 조인 테이블 N개를 함께 매핑할 수 있습니다.

    +
    ┌─ 조인 추가 ────────────────────────────────────────────┐
    +│  메인:   sales_order_detail                             │
    +│           └── ON customer_objid = ?                     │
    +│  조인 1: client_mng       (LEFT JOIN)                   │
    +│           └── client.objid = sales.customer_objid       │
    +│           └── 노출 컬럼: client_nm                       │
    +│  조인 2: part_mng         (LEFT JOIN)                   │
    +│           └── part.objid = sales.product_objid          │
    +│           └── 노출 컬럼: part_no, part_name              │
    +└─────────────────────────────────────────────────────────┘
    +

    조인된 컬럼은 자동으로 partner_name 같은 별칭으로 그리드에 합쳐 보입니다.

    +
    + +

    6.4 버튼·플로우 추가 — 클릭 시 동작 정의

    +
    +

    버튼 카드 → [편집] → "플로우 연결" 화면에서 시각적 노드 편집기로 동작을 구성합니다:

    +
    ┌─ 플로우 편집기 (DataFlowDesigner) ─────────────────────┐
    +│                                                         │
    +│   [버튼 클릭]                                            │
    +│        │                                                │
    +│        ▼                                                │
    +│   ┌──────────────────┐                                  │
    +│   │ 입력 검증         │  ← 필수 컬럼 null 체크 등         │
    +│   └──────────────────┘                                  │
    +│        │                                                │
    +│        ▼                                                │
    +│   ┌──────────────────┐                                  │
    +│   │ SQL 실행          │  → INSERT INTO sales_order...   │
    +│   └──────────────────┘                                  │
    +│        │                                                │
    +│        ▼                                                │
    +│   ┌──────────────────┐                                  │
    +│   │ 외부 커넥션 호출  │  → Amaranth 결재상신             │
    +│   └──────────────────┘                                  │
    +│        │                                                │
    +│        ▼                                                │
    +│   ┌──────────────────┐                                  │
    +│   │ 토스트 + 새로고침 │                                  │
    +│   └──────────────────┘                                  │
    +└─────────────────────────────────────────────────────────┘
    +
    + +

    6.5 데이터 흐름 — 화면 간 자동 연계

    +

    한 화면에서 다른 화면으로 데이터를 전달할 때 사용합니다. 예시:

    +
      +
    • 견적 → 수주 전환: 견적 행 [수주확정] 클릭 → 견적 데이터를 수주 등록 모달에 자동 채움
    • +
    • 수주 → 출하계획: 수주 행 [출하계획] 버튼 → 출하 화면을 새 탭으로 열면서 contract_objid / part / qty 자동 전달
    • +
    • 입고 → 수입검사 요청: 입고 확정 시 자동으로 incoming_inspection_detail INSERT
    • +
    + +

    + ✓ 화면 디자이너의 장점
    + ① 코드 수정 0 — 신규 메뉴 추가 시 Next.js / Node 빌드 불필요
    + ② 즉시 반영 — 저장 즉시 모든 사용자에게 새로고침으로 노출
    + ③ 일관된 UI — 자동으로 PageHeader + CompactFilterBar + DataGrid 패턴 적용
    + ④ 버전 관리#6456 처럼 화면별 ID + 변경 이력 보관 +

    + + +

    7. 품질관리 메뉴 가이드

    6.1 수입검사 요청

    @@ -599,7 +894,7 @@
    -

    7. 공통 UI 사용법

    +

    8. 공통 UI 사용법

    7.1 데이터 그리드

    @@ -621,7 +916,7 @@

    모든 화면 상단의 [검색] / [초기화] / 업무 액션(등록·삭제·결재상신 등)은 PageHeader 한 곳에 모입니다.

    -

    8. 자주 묻는 질문

    +

    9. 자주 묻는 질문

    Q. 로그인 후 좌측 메뉴가 안 보입니다. @@ -652,6 +947,36 @@

    프론트엔드 dev 서버가 초기 컴파일 중이거나 OOM 으로 재시작 중입니다. 1~2분 기다린 후 하드 새로고침(Cmd+Shift+R / Ctrl+F5).

    +
    + Q. 외부 REST API 의 [테스트] 가 "실패" 로 나옵니다. +
      +
    1. 기본 URL 끝에 슬래시가 들어가 있는지 확인 (자동 제거되지만 path 와 중복은 회피)
    2. +
    3. accessToken/hashKey 가 만료됐는지 — Wehago 관리 콘솔에서 키 재발급
    4. +
    5. 외부 서버의 IP 화이트리스트에 RPS 서버 IP 가 등록돼 있는지
    6. +
    7. HTTP 메서드(GET/POST) 가 외부 API 명세와 일치하는지
    8. +
    9. 실패 메시지에 표시된 HTTP 상태 코드 / 응답 본문을 운영팀에 공유
    10. +
    +
    + +
    + Q. 화면 디자이너로 새 화면을 만들었는데 좌측 메뉴에 안 나옵니다. +
      +
    1. [관리자 > 시스템 관리 > 메뉴 관리] 에서 신규 화면이 메뉴 트리에 등록됐는지 확인
    2. +
    3. 등록은 됐는데 안 보이면 → 권한 그룹 매핑 누락. [관리자 > 권한 그룹 관리] 에서 해당 그룹에 메뉴 권한 부여
    4. +
    5. 본인 계정으로 로그아웃 → 재로그인 (메뉴 캐시 갱신)
    6. +
    +
    + +
    + Q. 사용자 정의 화면에서 데이터를 등록했는데 저장이 안 됩니다. +
      +
    1. 버튼 카드의 동작 타입이 MODAL / EDIT 인지 확인
    2. +
    3. 버튼의 데이터 흐름 (DataFlowDesigner) 에 "SQL 실행" 노드가 포함돼 있는지
    4. +
    5. SQL 노드의 대상 컬럼이 메인 테이블의 NOT NULL 컬럼을 모두 채우는지
    6. +
    7. 저장 후 미리보기 영역에서 즉시 새로고침되는지 (안 되면 콘솔 로그 확인)
    8. +
    +
    +