docs(manual): 외부 커넥션·결재상신·화면 디자이너 상세 가이드 추가
새 섹션 + 화면 목업(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 로 재번호.
This commit is contained in:
chpark
@@ -123,11 +123,21 @@
|
||||
<li><a href="#amaranth">Amaranth(ERP) 연계</a>
|
||||
<ul>
|
||||
<li><a href="#amaranth-conn">외부 커넥션 관리</a></li>
|
||||
<li><a href="#amaranth-restapi">REST API 신규 등록 가이드</a></li>
|
||||
<li><a href="#amaranth-approval">결재상신 워크플로</a></li>
|
||||
<li><a href="#amaranth-troubleshoot">문제 해결</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#dashboard">대시보드 관리</a></li>
|
||||
<li><a href="#screen-designer">화면 관리 — 사용자 정의 화면</a>
|
||||
<ul>
|
||||
<li><a href="#sd-overview">화면 디자이너 개요</a></li>
|
||||
<li><a href="#sd-create">신규 화면 만들기</a></li>
|
||||
<li><a href="#sd-table">테이블 매핑</a></li>
|
||||
<li><a href="#sd-button">버튼·플로우 추가</a></li>
|
||||
<li><a href="#sd-dataflow">데이터 흐름 설정</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#quality">품질관리 메뉴 가이드</a></li>
|
||||
<li><a href="#common">공통 UI 사용법</a></li>
|
||||
<li><a href="#faq">자주 묻는 질문</a></li>
|
||||
@@ -401,58 +411,187 @@
|
||||
</p>
|
||||
|
||||
<!-- 4.1 외부 커넥션 관리 -->
|
||||
<h3 id="amaranth-conn">4.1 외부 커넥션 관리</h3>
|
||||
<h3 id="amaranth-conn">4.1 외부 커넥션 관리 — 한눈에 보기</h3>
|
||||
<div class="card">
|
||||
<p>위치: <code>관리자 > 자동화 관리 > 외부 커넥션 관리 > REST API 연결</code></p>
|
||||
<table>
|
||||
<tr><th width="200">연결명</th><th>엔드포인트</th><th>용도</th></tr>
|
||||
<tr><td>Amaranth - 결재</td><td><code>(SSO/결재 호출 시 path 지정)</code></td><td>전자결재 SSO URL 발급, 결재함 조회</td></tr>
|
||||
<tr><td>Amaranth - Wehago 사용자</td><td><code>/apiproxy/api99u01A11</code></td><td>사용자 인증 토큰 발급</td></tr>
|
||||
<tr><td>Amaranth - 거래처</td><td><code>/apiproxy/api16S11</code></td><td>거래처 마스터 동기화</td></tr>
|
||||
<tr><td>Amaranth - 부서</td><td><code>/apiproxy/api16S10</code></td><td>부서 마스터 동기화</td></tr>
|
||||
<tr><td>Amaranth - 사원</td><td><code>/apiproxy/api16S05</code></td><td>사원 마스터 동기화</td></tr>
|
||||
<tr><td>Amaranth - 창고</td><td><code>/apiproxy/api20A00S00801</code></td><td>창고 마스터 동기화</td></tr>
|
||||
<tr><td>Amaranth - 계정과목</td><td><code>/apiproxy/api11A02</code></td><td>계정과목 마스터 동기화</td></tr>
|
||||
</table>
|
||||
<p>각 커넥션 카드의 [테스트] 버튼을 누르면 실 호출이 발생하고 <span class="badge success">성공</span> / <span class="badge danger">실패</span> 가 표시됩니다.</p>
|
||||
<p>위치: <code>관리자 > 자동화 관리 > 외부 커넥션 관리</code></p>
|
||||
<p>외부 시스템(ERP / 마스터 / 공공 API) 과의 모든 연결을 한 곳에서 관리합니다. 두 종류의 탭이 있습니다:</p>
|
||||
<pre style="white-space: pre; line-height: 1.4;">┌────────────────────────────────────────────────────────────────────────────┐
|
||||
│ 외부 커넥션 관리 외부 데이터베이스 및 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... │ 활성 [테스트] │
|
||||
└──────────────────────┴─────────────┴──────────────────────┴────────────────┘</pre>
|
||||
<p>각 행의 [테스트] 버튼을 누르면 실제 호출이 발생하고 <span class="badge success">성공</span> / <span class="badge danger">실패</span> 로 즉시 결과가 표시됩니다.</p>
|
||||
</div>
|
||||
|
||||
<h4>auth_config 필드</h4>
|
||||
<pre>{
|
||||
"callerName": "API_gcmsAmaranth40578", // 평문 (수정 시 즉시 적용)
|
||||
"groupSeq": "gcmsAmaranth40578", // 평문
|
||||
"accessToken": "MN5Kz...", // AES-256-GCM 자동 암호화 저장
|
||||
"hashKey": "22519103...", // AES-256-GCM 자동 암호화 저장
|
||||
"aesKey": "8441e27489d402cd" // 결재 SSO empSeq AES-128-CBC 키
|
||||
}</pre>
|
||||
<p class="callout">
|
||||
<strong>💡 암호화 동작</strong>
|
||||
신규 등록/수정 시 accessToken·hashKey 는 자동으로 <code>iv:authTag:cipher</code> 3-part hex 로 변환되어 저장됩니다.
|
||||
복호화 키는 환경변수 <code>DB_PASSWORD_SECRET</code> 입니다.
|
||||
<h4>등록된 Amaranth 커넥션 (운영 기준 7종)</h4>
|
||||
<table>
|
||||
<tr><th width="200">연결명</th><th>엔드포인트 path</th><th>용도</th></tr>
|
||||
<tr><td>Amaranth - 결재</td><td><code>(SSO/결재 호출 시 path 지정)</code></td><td>전자결재 SSO URL 발급, 결재함 조회</td></tr>
|
||||
<tr><td>Amaranth - Wehago 사용자</td><td><code>/apiproxy/api99u01A11</code></td><td>사용자 인증 토큰 발급</td></tr>
|
||||
<tr><td>Amaranth - 거래처</td><td><code>/apiproxy/api16S11</code></td><td>거래처 마스터 동기화</td></tr>
|
||||
<tr><td>Amaranth - 부서</td><td><code>/apiproxy/api16S10</code></td><td>부서 마스터 동기화</td></tr>
|
||||
<tr><td>Amaranth - 사원</td><td><code>/apiproxy/api16S05</code></td><td>사원 마스터 동기화</td></tr>
|
||||
<tr><td>Amaranth - 창고</td><td><code>/apiproxy/api20A00S00801</code></td><td>창고 마스터 동기화</td></tr>
|
||||
<tr><td>Amaranth - 계정과목</td><td><code>/apiproxy/api11A02</code></td><td>계정과목 마스터 동기화</td></tr>
|
||||
</table>
|
||||
|
||||
<!-- 4.2 REST API 신규 등록 가이드 -->
|
||||
<h3 id="amaranth-restapi">4.2 REST API 신규 등록 가이드 (URL + 키만 입력하면 끝)</h3>
|
||||
<p>
|
||||
외부 시스템과 새로 연동할 때 코드 수정 없이 <strong>UI에서 URL/인증 키만 입력</strong>하면 RPS PLM 어디서든 호출할 수 있습니다.
|
||||
Amaranth 외에 ITS 교통정보, 기상특보, 환율, 자체 백오피스 API 등도 동일하게 등록 가능합니다.
|
||||
</p>
|
||||
|
||||
<!-- 4.2 결재상신 워크플로 -->
|
||||
<h3 id="amaranth-approval">4.2 결재상신 워크플로</h3>
|
||||
<h4>STEP 1 · [+ 새 연결] 버튼 클릭 → 등록 모달 오픈</h4>
|
||||
<pre style="white-space: pre; line-height: 1.4;">┌──────────────────────────────────────────────────────┐
|
||||
│ 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, 선택) │
|
||||
│ │
|
||||
│ [테스트] [취소] [저장] │
|
||||
└──────────────────────────────────────────────────────┘</pre>
|
||||
|
||||
<h4>STEP 2 · 필드 작성 가이드</h4>
|
||||
<table>
|
||||
<tr><th width="160">필드</th><th>설명</th><th>예시</th></tr>
|
||||
<tr><td>연결명 *</td><td>유일 식별자. 백엔드가 이 이름으로 조회 (<code>amaranthApprovalClient</code>).</td><td><code>Amaranth - 결재</code></td></tr>
|
||||
<tr><td>설명</td><td>운영자 참고용. 자유 입력.</td><td>"전자결재 통합 — 인증토큰/SSO/결재함"</td></tr>
|
||||
<tr><td>기본 URL *</td><td>스킴+호스트까지만. path는 별도. 끝의 / 는 자동 제거.</td><td><code>https://erp.rps-korea.com</code></td></tr>
|
||||
<tr><td>엔드포인트 path</td><td>고정 path. 호출 시 함수에서 override 가능.</td><td><code>/apiproxy/api11A02</code></td></tr>
|
||||
<tr><td>HTTP 메서드</td><td>GET / POST / PUT / DELETE.</td><td><code>POST</code></td></tr>
|
||||
<tr><td>인증 타입</td><td>API_KEY / BEARER / BASIC / OAUTH2 / WEHAGO_AMARANTH 중 선택.</td><td><code>Wehago/Amaranth</code></td></tr>
|
||||
<tr><td>callerName</td><td>Wehago 발급 API 이름. <strong>평문 저장</strong>.</td><td><code>API_gcmsAmaranth40578</code></td></tr>
|
||||
<tr><td>accessToken</td><td>Wehago 발급 토큰. <strong>저장 시 AES-256-GCM 자동 암호화</strong>.</td><td><code>MN5Kz...</code> (저장 후 마스킹)</td></tr>
|
||||
<tr><td>hashKey</td><td>HMAC 서명용 키. <strong>자동 암호화</strong>.</td><td><code>22519103...</code></td></tr>
|
||||
<tr><td>groupSeq</td><td>Wehago 그룹 시퀀스. 평문.</td><td><code>gcmsAmaranth40578</code></td></tr>
|
||||
</table>
|
||||
|
||||
<p class="callout">
|
||||
<strong>🔐 자동 암호화</strong>
|
||||
<code>accessToken</code>·<code>hashKey</code>·<code>password</code>·<code>clientSecret</code> 같은 민감 필드는 저장 직전에
|
||||
<code>iv:authTag:cipher</code> 3-part hex 형식으로 변환됩니다.
|
||||
복호화 키는 환경변수 <code>DB_PASSWORD_SECRET</code> 이며, 코드(<code>amaranthApprovalClient.loadApprovalConnection</code>)에서
|
||||
자동 복호화됩니다. 직접 평문 입력해도 자동 처리되므로 사용자가 별도로 암호화할 필요가 없습니다.
|
||||
</p>
|
||||
|
||||
<h4>STEP 3 · [테스트] 버튼으로 즉시 검증</h4>
|
||||
<p>저장 전에 [테스트] 를 누르면 실제 외부 서버로 호출을 보내 응답을 표시합니다:</p>
|
||||
<pre style="white-space: pre; line-height: 1.4;">┌────────────────────────────────────────────────┐
|
||||
│ ✅ 연결 성공 │
|
||||
│ HTTP 200 · 응답시간 234ms │
|
||||
│ 마지막 테스트: 2026-05-13 09:42 │
|
||||
└────────────────────────────────────────────────┘</pre>
|
||||
<p>실패 시 응답 본문이 그대로 표시되어 토큰 오타 / IP 화이트리스트 / 시그니처 불일치를 즉시 디버그할 수 있습니다.</p>
|
||||
|
||||
<h4>STEP 4 · 저장 후 백엔드 호출에서 활용</h4>
|
||||
<p>등록된 커넥션은 즉시 코드 어디서나 이름으로 조회 가능합니다:</p>
|
||||
<pre>// 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";</pre>
|
||||
<p>업무 화면이 호출하는 모든 ERP API는 이 헬퍼를 거치므로, 키가 만료되면 코드 수정 없이 외부 커넥션 관리에서 토큰만 갱신해주면 됩니다.</p>
|
||||
|
||||
<h4>auth_config 저장 구조 (참고)</h4>
|
||||
<pre>{
|
||||
"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 키
|
||||
}</pre>
|
||||
|
||||
<!-- 4.3 결재상신 워크플로 -->
|
||||
<h3 id="amaranth-approval">4.3 결재상신 워크플로 (사용자 시점)</h3>
|
||||
<p>견적관리·주문서관리·품의서관리·ECR관리·CS관리 등 결재 대상 화면에서 동일한 흐름으로 작동합니다.</p>
|
||||
|
||||
<h4>사용자 화면 흐름</h4>
|
||||
<pre style="white-space: pre; line-height: 1.4;">┌─ 견적관리 ──────────────────────────────────────────────────────────────┐
|
||||
│ [삭제] [+ 견적요청등록] [✎ 견적작성] [✈ 결재상신] [📧 메일발송] [초기화] │
|
||||
├─────────────────────────────────────────────────────────────────────────┤
|
||||
│ ☑ 영업번호 주문유형 접수일 고객사 품명 견적현황 │
|
||||
│ ☑ 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 + 견적관리 그리드 "결재상태" 컬럼 갱신</pre>
|
||||
|
||||
<h4>가드 조건 (버튼 비활성 / 토스트)</h4>
|
||||
<table>
|
||||
<tr><th width="280">상황</th><th>처리</th></tr>
|
||||
<tr><td>행 미선택</td><td>"결재상신할 행을 선택해주십시오." 토스트</td></tr>
|
||||
<tr><td>견적서 미작성 (est_objid 없음)</td><td>"견적서를 먼저 작성해주세요." 토스트 → [견적작성] 유도</td></tr>
|
||||
<tr><td>이미 inProcess 상태</td><td>"결재 진행중인 건은 상신할 수 없습니다." 토스트</td></tr>
|
||||
<tr><td>complete 상태</td><td>"결재 완료된 건은 상신할 수 없습니다." 토스트</td></tr>
|
||||
<tr><td>approval_required='N' (결재불필요로 처리됨)</td><td>"결재불필요로 처리된 건입니다." 토스트</td></tr>
|
||||
<tr><td>reject / delete / create</td><td>재상신 허용 (새 approKey 발급)</td></tr>
|
||||
</table>
|
||||
|
||||
<h4>백엔드 내부 처리 11 단계</h4>
|
||||
<div class="card">
|
||||
<p>견적관리/주문서관리/품의서관리/ECR 관리/CS관리 등 결재 대상 화면에서 [결재상신] 버튼을 누를 때 동작하는 흐름입니다.</p>
|
||||
<ol>
|
||||
<li>프론트에서 행 선택 후 [결재상신] 클릭</li>
|
||||
<li>백엔드 <code>POST /api/sales/estimate/:id/amaranth-approval</code> 호출</li>
|
||||
<li>현재 사용자의 emp_seq 를 user_info 에서 조회 (없으면 401 에러 반환)</li>
|
||||
<li>견적서(estimate_template) 최신 차수 objid 를 추출하여 <code>target_objid</code> 로 사용</li>
|
||||
<li><code>amaranth_approval</code> 테이블에서 기존 매핑 조회
|
||||
<li>프론트 → <code>POST /api/sales/estimate/:id/amaranth-approval</code></li>
|
||||
<li>JWT 에서 userId 추출 → <code>user_info.emp_seq</code> 조회 (없으면 401)</li>
|
||||
<li>최신 차수 <code>estimate_template.objid</code> 추출 → <code>target_objid</code></li>
|
||||
<li><code>amaranth_approval</code> 기존 매핑 조회 (target_type + target_objid)
|
||||
<ul>
|
||||
<li>없음 → 신규 <code>approKey</code> 생성</li>
|
||||
<li>상태가 <code>reject/delete/create</code> → 재상신용 신규 approKey</li>
|
||||
<li>그 외(inProcess/complete) → 기존 approKey 재사용</li>
|
||||
<li>없음 → 신규 <code>approKey</code> = <code>UB_</code> + UUID</li>
|
||||
<li>status ∈ {reject, delete, create} → 재상신: 새 approKey 발급</li>
|
||||
<li>그 외 → 기존 approKey 재사용</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>Amaranth 인증</strong>: callerName/accessToken/hashKey 로 wehago-sign(HMAC-SHA256) 헤더 생성</li>
|
||||
<li>SSO URL 발급 API 호출 → <code>fullUrl</code> 응답 수신</li>
|
||||
<li><code>amaranth_approval</code> INSERT/UPDATE (approKey + sso_url)</li>
|
||||
<li>프론트로 <code>fullUrl</code> 반환</li>
|
||||
<li>프론트가 <code>window.open(fullUrl, "amaranthApproval")</code> 으로 결재 팝업 오픈</li>
|
||||
<li>사용자가 Amaranth 결재창에서 작성·상신 → 완료 시 Amaranth 의 webhook 으로 상태 변경</li>
|
||||
<li>[외부 커넥션 관리]에서 <strong>Amaranth - 결재</strong> 레코드 조회 + 자동 복호화</li>
|
||||
<li>wehago-sign 헤더 생성 (HMAC-SHA256, transaction-id, timestamp)</li>
|
||||
<li>empSeq AES-128-CBC 암호화 (KST yyyyMMddHHmmss▦empSeq)</li>
|
||||
<li>SSO URL 발급 API 호출 → <code>fullUrl</code> 수신</li>
|
||||
<li><code>amaranth_approval</code> INSERT 또는 UPDATE</li>
|
||||
<li>프론트로 <code>{fullUrl, approKey, status}</code> 반환</li>
|
||||
<li>프론트가 <code>window.open(fullUrl, "amaranthApproval", "width=1200,height=900")</code></li>
|
||||
</ol>
|
||||
|
||||
<div class="callout success">
|
||||
@@ -550,7 +689,163 @@
|
||||
</p>
|
||||
|
||||
<!-- ======================================================== -->
|
||||
<h2 class="section" id="quality">6. 품질관리 메뉴 가이드</h2>
|
||||
<h2 class="section" id="screen-designer">6. 화면 관리 — 사용자 정의 화면 만들기 (코딩 없이)</h2>
|
||||
|
||||
<p>
|
||||
RPS PLM 의 가장 강력한 기능 중 하나는 <strong>관리자가 코드 수정 없이 새 업무 화면을 직접 만들 수 있다</strong>는 점입니다.
|
||||
테이블 선택 → 컬럼 매핑 → 버튼 / 데이터 흐름 정의 → 저장만으로 즉시 메뉴에 노출됩니다.
|
||||
</p>
|
||||
|
||||
<h3 id="sd-overview">6.1 화면 디자이너 개요</h3>
|
||||
<div class="card">
|
||||
<p>위치: <code>관리자 > 화면 관리 > 화면관리</code></p>
|
||||
<pre style="white-space: pre; line-height: 1.4;">┌─────────────────────────────────────────────────────────────────────────┐
|
||||
│ ● 하이큐마그 영업 수주관리 화면 #6456 [↻] │
|
||||
├─────────────────────────────────────────────────────────────────────────┤
|
||||
│ sales_order_detail │
|
||||
│ │
|
||||
│ 메인 테이블: sales_order_detail │
|
||||
│ 컴포넌트: 버튼 4 │
|
||||
├──────────────────────────────────┬──────────────────────────────────────┤
|
||||
│ 🗄 테이블 1 │ ▼ 미리보기 영역 │
|
||||
│ ┌────────────────────────────┐ │ ● 하이큐마그 영업 수주관리 화면 │
|
||||
│ │ sales_order_detail │ │ │
|
||||
│ │ 메인 · 0 컬럼 사용중 [설정]│ │ ⌛ 화면 로딩 중... │
|
||||
│ └────────────────────────────┘ │ │
|
||||
│ │ │
|
||||
│ 🔘 버튼 4 │ │
|
||||
│ [수주 등록 · MODAL · 플로우 1] │ │
|
||||
│ [수정 · EDIT · 플로우 1] │ │
|
||||
│ [삭제 · DELETE ] │ │
|
||||
│ [출하계획 · OPENMODALWITHDATA] │ │
|
||||
│ │ │
|
||||
│ → 데이터 흐름 0 │ │
|
||||
│ 데이터 흐름이 없어요 │ │
|
||||
│ │ │
|
||||
│ [↗ 화면 디자이너에서 편집] │
|
||||
└──────────────────────────────────┴──────────────────────────────────────┘</pre>
|
||||
<p>화면 카드 한 장에 <strong>① 메인 테이블 / ② 버튼 N 개 / ③ 데이터 흐름 N 개 / ④ 미리보기</strong> 가 통합되어 있어
|
||||
설정 변경 즉시 결과가 우측에 표시됩니다.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="sd-create">6.2 신규 화면 만들기 — 4단계</h3>
|
||||
|
||||
<h4>STEP 1 · [+ 새 화면] 클릭 → 기본 정보 입력</h4>
|
||||
<pre style="white-space: pre; line-height: 1.4;">┌──────────────────────────────────────────────────┐
|
||||
│ 새 화면 만들기 [X] │
|
||||
├──────────────────────────────────────────────────┤
|
||||
│ 화면명 * [영업 수주관리 화면_________] │
|
||||
│ 설명 [수주 마스터/디테일 관리_____] │
|
||||
│ 화면 코드 [SALES_ORDER_MGMT_______] │
|
||||
│ 그룹 [영업관리 ▾] │
|
||||
│ 화면 종류 ○ 일반 화면 ● POP 화면 │
|
||||
│ 메뉴 노출 ☑ 좌측 메뉴 / 권한 그룹 자동 매핑 │
|
||||
│ │
|
||||
│ [취소] [생성] │
|
||||
└──────────────────────────────────────────────────┘</pre>
|
||||
|
||||
<h4>STEP 2 · 메인 테이블 매핑</h4>
|
||||
<p>[테이블] 섹션의 [설정] 버튼을 누르면 컬럼 매핑 모달이 열립니다:</p>
|
||||
<pre style="white-space: pre; line-height: 1.4;">┌─ 테이블 컬럼 매핑 ─────────────────────────────────────────┐
|
||||
│ 메인 테이블: 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 │
|
||||
│ │
|
||||
│ [취소] [저장] │
|
||||
└────────────────────────────────────────────────────────────┘</pre>
|
||||
<p>체크박스만 토글하면 즉시 미리보기 그리드에 컬럼이 추가/제거됩니다. FK 매핑이 잡힌 컬럼은 자동으로 select 드롭다운으로 렌더링됩니다.</p>
|
||||
|
||||
<h4>STEP 3 · 버튼 추가 (등록 / 수정 / 삭제 / 모달 등)</h4>
|
||||
<table>
|
||||
<tr><th width="160">버튼 타입</th><th>동작</th><th>예시</th></tr>
|
||||
<tr><td><span class="badge primary">MODAL</span></td><td>등록/수정 폼 모달 오픈</td><td>"+ 수주 등록"</td></tr>
|
||||
<tr><td><span class="badge primary">EDIT</span></td><td>선택 행 인라인 수정 모드</td><td>"✎ 수정"</td></tr>
|
||||
<tr><td><span class="badge danger">DELETE</span></td><td>선택 행 삭제 (확인 다이얼로그)</td><td>"🗑 삭제"</td></tr>
|
||||
<tr><td><span class="badge primary">OPENMODALWITHDATA</span></td><td>현재 행 데이터를 다른 화면 모달에 전달</td><td>"출하계획" → 출하 화면 자동 채움</td></tr>
|
||||
<tr><td><span class="badge success">FLOW</span></td><td>데이터 흐름(워크플로) 실행</td><td>견적→수주 자동 전환</td></tr>
|
||||
<tr><td><span class="badge warn">EXTERNAL</span></td><td>외부 커넥션 호출 + 결과 매핑</td><td>"거래처 동기화" → Amaranth API</td></tr>
|
||||
</table>
|
||||
|
||||
<h4>STEP 4 · 저장 → 즉시 메뉴에 노출</h4>
|
||||
<p>화면 디자이너 우상단 [저장] 클릭 시:</p>
|
||||
<ol>
|
||||
<li><code>screen_definitions</code> 테이블에 화면 정의 INSERT</li>
|
||||
<li>좌측 [메뉴 관리]에서 자동으로 신규 메뉴 후보로 표시 → 활성화하면 즉시 사이드바 등장</li>
|
||||
<li>권한 그룹 자동 매핑 (관리자 그룹 전체 허용으로 기본 등록)</li>
|
||||
<li>다른 사용자는 새로고침(F5) 후 메뉴에서 클릭 → 새 화면 사용 시작</li>
|
||||
</ol>
|
||||
|
||||
<h3 id="sd-table">6.3 테이블 매핑 — 조인 / 다중 테이블</h3>
|
||||
<div class="card">
|
||||
<p>한 화면에 메인 1개 + 조인 테이블 N개를 함께 매핑할 수 있습니다.</p>
|
||||
<pre style="white-space: pre; line-height: 1.4;">┌─ 조인 추가 ────────────────────────────────────────────┐
|
||||
│ 메인: 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 │
|
||||
└─────────────────────────────────────────────────────────┘</pre>
|
||||
<p>조인된 컬럼은 자동으로 <code>partner_name</code> 같은 별칭으로 그리드에 합쳐 보입니다.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="sd-button">6.4 버튼·플로우 추가 — 클릭 시 동작 정의</h3>
|
||||
<div class="card">
|
||||
<p>버튼 카드 → [편집] → "플로우 연결" 화면에서 시각적 노드 편집기로 동작을 구성합니다:</p>
|
||||
<pre style="white-space: pre; line-height: 1.4;">┌─ 플로우 편집기 (DataFlowDesigner) ─────────────────────┐
|
||||
│ │
|
||||
│ [버튼 클릭] │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌──────────────────┐ │
|
||||
│ │ 입력 검증 │ ← 필수 컬럼 null 체크 등 │
|
||||
│ └──────────────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌──────────────────┐ │
|
||||
│ │ SQL 실행 │ → INSERT INTO sales_order... │
|
||||
│ └──────────────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌──────────────────┐ │
|
||||
│ │ 외부 커넥션 호출 │ → Amaranth 결재상신 │
|
||||
│ └──────────────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌──────────────────┐ │
|
||||
│ │ 토스트 + 새로고침 │ │
|
||||
│ └──────────────────┘ │
|
||||
└─────────────────────────────────────────────────────────┘</pre>
|
||||
</div>
|
||||
|
||||
<h3 id="sd-dataflow">6.5 데이터 흐름 — 화면 간 자동 연계</h3>
|
||||
<p>한 화면에서 다른 화면으로 데이터를 전달할 때 사용합니다. 예시:</p>
|
||||
<ul>
|
||||
<li><strong>견적 → 수주 전환</strong>: 견적 행 [수주확정] 클릭 → 견적 데이터를 수주 등록 모달에 자동 채움</li>
|
||||
<li><strong>수주 → 출하계획</strong>: 수주 행 [출하계획] 버튼 → 출하 화면을 새 탭으로 열면서 contract_objid / part / qty 자동 전달</li>
|
||||
<li><strong>입고 → 수입검사 요청</strong>: 입고 확정 시 자동으로 incoming_inspection_detail INSERT</li>
|
||||
</ul>
|
||||
|
||||
<p class="callout success">
|
||||
<strong>✓ 화면 디자이너의 장점</strong><br>
|
||||
① <strong>코드 수정 0</strong> — 신규 메뉴 추가 시 Next.js / Node 빌드 불필요<br>
|
||||
② <strong>즉시 반영</strong> — 저장 즉시 모든 사용자에게 새로고침으로 노출<br>
|
||||
③ <strong>일관된 UI</strong> — 자동으로 PageHeader + CompactFilterBar + DataGrid 패턴 적용<br>
|
||||
④ <strong>버전 관리</strong> — <code>#6456</code> 처럼 화면별 ID + 변경 이력 보관
|
||||
</p>
|
||||
|
||||
<!-- ======================================================== -->
|
||||
<h2 class="section" id="quality">7. 품질관리 메뉴 가이드</h2>
|
||||
|
||||
<h3>6.1 수입검사 요청</h3>
|
||||
<div class="card">
|
||||
@@ -599,7 +894,7 @@
|
||||
</div>
|
||||
|
||||
<!-- ======================================================== -->
|
||||
<h2 class="section" id="common">7. 공통 UI 사용법</h2>
|
||||
<h2 class="section" id="common">8. 공통 UI 사용법</h2>
|
||||
|
||||
<h3>7.1 데이터 그리드</h3>
|
||||
<div class="card">
|
||||
@@ -621,7 +916,7 @@
|
||||
<p>모든 화면 상단의 [검색] / [초기화] / 업무 액션(등록·삭제·결재상신 등)은 <code>PageHeader</code> 한 곳에 모입니다.</p>
|
||||
|
||||
<!-- ======================================================== -->
|
||||
<h2 class="section" id="faq">8. 자주 묻는 질문</h2>
|
||||
<h2 class="section" id="faq">9. 자주 묻는 질문</h2>
|
||||
|
||||
<details>
|
||||
<summary>Q. 로그인 후 좌측 메뉴가 안 보입니다.</summary>
|
||||
@@ -652,6 +947,36 @@
|
||||
<p>프론트엔드 dev 서버가 초기 컴파일 중이거나 OOM 으로 재시작 중입니다. 1~2분 기다린 후 하드 새로고침(Cmd+Shift+R / Ctrl+F5).</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Q. 외부 REST API 의 [테스트] 가 "실패" 로 나옵니다.</summary>
|
||||
<ol>
|
||||
<li>기본 URL 끝에 슬래시가 들어가 있는지 확인 (자동 제거되지만 path 와 중복은 회피)</li>
|
||||
<li>accessToken/hashKey 가 만료됐는지 — Wehago 관리 콘솔에서 키 재발급</li>
|
||||
<li>외부 서버의 IP 화이트리스트에 RPS 서버 IP 가 등록돼 있는지</li>
|
||||
<li>HTTP 메서드(GET/POST) 가 외부 API 명세와 일치하는지</li>
|
||||
<li>실패 메시지에 표시된 HTTP 상태 코드 / 응답 본문을 운영팀에 공유</li>
|
||||
</ol>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Q. 화면 디자이너로 새 화면을 만들었는데 좌측 메뉴에 안 나옵니다.</summary>
|
||||
<ol>
|
||||
<li>[관리자 > 시스템 관리 > 메뉴 관리] 에서 신규 화면이 메뉴 트리에 등록됐는지 확인</li>
|
||||
<li>등록은 됐는데 안 보이면 → 권한 그룹 매핑 누락. [관리자 > 권한 그룹 관리] 에서 해당 그룹에 메뉴 권한 부여</li>
|
||||
<li>본인 계정으로 로그아웃 → 재로그인 (메뉴 캐시 갱신)</li>
|
||||
</ol>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Q. 사용자 정의 화면에서 데이터를 등록했는데 저장이 안 됩니다.</summary>
|
||||
<ol>
|
||||
<li>버튼 카드의 동작 타입이 <code>MODAL</code> / <code>EDIT</code> 인지 확인</li>
|
||||
<li>버튼의 데이터 흐름 (DataFlowDesigner) 에 "SQL 실행" 노드가 포함돼 있는지</li>
|
||||
<li>SQL 노드의 대상 컬럼이 메인 테이블의 NOT NULL 컬럼을 모두 채우는지</li>
|
||||
<li>저장 후 미리보기 영역에서 즉시 새로고침되는지 (안 되면 콘솔 로그 확인)</li>
|
||||
</ol>
|
||||
</details>
|
||||
|
||||
<footer style="margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px;">
|
||||
© RPS Korea PLM Team · 본 문서는 시스템 변경 시 함께 업데이트해야 합니다 (docs/manual/).
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user