Merge pull request #145 from SuSang-YuHee/dev

v2.1.5

README.md

@@ -12,6 +12,10 @@
 
 ## Release
 
+### Debate Ducks 2.1.5 [[PR]](https://github.com/SuSang-YuHee/Debate-Ducks-Client/pull/145)
+(2022.09.07)
+- 이미지 최적화
+
 ### Debate Ducks 2.1.4 [[PR]](https://github.com/SuSang-YuHee/Debate-Ducks-Client/pull/143)
 (2022.08.31)
 - 토론 영상 업로드 실패 문제 해결

components/common/Error.tsx

@@ -22,11 +22,10 @@ export default function Error() {
           {"Go to homepage"}
         </div>
         <Image
-          src={"/images/duckling.png"}
+          src={"/images/duckling.webp"}
           alt={"duckling"}
           width={400}
           height={400}
-          unoptimized={true}
           priority={true}
         />
       </div>

components/common/Footer.tsx

@@ -18,10 +18,11 @@ export default function Footer() {
           >
             <div>
               <Image
-                src="/images/logo/debate-ducks-logo-white.png"
+                src="/images/logo/debate-ducks-logo-white.webp"
                 alt="logo_image"
                 width="18"
-                height="18"
+                height="16"
+                priority={true}
               />
             </div>
             <div className={styles.desc}>Debate Ducks</div>

components/common/Header.tsx

@@ -90,12 +90,11 @@ export default function Header() {
                 src={
                   user.data?.profile_image !== "temp default image"
                     ? `${process.env.NEXT_PUBLIC_API_URL}/uploads/${user.data?.profile_image}`
-                    : "/images/profiles/default-green.png"
+                    : "/images/profiles/default-green.webp"
                 }
                 alt="profile_image"
                 width="30"
                 height="30"
-                unoptimized={true}
                 onClick={handleProfileClick}
               />
             </div>

components/debates/DebaterInfo.tsx

@@ -30,15 +30,14 @@ export default function DebaterInfo({
             debate.data?.author?.profile_image
               ? debate.data?.author?.profile_image !== "temp default image"
                 ? `${process.env.NEXT_PUBLIC_API_URL}/uploads/${debate.data?.author.profile_image}`
-                : "/images/profiles/default-green.png"
-              : "/images/profiles/default-gray.png"
+                : "/images/profiles/default-green.webp"
+              : "/images/profiles/default-gray.webp"
           }
           alt={debate.data?.author?.nickname || "탈퇴한 회원"}
           width={`${size}`}
           height={`${size}`}
           objectFit="cover"
           objectPosition="center"
-          unoptimized={true}
           priority={true}
         />
       </div>
@@ -67,15 +66,14 @@ export default function DebaterInfo({
             debate.data?.participant?.profile_image
               ? debate.data?.participant?.profile_image !== "temp default image"
                 ? `${process.env.NEXT_PUBLIC_API_URL}/uploads/${debate.data?.participant.profile_image}`
-                : "/images/profiles/default-green.png"
-              : "/images/profiles/default-gray.png"
+                : "/images/profiles/default-green.webp"
+              : "/images/profiles/default-gray.webp"
           }
           alt={debate.data?.participant?.nickname || "탈퇴한 회원"}
           width={`${size}`}
           height={`${size}`}
           objectFit="cover"
           objectPosition="center"
-          unoptimized={true}
           priority={true}
         />
       </div>

components/debates/debate/Comments.tsx

@@ -199,8 +199,8 @@ export default function Comments({ debateId }: { debateId: number }) {
                                   ? comment.target_user.profile_image !==
                                     "temp default image"
                                     ? `${process.env.NEXT_PUBLIC_API_URL}/uploads/${comment.target_user.profile_image}`
-                                    : "/images/profiles/default-green.png"
-                                  : "/images/profiles/default-gray.png"
+                                    : "/images/profiles/default-green.webp"
+                                  : "/images/profiles/default-gray.webp"
                               }
                               alt={
                                 comment.target_user?.nickname || "탈퇴한 회원"
@@ -209,7 +209,6 @@ export default function Comments({ debateId }: { debateId: number }) {
                               height="50"
                               objectFit="cover"
                               objectPosition="center"
-                              unoptimized={true}
                             />
                           </div>
                           <div className={styles.name}>

components/debates/debate/index.tsx

@@ -74,9 +74,9 @@ export default function Debate({ debateId }: { debateId: number }) {
             <Image
               src={`/images/categories/${CATEGORIES.indexOf(
                 debate.data?.category || "기타",
-              )}.jpg`}
-              alt={`${debate.data?.category || "기타"}`}
+              )}.webp`}
               layout="fill"
+              alt={`${debate.data?.category || "기타"}`}
               objectFit="cover"
               objectPosition="center"
               priority={true}

components/debates/debates/DebateCard.tsx

@@ -37,9 +37,11 @@ export default function DebateCard({
           className={styles.image}
           src={`/images/categories/${CATEGORIES.indexOf(
             debate.data?.category || "기타",
-          )}.jpg`}
+          )}.webp`}
           alt={`${debate.data?.category}`}
-          layout="fill"
+          sizes="20"
+          width="20"
+          height="9.6"
           objectFit="cover"
           objectPosition="center"
           priority={true}

pages/mypage/index.tsx

@@ -118,16 +118,15 @@ export default function MyPagePage() {
                   alt="profile_image"
                   src={
                     !user.data
-                      ? "/images/profiles/default-gray.png"
+                      ? "/images/profiles/default-gray.webp"
                       : previewImageUrl
                       ? previewImageUrl
                       : user.data?.profile_image !== "temp default image"
                       ? `${process.env.NEXT_PUBLIC_API_URL}/uploads/${user.data?.profile_image}`
-                      : "/images/profiles/default-green.png"
+                      : "/images/profiles/default-green.webp"
                   }
                   width="300"
                   height="300"
-                  unoptimized={true}
                 />
                 {user.data ? (
                   <form

pages/q&a/index.module.scss

@@ -1,7 +1,7 @@
 @import "../../styles/variable.scss";
 
 .experience_box {
-  background-image: url("/images/qna.jpg");
+  background-image: url("/images/qna.webp");
   background-repeat: no-repeat;
   background-size: cover;
   min-width: 22rem;

styles/globals.scss

@@ -32,5 +32,5 @@ select {
   -moz-appearance: none;
   appearance: none;
   //> 화살표 표시
-  background: url("/images/arrow.png") no-repeat 95% 50%/0.7rem auto;
+  background: url("/images/arrow.webp") no-repeat 95% 50%/0.7rem auto;
 }