Component

PhotoGrid

정방형 사진 목록과 누락·overlay·라이트박스를 제공합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { PhotoGrid } from '@amineslab/ui'

const samplePhotos = [
    {
        url: 'https://images.unsplash.com/photo-1500534623283-312aade485b7?w=480',
        alt: '산과 호수',
    },
    {
        url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=480',
        alt: '산길',
    },
];

function PhotoGridExample({ columns, maxVisible }: {
    columns: 2 | 3 | 4;
    maxVisible?: number;
}) {
    return (<PhotoGrid columns={columns} maxVisible={maxVisible} photos={[...samplePhotos, ...samplePhotos, ...samplePhotos]}/>);
}

export default function ExamplePreview() {
  return ((<PhotoGridExample columns={3} maxVisible={3}/>))
}

Props

@amineslab/ui에서 PhotoGrid를 가져옵니다.

import { PhotoGrid } from '@amineslab/ui'

`PhotoGrid`

썸네일과 PhotoLightbox를 하나의 인덱스로 연결합니다.

Name	Type	Default	Description
`photos*`	`PhotoGridItem[]`	-	url과 alt를 가진 사진 목록입니다.
`columns`	`2 \| 3 \| 4`	`3`	그리드 열 수입니다.
`maxVisible`	`number`	`columns`	추가 타일을 포함한 표시 타일 수입니다. 넘으면 +N으로 접고 전체 사진 보기로 연결합니다.
`renderItemOverlay`	`(item, index) => ReactNode`	-	썸네일 위 상태·삭제 컨트롤입니다.
`renderMissing`	`(index) => ReactNode`	-	url 누락 타일의 대체 렌더입니다.
`endItem`	`ReactNode`	-	목록 뒤에 추가 작업 타일을 둡니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

썸네일 클릭, Esc, 좌우 방향키를 하나의 사진 목록 상태로 연결합니다.

import { PhotoGrid } from '@amineslab/ui'

const samplePhotos = [
    {
        url: 'https://images.unsplash.com/photo-1500534623283-312aade485b7?w=480',
        alt: '산과 호수',
    },
    {
        url: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=480',
        alt: '산길',
    },
];

function PhotoGridExample({ columns, maxVisible }: {
    columns: 2 | 3 | 4;
    maxVisible?: number;
}) {
    return (<PhotoGrid columns={columns} maxVisible={maxVisible} photos={[...samplePhotos, ...samplePhotos, ...samplePhotos]}/>);
}

export default function ExamplePreview() {
  return (<PhotoGridExample columns={3}/>)
}

사용 기준

권장하는 사용

사진 데이터는 url이 없는 누락 상태도 표현할 수 있습니다.
trailing에 PhotoField의 추가 타일 같은 외부 작업을 붙입니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Enter / Space: 사진을 라이트박스로 열고 overlay 액션을 실행합니다.