ImageZoom

Data Display

이미지를 확대해 세부 내용을 살펴보고 이동할 수 있는 뷰어.

Usage

학습 자료나 첨부 이미지의 작은 글자와 세부 영역을 확대해 볼 때 사용한다.

import

import { ImageZoom } from '@mildang/design-system/ImageZoom';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

ImageZoom Props

Prop

Type

Default

imageHeight

필수

number

지정 안 함

imageWidth

필수

number

지정 안 함

src

필수

string

지정 안 함

alt

string

borderRadius

string

className

string

지정 안 함

height

number

지정 안 함

preload

boolean

false

transition

Transition

{ | type: 'spring', | stiffness: 300, | damping: 30, | }

width

number

지정 안 함

여러 이미지 갤러리

여러 ImageZoom을 나란히 배치하면 각 썸네일을 독립적으로 확대해 자료의 세부를 확인할 수 있다.

MultipleImages

코드

Open in Playground

import { HStack } from '@mildang/styled-system/jsx';
import { ImageZoom } from '@mildang/design-system/ImageZoom';

const SAMPLE_IMAGE = 'https://picsum.photos/seed/zoom1/800/600';

const SAMPLE_IMAGE_2 = 'https://picsum.photos/seed/zoom2/800/600';

const SAMPLE_IMAGE_3 = 'https://picsum.photos/seed/zoom3/800/600';

const ImageZoomMultipleImagesExample = () => (
    <HStack gap="4" flexWrap="wrap">
      <ImageZoom
        src={SAMPLE_IMAGE}
        alt="Landscape 1"
        width={200}
        height={150}
        imageWidth={800}
        imageHeight={600}
        borderRadius="md"
      />
      <ImageZoom
        src={SAMPLE_IMAGE_2}
        alt="Landscape 2"
        width={200}
        height={150}
        imageWidth={800}
        imageHeight={600}
        borderRadius="md"
      />
      <ImageZoom
        src={SAMPLE_IMAGE_3}
        alt="Landscape 3"
        width={200}
        height={150}
        imageWidth={800}
        imageHeight={600}
        borderRadius="md"
      />
    </HStack>
  );

export default ImageZoomMultipleImagesExample;

예제

이미지 확대

썸네일을 눌러 원본 크기로 확대합니다. 문제 풀이 이미지처럼 세부를 확인해야 하는 자료에 씁니다.

코드

Open in Playground

import { ImageZoom } from '@mildang/design-system/ImageZoom';

// 문서 앱의 `next/image` 는 원격 호스트를 허용하지 않는다(`images.remotePatterns` 미설정).
// 외부 플레이스홀더를 쓰면 예제가 통째로 죽으므로 저장소 안 자산만 쓴다.
export default function ImageZoomBasicExample() {
  return (
    <ImageZoom
      src="/ihfb.png"
      alt="확대할 수 있는 학습 자료 예시"
      width={160}
      height={160}
      imageWidth={512}
      imageHeight={512}
      // 이 데모 preview 에서 LCP 로 감지된다 — eager loading 경고 방지.
      // (`next/image` 의 `priority` 는 deprecated — `preload` 로 대체됐다.)
      preload
    />
  );
}

다양한 비율 혼합

코드

Open in Playground

import { HStack } from '@mildang/styled-system/jsx';
import { ImageZoom } from '@mildang/design-system/ImageZoom';

const LANDSCAPE_IMAGE = 'https://picsum.photos/seed/landscape/1200/600';

const PORTRAIT_IMAGE = 'https://picsum.photos/seed/portrait/600/1200';

const SQUARE_IMAGE = 'https://picsum.photos/seed/square/800/800';

const ImageZoomMixedAspectRatiosExample = () => (
    <HStack gap="4" flexWrap="wrap" alignItems="start">
      <ImageZoom
        src={PORTRAIT_IMAGE}
        alt="Portrait"
        width={150}
        height={150}
        imageWidth={600}
        imageHeight={1200}
        borderRadius="md"
      />
      <ImageZoom
        src={SQUARE_IMAGE}
        alt="Square"
        width={150}
        height={150}
        imageWidth={800}
        imageHeight={800}
        borderRadius="md"
      />
      <ImageZoom
        src={LANDSCAPE_IMAGE}
        alt="Landscape"
        width={150}
        height={150}
        imageWidth={1200}
        imageHeight={600}
        borderRadius="md"
      />
    </HStack>
  );

export default ImageZoomMixedAspectRatiosExample;

Default

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ImageZoom } from '@mildang/design-system/ImageZoom';

const SAMPLE_IMAGE = 'https://picsum.photos/seed/zoom1/800/600';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    src: SAMPLE_IMAGE,
    alt: 'Landscape',
    width: 320,
    height: 240,
    imageWidth: 800,
    imageHeight: 600,
  }) } as ComponentProps<typeof ImageZoom>;

export default function ImageZoomDefaultExample(props: Partial<ComponentProps<typeof ImageZoom>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ImageZoom>;
  return <ImageZoom {...mergedProps} />;
}

CustomBorderRadius

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ImageZoom } from '@mildang/design-system/ImageZoom';

const SAMPLE_IMAGE = 'https://picsum.photos/seed/zoom1/800/600';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    src: SAMPLE_IMAGE,
    alt: 'Landscape with custom radius',
    width: 300,
    height: 200,
    imageWidth: 800,
    imageHeight: 600,
    borderRadius: '20',
  }) } as ComponentProps<typeof ImageZoom>;

export default function ImageZoomCustomBorderRadiusExample(props: Partial<ComponentProps<typeof ImageZoom>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ImageZoom>;
  return <ImageZoom {...mergedProps} />;
}

TopLeft

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ImageZoom } from '@mildang/design-system/ImageZoom';

const SAMPLE_IMAGE = 'https://picsum.photos/seed/zoom1/800/600';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    src: SAMPLE_IMAGE,
    alt: 'Top-left aligned landscape',
    width: 320,
    height: 240,
    imageWidth: 800,
    imageHeight: 600,
  }) } as ComponentProps<typeof ImageZoom>;

export default function ImageZoomTopLeftExample(props: Partial<ComponentProps<typeof ImageZoom>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ImageZoom>;
  return <ImageZoom {...mergedProps} />;
}

세로로 긴 이미지 (2:1 → contain)

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ImageZoom } from '@mildang/design-system/ImageZoom';

const PORTRAIT_IMAGE = 'https://picsum.photos/seed/portrait/600/1200';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    src: PORTRAIT_IMAGE,
    alt: 'Portrait image',
    width: 200,
    height: 200,
    imageWidth: 600,
    imageHeight: 1200,
  }) } as ComponentProps<typeof ImageZoom>;

export default function ImageZoomPortraitExample(props: Partial<ComponentProps<typeof ImageZoom>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ImageZoom>;
  return <ImageZoom {...mergedProps} />;
}

가로로 긴 이미지 (2:1 → contain)

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ImageZoom } from '@mildang/design-system/ImageZoom';

const LANDSCAPE_IMAGE = 'https://picsum.photos/seed/landscape/1200/600';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    src: LANDSCAPE_IMAGE,
    alt: 'Landscape image',
    width: 200,
    height: 200,
    imageWidth: 1200,
    imageHeight: 600,
  }) } as ComponentProps<typeof ImageZoom>;

export default function ImageZoomLandscapeExample(props: Partial<ComponentProps<typeof ImageZoom>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ImageZoom>;
  return <ImageZoom {...mergedProps} />;
}

정방형 이미지 (1:1)

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ImageZoom } from '@mildang/design-system/ImageZoom';

const SQUARE_IMAGE = 'https://picsum.photos/seed/square/800/800';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    src: SQUARE_IMAGE,
    alt: 'Square image',
    width: 200,
    height: 200,
    imageWidth: 800,
    imageHeight: 800,
  }) } as ComponentProps<typeof ImageZoom>;

export default function ImageZoomSquareExample(props: Partial<ComponentProps<typeof ImageZoom>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ImageZoom>;
  return <ImageZoom {...mergedProps} />;
}