목록

제품, 서비스, 뉴스 등 서로 연관된 일련의 항목들을 어떻게 표현할지 다룹니다.

소개

목록은 제품, 서비스, 참고 자료, 뉴스 등 서로 연관된 일련의 항목들을 표현하는 데 사용됩니다. 각 목록은 자체적인 제목/도입 콘텐츠를 가지며, 백오피스(목록 > 항목)에서 별도로 관리되는 여러 항목을 묶습니다.

모든 컴포넌트에 공통된 동일한 메커니즘을 따르며, 이는 개요와 컴포넌트 유형 문서에 설명되어 있습니다.

목록 필드

공통 필드(유형, 순서, 편집 모드, 배경 반전, 작업) 외에도 목록에는 다음이 있습니다:

필드	설명
제목 (title)	목록의 제목.
내용 (content / html_content)	목록의 도입 텍스트.
이미지 (image)	목록 자체에 연결된 이미지(항목이 아님).
이미지 대체 텍스트 (image_alt)	이미지의 대체 텍스트.
이미지 제목 (image_title)	이미지의 title 속성.

항목

각 항목은 하나의 목록에 속하며(page_listing_id), 자체적인 필드를 가집니다:

필드	설명
제목 (title)	항목의 제목.
내용 (content / html_content)	항목의 텍스트.
이미지 (image)	항목의 이미지.
URL (link)	항목의 링크 — 사용자가 클릭했을 때 이동할 곳.
순서 (sorter)	목록 내에서 항목의 위치.

항목은 자체적인 유형 필드를 가지지 않는다는 점에 유의하세요 — 항목은 자신이 속한 목록의 유형을 상속받습니다: 목록의 React 컴포넌트는 렌더링할 때 각 항목에 자신의 type을 전달합니다.

렌더링 구조

각 유형이 컴포넌트 내부의 독립적인 폴더인 Banner와 Conteúdo와 달리, 목록에서는 항목을 렌더링하는 컴포넌트(Item)가 유형 폴더 안에 위치합니다:

website/src/components/Listing/
├── index.jsx              # 라우터: 목록 유형을 선택
└── Default/
    ├── index.jsx           # 목록 레이아웃, <Item />을 렌더링
    ├── info.json
    ├── config.json
    └── Item/
        └── index.jsx        # 이 유형에서 각 항목이 렌더링되는 방식

이것은 항목이 표현되는 방식(그리드, 목록, 카드 등)이 보통 목록의 레이아웃에 직접적으로 의존하기 때문에 타당합니다 — 따라서 각 유형의 Item은 모든 유형이 공유하는 범용 컴포넌트가 아니라, 유형 자체와 함께 사용자 정의될 수 있습니다.

사용 가능한 유형

현재는 기본(Default) 유형만 존재합니다. 자체적인 Item을 가진 새로운 목록 유형을 만들려면 컴포넌트 유형 문서에 설명된 동일한 과정을 따르되, 새 유형 안에 Item/ 하위 폴더를 포함해야 한다는 점을 기억하세요.

다음 단계

Slider로 계속 진행하세요.