ImageViewer-Svelte Svelte Themes

Imageviewer Svelte

Svelte & SvelteKit 용 이미지 뷰어 컴포넌트

Download

ImageViewer-Svelte

Svelte 및 SvelteKit에서 사용 가능한 이미지 뷰어 컴포넌트입니다.

컴포넌트에 대한 자세한 설명은 여기에서: https://blog.hmlee.me/board/development/73/

이미지 뷰어 내 아이콘 렌더링을 위해 Font Awesome 아이콘을 사용합니다. Font Awesome 아이콘을 사용하기 위해서는 @fortawesome/fontawesome-svg-core, @fortawesome/free-solid-svg-icons, @fortawesome/svelte-fontawesome 패키지를 설치해야 합니다.

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/svelte-fontawesome

페이지 내 이미지 목록을 스토어로 저장하고, 이미지 뷰어 컴포넌트에서 해당 스토어를 구독하여 이미지를 렌더링하는 방식으로 사용합니다.

사용법

이미지 뷰어를 추가하고자 하는 부모 컴포넌트 또는 페이지에 이 컴포넌트를 불러옵니다. client-config.svelte 파일에서 imgViewerStatusStore 스토어를 구독하여 이미지 뷰어의 상태를 관리할 수 있습니다.

이미지 목록을 스토어에 저장하고 가져오려면 types.ts 파일에 정의된 타입을 참고하여 이미지 객체 배열을 생성하여 저장합니다.

<script>
  import ImageViewer from '[path-to-image-viewer]/ImageViewer.svelte';
    import { imgViewerStatusStore } from "[path-to-client-config]/client-config.svelte";
</script>
<ImageViewer bind:imgViewerStatus={imgViewerStatus} SSRImageView={SSRImageView} />

Props

  • imgViewerStatus: 이미지 뷰어의 상태와 전체 이미지 배열, 현재 이미지를 나타내는 객체입니다. client-config.svelte 파일에서 정의된 imgViewerStatusStore 스토어를 구독하여 관리할 수 있습니다.
  • SSRImageView: SSR 환경에서 이미지를 렌더링하기 위한 컴포넌트입니다. SSR 환경에서 이미지를 렌더링할 때 사용됩니다.

imgViewerStatus

이미지 객체는 다음과 같은 구조를 가집니다:

export interface ImageViewerStatus {
  isOpen: boolean;
  currentSrc?: string;
  images: { src: string; alt: string; uuid: string }[];
}
  • isOpen: 이미지 뷰어가 열려 있는지 여부를 나타냅니다.
  • currentSrc: 현재 뷰어에 표시되고 있는 이미지의 소스입니다.
  • images: 이미지 뷰어에 표시할 이미지 객체 배열입니다. 각 이미지 객체는 src, alt, uuid 속성을 가집니다. src는 이미지의 소스 URL, alt는 이미지의 대체 텍스트, uuid는 이미지의 고유 식별자입니다.

SSRImageView

SSR 환경에서 이미지 뷰어를 렌더링하기 위해 사용되는 Props입니다.

<script>
  import { page } from '$app/state';
  let SSRImageView = $derived(page.url.searchParams.get('imgview'));
</script>

해당 Props 값은 page를 구독하여 현재 페이지의 URL에서 imgview 검색 매개변수를 가져와 설정됩니다. 이 값을 통해 SSR 환경에서 이미지 뷰어가 렌더링될 때 사용할 이미지를 지정할 수 있습니다.

pathname은 그대로 두고 imgview 검색 매개변수에 이미지의 src를 전달하여 해당 이미지를 뷰어에서 렌더링할 수 있습니다. 예를 들어, http://example.com/page?imgview=123e4567-e89b-12d3-a456-426614174000와 같이 URL을 구성하면, imgview 매개변수에 지정된 UUID를 가진 이미지가 뷰어에서 렌더링됩니다. (값은 컴포넌트 내 <img> 태그의 src 속성에 전달됩니다.)

SSR 렌더링을 고려하지 않을 경우 SSRImageView Props는 생략할 수 있습니다. 이 경우 이미지 뷰어는 클라이언트 측에서만 렌더링됩니다.

Svelte만 사용하는 경우

SvelteKit이 아닌 Svelte 프로젝트에서 이 컴포넌트를 사용하는 경우 $app/state 모듈을 사용할 수 없으므로, 해당 모듈 import 줄을 제거하고, 아래와 같이 cancelHref 변수 선언 부분을 수정해야 합니다.

<script>
  // import { page } from '$app/state'; // SvelteKit에서만 사용
  let cancelHref = "#"; // Svelte에서는 페이지 이동이 필요 없으므로 기본값으로 설정
</script>

기능

  • 이미지 좌/우 스와이프: 이미지 뷰어 내에서 좌우로 스와이프하여 이전 또는 다음 이미지를 볼 수 있습니다.
  • 이전/다음 버튼: 이미지 뷰어 내에서 이전 또는 다음 이미지를 볼 수 있는 버튼이 제공됩니다.
  • 닫기 버튼: 이미지 뷰어를 닫을 수 있는 버튼이 제공됩니다.
  • 이미지 상/하 스와이프: 이미지 뷰어를 닫을 때 이미지 상하로 스와이프하여 닫을 수 있습니다.
  • 이미지 설명 표시: 이미지 목록을 저장할 때 alt 속성을 이용해 이미지 설명을 제공할 수 있습니다. 이미지 뷰어에서 하단에 해당 설명이 표시됩니다.
  • SSR 지원: SSR 환경에서도 이미지 뷰어가 정상적으로 렌더링되도록 지원합니다. SSRImageView Props를 통해 SSR 환경에서 사용할 이미지를 지정할 수 있습니다.
  • UI 가리기: 이미지 뷰어 내에서 마우스 움직임이 없으면, 이미지 뷰어의 UI 요소(이전/다음 버튼, 닫기 버튼 등)가 자동으로 사라집니다. 마우스를 움직이면 다시 나타납니다.
  • 무한 회전: 이미지 뷰어에서 마지막 이미지에서 다음으로 이동하면 첫 번째 이미지로 돌아가고, 첫 번째 이미지에서 이전으로 이동하면 마지막 이미지로 이동하는 무한 회전 기능이 지원됩니다.

특징

  • Svelte의 반응성 시스템을 활용하여 이미지 뷰어의 상태를 효율적으로 관리합니다.
  • 이미지 뷰어의 상태를 스토어로 관리하여, 여러 컴포넌트에서 쉽게 공유할 수 있습니다.
  • Font Awesome 아이콘을 사용하여 직관적인 UI를 제공합니다.
  • SSR 환경에서도 정상적으로 작동하도록 설계되었습니다.
  • 이미지 개수가 3개 미만일 경우에도 무한 회전이 작동할 수 있도록 부족한 이미지 개수만큼 이미지를 채워 넣어 무한 회전이 가능하도록 구현되어 있습니다.

주의사항

  • SvelteKit을 사용하지 않는 경우, page 모듈을 사용할 수 없으므로 해당 모듈 관련 코드를 제거하고, cancelHref 변수를 적절히 설정해야 합니다.
  • SSR 렌더링을 고려하지 않는 경우, SSRImageView Props를 생략하거나, 관련 코드를 제거하여 클라이언트 측에서만 이미지 뷰어가 렌더링되도록 설정할 수 있습니다.
  • 이미지 식별을 위해 각 이미지 객체에 고유한 uuid 값을 제공해야 합니다. uuid 값이 없는 경우, 이미지 뷰어가 정상적으로 작동하지 않습니다.
  • 이미지 개수가 모자라서 채워진 이미지의 경우 uuid 값이 dummy-1, dummy-2로 고정됩니다.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes