Fix: 같은 폴더 다시 추가하면 선택 안되는 문제 수정, 파일 목록 대신 폴더 이름만 보이도록 변경

frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx

@@ -20,6 +20,7 @@ export default function ImageUploadFolderForm({
   const memberId = profile?.id || 0;
 
   const [files, setFiles] = useState<File[]>([]);
+  const [inputKey, setInputKey] = useState<number>(0);
   const [isDragging, setIsDragging] = useState<boolean>(false);
   const [isUploading, setIsUploading] = useState<boolean>(false);
   const [isUploaded, setIsUploaded] = useState<boolean>(false);
@@ -44,8 +45,6 @@ export default function ImageUploadFolderForm({
     if (newFiles) {
       setFiles((prevFiles) => [...prevFiles, ...Array.from(newFiles)]);
     }
-
-    event.target.value = '';
   };
 
   const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
@@ -62,8 +61,9 @@ export default function ImageUploadFolderForm({
     setIsDragging(false);
   };
 
-  const handleRemoveFile = (index: number) => {
+  const handleRemoveFile = () => {
-    setFiles(files.filter((_, i) => i != index));
+    setFiles([]);
+    setInputKey((prevKey) => prevKey + 1);
   };
 
   const handleUpload = async () => {
@@ -101,6 +101,7 @@ export default function ImageUploadFolderForm({
           )}
         >
           <input
+            key={inputKey}
             type="file"
             webkitdirectory=""
             // multiple
@@ -122,13 +123,10 @@ export default function ImageUploadFolderForm({
         </div>
       )}
       {files.length > 0 && (
-        <ul className="m-0 max-h-[260px] list-none overflow-y-auto p-0">
+        <div className={'flex items-center justify-between p-1'}>
-          {files.map((file, index) => (
+          <span className="truncate">
-            <li
+            {files[0].webkitRelativePath.substring(0, files[0].webkitRelativePath.indexOf('/'))} {}
-              key={index}
+          </span>
-              className="flex items-center justify-between p-1"
-            >
-              <span className="truncate">{file.webkitRelativePath || file.name}</span>
           {isUploading ? (
             <div className="p-2">
               {isUploaded ? (
@@ -154,7 +152,7 @@ export default function ImageUploadFolderForm({
           ) : (
             <button
               className={'cursor-pointer p-2'}
-                  onClick={() => handleRemoveFile(index)}
+              onClick={handleRemoveFile}
             >
               <X
                 color="red"
@@ -163,9 +161,7 @@ export default function ImageUploadFolderForm({
               />
             </button>
           )}
-            </li>
+        </div>
-          ))}
-        </ul>
       )}
       {isUploading ? (
         <Button