From 1f5349028eed379543ca2436bceec4f5b35092fc Mon Sep 17 00:00:00 2001
From: Jihoo Kim <jihoo94@gmail.com>
Date: Wed, 23 Aug 2023 01:38:44 +0900
Subject: [PATCH] =?UTF-8?q?perf:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EB=AA=85=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/libs/cloudinary.ts                        | 12 ++++++++++--
 .../post-card/PostCard/PostCardContent.tsx           |  4 +++-
 .../post-form/PostVoteInput/PostVoteInput.tsx        |  1 +
 .../vote/components/PostVote/PostVoteButton.tsx      |  5 +++--
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/common/libs/cloudinary.ts b/src/common/libs/cloudinary.ts
index 46da3903..234c01df 100644
--- 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
index 3ff88ac8..cc25761a 100644
--- 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
index 86967ded..81617df5 100644
--- 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
index e0e5352d..f5224e4d 100644
--- 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);