feat: image미리보기 순서변경 구현

components/dragablePreview.tsx

@@ -0,0 +1,121 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+import { ImagePreviewType } from './imageInputForm';
+
+interface DragablePreviewProps {
+  preview: ImagePreviewType[];
+  setPreview: Dispatch<SetStateAction<ImagePreviewType[]>>;
+  fileList: File[];
+  setFileList: Dispatch<SetStateAction<File[]>>;
+}
+
+export default function DragablePreview({
+  preview,
+  setPreview,
+  fileList,
+  setFileList,
+}: DragablePreviewProps) {
+  const [nowDragIndex, setNowDragIndex] = useState(-1);
+
+  const deleteImage = (index: number) => {
+    const newFileList = [...fileList];
+    const newPreview = [...preview];
+    newFileList.splice(index, 1);
+    newPreview.splice(index, 1);
+    setFileList(newFileList);
+    setPreview(newPreview);
+  };
+  const onDragStart = (
+    e: React.DragEvent<HTMLDivElement>,
+    selectedIndex: number
+  ) => {
+    setNowDragIndex(selectedIndex);
+  };
+  const onDrop = (
+    e: React.DragEvent<HTMLDivElement>,
+    selectedIndex: number
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (nowDragIndex < 0) return;
+
+    const newFileList = [...fileList];
+    const selectedFile = newFileList.splice(nowDragIndex, 1);
+    newFileList.splice(
+      selectedIndex > nowDragIndex ? selectedIndex - 1 : selectedIndex,
+      0,
+      selectedFile[0]
+    );
+
+    const newPreview = [...preview];
+    const selectedPreview = newPreview.splice(nowDragIndex, 1);
+    newPreview.splice(
+      selectedIndex > nowDragIndex ? selectedIndex - 1 : selectedIndex,
+      0,
+      selectedPreview[0]
+    );
+
+    setFileList(newFileList);
+    setPreview(newPreview);
+    setNowDragIndex(-1);
+  };
+  return (
+    <div className="flex h-20 w-full overflow-x-auto mb-5 relative">
+      {preview.map((item, index) => (
+        <div key={index} className="h-full flex">
+          <div
+            className={
+              'w-5 relative flex justify-center items-center opacity-0'
+            }
+            onDrop={(e) => {
+              onDrop(e, index);
+              e.currentTarget.style.opacity = '0';
+            }}
+            onDragOver={(e) => {
+              e.currentTarget.style.opacity = '100';
+            }}
+            onDragLeave={(e) => {
+              e.currentTarget.style.opacity = '0';
+            }}
+          >
+            <div className="w-1 rounded bg-black h-full"></div>
+          </div>
+          <div
+            key={index}
+            className="relative flex-shrink-0 h-full"
+            onDragStart={(e) => onDragStart(e, index)}
+          >
+            <img
+              src={item.src}
+              alt={item.alt}
+              className="h-full w-auto rounded-sm mb-4"
+            />
+
+            <div
+              className="absolute border bg-white rounded-sm top-0 right-0 text-sm w-5 text-center cursor-pointer"
+              onClick={() => {
+                deleteImage(index);
+              }}
+            >
+              x
+            </div>
+          </div>
+        </div>
+      ))}
+      <div
+        className={'w-5 relative flex justify-center items-center opacity-0'}
+        onDrop={(e) => {
+          onDrop(e, preview.length);
+          e.currentTarget.style.opacity = '0';
+        }}
+        onDragOver={(e) => {
+          e.currentTarget.style.opacity = '100';
+        }}
+        onDragLeave={(e) => {
+          e.currentTarget.style.opacity = '0';
+        }}
+      >
+        <div className="w-1 rounded bg-black h-full"></div>
+      </div>
+    </div>
+  );
+}

components/imageInputForm.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import DragablePreview from './dragablePreview';
 import { FormLabel } from './ui/form';
 import { Input } from './ui/input';
 
@@ -28,7 +29,6 @@ export default function ImageInputForm({
         alt: 'loading',
       })),
     ];
-    console.log('!', previews);
     files.forEach((file, index) => {
       const reader = new FileReader();
       reader.readAsDataURL(file);
@@ -52,15 +52,6 @@ export default function ImageInputForm({
     updatePreview(files);
   };
 
-  const deleteImage = (index: number) => {
-    const newFileList = [...fileList];
-    const newPreview = [...preview];
-    newFileList.splice(index, 1);
-    newPreview.splice(index, 1);
-    setFileList(newFileList);
-    setPreview(newPreview);
-  };
-
   const onDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -90,7 +81,6 @@ export default function ImageInputForm({
     updatePreview(newFiles);
     setIsDragging(false);
   };
-  console.log(fileList);
   return (
     <div
       {...props}
@@ -118,28 +108,12 @@ export default function ImageInputForm({
         파일 선택
       </label>
 
-      {preview.length > 0 && (
-        <div className="flex gap-3 w-full overflow-x-auto mb-5">
-          {preview.map((item, index) => (
-            <div key={index} className="relative flex-shrink-0">
-              <img
-                src={item.src}
-                alt={item.alt}
-                className="h-20 w-auto rounded-sm mb-4"
-              />
-
-              <div
-                className="absolute border bg-white rounded-sm top-0 right-0 text-sm w-5 text-center cursor-pointer"
-                onClick={() => {
-                  deleteImage(index);
-                }}
-              >
-                x
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
+      <DragablePreview
+        fileList={fileList}
+        setFileList={setFileList}
+        preview={preview}
+        setPreview={setPreview}
+      />
     </div>
   );
 }