Merge pull request #154 from bsideproject/moon

[feat] FileUpload -> Close 기능 추가
bsideproject · Sep 20, 2023 · fef6847 · fef6847
2 parents 4e5b428 + 5881e74
commit fef6847
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/components/File/FileUpload.tsx b/components/File/FileUpload.tsx
@@ -2,6 +2,7 @@ import React, { forwardRef, useEffect, useImperativeHandle } from "react";
 import ImageUploading, { ImageListType } from "react-images-uploading";
 import Rectangle from '@/public/icons/rectangle.svg';
 import RectangleCamera from '@/public/icons/rectangleCamera.svg';
+import Close2 from '@/public/icons/close2.svg';
 
 
 export default function FileUpload() {
@@ -42,12 +43,13 @@ export default function FileUpload() {
             &nbsp;
             {/* <button onClick={onImageRemoveAll}>Remove all images</button> */}
             {imageList.map((image, index) => (
-              <div key={index} className="image-item">
-                <img src={image.dataURL} alt="" width="100" />
-                <div className="image-item__btn-wrapper">
-                  {/* <button onClick={() => onImageUpdate(index)}>Update</button> */}
-                  <button onClick={() => onImageRemove(index)}>Remove</button>
-                </div>
+              <div key={index} className="image-item relative w-[100px] h-[100px] ">
+                <img src={image.dataURL} alt="" className="top-0 left-0 w-full h-full object-cover" />
+                <button 
+                  className="absolute top-0 right-0 bg-g5 text-g1 w-5 h-5 -translate-y-[0.5%] cursor-pointer leading-[4px]" 
+                  onClick={() => onImageRemove(index)}
+                > x
+                </button>
               </div>
             ))}
           </div>