로그인 페이지 사용자 정의

비즈니스에 필요한 대로 애플리케이션의 로그인 페이지를 사용자 정의할 수 있습니다.

배경 이미지 사용자 정의

로그인 페이지의 배경 이미지를 사용자 정의 이미지로 바꾸려면 다음 단계를 완료하십시오.

SVG 형식의 사용자 정의 이미지 파일을 <store-temp>/extensions/libs/styles/src/styles/images 폴더에 복사하십시오.

중요: SVG 파일 형식만 지원됩니다.
<store-temp>/extensions/override-static-assets/root-config/custom 폴더를 찾아보십시오.
extension-config.json 파일을 여십시오.
다음 샘플 구성에 설명된 대로 사용자 정의 이미지의 이미지 소스를 구성하십시오.
```
{
    "login": {
        "imageSrc": "./assets/styles/images/<custom-image>.svg"
    }
}
```
다음 명령을 실행하여 애플리케이션을 시작하십시오.
```
yarn start-app
```
사용자 정의 이미지가 로그인 페이지에 표시되는지 확인하십시오.

로그인 페이지의 필드 레이블 또는 저작권 정보와 같은 리터럴을 사용자 정의할 수 있습니다. 영어로 리터럴을 사용자 정의하려면 변환 번들을 사용자 정의하기 위해 수행하는 프로세스와 동일한 프로세스를 따르십시오.

<store-temp>/packages/features/login/src/assets/login/i18n 폴더를 찾아보십시오.
en.json 파일을 열고 업데이트할 리터럴을 식별하십시오.
extensions/override-static-assets/login/i18n 폴더를 찾아보십시오.
login/i18n 폴더가 없는 경우 폴더를 작성하십시오.
extensions/override-static-assets/login/i18n 폴더를 찾아보십시오.
en.json 파일이 이 폴더에 없는 경우 파일을 작성하여 동일한 폴더에 저장하십시오.
en.json 파일에 업데이트된 리터럴을 추가하고 저장하십시오.
다음 명령을 실행하여 애플리케이션을 시작하십시오.
```
yarn start-app
```
업데이트된 리터럴이 로그인 페이지에 표시되는지 확인하십시오.

로그인 페이지의 레이아웃을 사용자 정의하려면 @store/functional-components 각도 라이브러리의 일부인 LoginFormComponent 컴포넌트를 대체하십시오.

참고: 로그인 단추의 클릭 시 이벤트 핸들러에 대한 애플리케이션 제공 코드를 유지해야 합니다.

구성 LoginFormComponent 요소 재정의에 대한 자세한 내용은 애플리케이션 제공 기능 구성 요소 수정하기를 참조하십시오.