Building an Image Gallery: Claude Code 활용 가이드

이미지ギャラリーをClaude Code로 구축하기

이미지ギャラリーはポートフォリオ、ECサイト、写真共有앱など、多くの場面で必要になる컴포넌트です。Claude Code를 활용하면 マソンリー레이아웃、ライトボックス、지연 로딩を備えた高品質なギャラリーを효율적으로구축할 수 있습니다。

ギャラリーの要件を指示する

> 이미지ギャラリー컴포넌트を作って。
> マソンリー레이아웃、ライトボックス표시、
> 지연 로딩、카테고리フィルタリング를 구현해줘。
> 반응형대응で。

マソンリー레이아웃

// src/components/MasonryGallery.tsx
'use client';
import { useState, useMemo } from 'react';

interface GalleryImage {
  id: string;
  src: string;
  alt: string;
  width: number;
  height: number;
  category: string;
}

interface Props {
  images: GalleryImage[];
  columns?: number;
}

export function MasonryGallery({ images, columns = 3 }: Props) {
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);

  const categories = useMemo(
    () => [...new Set(images.map((img) => img.category))],
    [images]
  );

  const filteredImages = useMemo(
    () => selectedCategory
      ? images.filter((img) => img.category === selectedCategory)
      : images,
    [images, selectedCategory]
  );

  // カラムに이미지を分配
  const columnImages = useMemo(() => {
    const cols: GalleryImage[][] = Array.from({ length: columns }, () => []);
    filteredImages.forEach((img, i) => {
      cols[i % columns].push(img);
    });
    return cols;
  }, [filteredImages, columns]);

  return (
    <div>
      {/* カテゴリフィルター */}
      <div className="flex gap-2 mb-6 flex-wrap">
        <button
          onClick={() => setSelectedCategory(null)}
          className={`px-4 py-2 rounded-full text-sm ${
            !selectedCategory ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-800'
          }`}
        >
          すべて
        </button>
        {categories.map((cat) => (
          <button
            key={cat}
            onClick={() => setSelectedCategory(cat)}
            className={`px-4 py-2 rounded-full text-sm ${
              selectedCategory === cat ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-800 dark:text-gray-300'
            }`}
          >
            {cat}
          </button>
        ))}
      </div>

      {/* マソンリーグリッド */}
      <div className="flex gap-4">
        {columnImages.map((col, colIndex) => (
          <div key={colIndex} className="flex-1 flex flex-col gap-4">
            {col.map((img) => (
              <div
                key={img.id}
                onClick={() => setLightboxIndex(filteredImages.indexOf(img))}
                className="cursor-pointer overflow-hidden rounded-lg hover:opacity-90 transition"
              >
                <img
                  src={img.src}
                  alt={img.alt}
                  loading="lazy"
                  className="w-full h-auto"
                  style={{ aspectRatio: `${img.width}/${img.height}` }}
                />
              </div>
            ))}
          </div>
        ))}
      </div>

      {/* ライトボックス */}
      {lightboxIndex !== null && (
        <Lightbox
          images={filteredImages}
          currentIndex={lightboxIndex}
          onClose={() => setLightboxIndex(null)}
          onNavigate={setLightboxIndex}
        />
      )}
    </div>
  );
}

ライトボックス컴포넌트

// src/components/Lightbox.tsx
'use client';
import { useEffect, useCallback } from 'react';

interface Props {
  images: GalleryImage[];
  currentIndex: number;
  onClose: () => void;
  onNavigate: (index: number) => void;
}

export function Lightbox({ images, currentIndex, onClose, onNavigate }: Props) {
  const current = images[currentIndex];

  const handleKeyDown = useCallback((e: KeyboardEvent) => {
    switch (e.key) {
      case 'Escape':
        onClose();
        break;
      case 'ArrowLeft':
        if (currentIndex > 0) onNavigate(currentIndex - 1);
        break;
      case 'ArrowRight':
        if (currentIndex < images.length - 1) onNavigate(currentIndex + 1);
        break;
    }
  }, [currentIndex, images.length, onClose, onNavigate]);

  useEffect(() => {
    document.addEventListener('keydown', handleKeyDown);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
      document.body.style.overflow = '';
    };
  }, [handleKeyDown]);

  return (
    <div
      className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center"
      onClick={onClose}
    >
      <button onClick={onClose} className="absolute top-4 right-4 text-white text-3xl z-10">
        &times;
      </button>

      {currentIndex > 0 && (
        <button
          onClick={(e) => { e.stopPropagation(); onNavigate(currentIndex - 1); }}
          className="absolute left-4 text-white text-4xl hover:text-gray-300"
        >
          &#8249;
        </button>
      )}

      <img
        src={current.src}
        alt={current.alt}
        className="max-h-[90vh] max-w-[90vw] object-contain"
        onClick={(e) => e.stopPropagation()}
      />

      {currentIndex < images.length - 1 && (
        <button
          onClick={(e) => { e.stopPropagation(); onNavigate(currentIndex + 1); }}
          className="absolute right-4 text-white text-4xl hover:text-gray-300"
        >
          &#8250;
        </button>
      )}

      <div className="absolute bottom-4 text-white text-sm">
        {currentIndex + 1} / {images.length}
      </div>
    </div>
  );
}

성능최적화

이미지の성능を高める위해、다음의ポイントをClaude Code에추가で依頼합시다。

• srcset属性: デバイス幅に応じた이미지サイズの提供
• BlurHash: 로딩中のプレースホルダー표시
• WebP/AVIF: 次世代フォーマットの自動変換
• CDN配信: CloudflareやCloudFrontでの캐시

関連글

이미지処理全般は이미지処理の구현、성능최적화は성능최적화가이드도 참고하세요.

이미지최적화にはCloudinary（cloudinary.com）와 같은サービスの활용も検討するとよいでしょう。