Refactor/#169: 이미지 상세 보기 상하 비대칭 문제 및 압축 값 조정 (#170)

* refactor: Image 상세보기 상하 대칭 조정

* refactor: 이미지 압축 최대 width, height 조정

* refactor: 이미지 수정 시 이미지 총 개수가 3개가 넘어가지 않도록 수정

* refactor: 이미지 업로드 개수가 3개 초과일 때 3번째까지만 올리고 나머지는 제거하면서 알럿을 띄우도록 로직 변경

기존에는 3개 초과할 시 이미지 올리는 로직 자체를 취소했음. 따라서 4개를 한 번에 드래그 해서 올릴 경우 알럿 이후 이미지가 올려지지 않음. 이를 개선한다.

src/pages/FeedDetail/components/ImageCarousel.tsx

@@ -80,9 +80,9 @@ const ImageCarousel = ({ imageUrls, initialIndex, onClose }: Props) => {
           }
         >
           {imageUrls.map((imageUrl, index) => (
-            <div key={index}>
-              <img src={imageUrl} alt={`${index}번째 이미지`} />
-            </div>
+            <ImageWrapper key={index}>
+              <Img src={imageUrl} alt={`${index}번째 이미지`} />
+            </ImageWrapper>
           ))}
         </Carousel>
       </ModalContent>
@@ -113,3 +113,16 @@ const ModalContent = styled.div`
   height: 100%;
   background: rgba(0, 0, 0, 1);
 `;
+
+const ImageWrapper = styled.div`
+  width: 100%;
+  max-width: 420px;
+  height: 100%;
+  max-height: calc(100dvh - 80px);
+`;
+
+const Img = styled.img`
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+`;

src/pages/Write/components/AddImages.tsx

@@ -15,15 +15,15 @@ const AddImages = ({ images, setImages }: Props) => {
   const { compressImages } = useCompressImage();
 
   const onChangeImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const currentImages = e.target.files;
+    const imageFileList = e.target.files;
 
-    if (!currentImages) return;
-    if (images.length + currentImages.length > 3) {
+    if (!imageFileList) return;
+    if (images.length + imageFileList.length > 3) {
       openAlert({ content: '이미지는 최대 3개까지 업로드 가능합니다.' });
-      return;
     }
 
-    const compressedImages = await compressImages(currentImages);
+    const addedImages = [...imageFileList].filter((_, idx) => idx < 3);
+    const compressedImages = await compressImages(addedImages);
     const imageObjectUrls = compressedImages.map((image) => URL.createObjectURL(image));
 
     setImages([...images, ...compressedImages]);

src/pages/Write/hooks/useCompressImage.ts

@@ -4,7 +4,7 @@ const useCompressImage = () => {
   const compressImage = async (file: File) => {
     const resizingBlob = await imageCompression(file, {
       maxSizeMB: 1,
-      maxWidthOrHeight: 750,
+      maxWidthOrHeight: 2200,
       useWebWorker: true,
     });
     const compressedImage = new File([resizingBlob], file.name, {
@@ -14,9 +14,9 @@ const useCompressImage = () => {
     return compressedImage;
   };
 
-  const compressImages = async (files: FileList) => {
+  const compressImages = async (files: File[]) => {
     const compressedImages = await Promise.all(
-      [...files].map((file) => new Promise((resolve) => resolve(compressImage(file)))),
+      files.map((file) => new Promise((resolve) => resolve(compressImage(file)))),
     );
 
     return compressedImages as File[];

src/pages/WriteEdit/WriteEdit.page.tsx

@@ -187,6 +187,7 @@ const WriteEditPage = () => {
 
       <UpdateImages
         images={images}
+        imageFiles={imageFiles}
         onAddImages={addImages}
         onDeleteImage={deleteImage}
         onDeleteImageFiles={deleteImageFiles}

src/pages/WriteEdit/components/UpdateImages.tsx

@@ -7,6 +7,7 @@ import { ImageResponse } from '../types';
 
 interface Props {
   images: ImageResponse[];
+  imageFiles: File[];
   onAddImages: (images: File[]) => void;
   onDeleteImage: (id: number) => void; // 서버에 있는 이미지
   onDeleteImageFiles: (index: number) => void; // 클라이언트에서 추가한 이미지
@@ -30,21 +31,21 @@ const FROM_SERVER_IMAGE = 'cloudfront';
 
 // let addId = -1;
 
-const UpdateImages = ({ images, onAddImages, onDeleteImage, onDeleteImageFiles }: Props) => {
+const UpdateImages = ({ images, imageFiles, onAddImages, onDeleteImage, onDeleteImageFiles }: Props) => {
   const openAlert = useAlert();
   const { compressImages } = useCompressImage();
   const [imageUrls, setImageUrls] = useState<ImageUrls[]>(images);
 
   const onChangeImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const currentImages = e.target.files;
+    const imageFileList = e.target.files;
 
-    if (!currentImages) return;
-    if (images.length + currentImages.length > 3) {
+    if (!imageFileList) return;
+    if (images.length + imageFiles.length + imageFileList.length > 3) {
       openAlert({ content: '이미지는 최대 3개까지 업로드 가능합니다.' });
-      return;
     }
 
-    const compressedImages = await compressImages(currentImages);
+    const updatedImages = [...imageFileList].filter((_, idx) => idx < 3);
+    const compressedImages = await compressImages(updatedImages);
     const imageObjectUrls = compressedImages.map((image) => URL.createObjectURL(image));
 
     onAddImages(compressedImages);