✨ vercel 이미지 최적화를 다시 켰어요

Author: fecapark

next.config.ts

@@ -28,7 +28,6 @@ const nextConfig: NextConfig = {
         hostname: 'i.ytimg.com',
       },
     ],
-    unoptimized: true, // 사용량 한계로 임시로 해둬요.
   },
 }
 

src/app/archives/[channelId]/components/SlackThreadInformation.tsx

@@ -30,6 +30,7 @@ export const SlackThreadInformation = ({
                 height={24}
                 key={avatar}
                 src={avatar}
+                unoptimized
                 width={24}
               />
             ))}

src/components/GNB/index.tsx

@@ -11,7 +11,7 @@ export const GNB = () => {
     <header className="flex h-[64px] w-full shrink-0 items-center justify-between px-5 md:justify-start">
       <Link className="mr-[50px] flex items-center gap-3 select-none" href="/">
         <div className="w-[32px]">
-          <AutoHeightImage alt="Logo" src="/logo.svg" unoptimized />
+          <AutoHeightImage alt="Logo" src="/logo.svg" />
         </div>
         <span className={`text-xl ${DoHyeon.className}`}>멘션봇</span>
       </Link>

src/components/Slack/SlackMessageItem/components/ReactionTooltipContent.tsx

@@ -42,6 +42,7 @@ export const ReactionTooltipContent = ({
             height={multipleReactions ? 32 : 64}
             key={reaction.name}
             src={reaction.url ?? ''}
+            unoptimized
             width={multipleReactions ? 32 : 64}
           />
         ))}

src/components/Slack/SlackMessageItem/components/SlackMessageImage.tsx

@@ -28,7 +28,6 @@ export const SlackMessageImage = ({ src, width, height }: SlackMessageImageProps
           <AutoHeightImage
             alt="이미지"
             className={fadeStyle}
-            loading="eager"
             onClick={onClick}
             onError={onError}
             onLoad={onLoad}

src/components/Slack/SlackMessageItem/components/SlackMessageReactionList.tsx

@@ -63,6 +63,7 @@ export const SlackMessageReactionList = ({ reactions }: SlackMessageReactionList
                     height={16}
                     key={reaction.name}
                     src={reaction.url}
+                    unoptimized
                     width={16}
                   />
                 )

src/components/Slack/SlackMessageItem/index.tsx

@@ -77,7 +77,7 @@ export const SlackMessageItem = ({
       {!isGrouped && (
         <div className="mr-2 shrink-0">
           <div className="overflow-hidden rounded-md">
-            <Image alt="Avatar" height={36} src={profileImageUrl} width={36} />
+            <Image alt="Avatar" height={36} src={profileImageUrl} unoptimized width={36} />
           </div>
         </div>
       )}

src/components/SlackMarkdown/components/InlineEmoji.tsx

@@ -36,6 +36,7 @@ const TooltipContent = ({ name, url }: { name: string; url: string }) => {
         className="mb-2 rounded-md bg-white object-contain p-1"
         height={64}
         src={url}
+        unoptimized
         width={64}
       />
       <div className="text-center text-[13px] leading-[18px] font-bold text-white">:{name}:</div>
@@ -50,7 +51,14 @@ export const InlineEmoji = ({ name, url, size }: InlineEmojiProps) => {
   return (
     <HoverTooltip content={<TooltipContent name={name} url={url} />}>
       <span className={container()}>
-        <Image alt={name} className={image()} height={sizeLiteral} src={url} width={sizeLiteral} />
+        <Image
+          alt={name}
+          className={image()}
+          height={sizeLiteral}
+          src={url}
+          unoptimized
+          width={sizeLiteral}
+        />
       </span>
     </HoverTooltip>
   )