애플리케이션 제공 기능 구성요소 수정

애플리케이션은 @store/functional-components 각도 라이브러리에 패키지된 재사용 가능한 기능 컴포넌트를 제공합니다. 이러한 컴포넌트는 특정 도메인 또는 기능적 유스 케이스를 다루기 위해 빌드되며 애플리케이션 전체에서 광범위하게 사용됩니다.

애플리케이션 제공 기능 컴포넌트를 사용자 정의하거나 비즈니스에 필요한 새 사용자 정의 컴포넌트를 작성할 수 있습니다.

시작하기 전에

애플리케이션 제공 기능 구성요소는 <store-temp>/packages/libs/functional-components/src/lib 폴더에 있습니다. 이러한 각 컴포넌트는 특정 기능을 캡슐화하며 애플리케이션 전체에서 광범위하게 사용됩니다.

애플리케이션 제공 기능 컴포넌트를 사용자 정의 컴포넌트와 맵핑하려면 <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json 파일을 사용하십시오. JSON 파일에서 애플리케이션 제공 컴포넌트의 고유 ID를 사용자 정의 또는 대체된 컴포넌트와 맵핑하는지 확인하십시오.

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

테이블 1. 스키마 정의 속성 및 설명
속성 이름	설명
applicationProvidedComponentId	애플리케이션 제공 기능 구성요소에 지정된 고유 ID입니다. 예를 들어, `MiniCartComponent`입니다.
overrideComponentId	대체 또는 사용자 정의 컴포넌트에 지정되는 고유 ID입니다. 예를 들어, `MiniCartCustomComponent`입니다.

애플리케이션 제공 기능 구성요소를 대체할 때 <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json 를 표에 설명된 속성으로 업데이트하십시오.

프로시저

다음 방법 중 하나로 애플리케이션 제공 기능 컴포넌트를 수정하십시오.
- 새 사용자 정의 컴포넌트를 작성하십시오.
  1. <store-temp>/extensions/features/override-component/src/app/components 디렉토리를 찾아보고 다음 명령을 실행하십시오.
```
ng g c <componentName> --prefix=isf
```
  2. 다음과 같이 값이 컴포넌트 클래스 이름인 componentName 정적 문자열 변수를 추가하십시오.
    public static componentName = 'MiniCartCustomComponent';
- 비즈니스에 필요한 대로 애플리케이션 제공 컴포넌트를 복사하고 수정하십시오.
  1. 확장할 애플리케이션 제공 기능 컴포넌트를 식별하십시오.
  2. 전체 컴포넌트 소스 폴더를 복사하고 <store-temp>/extensions/features/override-component/src/app/components 디렉토리에 복사하십시오.
사용자 정의 컴포넌트 클래스 이름을 업데이트하십시오.
<store-temp>/extensions/features/override-component/src/app 디렉토리로 이동하십시오. app.module.ts 파일을 열고 customComponentDeclarations 오브젝트에서 사용자 정의 구성요소 클래스 이름을 업데이트하십시오.

참고: 확장 컴포넌트가 컴포넌트 폴더 외부로 파일을 가져오는 경우 해당 파일을 컴포넌트 폴더 내의 적절한 위치에 수동으로 복사해야 합니다. 또한 <store-temp>/extensions/features/override_component/src/app 폴더에 있는 app.module.ts 파일에서 컴포넌트를 가져오고 선언해야 합니다. 애플리케이션이 다른 각도 모듈에 종속되어 있는 경우 적절한 모듈을 가져오십시오. 예를 들어, FormsModule, CommonModule, ReactiveFormsModule등입니다.
적절한 세부사항으로 <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-component-extn-config.json 파일을 업데이트하십시오. 예를 들어, 애플리케이션 제공 소형 카트 구성요소를 사용자 정의 소형 카트 구성요소로 대체하려면 다음과 같이 업데이트하십시오.
```
[{
   "applicationProvidedComponentId": "MiniCartComponent",
   "overrideComponentId": "MiniCartCustomComponent"
 }]
```

현지화 및 국제화를 지원하기 위해 i18n 폴더는 <store-temp>/extensions/features/override-component/src/assets/override-component/i18n/ 폴더에서 유지보수됩니다. 영어의 en.json 번들 파일은 i18n 폴더에 포함되어 있습니다. 언어별 번들 JSON 파일을 작성할 수도 있습니다.

참고:

애플리케이션 제공 AddressCaptureComponent 또는 AddressDisplayComponent를 수정하는 경우 다음 단계를 완료하십시오.
1. AddressRegistryService 및 AddressConfigList 를 <store-temp>/packages/libs/functional-components/src/lib/address 에서 <store-temp>/extensions/features/override-component/src/app/components/customAddress 폴더로 복사하십시오.
  여기서 customAddress 은 확장 주소 표시 또는 캡처 컴포넌트를 포함하는 폴더 이름을 참조합니다.
2. AddressRegistryService 및 AddressConfigList 를 app.module.ts 파일로 가져오십시오.
3. 다음과 같이 app.module.ts 파일의 생성자에 있는 AddressRegistryService 에 AddressConfigList 를 등록하십시오.
```
class AppModule implements OnDestroy, DoBootstrap {
......
   constructor() {
     .....
     AddressRegistryService.registerAddress(AddressConfigList, []);
     .....
   }
.......
}
```
애플리케이션 제공 GlobalSearchRegistryService를 수정하는 경우 다음 단계를 완료하십시오.
1. GlobalSearchRegistryService 를 <store-temp>/packages/libs/functional-components/src/lib/global-search 에서 <store-temp>/extensions/features/override-component/src/app/components/global-search-extn 폴더로 복사하십시오.
  여기서 global-search-extn 은 확장 글로벌 검색 컴포넌트를 포함하는 폴더 이름을 참조합니다.
2. GlobalSearchRegistryService 를 app.module.ts 파일로 가져오십시오.
3. searchComponentDeclarations를 선언하십시오.
```
const searchComponentDeclarations = [
     OrderSearchComponent,
     CustomerSearchComponent,
     ProductSearchComponent,
     ShipmentSearchComponent
   ];
```
4. 다음과 같이 app.module.ts 파일의 생성자에 있는 GlobalSearchRegistryService 에 searchComponentDeclarations 를 등록하십시오.
```
GlobalSearchRegistryService.registerSearchComponents(searchComponentDeclarations);
```

다음 수행 작업

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