ImageUploader 클래스 (GD 버전)

<?php
class ImageUploader {
    private $upload_dir = 'uploads/';
    private $allowed_types = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
    private $max_size = 5242880; // 5MB
    private $max_width = 4000;
    private $max_height = 4000;
    
    public function __construct($upload_dir = null) {
        if ($upload_dir) {
            $this->upload_dir = rtrim($upload_dir, '/') . '/';
        }
        
        // 업로드 디렉토리 생성
        if (!is_dir($this->upload_dir)) {
            mkdir($this->upload_dir, 0755, true);
        }
    }
    
    public function upload($file_input_name) {
        // 파일 존재 확인
        if (!isset($_FILES[$file_input_name]) || $_FILES[$file_input_name]['error'] !== UPLOAD_ERR_OK) {
            throw new Exception('파일 업로드 오류');
        }
        
        $file = $_FILES[$file_input_name];
        
        // 보안 검증
        $this->validateFile($file);
        
        // 파일 정보
        $file_ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
        $new_filename = $this->generateFilename($file_ext);
        $upload_path = $this->upload_dir . $new_filename;
        
        // 임시 파일 이동
        if (!move_uploaded_file($file['tmp_name'], $upload_path)) {
            throw new Exception('파일 저장 실패');
        }
        
        // 이미지 최적화
        $this->optimizeImage($upload_path);
        
        // 썸네일 생성
        $thumbnail_path = $this->createThumbnail($upload_path);
        
        return [
            'success' => true,
            'filename' => $new_filename,
            'path' => $upload_path,
            'thumbnail' => $thumbnail_path,
            'url' => $this->getUrl($new_filename),
            'size' => filesize($upload_path)
        ];
    }
    
    private function validateFile($file) {
        // 파일 크기 검증
        if ($file['size'] > $this->max_size) {
            throw new Exception('파일 크기가 너무 큽니다. (최대 5MB)');
        }
        
        // MIME 타입 검증
        $finfo = finfo_open(FILEINFO_MIME_TYPE);
        $mime_type = finfo_file($finfo, $file['tmp_name']);
        finfo_close($finfo);
        
        if (!in_array($mime_type, $this->allowed_types)) {
            throw new Exception('허용되지 않는 파일 형식입니다.');
        }
        
        // 실제 이미지 파일인지 검증
        $image_info = getimagesize($file['tmp_name']);
        if ($image_info === false) {
            throw new Exception('유효한 이미지 파일이 아닙니다.');
        }
        
        // 이미지 크기 제한
        if ($image_info[0] > $this->max_width || $image_info[1] > $this->max_height) {
            throw new Exception('이미지 해상도가 너무 큽니다.');
        }
        
        return true;
    }
    
    private function generateFilename($extension) {
        return uniqid('img_', true) . '_' . time() . '.' . $extension;
    }
    
    private function optimizeImage($file_path) {
        $image_info = getimagesize($file_path);
        $image_type = $image_info[2];
        
        // 이미지 타입별 로드
        switch ($image_type) {
            case IMAGETYPE_JPEG:
                $image = imagecreatefromjpeg($file_path);
                break;
            case IMAGETYPE_PNG:
                $image = imagecreatefrompng($file_path);
                break;
            case IMAGETYPE_GIF:
                $image = imagecreatefromgif($file_path);
                break;
            case IMAGETYPE_WEBP:
                $image = imagecreatefromwebp($file_path);
                break;
            default:
                return false;
        }
        
        // 큰 이미지는 리사이징
        $width = imagesx($image);
        $height = imagesy($image);
        
        if ($width > 1920 || $height > 1920) {
            $ratio = min(1920 / $width, 1920 / $height);
            $new_width = round($width * $ratio);
            $new_height = round($height * $ratio);
            
            $resized = imagecreatetruecolor($new_width, $new_height);
            
            // PNG 투명도 처리
            if ($image_type == IMAGETYPE_PNG) {
                imagealphablending($resized, false);
                imagesavealpha($resized, true);
            }
            
            imagecopyresampled($resized, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
            imagedestroy($image);
            $image = $resized;
        }
        
        // 최적화된 품질로 저장
        switch ($image_type) {
            case IMAGETYPE_JPEG:
                imagejpeg($image, $file_path, 85);
                break;
            case IMAGETYPE_PNG:
                imagepng($image, $file_path, 8);
                break;
            case IMAGETYPE_GIF:
                imagegif($image, $file_path);
                break;
            case IMAGETYPE_WEBP:
                imagewebp($image, $file_path, 85);
                break;
        }
        
        imagedestroy($image);
        return true;
    }
    
    private function createThumbnail($source_path) {
        $thumb_dir = $this->upload_dir . 'thumbs/';
        if (!is_dir($thumb_dir)) {
            mkdir($thumb_dir, 0755, true);
        }
        
        $filename = basename($source_path);
        $thumb_path = $thumb_dir . 'thumb_' . $filename;
        
        $image_info = getimagesize($source_path);
        $image_type = $image_info[2];
        
        // 원본 로드
        switch ($image_type) {
            case IMAGETYPE_JPEG:
                $source = imagecreatefromjpeg($source_path);
                break;
            case IMAGETYPE_PNG:
                $source = imagecreatefrompng($source_path);
                break;
            default:
                return null;
        }
        
        // 300x300 썸네일
        $thumb_size = 300;
        $orig_width = imagesx($source);
        $orig_height = imagesy($source);
        
        $crop_size = min($orig_width, $orig_height);
        $crop_x = ($orig_width - $crop_size) / 2;
        $crop_y = ($orig_height - $crop_size) / 2;
        
        $thumbnail = imagecreatetruecolor($thumb_size, $thumb_size);
        imagecopyresampled($thumbnail, $source, 0, 0, $crop_x, $crop_y, $thumb_size, $thumb_size, $crop_size, $crop_size);
        
        imagejpeg($thumbnail, $thumb_path, 80);
        
        imagedestroy($source);
        imagedestroy($thumbnail);
        
        return $thumb_path;
    }
    
    private function getUrl($filename) {
        return '/' . $this->upload_dir . $filename;
    }
}

// 사용 예시
try {
    $uploader = new ImageUploader('uploads/images/');
    $result = $uploader->upload('user_photo');
    
    echo "업로드 성공!<br>";
    echo "파일명: " . $result['filename'] . "<br>";
    echo "URL: " . $result['url'] . "<br>";
    echo "크기: " . round($result['size'] / 1024, 2) . " KB<br>";
    echo "썸네일: " . $result['thumbnail'];
    
} catch (Exception $e) {
    echo "오류: " . $e->getMessage();
}
?>

HTML + JavaScript

<div id="upload-area" style="border: 2px dashed #ccc; padding: 40px; text-align: center; cursor: pointer;">
    <p>클릭하거나 파일을 드래그하세요 📁</p>
    <input type="file" id="file-input" accept="image/*" style="display: none;">
</div>

<div id="preview-area" style="margin-top: 20px;"></div>
<div id="progress-bar" style="display: none; margin-top: 10px;">
    <div style="background: #e9ecef; height: 20px; border-radius: 10px;">
        <div id="progress-fill" style="background: #28a745; height: 100%; width: 0%; border-radius: 10px; transition: width 0.3s;"></div>
    </div>
</div>

<script>
const uploadArea = document.getElementById('upload-area');
const fileInput = document.getElementById('file-input');
const previewArea = document.getElementById('preview-area');
const progressBar = document.getElementById('progress-bar');
const progressFill = document.getElementById('progress-fill');

// 클릭 업로드
uploadArea.addEventListener('click', () => fileInput.click());

// 드래그 앤 드롭
uploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    uploadArea.style.borderColor = '#28a745';
});

uploadArea.addEventListener('dragleave', () => {
    uploadArea.style.borderColor = '#ccc';
});

uploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    uploadArea.style.borderColor = '#ccc';
    
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        handleFileUpload(files[0]);
    }
});

fileInput.addEventListener('change', (e) => {
    if (e.target.files.length > 0) {
        handleFileUpload(e.target.files[0]);
    }
});

function handleFileUpload(file) {
    // 파일 크기 체크
    if (file.size > 5 * 1024 * 1024) {
        alert('파일 크기는 5MB를 초과할 수 없습니다.');
        return;
    }
    
    // 이미지 타입 체크
    if (!file.type.startsWith('image/')) {
        alert('이미지 파일만 업로드 가능합니다.');
        return;
    }
    
    // 미리보기
    const reader = new FileReader();
    reader.onload = (e) => {
        previewArea.innerHTML = `<img src="${e.target.result}" style="max-width: 300px; border-radius: 8px;">`;
    };
    reader.readAsDataURL(file);
    
    // 업로드
    const formData = new FormData();
    formData.append('user_photo', file);
    
    const xhr = new XMLHttpRequest();
    
    // 진행률 표시
    xhr.upload.addEventListener('progress', (e) => {
        if (e.lengthComputable) {
            const percent = (e.loaded / e.total) * 100;
            progressBar.style.display = 'block';
            progressFill.style.width = percent + '%';
        }
    });
    
    // 완료
    xhr.addEventListener('load', () => {
        if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            if (response.success) {
                alert('업로드 성공! 파일명: ' + response.filename);
                progressBar.style.display = 'none';
            } else {
                alert('업로드 실패: ' + response.message);
            }
        }
    });
    
    // 오류
    xhr.addEventListener('error', () => {
        alert('업로드 중 오류가 발생했습니다.');
        progressBar.style.display = 'none';
    });
    
    xhr.open('POST', 'upload_handler.php');
    xhr.send(formData);
}
</script>

upload_handler.php

<?php
header('Content-Type: application/json');

try {
    require_once 'ImageUploader.class.php';
    
    $uploader = new ImageUploader('uploads/images/');
    $result = $uploader->upload('user_photo');
    
    echo json_encode($result);
    
} catch (Exception $e) {
    echo json_encode([
        'success' => false,
        'message' => $e->getMessage()
    ]);
}
?>

ProfileImageHandler.php

<?php
class ProfileImageHandler {
    private $upload_dir = 'uploads/profiles/';
    private $allowed_types = ['image/jpeg', 'image/png', 'image/webp'];
    private $max_size = 5242880; // 5MB
    private $sizes = [
        'original' => 1200,
        'large' => 800,
        'medium' => 400,
        'small' => 200,
        'thumb' => 100
    ];
    
    public function __construct() {
        foreach (['original', 'large', 'medium', 'small', 'thumb'] as $size) {
            $dir = $this->upload_dir . $size . '/';
            if (!is_dir($dir)) {
                mkdir($dir, 0755, true);
            }
        }
    }
    
    public function uploadProfileImage($user_id, $file_input) {
        if (!isset($_FILES[$file_input])) {
            throw new Exception('파일이 업로드되지 않았습니다.');
        }
        
        $file = $_FILES[$file_input];
        
        if ($file['error'] !== UPLOAD_ERR_OK) {
            throw new Exception('파일 업로드 오류: ' . $this->getUploadErrorMessage($file['error']));
        }
        
        // 검증
        $this->validateImage($file);
        
        // 기존 프로필 이미지 삭제
        $this->deleteExistingImages($user_id);
        
        // 새 파일명 생성
        $filename = $this->generateFilename($user_id);
        
        // 원본 저장
        $original_path = $this->upload_dir . 'original/' . $filename;
        if (!move_uploaded_file($file['tmp_name'], $original_path)) {
            throw new Exception('파일 저장 실패');
        }
        
        // 여러 크기 생성
        $this->generateSizes($original_path, $filename);
        
        // 데이터베이스 업데이트
        $this->updateDatabase($user_id, $filename);
        
        return [
            'success' => true,
            'filename' => $filename,
            'urls' => $this->getImageUrls($filename)
        ];
    }
    
    private function validateImage($file) {
        // 크기 검증
        if ($file['size'] > $this->max_size) {
            throw new Exception('파일 크기는 5MB를 초과할 수 없습니다.');
        }
        
        // MIME 타입 검증
        $finfo = finfo_open(FILEINFO_MIME_TYPE);
        $mime = finfo_file($finfo, $file['tmp_name']);
        finfo_close($finfo);
        
        if (!in_array($mime, $this->allowed_types)) {
            throw new Exception('허용되지 않는 파일 형식입니다.');
        }
        
        // 실제 이미지 검증
        $image_info = getimagesize($file['tmp_name']);
        if ($image_info === false) {
            throw new Exception('유효한 이미지 파일이 아닙니다.');
        }
        
        // 최소 크기 검증
        if ($image_info[0] < 200 || $image_info[1] < 200) {
            throw new Exception('이미지는 최소 200x200 픽셀 이상이어야 합니다.');
        }
        
        return true;
    }
    
    private function generateFilename($user_id) {
        return 'user_' . $user_id . '_' . time() . '.jpg';
    }
    
    private function generateSizes($original_path, $filename) {
        foreach ($this->sizes as $size_name => $max_size) {
            if ($size_name === 'original') continue;
            
            $output_path = $this->upload_dir . $size_name . '/' . $filename;
            
            if ($size_name === 'thumb') {
                // 썸네일은 정사각형 크롭
                $this->createSquareThumbnail($original_path, $output_path, $max_size);
            } else {
                // 나머지는 비율 유지 리사이징
                $this->resizeImage($original_path, $output_path, $max_size);
            }
        }
    }
    
    private function resizeImage($source, $destination, $max_size) {
        list($width, $height, $type) = getimagesize($source);
        
        // 이미 작으면 복사만
        if ($width <= $max_size && $height <= $max_size) {
            copy($source, $destination);
            return;
        }
        
        // 비율 계산
        $ratio = min($max_size / $width, $max_size / $height);
        $new_width = round($width * $ratio);
        $new_height = round($height * $ratio);
        
        // 이미지 처리
        $src_image = imagecreatefromjpeg($source);
        $dst_image = imagecreatetruecolor($new_width, $new_height);
        
        imagecopyresampled(
            $dst_image, $src_image,
            0, 0, 0, 0,
            $new_width, $new_height,
            $width, $height
        );
        
        // 샤프닝 적용
        imagefilter($dst_image, IMG_FILTER_SHARPEN);
        
        imagejpeg($dst_image, $destination, 90);
        
        imagedestroy($src_image);
        imagedestroy($dst_image);
    }
    
    private function createSquareThumbnail($source, $destination, $size) {
        list($width, $height) = getimagesize($source);
        
        $src_image = imagecreatefromjpeg($source);
        
        // 중앙 크롭
        $crop_size = min($width, $height);
        $crop_x = ($width - $crop_size) / 2;
        $crop_y = ($height - $crop_size) / 2;
        
        $dst_image = imagecreatetruecolor($size, $size);
        
        imagecopyresampled(
            $dst_image, $src_image,
            0, 0, $crop_x, $crop_y,
            $size, $size,
            $crop_size, $crop_size
        );
        
        imagejpeg($dst_image, $destination, 85);
        
        imagedestroy($src_image);
        imagedestroy($dst_image);
    }
    
    private function deleteExistingImages($user_id) {
        $pattern = 'user_' . $user_id . '_*.jpg';
        
        foreach (['original', 'large', 'medium', 'small', 'thumb'] as $size) {
            $files = glob($this->upload_dir . $size . '/' . $pattern);
            foreach ($files as $file) {
                if (file_exists($file)) {
                    unlink($file);
                }
            }
        }
    }
    
    private function updateDatabase($user_id, $filename) {
        // 실제 프로젝트에서는 PDO나 mysqli 사용
        $db = new PDO('mysql:host=localhost;dbname=mydb', 'user', 'pass');
        
        $stmt = $db->prepare("
            UPDATE users 
            SET profile_image = :filename, 
                updated_at = NOW() 
            WHERE id = :user_id
        ");
        
        $stmt->execute([
            'filename' => $filename,
            'user_id' => $user_id
        ]);
    }
    
    private function getImageUrls($filename) {
        $urls = [];
        foreach (array_keys($this->sizes) as $size) {
            $urls[$size] = '/' . $this->upload_dir . $size . '/' . $filename;
        }
        return $urls;
    }
    
    private function getUploadErrorMessage($error_code) {
        $errors = [
            UPLOAD_ERR_INI_SIZE => '파일이 php.ini의 upload_max_filesize를 초과합니다.',
            UPLOAD_ERR_FORM_SIZE => '파일이 MAX_FILE_SIZE를 초과합니다.',
            UPLOAD_ERR_PARTIAL => '파일이 부분적으로만 업로드되었습니다.',
            UPLOAD_ERR_NO_FILE => '파일이 업로드되지 않았습니다.',
            UPLOAD_ERR_NO_TMP_DIR => '임시 폴더가 없습니다.',
            UPLOAD_ERR_CANT_WRITE => '디스크에 쓰기 실패했습니다.',
            UPLOAD_ERR_EXTENSION => 'PHP 확장이 업로드를 중단했습니다.'
        ];
        
        return $errors[$error_code] ?? '알 수 없는 오류';
    }
    
    public function getProfileImage($user_id, $size = 'medium') {
        $db = new PDO('mysql:host=localhost;dbname=mydb', 'user', 'pass');
        
        $stmt = $db->prepare("SELECT profile_image FROM users WHERE id = :user_id");
        $stmt->execute(['user_id' => $user_id]);
        
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        
        if ($result && $result['profile_image']) {
            return '/' . $this->upload_dir . $size . '/' . $result['profile_image'];
        }
        
        // 기본 이미지 반환
        return '/assets/default-avatar.png';
    }
}

// 사용 예시
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_SESSION['user_id'])) {
    try {
        $handler = new ProfileImageHandler();
        $result = $handler->uploadProfileImage($_SESSION['user_id'], 'profile_photo');
        
        echo json_encode($result);
        
    } catch (Exception $e) {
        http_response_code(400);
        echo json_encode([
            'success' => false,
            'message' => $e->getMessage()
        ]);
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>프로필 사진 업로드</title>
    <style>
        .profile-upload-container {
            max-width: 500px;
            margin: 50px auto;
            text-align: center;
        }
        
        .profile-preview {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 20px auto;
            overflow: hidden;
            border: 4px solid #e9ecef;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .profile-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .upload-btn {
            background: #007bff;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .upload-btn:hover {
            background: #0056b3;
        }
        
        .progress-container {
            width: 100%;
            height: 30px;
            background: #e9ecef;
            border-radius: 15px;
            margin: 20px 0;
            overflow: hidden;
            display: none;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #007bff, #0056b3);
            width: 0%;
            transition: width 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="profile-upload-container">
        <h2>프로필 사진 변경</h2>
        
        <div class="profile-preview" id="preview">
            <img src="/assets/default-avatar.png" alt="Profile" id="preview-img">
        </div>
        
        <input type="file" id="file-input" accept="image/*" style="display: none;">
        <button class="upload-btn" onclick="document.getElementById('file-input').click()">
            📷 사진 선택
        </button>
        
        <div class="progress-container" id="progress-container">
            <div class="progress-bar" id="progress-bar">0%</div>
        </div>
        
        <p id="message" style="margin-top: 20px; color: #6c757d;"></p>
    </div>
    
    <script>
        const fileInput = document.getElementById('file-input');
        const previewImg = document.getElementById('preview-img');
        const progressContainer = document.getElementById('progress-container');
        const progressBar = document.getElementById('progress-bar');
        const message = document.getElementById('message');
        
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            
            if (!file) return;
            
            // 파일 크기 체크
            if (file.size > 5 * 1024 * 1024) {
                alert('파일 크기는 5MB를 초과할 수 없습니다.');
                return;
            }
            
            // 이미지 타입 체크
            if (!file.type.startsWith('image/')) {
                alert('이미지 파일만 업로드 가능합니다.');
                return;
            }
            
            // 미리보기
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImg.src = e.target.result;
            };
            reader.readAsDataURL(file);
            
            // 업로드
            uploadImage(file);
        });
        
        function uploadImage(file) {
            const formData = new FormData();
            formData.append('profile_photo', file);
            
            const xhr = new XMLHttpRequest();
            
            // 진행률
            xhr.upload.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    const percent = Math.round((e.loaded / e.total) * 100);
                    progressContainer.style.display = 'block';
                    progressBar.style.width = percent + '%';
                    progressBar.textContent = percent + '%';
                }
            });
            
            // 완료
            xhr.addEventListener('load', function() {
                progressContainer.style.display = 'none';
                
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    
                    if (response.success) {
                        message.textContent = '✅ 프로필 사진이 변경되었습니다!';
                        message.style.color = '#28a745';
                        
                        // 실제 업로드된 이미지로 교체
                        setTimeout(() => {
                            previewImg.src = response.urls.medium + '?t=' + Date.now();
                        }, 500);
                    } else {
                        message.textContent = '❌ ' + response.message;
                        message.style.color = '#dc3545';
                    }
                } else {
                    message.textContent = '❌ 업로드 중 오류가 발생했습니다.';
                    message.style.color = '#dc3545';
                }
            });
            
            // 오류
            xhr.addEventListener('error', function() {
                progressContainer.style.display = 'none';
                message.textContent = '❌ 네트워크 오류가 발생했습니다.';
                message.style.color = '#dc3545';
            });
            
            xhr.open('POST', 'profile_upload.php');
            xhr.send(formData);
        }
    </script>
</body>
</html>