애플리케이션 제공 모달 수정

모달 대화 상자는 중요한 정보를 표시하거나 특정 사용자 조치를 완료하는 데 필요한 사용자 입력을 요청하는 데 사용됩니다. 사용자 조치에는 오더 취소, 일련번호 조회, 오더 또는 오더 라인에 대한 메모 추가 또는 조회 등이 포함됩니다.

모달 대화 상자는 기본 애플리케이션 컨텐츠 위에 화면을 표시하기 위해 대화 상자를 여는 팝업 화면과 유사합니다. 모든 모달 대화 상자가 상위 화면에 표시됩니다. 모달 대화 상자가 열려 있으면 사용자가 상위 화면으로 돌아갈 수 없습니다. 또한 모달 태스크가 완료되거나 모달 대화 상자가 닫힐 때까지 모든 사용자 조치가 무시됩니다.

비즈니스에 필요한 대로 애플리케이션 제공 모달을 사용자 정의할 수 있습니다.

시작하기 전에

애플리케이션 제공 모달은 다음 예에 설명된 대로 해당 페이지 컴포넌트 또는 화면의 모달 디렉토리에 있습니다.

오더 요약정보 화면에서 오더 취소 관련 작업을 클릭하면 오더 취소 모달 구성품목이 표시됩니다. 주문 취소 모달 구성요소는 <store-temp>/packages/features/orders/src/app/features/orders/order-summary-page/modals/cancel-order-modal 디렉토리에 있습니다.
재고이동플로우의 피킹 페이지에서 제품 수량을 수량미달로 표시하려는 경우 레코드 수량미달 모달 구성품목이 표시됩니다. 레코드 부족 모달 구성요소는 <store-temp>/packages/features/move-inventory/src/app/features/move-inventory/move-inventory-wizard-page/modals/record-shortage 디렉토리에 있습니다.

애플리케이션 제공 모달을 대체하려면 모달의 modalId 를 알아야 합니다. modalId 는 애플리케이션 제공 모달을 고유하게 식별하는 데 사용됩니다. 따라서 모달을 사용자 정의할 수 있는 override-modal 명령에서 사용됩니다.

modalId 는 다음 예제에 설명된 대로 애플리케이션 제공 모달 컴포넌트 클래스 내에서 변수로 정의됩니다.

export class OrderTotalModalComponent implements OnInit {
  public static modalId = 'orders.order-total-modal';
  ...
  ...

애플리케이션 제공 모달을 대체할 때 전체 모달 컴포넌트 디렉토리가 <store-temp>/extensions/features/override-modals 디렉토리에 복사됩니다. 비즈니스에 필요한 대로 복사되는 모달 컴포넌트를 수정할 수 있습니다.

주: 모달 코드만 수정하려면 상위 화면 또는 구성요소 코드를 복사하지 마십시오.

애플리케이션 제공 모달을 사용자 정의 또는 대체 모달과 맵핑하려면 <store-temp>/extensions/features/override-modals/src/assets/override-modals/config/isf-modal-config.json 구성 파일을 사용하십시오. 대체되는 애플리케이션 제공 모달 및 대체에 사용되는 사용자 정의 모달 컴포넌트를 쉽게 판별할 수 있습니다.

다음 표에서는 isf-modal-config.json 파일의 스키마 정의를 설명합니다.

테이블 1. 스키마 정의 속성 및 설명
속성 이름	설명
applicationProvidedModalId	명명 규칙이`<feature-name>.<parent-page-name>.<modal-name>` 인 애플리케이션 제공 모달에 할당되는 고유 식별자입니다. 예: `orders.order-summary-page.cancel-order-modal`.
overrideModalId	이름 지정 규칙이 `custom-<applicationProvidedModalId>`인 대체 또는 사용자 정의 모달에 지정되는 고유 ID입니다. 예:`custom-orders.order-summary-page.cancel-order-modal`.

프로시저

<store-temp> 디렉토리로 이동하여 다음 명령을 실행하십시오.
```
yarn override-modal --application-provided-modal-id=<component-modal-id>
```
예를 들면 다음과 같습니다.
```
yarn override-modal --application-provided-modal-id=functional-components.identify-customer-modal
```
여기서 --application-provided-modal-id 는 수정하려는 애플리케이션 제공 모달 컴포넌트의 모달 ID를 참조합니다.

사용자 정의하려는 모달 컴포넌트의 소스 코드를 참조하여 애플리케이션 제공 모달의 modalId 를 식별할 수 있습니다.
이 명령은 다음 태스크를 완료합니다.
- 애플리케이션 제공 모달 컴포넌트 폴더를 <store-temp>/extensions/features/override-modals/src/app/<feature-name>에 복사합니다.
  동일한 애플리케이션에 속하는 modals 를 단일 폴더에 구성하려면 <store-temp>/extensions/features/override-modals/src/app 디렉토리에 <feature-name> 폴더를 작성하는 것이 좋습니다.
- 컴포넌트를 자동으로 가져오고 <store-temp>/extensions/features/override_modals/src/app 폴더에 있는 app.module.ts 파일의 customModalsDeclarations 오브젝트에 컴포넌트 항목을 작성합니다.
- 애플리케이션이 제공하는 modalIds와 모달 이름 충돌을 방지하기 위해 명령은 코드 스니펫에 표시된 대로 custom- 를 기존 modalId 에 접두부로 지정하여 사용자 정의 모달 컴포넌트의 modalId 를 업데이트합니다.
- 애플리케이션 제공 modalId 를 사용자 정의 또는 대체 modalId에 맵핑하려면 <store-temp>/extensions/features/override-modals/src/assets/override-modals/config/ 폴더에 있는 isf-modal-config.json 파일을 업데이트합니다.
  다음 코드 스니펫은 isf-modal-config.json의 샘플 항목을 보여줍니다.
  [ { "applicationProvidedModalId": "orders.order-summary-page.cancel-order-modal", "overrideModalId": "custom-orders.order-summary-page.cancel-order-modal" }]
  참고: CLI 명령은 컴포넌트 폴더에 있는 파일만 복사합니다. 확장 컴포넌트가 컴포넌트 폴더 외부의 파일을 가져오는 경우, 이러한 파일을 새 모달 컴포넌트 폴더 내의 적절한 위치에 수동으로 복사해야 합니다. 또한 <store-temp>/extensions/features/override_modals/src/app 폴더에 있는 app.module.ts 파일에서 가져오고 선언해야 합니다.
사용자 정의 모달 컴포넌트의 생성자에서 개인용 _activeModal: NgbActiveModal 를 찾을 수 있습니다. NgbActiveModal 서비스를 StoreWrapperModalService로 대체하고 '@store/core'에서 StoreWrapperModalService 를 가져오는지 확인하십시오. 이러한 변경은 대체 모달 애플리케이션에서 즉시 사용 가능한 애플리케이션으로 모달 데이터를 전달하는 데 필요합니다.

참고: 애플리케이션 제공 모달이 상위 화면으로 데이터를 전송하는 경우 사용자 정의 모달도 상위 화면으로 데이터를 전송해야 합니다. 유형을 수정하거나 데이터 오브젝트에서 속성을 제거하지 않고 원래 데이터 모델 스키마를 유지해야 합니다.
현지화 및 국제화를 지원하기 위해 i18n 폴더가 <store-temp>/extensions/features/override-modals/src/assets/override-modals/i18n/ 폴더에 있습니다. 언어별 번들 JSON 파일을 작성하고 사용자 정의 번들 항목 언어별 JSON 파일을 추가할 수 있습니다. 예를 들어, 영어 로케일의 경우 en.json 를 작성하고 사용자 정의 번들 항목 언어별 JSON 파일을 추가하십시오.
대체된 모달에 필요한 기존 애플리케이션 제공 번들 항목을 재사용하려면 샘플 코드 스니펫에 설명된 대로 해당 기능 모듈의 경로를 구성하십시오.

예를 들어, 주기 계수 기능의 지정 태스크 모달을 대체하는 경우 <store-temp>/extensions/features/override_modals/src/app/app.module.ts의 번들 배열에 주기 계수를 추가하십시오.
```
static bundles: Array<any> = [
   {
     prefix: './assets/cycle-count/i18n/',
     suffix: '.json'
   },
   {
     prefix: './assets/override-modals/i18n/',
     suffix: '.json'
   }
 ].concat(CommonBundlesModule.bundles);
};
```
참고: 번들 배열에서 끝에 './assets/override-modals/i18n/' 를 추가하십시오.

다음 수행 작업

확장 애플리케이션 제공 화면을 로컬로 확인하려면 다음 명령을 실행하여 애플리케이션을 시작하고 모달이 표시되는 화면으로 이동하십시오.
```
yarn start-app
```
개발자 툴킷의 변경사항을 확인하려면 사용자 정의를 추출하고 배치하십시오. 사용자 지정 추출 및 배포에 대한 자세한 내용은 사용자 지정 추출하기를 참조하세요.