perf: 이미지 사이즈 명시

go-cham · Aug 22, 2023 · 1f53490 · 1f53490
1 parent 353e67a
commit 1f53490
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/src/common/libs/cloudinary.ts b/src/common/libs/cloudinary.ts
@@ -2,7 +2,7 @@ import axios from 'axios';
 
 export const uploadImage = async (file: File) => {
   const CLOUD_NAME = import.meta.env.VITE_CLOUDINARY_CLOUD_NAME;
-  const PRESET = import.meta.env.VITE_CLOUDINARY_PRESET;
+  const PRESET = import.meta.env.VITE_CLOUDINARY_UPLOAD_PRESET;
 
   const data = new FormData();
   data.append('file', file);
@@ -14,8 +14,16 @@ export const uploadImage = async (file: File) => {
       `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/image/upload`,
       data,
     );
-    return res.data.url as string;
+    const url = res.data.url as string;
+    return url.replace('http', 'https');
   } catch (e) {
     console.error(e);
   }
 };
+
+export const resizeImage = (url: string, width: number) => {
+  const splits = url.split('/');
+  return (
+    splits.slice(0, -2).join('/') + `/w_${width}/` + splits.slice(-2).join('/')
+  );
+};
diff --git a/src/features/posts/components/post-card/PostCard/PostCardContent.tsx b/src/features/posts/components/post-card/PostCard/PostCardContent.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import ThumbnailLoading from '@/common/assets/images/thumbnail-loading.svg';
+import { resizeImage } from '@/common/libs/cloudinary';
 import { formatText } from '@/common/utils/formatText';
 
 interface PostCardContentProps {
@@ -17,6 +18,7 @@ export function PostCardContent({
   const handleImageLoad = () => {
     setImageLoading(false);
   };
+
   return (
     <div className="relative flex h-[6.4rem] items-center">
       <div className="flex-1 space-y-[0.7rem] overflow-hidden">
@@ -28,7 +30,7 @@ export function PostCardContent({
       {image &&
         (!imageLoading ? (
           <img
-            src={image}
+            src={resizeImage(image, 200)}
             alt={'게시글 이미지'}
             className="ml-[1.7rem] aspect-square w-[6.4rem] rounded-[5px] border border-background-dividerLine-300 object-cover"
           />

diff --git a/src/features/posts/components/post-form/PostVoteInput/PostVoteInput.tsx b/src/features/posts/components/post-form/PostVoteInput/PostVoteInput.tsx
@@ -2,6 +2,7 @@ import { ChangeEvent, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import DeleteIcon from '@/common/components/icons/DeleteIcon';
 import ImageFileIcon from '@/common/components/icons/ImageFileIcon';
+import { resizeImage } from '@/common/libs/cloudinary';
 
 interface PostVoteInputProps {
   id?: string;

diff --git a/src/features/vote/components/PostVote/PostVoteButton.tsx b/src/features/vote/components/PostVote/PostVoteButton.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import CheckIcon from '@/common/components/icons/CheckIcon';
 import { Snackbar } from '@/common/components/ui/modal';
+import { resizeImage } from '@/common/libs/cloudinary';
 import { useGetUsersChoices } from '@/features/vote/queries';
 import { selectedVoteOptionIdAtom } from '@/features/vote/states/selected-vote-option';
 import { customColors } from '@/styles/colors';
@@ -80,8 +81,8 @@ export function PostVoteButton({
         </span>
         {option.image && (
           <img
-            src={option.image}
-            alt={option.label}
+            src={resizeImage(option.image, 200)}
+            alt={'투표 이미지'}
             className="absolute right-0 aspect-square h-full object-cover"
             onClick={(e) => {
               onClickImage(option.image);