✨ 이미지 사이즈 최적화 (#151)

* ✨ 이미지 사이즈 최적화 * 🐛 CSR validation 문제 수정 * ✨ 이미지 size 지정 등
team-nabi · Dec 2, 2023 · 5cc5d01 · 5cc5d01
1 parent 4f65a04
commit 5cc5d01
Show file tree

Hide file tree

Showing 27 changed files with 124 additions and 70 deletions.
diff --git a/next.config.js b/next.config.js
@@ -2,20 +2,13 @@
 const nextConfig = {
   images: {
     remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'airplanning-bucket.s3.ap-northeast-2.amazonaws.com',
-      },
       {
         protocol: 'https',
         hostname: 'team-01-bucket.s3.ap-northeast-2.amazonaws.com',
       },
-      //FIXME - 삭제 예정
-      {
-        protocol: 'http',
-        hostname: 'dummyimage.com',
-      },
     ],
+    imageSizes: [12, 16],
+    deviceSizes: [480, 640],
   },
 }
 

diff --git a/src/app/(root)/(routes)/(home)/components/CategorySection.tsx b/src/app/(root)/(routes)/(home)/components/CategorySection.tsx
@@ -17,7 +17,14 @@ const CategorySection = () => {
               : `${AppPath.cards()}?category=${v.key}`
           }
         >
-          <Image className="w-8 h-8" alt={`category-${v.key}`} src={v.image} />
+          <Image
+            className="w-8 h-8"
+            alt={`category-${v.key}`}
+            src={v.image}
+            quality={50}
+            sizes="32px"
+            loading="eager"
+          />
           <p className={` w-max ${TYPOGRAPHY.description}`}>{v.value}</p>
         </Link>
       ))}

diff --git a/src/app/(root)/(routes)/(home)/components/Slider.tsx b/src/app/(root)/(routes)/(home)/components/Slider.tsx
@@ -40,9 +40,12 @@ const PopularCardSlider = ({ cardData }: PopularCardSliderProps) => {
               height={0}
               alt="sliderImage"
               src={v.thumbnail}
-              sizes="80vw"
-              style={{ width: '80%' }}
+              style={{ width: '100%' }}
+              quality={75}
+              layout="responsive"
               onClick={() => handleClick(v.cardId)}
+              loading="eager"
+              sizes="(max-width: 640px) 50vw, 480px"
             />
             <div className="flex flex-col items-start p-2 justify-center opacity-40 bg-black rounded-b-[5px] text-white w-full absolute inset-x-0 bottom-0 max-w-[240px] left-2/4 translate-x-[-50%] ">
               <p className={`${TYPOGRAPHY.title}`}>{v.itemName}</p>

diff --git a/src/app/(root)/(routes)/cards/[cardId]/components/description-section/Dibs.tsx b/src/app/(root)/(routes)/cards/[cardId]/components/description-section/Dibs.tsx
@@ -26,11 +26,14 @@ const Dibs = ({ isMyDib, dibCount: count, cardId, isMyCard }: DibsProps) => {
     }
   }
   return (
-    <div className="flex flex-row gap-0 items-center ml-auto">
+    <div className="flex flex-row items-center gap-0 ml-auto">
       <Button size="icon_sm" variant={null} onClick={onClickDibs}>
         <Image
           src={isDibsActive ? Assets.activeHeartIcon : Assets.inactiveHeartIcon}
           alt="dibs"
+          loading="eager"
+          quality={50}
+          sizes="24px"
         />
       </Button>
       <p className="ml-1">{dibsCount}</p>

diff --git a/src/app/(root)/(routes)/cards/[cardId]/components/description-section/MoreButton.tsx b/src/app/(root)/(routes)/cards/[cardId]/components/description-section/MoreButton.tsx
@@ -74,7 +74,7 @@ const MoreButton = ({ cardId, status }: MoreButtonProps) => {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button className="ml-auto" size="icon_sm" variant={null}>
-          <Image src={Assets.vMoreIcon} alt="more" />
+          <Image src={Assets.vMoreIcon} alt="more" quality={50} sizes="32px" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="min-w-[10rem] -right-4">

diff --git a/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/PokeUnavailableInfo.tsx b/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/PokeUnavailableInfo.tsx
@@ -9,6 +9,7 @@ const PokeUnavailableInfo = () => {
         height={200}
         alt="unavailable"
         src={Assets.unavailableIcon}
+        sizes="200px"
       />
       <p className="text-sm font-normal">찔러보기가 허용되지 않은 물건입니다</p>
     </div>

diff --git a/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/TradeInfo.tsx b/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/TradeInfo.tsx
@@ -11,8 +11,8 @@ type TradeInfoProps = {
 const TradeInfo = ({ title, content, variant, icon }: TradeInfoProps) => {
   return (
     <div className="flex flex-row items-center">
-      <Image src={icon} alt="infoImg" />
-      <div className="text-sm ml-2 font-normal">{title}</div>
+      <Image src={icon} alt="infoImg" sizes="24px" />
+      <div className="ml-2 text-sm font-normal">{title}</div>
       <Badge size={'lg'} variant={variant} className="ml-auto">
         {content === '' ? '미입력' : content}
       </Badge>

diff --git a/src/app/(root)/(routes)/cards/[cardId]/page.tsx b/src/app/(root)/(routes)/cards/[cardId]/page.tsx
@@ -37,6 +37,7 @@ const CardPage = ({ params }: CardPageProps) => {
               className="w-10 h-10"
               alt={'arrow-button'}
               src={Assets.chevronLeftGray}
+              sizes="(max-width: 640px) 100vw, 640px"
             />
           </Button>
           <Slider

diff --git a/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx b/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx
@@ -62,7 +62,9 @@ const FilterFormDialog = () => {
             <Image
               src={hasNoFilter ? Assets.filterActiveIcon : Assets.filterIcon}
               alt="필터 아이콘"
-            />{' '}
+              sizes="22px"
+              quality={50}
+            />
             <DialogDescription
               className={hasNoFilter ? 'text-primary-color' : ''}
               onClick={openModal}

diff --git a/src/app/(root)/(routes)/cards/my/components/my-card/MyCard.tsx b/src/app/(root)/(routes)/cards/my/components/my-card/MyCard.tsx
@@ -67,8 +67,8 @@ const MyCard = ({
               className="rounded-lg"
               src={thumbnail}
               alt="이미지가 없습니다."
-              layout="fill"
-              objectFit="cover"
+              fill
+              style={{ objectFit: 'cover' }}
             />
           </div>
 

diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestCard.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestCard.tsx
@@ -15,12 +15,12 @@ const CardItem = ({
   itemName,
 }: Pick<CardType, 'thumbnail' | 'itemName'>) => (
   <CardFlex direction={'col'} justify={'center'} align={'center'} gap={'space'}>
-    <div className="h-11 w-20 relative">
+    <div className="relative w-20 h-11">
       <CardImage
         alt="card-thumbnail"
         src={thumbnail}
-        layout="fill"
-        objectFit="cover"
+        fill
+        style={{ objectFit: 'cover' }}
         className="rounded"
       />
     </div>
@@ -63,7 +63,7 @@ const CompleteRequestCard = ({
   }
   return (
     <div>
-      <Card className="p-2 flex items-center border-0" size={'sm'}>
+      <Card className="flex items-center p-2 border-0" size={'sm'}>
         <CardFlex justify={'between'} className="gap-4">
           <CardItem
             thumbnail={myCardData.thumbnail}

diff --git a/src/app/(root)/(routes)/chatrooms/components/chat-room-card/ChatRoomCard.tsx b/src/app/(root)/(routes)/chatrooms/components/chat-room-card/ChatRoomCard.tsx
@@ -24,17 +24,17 @@ const ChatRoomCard = ({
                 <CardImage
                   alt={'내 물건 이미지'}
                   src={fromCardInfo.cardInfo.thumbnail}
-                  layout="fill"
-                  objectFit="cover"
+                  fill
+                  style={{ objectFit: 'cover' }}
                   className="rounded-full"
                 />
               </div>
               <div className="relative flex-shrink-0 h-11 w-11 right-4 ">
                 <CardImage
                   alt={'상대 물건 아이디'}
                   src={toCardInfo.cardInfo.thumbnail}
-                  layout="fill"
-                  objectFit="cover"
+                  fill
+                  style={{ objectFit: 'cover' }}
                   className="rounded-full"
                 />
               </div>
@@ -59,8 +59,8 @@ const ChatRoomCard = ({
                 <CardImage
                   alt={'교환 아이콘'}
                   src={Assets.switchHorizontal}
-                  layout="fill"
-                  objectFit="cover"
+                  fill
+                  style={{ objectFit: 'cover' }}
                 />
               </div>
               <CardFlex direction={'col'}>

diff --git a/src/app/(root)/(routes)/history/components/my-trade-history-list/MyTradeHistoryList.tsx b/src/app/(root)/(routes)/history/components/my-trade-history-list/MyTradeHistoryList.tsx
@@ -1,5 +1,4 @@
 import { Fragment, useEffect, useRef } from 'react'
-import { InfiniteData } from '@tanstack/react-query'
 import { useRouter } from 'next/navigation'
 import TradeHistoryCard from '@/components/domain/card/trade-history-card'
 import EmptyDataWrapper from '@/components/domain/empty-data-wrapper'

diff --git a/src/app/(root)/(routes)/notifications/components/notification-card/NotificationCard.tsx b/src/app/(root)/(routes)/notifications/components/notification-card/NotificationCard.tsx
@@ -33,13 +33,13 @@ const NotificationCard = ({
         align={'center'}
         className="h-full cursor-pointer"
       >
-        <CardFlex gap={'space'} align={'center'} className="h-full w-2/3">
-          <div className="h-6 w-6 relative flex-shrink-0">
+        <CardFlex gap={'space'} align={'center'} className="w-2/3 h-full">
+          <div className="relative flex-shrink-0 w-6 h-6">
             <CardImage
               alt={'벨 아이콘'}
               src={Assets.notificationBell}
-              layout="fill"
-              objectFit="cover"
+              fill
+              style={{ objectFit: 'cover' }}
             />
           </div>
           <CardText type={'description'} className="line-clamp-3">
@@ -52,8 +52,8 @@ const NotificationCard = ({
               <CardImage
                 alt={'점 아이콘'}
                 src={Assets.notificationDot}
-                layout="fill"
-                objectFit="cover"
+                fill
+                style={{ objectFit: 'cover' }}
                 className="rounded"
               />
             )}

diff --git a/...uggestions/[myCardId]/components/my-card-description-section/MyCardDescriptionSection.tsx b/...uggestions/[myCardId]/components/my-card-description-section/MyCardDescriptionSection.tsx
@@ -38,8 +38,8 @@ const MyCardDescriptionSection = ({
             className="border rounded-lg border-background-secondary-color"
             src={thumbnail}
             alt="이미지가 없습니다."
-            layout="fill"
-            objectFit="cover"
+            fill
+            style={{ objectFit: 'cover' }}
           />
         </div>
 

diff --git a/...(root)/(routes)/suggestions/[myCardId]/components/my-suggestion-card/MySuggestionCard.tsx b/...(root)/(routes)/suggestions/[myCardId]/components/my-suggestion-card/MySuggestionCard.tsx
@@ -124,8 +124,8 @@ const MySuggestionCard = ({
               className="rounded-lg"
               src={thumbnail}
               alt="제안 한 혹은 받은 물건의 이미지"
-              layout="fill"
-              objectFit="cover"
+              fill
+              style={{ objectFit: 'cover' }}
             />
           </div>
 

diff --git a/src/components/domain/card/suggest-card/SuggestCard.tsx b/src/components/domain/card/suggest-card/SuggestCard.tsx
@@ -46,12 +46,12 @@ const SuggestCard = ({
         gap={'space'}
         className="h-full"
       >
-        <div className="h-full w-36 relative cursor-pointer">
+        <div className="relative h-full cursor-pointer w-36">
           <CardImage
             src={thumbnail}
             alt="thumbnail"
-            layout="fill"
-            objectFit="cover"
+            fill
+            style={{ objectFit: 'cover' }}
             onClick={() => router.push(AppPath.card(String(fromCardId)))}
           />
         </div>

diff --git a/src/components/domain/card/trade-history-card/TradeHistoryCard.tsx b/src/components/domain/card/trade-history-card/TradeHistoryCard.tsx
@@ -16,8 +16,8 @@ const SubCard = ({
       <CardImage
         alt={'물건 이미지'}
         src={thumbnail}
-        layout="fill"
-        objectFit="cover"
+        fill
+        style={{ objectFit: 'cover' }}
         className="rounded"
       />
     </div>

diff --git a/src/components/domain/card/trade-status-card/TradeStatusCard.tsx b/src/components/domain/card/trade-status-card/TradeStatusCard.tsx
@@ -39,8 +39,8 @@ const TradeStatusCard = ({
             <CardImage
               src={thumbnail}
               alt="물건 이미지"
-              layout="fill"
-              objectFit="cover"
+              fill
+              style={{ objectFit: 'cover' }}
             />
           </div>
 

diff --git a/src/components/domain/image-uploader/components/ImageBlock.tsx b/src/components/domain/image-uploader/components/ImageBlock.tsx
@@ -23,8 +23,10 @@ const ImageBlock = ({
       <Image
         src={imageSrc}
         alt={'image'}
-        layout="fill"
+        fill
         className="rounded-lg"
+        quality={50}
+        sizes="(max-width: 480px) 20vw, 78px"
       />
       {isThumbnail && (
         <figcaption className="absolute bottom-0 right-0 w-full p-1 text-xs text-center text-white rounded-b-lg bg-black/50">

diff --git a/src/components/domain/logo/Logo.tsx b/src/components/domain/logo/Logo.tsx
@@ -8,11 +8,17 @@ const Logo = () => {
   return (
     <nav>
       <Link className="text-text-color" href={AppPath.home()}>
-        <Image className="xs:hidden" src={Assets.headerLogo} alt="logo" />
+        <Image
+          className="xs:hidden"
+          src={Assets.headerLogo}
+          alt="logo"
+          priority={true}
+        />
         <Image
           className="hidden xs:block xs:w-10"
           src={Assets.logo}
           alt="logo"
+          priority={true}
         />
       </Link>
     </nav>

diff --git a/src/components/domain/slider/Slider.tsx b/src/components/domain/slider/Slider.tsx
@@ -37,7 +37,8 @@ const Slider = ({ imageData, imageAspectRatio }: SliderProps) => {
             height={0}
             alt="sliderImage"
             src={v.url}
-            sizes="100vw"
+            sizes="(max-width: 640px) 100vw, 640px"
+            quality={50}
             style={{ width: '100%' }}
           />
         </SwiperSlide>

diff --git a/src/components/ui/card/Card.stories.tsx b/src/components/ui/card/Card.stories.tsx
@@ -25,14 +25,14 @@ export const Small: Story = {
           gap={'space'}
           className="h-full"
         >
-          <div className="h-full w-32 relative">
+          <div className="relative w-32 h-full">
             <CardImage
               src={
                 'https://cdn.cetizen.com/CDN/market/market_large_crop/202203/20220318/220318152808_1_2913635.jpg'
               }
               alt="Picture of the author"
-              layout="fill"
-              objectFit="cover"
+              fill
+              style={{ objectFit: 'cover' }}
             />
           </div>
 
@@ -60,14 +60,14 @@ export const Large: Story = {
           align={'center'}
           gap={'space'}
         >
-          <div className="h-full w-36 relative">
+          <div className="relative h-full w-36">
             <CardImage
               src={
                 'https://cdn.cetizen.com/CDN/market/market_large_crop/202203/20220318/220318152808_1_2913635.jpg'
               }
               alt="Picture of the author"
-              layout="fill"
-              objectFit="cover"
+              fill
+              style={{ objectFit: 'cover' }}
             />
           </div>
 

diff --git a/src/components/ui/card/Card.tsx b/src/components/ui/card/Card.tsx
@@ -92,7 +92,14 @@ const CardImage = React.forwardRef<
   React.ElementRef<typeof Image>,
   React.ComponentPropsWithoutRef<typeof Image>
 >(({ className, alt, ...props }, ref) => (
-  <Image alt={alt} ref={ref} className={cn('', className)} {...props} />
+  <Image
+    alt={alt}
+    ref={ref}
+    className={cn('', className)}
+    {...props}
+    quality={50}
+    sizes="128px"
+  />
 ))
 CardImage.displayName = 'CardImage'
 

diff --git a/src/config/imageLoader.ts b/src/config/imageLoader.ts
@@ -0,0 +1,13 @@
+export default function nabiImageLoader({
+  src,
+  width,
+  quality,
+}: {
+  src: string
+  width: number
+  quality?: number
+}) {
+  return `https://team-01-bucket.s3.ap-northeast-2.amazonaws.com/${src}?w=${width}&q=${
+    quality ?? 50
+  }`
+}
diff --git a/src/hooks/api/mutations/useNotificationUpdateMutation.ts b/src/hooks/api/mutations/useNotificationUpdateMutation.ts
@@ -49,7 +49,7 @@ export const useNotificationUpdateMutation = () => {
         duration: 1000,
       })
     },
-    onError: (error, _, context) => {
+    onError: (_error, _, _context) => {
       toast({
         title: '알림 읽음 처리 중 문제가 발생하였습니다.',
         duration: 2000,