이미지 갤러리

    {/* 필터 버튼 */}
    <div className="flex space-x-4 mb-8">
      {['all', 'nature', 'city', 'people'].map((category) => (
        <button
          key={category}
          onClick={() => setFilter(category)}
          className={`px-4 py-2 rounded-lg transition ${
            filter === category
              ? 'bg-blue-600 text-white'
              : 'bg-white text-gray-700 hover:bg-gray-100'
          }`}
        >
          {category === 'all' ? '전체' :
           category === 'nature' ? '자연' :
           category === 'city' ? '도시' : '인물'}
        </button>
      ))}
    </div>
    
    {/* 갤러리 그리드 */}
    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
      {filteredImages.map((image) => (
        <div
          key={image.id}
          className="relative aspect-square cursor-pointer group"
          onClick={() => setSelectedImage(image)}
        >
          <Image
            src={image.src}
            alt={image.alt}
            fill
            style={{ objectFit: 'cover' }}
            className="rounded-lg group-hover:brightness-90 transition"
            sizes="(max-width: 768px) 50vw, 33vw"
          />
          <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition rounded-lg" />
        </div>
      ))}
    </div>
    
    {/* 라이트박스 */}
    {selectedImage && (
      <div 
        className="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4"
        onClick={() => setSelectedImage(null)}
      >
        <div className="relative max-w-4xl max-h-[90vh]">
          <Image
            src={selectedImage.src}
            alt={selectedImage.alt}
            width={1200}
            height={800}
            style={{ objectFit: 'contain' }}
            className="rounded-lg"
          />
          <button
            onClick={() => setSelectedImage(null)}
            className="absolute top-4 right-4 text-white bg-black bg-opacity-50 rounded-full p-2 hover:bg-opacity-70"
          >
            ✕
          </button>
        </div>
      </div>
    )}
  </div>
</div>

) } 이미지 업로드와 미리보기 사용자가 이미지를 업로드하고 미리볼 수 있는 기능을 구현해봅시다:

jsx 'use client'

import { useState } from 'react' import Image from 'next/image'

export default function ImageUpload() { const [selectedFiles, setSelectedFiles] = useState([]) const [uploadProgress, setUploadProgress] = useState({})

const handleFileSelect = (e) => { const files = Array.from(e.target.files)

const newFiles = files.map(file => ({
  id: Date.now() + Math.random(),
  file,
  preview: URL.createObjectURL(file),
  name: file.name,
  size: file.size
}))

setSelectedFiles([...selectedFiles, ...newFiles])

}

const removeFile = (id) => { setSelectedFiles(selectedFiles.filter(f => f.id !== id)) }

const formatFileSize = (bytes) => { if (bytes === 0) return '0 Bytes' const k = 1024 const sizes = ['Bytes', 'KB', 'MB', 'GB'] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i] }

const uploadFiles = async () => { for (const fileData of selectedFiles) { // 실제 업로드 시뮬레이션 setUploadProgress(prev => ({ ...prev, [fileData.id]: 0 }))

  for (let i = 0; i <= 100; i += 10) {
    await new Promise(resolve => setTimeout(resolve, 100))
    setUploadProgress(prev => ({ ...prev, [fileData.id]: i }))
  }
}

}

return (

    {/* 업로드 영역 */}
    <div className="bg-white rounded-lg shadow-md p-8 mb-8">
      <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
        <input
          type="file"
          multiple
          accept="image/*"
          onChange={handleFileSelect}
          className="hidden"
          id="file-input"
        />
        <label
          htmlFor="file-input"
          className="cursor-pointer"
        >
          <div className="text-6xl mb-4">📸</div>
          <p className="text-xl font-medium mb-2">
            클릭하여 이미지 선택
          </p>
          <p className="text-gray-500">
            또는 파일을 여기로 드래그하세요
          </p>
          <p className="text-sm text-gray-400 mt-2">
            PNG, JPG, GIF (최대 10MB)
          </p>
        </label>
      </div>
    </div>
    
    {/* 미리보기 */}
    {selectedFiles.length > 0 && (
      <div className="bg-white rounded-lg shadow-md p-6">
        <h2 className="text-xl font-semibold mb-4">
          선택된 파일 ({selectedFiles.length})
        </h2>
        
        <div className="space-y-4">
          {selectedFiles.map((fileData) => (
            <div key={fileData.id} className="flex items-center space-x-4 p-4 border rounded-lg">
              <div className="relative w-20 h-20">
                <Image
                  src={fileData.preview}
                  alt={fileData.name}
                  fill
                  style={{ objectFit: 'cover' }}
                  className="rounded"
                />
              </div>
              
              <div className="flex-1">
                <p className="font-medium">{fileData.name}</p>
                <p className="text-sm text-gray-500">
                  {formatFileSize(fileData.size)}
                </p>
                
                {uploadProgress[fileData.id] !== undefined && (
                  <div className="mt-2">
                    <div className="w-full bg-gray-200 rounded-full h-2">
                      <div
                        className="bg-blue-600 h-2 rounded-full transition-all"
                        style={{ width: `${uploadProgress[fileData.id]}%` }}
                      />
                    </div>
                  </div>
                )}
              </div>
              
              <button
                onClick={() => removeFile(fileData.id)}
                className="text-red-500 hover:text-red-700"
              >
                삭제
              </button>
            </div>
          ))}
        </div>
        
        <button
          onClick={uploadFiles}
          className="mt-6 w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700"
        >
          업로드 시작
        </button>
      </div>
    )}
  </div>
</div>