Component

PhotoLightbox

사진 목록을 전체 화면에서 탐색하는 접근 가능한 미리보기입니다.

Playground

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

PC 1280px

Controls

Code

import { useState } from 'react'

import { type PhotoLightboxImage, Button, PhotoLightbox } 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 PhotoLightboxExample({ start }: {
    start: number;
}) {
    const [index, setIndex] = useState<number | null>(null);
    const images: PhotoLightboxImage[] = samplePhotos;
    return (<div className="grid gap-3">
      <Button type="button" variant="outline" onClick={() => setIndex(Math.min(start, images.length - 1))}>
        사진 크게 보기
      </Button>
      <PhotoLightbox images={images} index={index} onIndexChange={setIndex}/>
    </div>);
}

export default function ExamplePreview() {
  return (<PhotoLightboxExample start={0}/>)
}

Props

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

import { PhotoLightbox } from '@amineslab/ui'

`PhotoLightbox`

Dialog focus trap과 이미지 순환 탐색을 소유합니다.

Name	Type	Default	Description
`images*`	`PhotoLightboxImage[]`	-	미리보기 이미지 목록입니다.
`index*`	`number \| null`	-	열린 이미지 인덱스입니다. null이면 닫힙니다.
`onIndexChange*`	`(index: number \| null) => void`	-	열기·닫기·앞뒤 이동을 전달합니다.

Examples

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

전체 화면 키보드 탐색

열린 이미지에서 좌우 방향키로 순환하고 Esc로 닫습니다.

import { useState } from 'react'

import { type PhotoLightboxImage, Button, PhotoLightbox } 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 PhotoLightboxExample({ start }: {
    start: number;
}) {
    const [index, setIndex] = useState<number | null>(null);
    const images: PhotoLightboxImage[] = samplePhotos;
    return (<div className="grid gap-3">
      <Button type="button" variant="outline" onClick={() => setIndex(Math.min(start, images.length - 1))}>
        사진 크게 보기
      </Button>
      <PhotoLightbox images={images} index={index} onIndexChange={setIndex}/>
    </div>);
}

export default function ExamplePreview() {
  return (<PhotoLightboxExample start={0}/>)
}

사용 기준

권장하는 사용

index를 controlled로 관리하면 PhotoGrid뿐 아니라 외부 썸네일·업로드 목록과도 연결할 수 있습니다.

피해야 할 사용

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

접근성

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

Arrow Left / Right: 이미지를 순환 이동합니다.
Escape: 라이트박스를 닫고 트리거 흐름으로 돌아갑니다.