From e2b7330c5ed9cb4cffddc94a519761f9e80c3ff9 Mon Sep 17 00:00:00 2001
From: wallace <wallacegb94@gmail.com>
Date: Thu, 27 Nov 2025 01:00:36 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B5=90=EC=9C=A1=EA=B3=BC=EC=A0=95=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=AF=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EA=B8=B01?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/courses/CourseRegistrationModal.tsx | 205 +++++++++++++++---
 1 file changed, 180 insertions(+), 25 deletions(-)

diff --git a/src/app/admin/courses/CourseRegistrationModal.tsx b/src/app/admin/courses/CourseRegistrationModal.tsx
index 5c6daf3..c834bc7 100644
--- a/src/app/admin/courses/CourseRegistrationModal.tsx
+++ b/src/app/admin/courses/CourseRegistrationModal.tsx
@@ -3,6 +3,7 @@
 import React, { useState, useRef, useEffect, useMemo } from "react";
 import ModalCloseSvg from "@/app/svgs/closexsvg";
 import DropdownIcon from "@/app/svgs/dropdownicon";
+import CloseXOSvg from "@/app/svgs/closexo";
 import { getInstructors, type UserRow } from "@/app/admin/id/mockData";
 import { type Course } from "./mockData";
 
@@ -20,8 +21,12 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   // 강사 목록 가져오기
   const [instructors, setInstructors] = useState<UserRow[]>([]);
@@ -66,6 +71,9 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
       setIsDropdownOpen(false);
       setErrors({});
       setIsDeleteConfirmOpen(false);
+      setSelectedImage(null);
+      setPreviewUrl(null);
+      setIsDragging(false);
     }
   }, [open, editingCourse, instructors]);
 
@@ -135,6 +143,99 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
     setIsDeleteConfirmOpen(false);
   };
 
+  // 파일 유효성 검사
+  const validateImageFile = (file: File): string | null => {
+    const maxSize = 30 * 1024 * 1024; // 30MB
+    const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg'];
+    
+    if (!allowedTypes.includes(file.type)) {
+      return "PNG 또는 JPG 파일만 업로드 가능합니다.";
+    }
+    
+    if (file.size > maxSize) {
+      return "파일 크기는 30MB 미만이어야 합니다.";
+    }
+    
+    return null;
+  };
+
+  // 이미지 파일 처리
+  const handleImageFile = (file: File) => {
+    const error = validateImageFile(file);
+    if (error) {
+      setErrors((prev) => ({ ...prev, image: error }));
+      return;
+    }
+
+    setSelectedImage(file);
+    setErrors((prev) => {
+      const next = { ...prev };
+      delete next.image;
+      return next;
+    });
+
+    // 미리보기 URL 생성
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setPreviewUrl(reader.result as string);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  // 파일 선택 핸들러
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      handleImageFile(file);
+    }
+  };
+
+  // 클릭으로 파일 선택
+  const handleImageAreaClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  // 드래그 오버 핸들러
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  // 드래그 리브 핸들러
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  // 드롭 핸들러
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const file = e.dataTransfer.files?.[0];
+    if (file) {
+      handleImageFile(file);
+    }
+  };
+
+  // 이미지 삭제 핸들러
+  const handleRemoveImage = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedImage(null);
+    setPreviewUrl(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    setErrors((prev) => {
+      const next = { ...prev };
+      delete next.image;
+      return next;
+    });
+  };
+
   if (!open) return null;
 
   return (
@@ -281,32 +382,86 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
                     </span>
                   </div>
                 </div>
-                <div className="bg-gray-50 border border-[#dee1e6] border-dashed h-[192px] rounded-[8px] flex flex-col items-center justify-center gap-3 cursor-pointer hover:bg-gray-100 transition-colors px-0 py-4">
-                  <div className="w-10 h-10 flex items-center justify-center shrink-0">
-                    <svg
-                      width="40"
-                      height="40"
-                      viewBox="0 0 40 40"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M20 13.3333V26.6667M13.3333 20H26.6667"
-                        stroke="#8C95A1"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                  </div>
-                  <div className="text-center">
-                    <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] whitespace-pre">
-                      (클릭하여 이미지 업로드)
-                      <br aria-hidden="true" />
-                      미첨부 시 기본 이미지가 노출됩니다.
-                    </p>
-                  </div>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/png,image/jpeg,image/jpg"
+                  onChange={handleFileSelect}
+                  className="hidden"
+                  aria-label="이미지 파일 선택"
+                />
+                <div
+                  onClick={handleImageAreaClick}
+                  onDragOver={handleDragOver}
+                  onDragLeave={handleDragLeave}
+                  onDrop={handleDrop}
+                  className={`border border-dashed min-h-[192px] rounded-[8px] flex flex-col items-center justify-center gap-3 cursor-pointer transition-colors px-0 relative overflow-hidden ${
+                    isDragging
+                      ? "bg-blue-50 border-blue-300"
+                      : previewUrl
+                      ? "bg-white border-[#dee1e6]"
+                      : "bg-gray-50 border-[#dee1e6] hover:bg-gray-100"
+                  }`}
+                >
+                  {previewUrl ? (
+                    <>
+                      <div className="absolute inset-0 flex items-center justify-center">
+                        <div className="relative flex items-start">
+                          <img
+                            src={previewUrl}
+                            alt="미리보기"
+                            className="h-[160px] w-auto object-contain"
+                          />
+                          <button
+                            type="button"
+                            onClick={handleRemoveImage}
+                            className="w-[18px] h-[18px] flex items-center justify-center ml-1 z-10 hover:opacity-80 transition-opacity shrink-0"
+                            aria-label="이미지 삭제"
+                          >
+                            <CloseXOSvg width={18} height={18} />
+                          </button>
+                        </div>
+                      </div>
+                      <div className="absolute inset-0 bg-black/0 hover:bg-black/20 transition-colors flex items-center justify-center my-4">
+                        <div className="text-center opacity-0 hover:opacity-100 transition-opacity">
+                          <p className="text-[14px] font-normal leading-[1.5] text-white">
+                            클릭하여 이미지 변경
+                          </p>
+                        </div>
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <div className="w-10 h-10 flex items-center justify-center shrink-0">
+                        <svg
+                          width="40"
+                          height="40"
+                          viewBox="0 0 40 40"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M20 13.3333V26.6667M13.3333 20H26.6667"
+                            stroke="#8C95A1"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                        </svg>
+                      </div>
+                      <div className="text-center">
+                        <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] whitespace-pre">
+                          (클릭하여 이미지 업로드)
+                          <br aria-hidden="true" />
+                          미첨부 시 기본 이미지가 노출됩니다.
+                        </p>
+                      </div>
+                    </>
+                  )}
                 </div>
+                {errors.image && (
+                  <p className="text-[#f64c4c] text-[13px] leading-tight">{errors.image}</p>
+                )}
               </div>
             </div>
           </div>