From 19b485ed8d091b739f171b83ee4e54ece71a5fe5 Mon Sep 17 00:00:00 2001
From: Jeongjin Oh <rojay.developer@gmail.com>
Date: Tue, 26 Mar 2024 20:44:23 +0900
Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20photo=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20props=20=ED=83=80=EC=9E=85=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Navigation/SideBar/LoginSideBarContent.tsx     |  6 +++++-
 .../Navigation/SideBar/LogoutSideBarContent.tsx    |  2 +-
 src/common/components/Photo/Photo.stories.tsx      |  6 +++---
 src/common/components/Photo/Photo.tsx              | 14 +++++++-------
 src/common/components/RandomImge/RandomImage.tsx   |  2 +-
 .../components/TagCategory/CategoryContent.tsx     |  7 ++++++-
 .../components/TagCategory/FavoriteCategory.tsx    |  2 +-
 .../tags/components/MemesByTagsContainer.tsx       | 11 ++++++++---
 .../memes/components/MemeDetail/MemeDetail.tsx     |  1 +
 .../components/MemeShareModal/MemeShareModal.tsx   |  2 +-
 src/features/upload/components/UploadMeme.tsx      |  2 +-
 src/features/upload/components/UploadMemeData.tsx  |  6 +++---
 src/pages/mypage/index.tsx                         |  6 +++++-
 src/pages/setting/index.tsx                        |  2 +-
 14 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx
index a4a5a2eb..7c9a5a31 100644
--- a/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx
+++ b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx
@@ -17,7 +17,11 @@ export const LoginSideBarContent = (props: LoginSideBarContentProps) => {
     <>
       <div className="w-full rounded-24 bg-gray-100 px-16 pt-16 pb-24">
         <Link className="flex items-center gap-12" href="/mypage">
-          <Photo className="h-50 w-50 rounded-20" src={user?.imageUrl} />
+          <Photo
+            alt={`${user?.name || ""}의 프로필 이미지`}
+            className="h-50 w-50 rounded-20"
+            src={user?.imageUrl || ""}
+          />
           <span className="grow text-left text-18-bold-140 text-gray-900">{user?.name}</span>
           <Icon name="setting" />
         </Link>
diff --git a/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx b/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx
index ca246dce..9f465a1f 100644
--- a/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx
+++ b/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx
@@ -15,7 +15,7 @@ export const LogoutSideBarContent = (props: LogoutSideBarContentProps) => {
     <>
       <button className="w-full rounded-24 bg-gray-100 px-16 pt-16 pb-24" onClick={validate()}>
         <div className="flex items-center gap-12">
-          <Photo className="h-50 w-50 rounded-20" src={defaultAvatarUrl} />
+          <Photo alt="기본 프로필 이미지" className="h-50 w-50 rounded-20" src={defaultAvatarUrl} />
           <span className="grow text-left text-18-bold-140 text-gray-900">{defaultName}</span>
           <Icon name="setting" />
         </div>
diff --git a/src/common/components/Photo/Photo.stories.tsx b/src/common/components/Photo/Photo.stories.tsx
index cdd17998..b8ffc199 100644
--- a/src/common/components/Photo/Photo.stories.tsx
+++ b/src/common/components/Photo/Photo.stories.tsx
@@ -13,12 +13,12 @@ export const Default = () => (
   <>
     <h1 className="text-20-bold-140">Resizeable Photo</h1>
     <h2>width: 100, height: 100</h2>
-    <Photo className="h-100 w-100" src={IMAGE_SRC} />
+    <Photo alt="예시 이미지" className="h-100 w-100" src={IMAGE_SRC} />
     <hr />
     <h2>width: 100, height: 200</h2>
-    <Photo className="h-200 w-100" src={IMAGE_SRC} />
+    <Photo alt="예시 이미지" className="h-200 w-100" src={IMAGE_SRC} />
     <hr />
     <h2>Render fallback image(Wrong image src)</h2>
-    <Photo className="h-200 w-100" src="" />
+    <Photo alt="예시 이미지" className="h-200 w-100" src="" />
   </>
 );
diff --git a/src/common/components/Photo/Photo.tsx b/src/common/components/Photo/Photo.tsx
index 455fcb2a..5804bf2a 100644
--- a/src/common/components/Photo/Photo.tsx
+++ b/src/common/components/Photo/Photo.tsx
@@ -5,13 +5,11 @@ import { useEffect, useState } from "react";
 /**
  * NOTE
  * ComponentProps<typeof Image> 으로 타입 선언하면
- * storybook jsdoc parse 오류 발생
- * - interface 내부에 @deprecated 어노테이션이 있으면 문제 생기는 듯 보임
+ * storybook jsdoc parse 오류 발생. interface 내부에 @deprecated 어노테이션이 있으면 문제 생기는 듯 보임
+ * storybook v7으로 업그레이드 시 문제 발생하는지 확인해야 함
  */
-interface Props extends Omit<ComponentProps<"img">, "placeholder"> {
+interface Props extends ComponentProps<typeof Image> {
   fallbackSrc?: string;
-  priority?: boolean;
-  unoptimized?: boolean;
 }
 const base64Blur =
   "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mO8/Z8BAzAOZUEAQ+ESj6kXXm0AAAAASUVORK5CYII=";
@@ -19,12 +17,13 @@ const base64Blur =
 const fallback = "/img/fallbackImage.png";
 
 export const Photo = ({
-  src = "",
-  alt = "thumbnail",
+  src,
   className = "",
   width,
   height,
   fallbackSrc = fallback,
+  alt,
+  ...props
 }: Props) => {
   /**
    * FIX
@@ -55,6 +54,7 @@ export const Photo = ({
         src={isFailLoading ? fallbackSrc : src}
         style={{ objectFit: "cover" }}
         onError={setIsFailLoading}
+        {...props}
       />
     </div>
   );
diff --git a/src/common/components/RandomImge/RandomImage.tsx b/src/common/components/RandomImge/RandomImage.tsx
index acef46bc..00c0a217 100644
--- a/src/common/components/RandomImge/RandomImage.tsx
+++ b/src/common/components/RandomImge/RandomImage.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps } from "react";
 
 import { Photo } from "../Photo";
 
-interface Props extends ComponentProps<typeof Photo> {
+interface Props extends Omit<ComponentProps<typeof Photo>, "alt" | "src" | "sizes"> {
   images?: { name: string; src: string }[];
 }
 const randomImages = [
diff --git a/src/features/common/components/TagCategory/CategoryContent.tsx b/src/features/common/components/TagCategory/CategoryContent.tsx
index 6a9cb8ca..7bffad64 100644
--- a/src/features/common/components/TagCategory/CategoryContent.tsx
+++ b/src/features/common/components/TagCategory/CategoryContent.tsx
@@ -64,7 +64,12 @@ export const CategoryContent = () => {
                   gtmTrigger[category.name]
                 } flex w-full items-center justify-between gap-8 rounded-full px-4 py-12 text-16-semibold-140 [&>span>#chevronDown]:data-[state=open]:rotate-180`}
               >
-                <Photo className="h-24 w-24 p-2" loading="eager" src={category.icon} />
+                <Photo
+                  alt={category.name}
+                  className="h-24 w-24 p-2"
+                  loading="eager"
+                  src={category.icon}
+                />
                 <span className="flex-grow text-left text-16-semibold-140">
                   {category.mainTags.length ? (
                     <SlotCategory
diff --git a/src/features/common/components/TagCategory/FavoriteCategory.tsx b/src/features/common/components/TagCategory/FavoriteCategory.tsx
index 75321023..a5d18e8a 100644
--- a/src/features/common/components/TagCategory/FavoriteCategory.tsx
+++ b/src/features/common/components/TagCategory/FavoriteCategory.tsx
@@ -65,7 +65,7 @@ export const FavoriteCategory = () => {
       <Item value={FAVORITE_ID}>
         <Header className="py-4">
           <Trigger className="flex w-full items-center justify-between gap-8 rounded-full px-4 py-12 text-16-semibold-140 [&>span>#chevronDown]:data-[state=open]:rotate-180">
-            <Photo className="h-24 w-24 p-2" loading="eager" src={FAVORITE_ICON} />
+            <Photo alt="북마크" className="h-24 w-24 p-2" loading="eager" src={FAVORITE_ICON} />
             <span className="flex-grow text-left text-16-semibold-140">{FAVORITE_ID}</span>
             <span className="flex h-40 w-40 items-center justify-center rounded-full hover:bg-gray-100">
               <Icon
diff --git a/src/features/explore/tags/components/MemesByTagsContainer.tsx b/src/features/explore/tags/components/MemesByTagsContainer.tsx
index 974b109f..092f105a 100644
--- a/src/features/explore/tags/components/MemesByTagsContainer.tsx
+++ b/src/features/explore/tags/components/MemesByTagsContainer.tsx
@@ -18,7 +18,11 @@ export const MemesByTagsContainer = ({ tag }: Props) => {
   }
   return (
     <>
-      <Thumbnail image={memeList?.[0].image.images[0].imageUrl} totalCount={totalCount as number} />
+      <Thumbnail
+        image={memeList?.[0].image.images[0].imageUrl}
+        tag={tag}
+        totalCount={totalCount as number}
+      />
       <InfiniteMemeList
         memeList={memeList}
         onRequestAppend={() => fetchNextPage({ cancelRefetch: false })}
@@ -29,9 +33,10 @@ export const MemesByTagsContainer = ({ tag }: Props) => {
 
 interface ThumbnailProps {
   image: string;
+  tag: string;
   totalCount: number;
 }
-const Thumbnail = React.memo(function Thumbnail({ image, totalCount }: ThumbnailProps) {
+const Thumbnail = React.memo(function Thumbnail({ image, tag, totalCount }: ThumbnailProps) {
   const router = useRouter();
   const clipboard = useClipboard();
   const toast = useToast();
@@ -40,7 +45,7 @@ const Thumbnail = React.memo(function Thumbnail({ image, totalCount }: Thumbnail
 
   return (
     <div className="flex gap-16 px-22 pt-16 pb-24">
-      <Photo className="h-80 w-80 rounded-full" src={image} />
+      <Photo alt={`${tag} 밈 썸네일`} className="h-80 w-80 rounded-full" src={image} />
       <div className="flex flex-1 flex-col items-center justify-center gap-2">
         <span className="text-14-semibold-140 text-gray-900">{totalCount}개 밈</span>
         <button
diff --git a/src/features/memes/components/MemeDetail/MemeDetail.tsx b/src/features/memes/components/MemeDetail/MemeDetail.tsx
index 74978b5a..7478fa70 100644
--- a/src/features/memes/components/MemeDetail/MemeDetail.tsx
+++ b/src/features/memes/components/MemeDetail/MemeDetail.tsx
@@ -34,6 +34,7 @@ export const MemeDetail = ({ id }: Props) => {
         >
           <Photo
             priority
+            alt={name}
             className="max-h-[70vh] min-h-[25vh] w-full rounded-15"
             height={imageHeight}
             sizes="200px"
diff --git a/src/features/memes/components/MemeShareModal/MemeShareModal.tsx b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx
index 281fcb0a..2d2134eb 100644
--- a/src/features/memes/components/MemeShareModal/MemeShareModal.tsx
+++ b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx
@@ -39,7 +39,7 @@ export const MemeShareModal = ({ id, isOpen, onClose }: Props) => {
   return (
     <Modal open={isOpen} onClose={onClose}>
       <Modal.Header />
-      <Photo className="my-24 h-300 w-300 rounded-15" src={src} />
+      <Photo alt={name} className="my-24 h-300 w-300 rounded-15" src={src} />
       <ul className="mx-auto mb-32 flex h-77 w-fit gap-16 whitespace-nowrap text-gray-600">
         <li className="relative flex flex-col items-center gap-8">
           <KakaoShareButton
diff --git a/src/features/upload/components/UploadMeme.tsx b/src/features/upload/components/UploadMeme.tsx
index db1b3fbc..0d81847a 100644
--- a/src/features/upload/components/UploadMeme.tsx
+++ b/src/features/upload/components/UploadMeme.tsx
@@ -32,7 +32,7 @@ export const UploadMeme = ({ src, isFocus }: Props) => {
           setHeight(h);
         }}
       >
-        <Photo className="mx-16 rounded-16" src={src} />
+        <Photo alt="업로드 이미지" className="mx-16 rounded-16" src={src} />
         <UploadMemeData
           className="max-h-[100rem] overflow-hidden transition-[max-height] duration-500 ease-in-out group-[:not(:focus-within)]:max-h-0"
           css={{ maxHeight: height / 10 + "rem" }}
diff --git a/src/features/upload/components/UploadMemeData.tsx b/src/features/upload/components/UploadMemeData.tsx
index 579508dc..de777ec0 100644
--- a/src/features/upload/components/UploadMemeData.tsx
+++ b/src/features/upload/components/UploadMemeData.tsx
@@ -17,7 +17,7 @@ export const UploadMemeData = ({ src, className }: Props) => {
   return (
     <div className={`flex flex-col gap-24 pt-24 pb-6 ${className}`}>
       <div className="flex items-center gap-8 py-8 px-16">
-        <Photo className="h-24 w-24 rounded-12 bg-gray-300" src={src} />
+        <Photo alt="썸네일" className="h-24 w-24 rounded-12 bg-gray-300" src={src || ""} />
         <span className="text-14-semibold-140 text-gray-900">분노하는 ISTJ</span>
       </div>
       <div className="relative w-full px-16 text-18-semibold-140 leading-[160%]">
@@ -27,7 +27,7 @@ export const UploadMemeData = ({ src, className }: Props) => {
         <Item value="밈 출처">
           <Header className="border-b border-gray-100">
             <Trigger className="flex w-full items-center justify-between gap-8 rounded-full px-24 py-16 text-16-semibold-140 [&>span>#chevronDown]:data-[state=open]:rotate-180">
-              <Photo className="h-24 w-24 rounded-12" />
+              <Photo alt="밈 출처" className="h-24 w-24 rounded-12" src="" />
               <span className="flex-grow text-left text-16-semibold-140">밈 출처</span>
               <span className="flex h-24 w-24 items-center justify-center rounded-full hover:bg-gray-100">
                 <Icon
@@ -58,7 +58,7 @@ export const UploadMemeData = ({ src, className }: Props) => {
         <Item value="밈 사용상황">
           <Header className="border-b border-gray-100">
             <Trigger className="flex w-full items-center justify-between gap-8 rounded-full px-24 py-16 text-16-semibold-140 [&>span>#chevronDown]:data-[state=open]:rotate-180">
-              <Photo className="h-24 w-24 rounded-12" />
+              <Photo alt="밈 사용상황" className="h-24 w-24 rounded-12" src="" />
               <span className="flex-grow text-left text-16-semibold-140">밈 사용상황</span>
               <span className="flex h-24 w-24 items-center justify-center rounded-full hover:bg-gray-100">
                 <Icon
diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx
index 0877649b..b7c72103 100644
--- a/src/pages/mypage/index.tsx
+++ b/src/pages/mypage/index.tsx
@@ -19,7 +19,11 @@ const MyPage = () => {
     <>
       <MyPageNavigation />
       <div className="flex flex-col items-center justify-center py-40 font-suit">
-        <Photo className="h-100 w-100 rounded-full" src={user.imageUrl} />
+        <Photo
+          alt={`${user.name || ""}의 프로필 이미지`}
+          className="h-100 w-100 rounded-full"
+          src={user.imageUrl}
+        />
         <span className="mt-4 text-22-bold-140">
           {isLoading ? <Skeleton animation="wave" width={70} /> : user.name}
         </span>
diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx
index 11aa2272..bb2ed3b7 100644
--- a/src/pages/setting/index.tsx
+++ b/src/pages/setting/index.tsx
@@ -23,7 +23,7 @@ const SettingPage = () => {
           </div>
           <div className="flex h-64 justify-between py-16">
             <span className="text-22-bold-140">문의하기</span>
-            <Photo className="h-32 w-32" src="/img/fallbackImage.png" />
+            <Photo alt="폴백 이미지" className="h-32 w-32" src="/img/fallbackImage.png" />
           </div>
         </section>
         <section className="mb-28 flex flex-wrap justify-center">

From bf242b4092ffeb979f7a1afab0ca08c2568bda4a Mon Sep 17 00:00:00 2001
From: Jeongjin Oh <rojay.developer@gmail.com>
Date: Wed, 27 Mar 2024 21:05:59 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=B5=9C=EC=A0=81=ED=99=94=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- deviceSizes, imageSizes 재설정(auto-generated srcset)
- sizes props 작성
---
 config/base.next.config.js                                | 5 ++---
 .../components/Navigation/SideBar/LoginSideBarContent.tsx | 1 +
 .../Navigation/SideBar/LogoutSideBarContent.tsx           | 7 ++++++-
 src/features/common/components/InfiniteMemeList.tsx       | 2 +-
 src/features/common/components/MemeItem.tsx               | 4 ++--
 .../common/components/TagCategory/CategoryContent.tsx     | 1 +
 .../common/components/TagCategory/FavoriteCategory.tsx    | 8 +++++++-
 .../explore/tags/components/MemesByTagsContainer.tsx      | 8 +++++++-
 src/features/memes/components/MemeDetail/MemeDetail.tsx   | 2 +-
 .../memes/components/MemeShareModal/MemeShareModal.tsx    | 2 +-
 src/pages/mypage/index.tsx                                | 1 +
 11 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/config/base.next.config.js b/config/base.next.config.js
index 3c76e311..e1baeaa5 100644
--- a/config/base.next.config.js
+++ b/config/base.next.config.js
@@ -62,7 +62,6 @@ module.exports = () => ({
     return config;
   },
   images: {
-    unoptimized: true,
     remotePatterns: [
       {
         protocol: "https",
@@ -70,8 +69,8 @@ module.exports = () => ({
       },
     ],
     // Link: https://fe-developers.kakaoent.com/2022/220714-next-image/
-    imageSizes: [64, 256],
-    deviceSizes: [512],
+    deviceSizes: [440],
+    imageSizes: [100, 200],
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
   },
   sentry: {
diff --git a/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx
index 7c9a5a31..ad1a2f2a 100644
--- a/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx
+++ b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx
@@ -20,6 +20,7 @@ export const LoginSideBarContent = (props: LoginSideBarContentProps) => {
           <Photo
             alt={`${user?.name || ""}의 프로필 이미지`}
             className="h-50 w-50 rounded-20"
+            sizes="50px"
             src={user?.imageUrl || ""}
           />
           <span className="grow text-left text-18-bold-140 text-gray-900">{user?.name}</span>
diff --git a/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx b/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx
index 9f465a1f..03069938 100644
--- a/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx
+++ b/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx
@@ -15,7 +15,12 @@ export const LogoutSideBarContent = (props: LogoutSideBarContentProps) => {
     <>
       <button className="w-full rounded-24 bg-gray-100 px-16 pt-16 pb-24" onClick={validate()}>
         <div className="flex items-center gap-12">
-          <Photo alt="기본 프로필 이미지" className="h-50 w-50 rounded-20" src={defaultAvatarUrl} />
+          <Photo
+            alt="기본 프로필 이미지"
+            className="h-50 w-50 rounded-20"
+            sizes="50px"
+            src={defaultAvatarUrl}
+          />
           <span className="grow text-left text-18-bold-140 text-gray-900">{defaultName}</span>
           <Icon name="setting" />
         </div>
diff --git a/src/features/common/components/InfiniteMemeList.tsx b/src/features/common/components/InfiniteMemeList.tsx
index 5462bc28..d2e80916 100644
--- a/src/features/common/components/InfiniteMemeList.tsx
+++ b/src/features/common/components/InfiniteMemeList.tsx
@@ -4,7 +4,7 @@ import { MemeItem } from "@/features/common";
 import type { Meme } from "@/types";
 
 interface InfiniteMemeListProps {
-  memeList: Meme[];
+  memeList: (Meme & { priority?: boolean })[];
   onRequestAppend: () => void;
 }
 
diff --git a/src/features/common/components/MemeItem.tsx b/src/features/common/components/MemeItem.tsx
index bcbb5997..f08e62f9 100644
--- a/src/features/common/components/MemeItem.tsx
+++ b/src/features/common/components/MemeItem.tsx
@@ -8,7 +8,7 @@ import { MemeActionSheet, useMoveMemeDetail } from "@/features/common";
 import type { Meme } from "@/types";
 
 interface Props {
-  meme: Meme;
+  meme: Meme & { priority?: boolean };
   onClick?: (id: number) => void;
 }
 
@@ -32,7 +32,7 @@ export const MemeItem = memo(({ meme, onClick }: Props) => {
           className="rounded-16"
           draggable={false}
           height={image.images[0]?.imageHeight}
-          sizes="100px"
+          sizes="200px"
           src={image.images[0]?.imageUrl}
           unoptimized={isEncodingError(image.images[0]?.imageUrl)}
           width={image.images[0]?.imageWidth}
diff --git a/src/features/common/components/TagCategory/CategoryContent.tsx b/src/features/common/components/TagCategory/CategoryContent.tsx
index 7bffad64..9a0dde39 100644
--- a/src/features/common/components/TagCategory/CategoryContent.tsx
+++ b/src/features/common/components/TagCategory/CategoryContent.tsx
@@ -65,6 +65,7 @@ export const CategoryContent = () => {
                 } flex w-full items-center justify-between gap-8 rounded-full px-4 py-12 text-16-semibold-140 [&>span>#chevronDown]:data-[state=open]:rotate-180`}
               >
                 <Photo
+                  unoptimized
                   alt={category.name}
                   className="h-24 w-24 p-2"
                   loading="eager"
diff --git a/src/features/common/components/TagCategory/FavoriteCategory.tsx b/src/features/common/components/TagCategory/FavoriteCategory.tsx
index a5d18e8a..fc8829ab 100644
--- a/src/features/common/components/TagCategory/FavoriteCategory.tsx
+++ b/src/features/common/components/TagCategory/FavoriteCategory.tsx
@@ -65,7 +65,13 @@ export const FavoriteCategory = () => {
       <Item value={FAVORITE_ID}>
         <Header className="py-4">
           <Trigger className="flex w-full items-center justify-between gap-8 rounded-full px-4 py-12 text-16-semibold-140 [&>span>#chevronDown]:data-[state=open]:rotate-180">
-            <Photo alt="북마크" className="h-24 w-24 p-2" loading="eager" src={FAVORITE_ICON} />
+            <Photo
+              unoptimized
+              alt="북마크"
+              className="h-24 w-24 p-2"
+              loading="eager"
+              src={FAVORITE_ICON}
+            />
             <span className="flex-grow text-left text-16-semibold-140">{FAVORITE_ID}</span>
             <span className="flex h-40 w-40 items-center justify-center rounded-full hover:bg-gray-100">
               <Icon
diff --git a/src/features/explore/tags/components/MemesByTagsContainer.tsx b/src/features/explore/tags/components/MemesByTagsContainer.tsx
index 092f105a..0807c927 100644
--- a/src/features/explore/tags/components/MemesByTagsContainer.tsx
+++ b/src/features/explore/tags/components/MemesByTagsContainer.tsx
@@ -45,7 +45,13 @@ const Thumbnail = React.memo(function Thumbnail({ image, tag, totalCount }: Thum
 
   return (
     <div className="flex gap-16 px-22 pt-16 pb-24">
-      <Photo alt={`${tag} 밈 썸네일`} className="h-80 w-80 rounded-full" src={image} />
+      <Photo
+        priority
+        alt={`${tag} 밈 썸네일`}
+        className="h-80 w-80 rounded-full"
+        sizes="80px"
+        src={image}
+      />
       <div className="flex flex-1 flex-col items-center justify-center gap-2">
         <span className="text-14-semibold-140 text-gray-900">{totalCount}개 밈</span>
         <button
diff --git a/src/features/memes/components/MemeDetail/MemeDetail.tsx b/src/features/memes/components/MemeDetail/MemeDetail.tsx
index 7478fa70..21505d44 100644
--- a/src/features/memes/components/MemeDetail/MemeDetail.tsx
+++ b/src/features/memes/components/MemeDetail/MemeDetail.tsx
@@ -34,10 +34,10 @@ export const MemeDetail = ({ id }: Props) => {
         >
           <Photo
             priority
+            unoptimized
             alt={name}
             className="max-h-[70vh] min-h-[25vh] w-full rounded-15"
             height={imageHeight}
-            sizes="200px"
             src={imageUrl}
             width={imageWidth}
           />
diff --git a/src/features/memes/components/MemeShareModal/MemeShareModal.tsx b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx
index 2d2134eb..e2782d49 100644
--- a/src/features/memes/components/MemeShareModal/MemeShareModal.tsx
+++ b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx
@@ -39,7 +39,7 @@ export const MemeShareModal = ({ id, isOpen, onClose }: Props) => {
   return (
     <Modal open={isOpen} onClose={onClose}>
       <Modal.Header />
-      <Photo alt={name} className="my-24 h-300 w-300 rounded-15" src={src} />
+      <Photo alt={name} className="my-24 h-300 w-300 rounded-15" sizes="300px" src={src} />
       <ul className="mx-auto mb-32 flex h-77 w-fit gap-16 whitespace-nowrap text-gray-600">
         <li className="relative flex flex-col items-center gap-8">
           <KakaoShareButton
diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx
index b7c72103..8a476efd 100644
--- a/src/pages/mypage/index.tsx
+++ b/src/pages/mypage/index.tsx
@@ -22,6 +22,7 @@ const MyPage = () => {
         <Photo
           alt={`${user.name || ""}의 프로필 이미지`}
           className="h-100 w-100 rounded-full"
+          sizes="100px"
           src={user.imageUrl}
         />
         <span className="mt-4 text-22-bold-140">

From f5206cba358e5da23167f6262cd9dcd50b26f74e Mon Sep 17 00:00:00 2001
From: Jeongjin Oh <rojay.developer@gmail.com>
Date: Thu, 28 Mar 2024 01:28:15 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20cloudinary=20loader=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- remote 이미지에만 최적화 적용
---
 config/base.next.config.js                    |  6 -----
 config/cloudinary-loader.ts                   | 24 +++++++++++++++++++
 .../SideBar/LoginSideBarContent.tsx           |  2 ++
 .../SideBar/LogoutSideBarContent.tsx          |  1 +
 src/common/components/Photo/Photo.stories.tsx |  6 ++---
 .../components/RandomImge/RandomImage.tsx     | 10 +++++++-
 src/features/common/components/MemeItem.tsx   |  2 ++
 .../tags/components/MemesByTagsContainer.tsx  |  2 ++
 .../MemeShareModal/MemeShareModal.tsx         | 10 +++++++-
 .../SearchPopularList/SearchPopularItem.tsx   |  2 ++
 src/features/upload/components/UploadMeme.tsx |  2 +-
 .../upload/components/UploadMemeData.tsx      | 11 ++++++---
 src/pages/mypage/index.tsx                    |  2 ++
 src/pages/setting/index.tsx                   |  7 +++++-
 src/types/global.d.ts                         |  2 ++
 15 files changed, 73 insertions(+), 16 deletions(-)
 create mode 100644 config/cloudinary-loader.ts

diff --git a/config/base.next.config.js b/config/base.next.config.js
index e1baeaa5..4b12aa42 100644
--- a/config/base.next.config.js
+++ b/config/base.next.config.js
@@ -62,12 +62,6 @@ module.exports = () => ({
     return config;
   },
   images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "**",
-      },
-    ],
     // Link: https://fe-developers.kakaoent.com/2022/220714-next-image/
     deviceSizes: [440],
     imageSizes: [100, 200],
diff --git a/config/cloudinary-loader.ts b/config/cloudinary-loader.ts
new file mode 100644
index 00000000..2dc3cd8b
--- /dev/null
+++ b/config/cloudinary-loader.ts
@@ -0,0 +1,24 @@
+"use client";
+
+import type { ImageLoaderProps } from "next/image";
+
+const cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME;
+
+export function cloudinaryLoader({ src, width, quality }: ImageLoaderProps) {
+  const rawTransformations = ["f_auto", "c_limit", `w_${width}`, `q_${quality || "auto"}`];
+  let isAbsolute: boolean;
+  let href: string;
+
+  if (src.startsWith("/")) {
+    href = src;
+    isAbsolute = false;
+  } else {
+    const hrefParsed = new URL(src);
+    href = hrefParsed.toString();
+    isAbsolute = true;
+  }
+
+  return isAbsolute
+    ? `https://res.cloudinary.com/${cloudName}/image/fetch/${rawTransformations.join(",")}/${href}`
+    : src;
+}
diff --git a/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx
index ad1a2f2a..fb303639 100644
--- a/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx
+++ b/src/common/components/Navigation/SideBar/LoginSideBarContent.tsx
@@ -1,3 +1,4 @@
+import { cloudinaryLoader } from "config/cloudinary-loader";
 import Link from "next/link";
 
 import { Icon } from "@/common/components/Icon";
@@ -20,6 +21,7 @@ export const LoginSideBarContent = (props: LoginSideBarContentProps) => {
           <Photo
             alt={`${user?.name || ""}의 프로필 이미지`}
             className="h-50 w-50 rounded-20"
+            loader={cloudinaryLoader}
             sizes="50px"
             src={user?.imageUrl || ""}
           />
diff --git a/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx b/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx
index 03069938..973d782a 100644
--- a/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx
+++ b/src/common/components/Navigation/SideBar/LogoutSideBarContent.tsx
@@ -16,6 +16,7 @@ export const LogoutSideBarContent = (props: LogoutSideBarContentProps) => {
       <button className="w-full rounded-24 bg-gray-100 px-16 pt-16 pb-24" onClick={validate()}>
         <div className="flex items-center gap-12">
           <Photo
+            unoptimized
             alt="기본 프로필 이미지"
             className="h-50 w-50 rounded-20"
             sizes="50px"
diff --git a/src/common/components/Photo/Photo.stories.tsx b/src/common/components/Photo/Photo.stories.tsx
index b8ffc199..40282176 100644
--- a/src/common/components/Photo/Photo.stories.tsx
+++ b/src/common/components/Photo/Photo.stories.tsx
@@ -13,12 +13,12 @@ export const Default = () => (
   <>
     <h1 className="text-20-bold-140">Resizeable Photo</h1>
     <h2>width: 100, height: 100</h2>
-    <Photo alt="예시 이미지" className="h-100 w-100" src={IMAGE_SRC} />
+    <Photo unoptimized alt="예시 이미지" className="h-100 w-100" src={IMAGE_SRC} />
     <hr />
     <h2>width: 100, height: 200</h2>
-    <Photo alt="예시 이미지" className="h-200 w-100" src={IMAGE_SRC} />
+    <Photo unoptimized alt="예시 이미지" className="h-200 w-100" src={IMAGE_SRC} />
     <hr />
     <h2>Render fallback image(Wrong image src)</h2>
-    <Photo alt="예시 이미지" className="h-200 w-100" src="" />
+    <Photo unoptimized alt="예시 이미지" className="h-200 w-100" src="" />
   </>
 );
diff --git a/src/common/components/RandomImge/RandomImage.tsx b/src/common/components/RandomImge/RandomImage.tsx
index 00c0a217..c10bbea7 100644
--- a/src/common/components/RandomImge/RandomImage.tsx
+++ b/src/common/components/RandomImge/RandomImage.tsx
@@ -33,5 +33,13 @@ const randomImages = [
 ];
 export const RandomImage = ({ images = randomImages, className = "" }: Props) => {
   const randomImage = images[Math.floor(Math.random() * images.length)];
-  return <Photo alt={randomImage.name} className={className} sizes="32px" src={randomImage.src} />;
+  return (
+    <Photo
+      unoptimized
+      alt={randomImage.name}
+      className={className}
+      sizes="32px"
+      src={randomImage.src}
+    />
+  );
 };
diff --git a/src/features/common/components/MemeItem.tsx b/src/features/common/components/MemeItem.tsx
index f08e62f9..339590de 100644
--- a/src/features/common/components/MemeItem.tsx
+++ b/src/features/common/components/MemeItem.tsx
@@ -1,3 +1,4 @@
+import { cloudinaryLoader } from "config/cloudinary-loader";
 import { memo } from "react";
 
 import { Icon } from "@/common/components/Icon";
@@ -32,6 +33,7 @@ export const MemeItem = memo(({ meme, onClick }: Props) => {
           className="rounded-16"
           draggable={false}
           height={image.images[0]?.imageHeight}
+          loader={cloudinaryLoader}
           sizes="200px"
           src={image.images[0]?.imageUrl}
           unoptimized={isEncodingError(image.images[0]?.imageUrl)}
diff --git a/src/features/explore/tags/components/MemesByTagsContainer.tsx b/src/features/explore/tags/components/MemesByTagsContainer.tsx
index 0807c927..d7fcbd60 100644
--- a/src/features/explore/tags/components/MemesByTagsContainer.tsx
+++ b/src/features/explore/tags/components/MemesByTagsContainer.tsx
@@ -1,3 +1,4 @@
+import { cloudinaryLoader } from "config/cloudinary-loader";
 import { useRouter } from "next/router";
 import * as React from "react";
 
@@ -49,6 +50,7 @@ const Thumbnail = React.memo(function Thumbnail({ image, tag, totalCount }: Thum
         priority
         alt={`${tag} 밈 썸네일`}
         className="h-80 w-80 rounded-full"
+        loader={cloudinaryLoader}
         sizes="80px"
         src={image}
       />
diff --git a/src/features/memes/components/MemeShareModal/MemeShareModal.tsx b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx
index e2782d49..da915c23 100644
--- a/src/features/memes/components/MemeShareModal/MemeShareModal.tsx
+++ b/src/features/memes/components/MemeShareModal/MemeShareModal.tsx
@@ -1,3 +1,5 @@
+import { cloudinaryLoader } from "config/cloudinary-loader";
+
 import { usePostMemeToSharedCollection } from "@/api/collection";
 import { useGetMemeDetailById } from "@/api/meme";
 import { Modal } from "@/common/components/Modal";
@@ -39,7 +41,13 @@ export const MemeShareModal = ({ id, isOpen, onClose }: Props) => {
   return (
     <Modal open={isOpen} onClose={onClose}>
       <Modal.Header />
-      <Photo alt={name} className="my-24 h-300 w-300 rounded-15" sizes="300px" src={src} />
+      <Photo
+        alt={name}
+        className="my-24 h-300 w-300 rounded-15"
+        loader={cloudinaryLoader}
+        sizes="300px"
+        src={src}
+      />
       <ul className="mx-auto mb-32 flex h-77 w-fit gap-16 whitespace-nowrap text-gray-600">
         <li className="relative flex flex-col items-center gap-8">
           <KakaoShareButton
diff --git a/src/features/search/components/SearchPopularList/SearchPopularItem.tsx b/src/features/search/components/SearchPopularList/SearchPopularItem.tsx
index 3fe7808f..d2bc0b0e 100644
--- a/src/features/search/components/SearchPopularList/SearchPopularItem.tsx
+++ b/src/features/search/components/SearchPopularList/SearchPopularItem.tsx
@@ -1,3 +1,4 @@
+import { cloudinaryLoader } from "config/cloudinary-loader";
 import type { HTMLAttributes } from "react";
 
 import { Photo } from "@/common/components/Photo";
@@ -18,6 +19,7 @@ export const SearchPopularItem = ({ name, imageSrc, ...rest }: Props) => {
         alt={name}
         // NOTE: Photo의 기본 className과 충돌나서 css props로 작성
         css={{ position: "absolute", inset: 0, filter: "brightness(.5)" }}
+        loader={cloudinaryLoader}
         loading="eager"
         sizes="100px"
         src={imageSrc}
diff --git a/src/features/upload/components/UploadMeme.tsx b/src/features/upload/components/UploadMeme.tsx
index 0d81847a..14ccbaa6 100644
--- a/src/features/upload/components/UploadMeme.tsx
+++ b/src/features/upload/components/UploadMeme.tsx
@@ -32,7 +32,7 @@ export const UploadMeme = ({ src, isFocus }: Props) => {
           setHeight(h);
         }}
       >
-        <Photo alt="업로드 이미지" className="mx-16 rounded-16" src={src} />
+        <Photo unoptimized alt="업로드 이미지" className="mx-16 rounded-16" src={src} />
         <UploadMemeData
           className="max-h-[100rem] overflow-hidden transition-[max-height] duration-500 ease-in-out group-[:not(:focus-within)]:max-h-0"
           css={{ maxHeight: height / 10 + "rem" }}
diff --git a/src/features/upload/components/UploadMemeData.tsx b/src/features/upload/components/UploadMemeData.tsx
index de777ec0..56860ef9 100644
--- a/src/features/upload/components/UploadMemeData.tsx
+++ b/src/features/upload/components/UploadMemeData.tsx
@@ -17,7 +17,12 @@ export const UploadMemeData = ({ src, className }: Props) => {
   return (
     <div className={`flex flex-col gap-24 pt-24 pb-6 ${className}`}>
       <div className="flex items-center gap-8 py-8 px-16">
-        <Photo alt="썸네일" className="h-24 w-24 rounded-12 bg-gray-300" src={src || ""} />
+        <Photo
+          unoptimized
+          alt="썸네일"
+          className="h-24 w-24 rounded-12 bg-gray-300"
+          src={src || ""}
+        />
         <span className="text-14-semibold-140 text-gray-900">분노하는 ISTJ</span>
       </div>
       <div className="relative w-full px-16 text-18-semibold-140 leading-[160%]">
@@ -27,7 +32,7 @@ export const UploadMemeData = ({ src, className }: Props) => {
         <Item value="밈 출처">
           <Header className="border-b border-gray-100">
             <Trigger className="flex w-full items-center justify-between gap-8 rounded-full px-24 py-16 text-16-semibold-140 [&>span>#chevronDown]:data-[state=open]:rotate-180">
-              <Photo alt="밈 출처" className="h-24 w-24 rounded-12" src="" />
+              <Photo unoptimized alt="밈 출처" className="h-24 w-24 rounded-12" src="" />
               <span className="flex-grow text-left text-16-semibold-140">밈 출처</span>
               <span className="flex h-24 w-24 items-center justify-center rounded-full hover:bg-gray-100">
                 <Icon
@@ -58,7 +63,7 @@ export const UploadMemeData = ({ src, className }: Props) => {
         <Item value="밈 사용상황">
           <Header className="border-b border-gray-100">
             <Trigger className="flex w-full items-center justify-between gap-8 rounded-full px-24 py-16 text-16-semibold-140 [&>span>#chevronDown]:data-[state=open]:rotate-180">
-              <Photo alt="밈 사용상황" className="h-24 w-24 rounded-12" src="" />
+              <Photo unoptimized alt="밈 사용상황" className="h-24 w-24 rounded-12" src="" />
               <span className="flex-grow text-left text-16-semibold-140">밈 사용상황</span>
               <span className="flex h-24 w-24 items-center justify-center rounded-full hover:bg-gray-100">
                 <Icon
diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx
index 8a476efd..7a5d0952 100644
--- a/src/pages/mypage/index.tsx
+++ b/src/pages/mypage/index.tsx
@@ -1,3 +1,4 @@
+import { cloudinaryLoader } from "config/cloudinary-loader";
 import Link from "next/link";
 import { css } from "twin.macro";
 
@@ -22,6 +23,7 @@ const MyPage = () => {
         <Photo
           alt={`${user.name || ""}의 프로필 이미지`}
           className="h-100 w-100 rounded-full"
+          loader={cloudinaryLoader}
           sizes="100px"
           src={user.imageUrl}
         />
diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx
index bb2ed3b7..9d5c0783 100644
--- a/src/pages/setting/index.tsx
+++ b/src/pages/setting/index.tsx
@@ -23,7 +23,12 @@ const SettingPage = () => {
           </div>
           <div className="flex h-64 justify-between py-16">
             <span className="text-22-bold-140">문의하기</span>
-            <Photo alt="폴백 이미지" className="h-32 w-32" src="/img/fallbackImage.png" />
+            <Photo
+              unoptimized
+              alt="폴백 이미지"
+              className="h-32 w-32"
+              src="/img/fallbackImage.png"
+            />
           </div>
         </section>
         <section className="mb-28 flex flex-wrap justify-center">
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 9e4e9cbd..032fef1d 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -19,6 +19,8 @@ declare namespace NodeJS {
     NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: string;
     NEXT_PUBLIC_FIREBASE_APP_ID: string;
     NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: string;
+
+    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: string;
   }
 }
 

From ea7f2dfbb2c1192d946dcfdf7dd7e38ed1681552 Mon Sep 17 00:00:00 2001
From: Jeongjin Oh <rojay.developer@gmail.com>
Date: Thu, 28 Mar 2024 01:44:11 +0900
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20prd=20=EC=9D=B8=20=EA=B2=BD=EC=9A=B0?=
 =?UTF-8?q?=EB=A7=8C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B5=9C=EC=A0=81?=
 =?UTF-8?q?=ED=99=94=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/base.next.config.js  |  6 ++++--
 config/cloudinary-loader.ts | 10 ++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/config/base.next.config.js b/config/base.next.config.js
index 4b12aa42..0f0a3239 100644
--- a/config/base.next.config.js
+++ b/config/base.next.config.js
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const IS_PROD = process.env.NODE_ENV === "production";
+const isProd = process.env.NODE_ENV === "production";
+const cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME || "";
 
 // The folders containing files importing twin.macro
 const path = require("path");
@@ -62,6 +63,7 @@ module.exports = () => ({
     return config;
   },
   images: {
+    unoptimized: !isProd || !cloudName,
     // Link: https://fe-developers.kakaoent.com/2022/220714-next-image/
     deviceSizes: [440],
     imageSizes: [100, 200],
@@ -74,6 +76,6 @@ module.exports = () => ({
     // https://webpack.js.org/configuration/devtool/ and
     // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map
     // for more information.
-    hideSourceMaps: IS_PROD,
+    hideSourceMaps: isProd,
   },
 });
diff --git a/config/cloudinary-loader.ts b/config/cloudinary-loader.ts
index 2dc3cd8b..99dfbb06 100644
--- a/config/cloudinary-loader.ts
+++ b/config/cloudinary-loader.ts
@@ -2,7 +2,7 @@
 
 import type { ImageLoaderProps } from "next/image";
 
-const cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME;
+const cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME || "";
 
 export function cloudinaryLoader({ src, width, quality }: ImageLoaderProps) {
   const rawTransformations = ["f_auto", "c_limit", `w_${width}`, `q_${quality || "auto"}`];
@@ -18,7 +18,9 @@ export function cloudinaryLoader({ src, width, quality }: ImageLoaderProps) {
     isAbsolute = true;
   }
 
-  return isAbsolute
-    ? `https://res.cloudinary.com/${cloudName}/image/fetch/${rawTransformations.join(",")}/${href}`
-    : src;
+  const cldUrl = `https://res.cloudinary.com/${cloudName}/image/fetch/${rawTransformations.join(
+    ",",
+  )}/${href}`;
+
+  return isAbsolute ? cldUrl : src;
 }