Lightbox
이미지 첨부를 크게 보고 앞뒤로 넘김.
- 라이브러리 전용
개요
미리보기
whiteboard-1007.jpg notes-scan-p1.png q3-plan-slide-4.png receipt-0930.jpg onboarding-sketch.jpg
예시
상태
닫힘 (썸네일에서 열기)
whiteboard-1007.jpg notes-scan-p1.png q3-plan-slide-4.png receipt-0930.jpg onboarding-sketch.jpg
열림 · 처음
열림 · 가운데
오류
원문 열 수 없음 · 마지막
확대
이렇게 · 이렇게 하지 않기
- 이렇게 하지 않기 원본을 보정하지 않고 그대로 보여준다. 확대는 즉시, 이미지 교체는 교차 페이드만.
- 이렇게 Esc로 닫히고 연 썸네일로 초점이 돌아간다.
- 이렇게 이미지마다 파일 이름과 출처를 함께 둔다. 원문 접근이 끊기면 라벨을 붙인다.
- 이렇게 하지 않기 끌어서 닫기, 썸네일 자리로 날아가는 확대 전환, 스프링을 쓰지 않는다.
- 이렇게 21st 참고: Kokonut Lightbox Grid(kokonutd — 열면 닫기 버튼에 초점, “1 / 6” 위치, 파일 설명), Gallery Grid with Lightbox(moumensoliman), Image Preview(arihantcodes), Zoomable Image(inference-sh), Masonry Lightbox(ayushmxxn). kokonutd의 끌어서 날아 돌아가기와 Zoomable Image의 스크롤로 닫기는 버렸다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
images | readonly LightboxImage[] | — | { id, src?, alt?, fileName, source?, sourceUnavailable? }. 미리보기 표본 5개(4번째는 열 수 없는 이미지, 5번째는 원문 열 수 없음). |
open? | boolean | false | 바뀌면 열고 닫는다(showModal). 사용자가 닫으면 onOpenChange(false). 카탈로그는 비모달로 그린다. |
index? | number | — | 열 때 보여 줄 이미지(0부터). 끝에서 순환하지 않는다. |
zoomed? | boolean | false | 2배로 시작. 확대는 상태 변화라서 즉시 바뀐다(애니메이션 없음). |
onOpenChange?: (open: boolean) => void | — | — | Esc·닫기 버튼으로 닫히면 false. |
onIndexChange?: (index: number) => void | — | — | 이전/다음으로 이미지가 바뀔 때. |
announce() — a11y/announce.ts | — | — | 공용 announce()(LiveAnnouncer, polite): “2 / 5, whiteboard-1007.jpg”. |
| 그 밖의 속성 | — | — | id, aria-label(기본 “이미지 보기”) 등 네이티브 dialog 속성은 그대로 전달된다. className·style·children은 받지 않는다. |
접근성
키보드: ←→ 이전/다음 · +/− 확대·축소 · 0 원래 크기 · Esc 닫기. 확대 중에는 화살표가 이미지를 옮긴다(화면에 글자로 표시). 끌어서 옮기기도 된다.
- <dialog aria-label="이미지 보기"> + showModal: 초점 가둠과 배경 inert는 브라우저가 한다. 열면 닫기 버튼, 닫으면 연 썸네일로 초점.
- 처음·마지막에서 이전/다음 버튼은 aria-disabled(초점은 받음). 확대 버튼은 aria-pressed. 위치 “2 / 5”는 글자로 보인다.
- 모션: 열기 base 불투명도, 닫기 ×0.7, 이미지 교차 페이드 base. reduce면 fade 120만. 확대는 즉시.