동적 경로 및 편집 가능한 구성 요소

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

초급
개발자

이 장에서는 편집할 수 있는 구성 요소를 지원하기 위해 두 개의 동적 모험 세부 경로(Bali Surf Camp 및 Beervana in Portland)를 활성화합니다.

Adventure Detail SPA 경로가 /adventure/:slug(으)로 정의되어 있습니다. 여기서 slug은(는) Adventure 콘텐츠 조각의 고유 식별자 속성입니다.

SPA URL을 AEM 페이지에 매핑

이전 두 장에서는 SPA 홈 보기의 편집 가능한 구성 요소 컨텐츠를 /content/wknd-app/us/en/에 AEM의 해당 원격 SPA 루트 페이지에 매핑했습니다.

SPA 동적 경로에 대해 편집 가능한 구성 요소에 대한 매핑을 정의하는 것은 유사하지만 경로 인스턴스와 AEM 페이지 인스턴스 간에 1:1 매핑 구성표를 제시해야 합니다.

이 자습서에서는 경로의 마지막 세그먼트인 WKND Adventure 콘텐츠 조각의 이름을 가져와 /content/wknd-app/us/en/adventure 아래의 간단한 경로에 매핑합니다.

원격 SPA 경로

AEM 페이지 경로

/content/wknd-app/us/en/home

/adventure/bali-surf-camp

/content/wknd-app/us/en/home/adventure/bali-surf-camp

/adventure/베어바나-포틀랜드

/content/wknd-app/us/en/home/adventure/beervana-in-portland

따라서 이 매핑을 기반으로 다음 위치에 새 AEM 페이지를 두 개 만들어야 합니다.

/content/wknd-app/us/en/home/adventure/bali-surf-camp
/content/wknd-app/us/en/home/adventure/beervana-in-portland

원격 SPA 매핑

원격 SPA에서 나가는 요청에 대한 매핑은 SPA Bootstrap에서 완료된 setupProxy 구성을 통해 구성됩니다.

SPA 편집기 매핑

AEM SPA 편집기를 통해 SPA을 열 때 SPA 요청에 대한 매핑은 AEM 구성에서 수행한 Sling 매핑 구성을 통해 구성됩니다.

AEM에서 컨텐츠 페이지 만들기

먼저 중간 adventure 페이지 세그먼트를 만듭니다.

AEM 작성자에 로그인
사이트 > WKND 앱 > us > en > WKND 앱 홈 페이지로 이동합니다
- 이 AEM 페이지는 SPA의 루트로 매핑되므로 다른 SPA 루트에 대한 AEM 페이지 구조를 빌드하기 시작합니다.
만들기 를 탭하고 페이지 를 선택하세요.
원격 SPA 페이지 템플릿을 선택하고 다음 을 누릅니다.
페이지 속성 작성
- 제목: 모험
- 이름: adventure
  - 이 값은 AEM 페이지의 URL을 정의하므로 SPA의 경로 세그먼트와 일치해야 합니다.
완료 탭

그런 다음 편집 가능한 영역이 필요한 각 AEM URL에 해당하는 SPA 페이지를 만듭니다.

사이트 관리자의 새 모험 페이지로 이동
만들기 를 탭하고 페이지 를 선택하세요.
원격 SPA 페이지 템플릿을 선택하고 다음 을 누릅니다.
페이지 속성 작성
- 제목: 발리 서프 캠프
- 이름: bali-surf-camp
  - 이 값은 AEM 페이지의 URL을 정의하므로 SPA 경로의 마지막 세그먼트와 일치해야 합니다
완료 탭
3-6단계를 반복하여 Beervana in Portland 페이지를 만듭니다.
- 제목: Portland의 Beervana
- 이름: beervana-in-portland
  - 이 값은 AEM 페이지의 URL을 정의하므로 SPA 경로의 마지막 세그먼트와 일치해야 합니다

이 두 AEM 페이지에는 일치하는 SPA 경로에 대해 각자가 작성한 콘텐츠가 보관됩니다. 다른 SPA 경로를 작성해야 하는 경우 새 AEM 페이지를 AEM의 원격 SPA 페이지 루트 페이지(/content/wknd-app/us/en/home) 아래에 있는 SPA URL에 만들어야 합니다.

WKND 앱 업데이트

마지막 챕터에서 만든 <ResponsiveGrid...> 구성 요소를 AdventureDetail SPA 구성 요소에 배치하여 편집 가능한 컨테이너를 만들어 보겠습니다.

ResponsiveGrid SPA 구성 요소 배치

<ResponsiveGrid...>을(를) AdventureDetail 구성 요소에 배치하면 해당 경로에서 편집 가능한 컨테이너가 만들어집니다. 여러 경로에서 AdventureDetail 구성 요소를 사용하여 렌더링하므로 <ResponsiveGrid...>'s pagePath 특성을 동적으로 조정해야 합니다. pagePath은(는) 경로의 인스턴스가 표시하는 모험을 기반으로 해당 AEM 페이지를 가리키도록 파생되어야 합니다.

react-app-/src/components/AdventureDetail.js 열기 및 편집
ResponsiveGrid 구성 요소를 가져와 <h2>Itinerary</h2> 구성 요소 위에 놓습니다.
<ResponsiveGrid...> 구성 요소에 대해 다음 특성을 설정합니다. pagePath 특성은 위에 정의된 매핑에 따라 모험 페이지에 매핑되는 현재 slug을(를) 추가합니다.
- pagePath = '/content/wknd-app/us/en/home/adventure/${slug}'
- itemPath = 'root/responsivegrid'
ResponsiveGrid 구성 요소가 AEM 리소스에서 해당 콘텐츠를 검색하도록 지시합니다.
- /content/wknd-app/us/en/home/adventure/${slug}/jcr:content/root/responsivegrid

AdventureDetail.js을(를) 다음 줄로 업데이트하십시오.

...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...

function AdventureDetailRender(props) {
    ...
    // Get the slug from the React route parameter, this will be used to specify the AEM Page to store/read editable content from
    const { slug } = useParams();

    return(
        ...
        // Pass the slug in
        function AdventureDetailRender({ title, primaryImage, activity, adventureType, tripLength,
                groupSize, difficulty, price, description, itinerary, references, slug }) {
            ...
            return (
                ...
                <ResponsiveGrid
                    pagePath={`/content/wknd-app/us/en/home/adventure/${slug}`}
                    itemPath="root/responsivegrid"/>

                <h2>Itinerary</h2>
                ...
            )
        }
    )
}

AdventureDetail.js 파일은 다음과 같아야 합니다.

AdventureDetail.js

AEM에서 컨테이너 작성

<ResponsiveGrid...>이(가) 제자리에 있고 렌더링되는 모험에 따라 해당 pagePath이(가) 동적으로 설정된 상태에서 콘텐츠 작성을 시도합니다.

AEM 작성자에 로그인
사이트 > WKND 앱 > us > en(으)로 이동합니다.
WKND 앱 홈 페이지 페이지를 편집
- SPA에서 Bali Surf Camp 경로로 이동하여 편집합니다
오른쪽 상단의 모드 선택기에서 미리 보기 를 선택합니다.
SPA에서 Bali Surf Camp 카드를 탭하여 해당 경로로 이동합니다.
모드 선택기에서 편집 선택
일정 바로 위에서 레이아웃 컨테이너 편집 가능 영역을 찾습니다.
페이지 편집기의 사이드바 를 열고 구성 요소 보기 를 선택합니다.
사용 가능한 구성 요소 중 일부를 레이아웃 컨테이너(으)로 끌어서 놓습니다.
- 이미지
- 텍스트
- 제목
그리고 홍보 마케팅 자료를 만드세요. 다음과 같은 모습일 수 있습니다.
AEM 페이지 편집기에서 변경 내용을 미리 보기
http://localhost:3000에서 로컬로 실행되는 WKND 앱을 새로 고치고 Bali Surf Camp 경로로 이동하여 작성된 변경 내용을 확인하십시오!

매핑된 AEM 페이지가 없는 모험 세부 경로로 이동하면 해당 경로 인스턴스에 작성 기능이 없습니다. 이러한 페이지에서 작성을 활성화하려면 Adventure 페이지에서 이름이 일치하는 AEM 페이지를 만들면 됩니다.

축하합니다!

축하합니다! SPA에서 동적 경로에 작성 기능을 추가했습니다.

AEM React Editable Component의 ResponsiveGrid 구성 요소를 동적 경로에 추가했습니다
SPA(포틀랜드의 발리 서프 캠프와 비어바나)에서 두 개의 특정 경로 작성을 지원하도록 AEM 페이지를 만들었습니다.
역동적인 발리 서프 캠프 노선에 콘텐츠를 작성!

이제 AEM SPA Editor를 사용하여 원격 SPA에 특정 편집 가능한 영역을 추가하는 방법의 첫 번째 단계를 살펴보았습니다.

recommendation-more-help

e25b6834-e87f-4ff3-ba56-4cd16cdfdec4