version 1.0.5

42manito/next.config.js

@@ -9,6 +9,7 @@ const nextConfig = {
       "i.pravatar.cc",
       "cloudflare-ipfs.com",
     ],
+    minimumCacheTTL: 60,
   },
   env: {
     NEXT_PUBLIC_GA_ID: process.env.NEXT_PUBLIC_GA_ID,

42manito/src/components/Mentor/Card.tsx

@@ -1,10 +1,10 @@
-import React, { memo } from "react";
-import Image from "next/image";
+import React, { memo, useState } from "react";
 import { useAppDispatch } from "@/RTK/store";
 import { CurrMentorSlice } from "@/RTK/Slices/CurrMentor";
 import { MentorProfileDto } from "@/Types/MentorProfiles/MentorProfile.dto";
 import CardHashtag from "@/components/Global/CardHashtag";
 import { HashtagResponseDto } from "@/Types/Hashtags/HashtagResponse.dto";
+import { Img } from "@storybook/components";
 
 interface props {
   data: MentorProfileDto;
@@ -33,6 +33,7 @@ const sliceHashtags = (hashtags: HashtagResponseDto[], limit: number) => {
 const MentorCard = ({ data }: props) => {
   const dispatch = useAppDispatch();
   const { nickname, profileImage } = data.user;
+  const [image, setImage] = useState(profileImage);
   const { shortDescription, hashtags } = data;
   const slicedHashtags = sliceHashtags(hashtags, 32);
   const openMentorModal = (data: MentorProfileDto) => {
@@ -46,9 +47,10 @@ const MentorCard = ({ data }: props) => {
       <div className="mentor-card card" onClick={() => openMentorModal(data)}>
         <div className="mentor-card-profile-info">
           <div className="mentor-card-image-holder">
-            <Image
+            <Img
               className="mentor-card-image"
-              src={profileImage}
+              src={image}
+              onError={() => setImage("/default_profile.png")}
               alt={nickname}
               width={200}
               height={200}

42manito/src/components/Profile/Image.tsx

@@ -1,19 +1,21 @@
-import React from "react";
-import Image from "next/image";
+import React, { useState } from "react";
+import { Img } from "@storybook/components";
 
 interface props {
   src: string;
 }
 
 export default function ProfileImage({ src }: props) {
+  const [image, setImage] = useState(src);
+
   return (
     <div className="ProfileImageWrapper">
-      <Image
+      <Img
         alt="ProfileImage"
-        src={src}
+        src={image}
         width={200}
         height={200}
-        quality={100}
+        onError={() => setImage("/default_profile.png")}
         className="ProfileImage"
         style={{ borderRadius: "50%" }}
       />

42manito/src/components/Reservation/card/ReservationCard.tsx

@@ -1,15 +1,15 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { ReservationDefaultDto } from "@/Types/Reservations/ReservationDefault.dto";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "@/RTK/store";
 import { useGetUserQuery } from "@/RTK/Apis/User";
 import CardHashtag from "@/components/Global/CardHashtag";
-import Image from "next/image";
 import { openReservationModal } from "@/RTK/Slices/Reservation";
 import {
   getStatus,
   ReservationUserRole,
 } from "@/components/Reservation/getReservationStatus";
+import { Img } from "@storybook/components";
 
 interface props {
   reservation: ReservationDefaultDto;
@@ -25,12 +25,18 @@ export default function ReservationCard({ reservation }: props) {
     targetUserId === mentorId
       ? ReservationUserRole.mentor
       : ReservationUserRole.mentee;
-  const { data: targetUser } = useGetUserQuery({ id: targetUserId });
+  const { data: targetUser, isLoading } = useGetUserQuery({ id: targetUserId });
+  const [image, setImage] = useState(targetUser?.profileImage);
   const dispatch = useDispatch();
   const handleClick = () => {
     dispatch(openReservationModal(reservation));
   };
 
+  useEffect(() => {
+    if (isLoading) return;
+    setImage(targetUser?.profileImage);
+  }, [targetUser, isLoading]);
+
   return (
     <>
       {targetUser && (
@@ -42,10 +48,11 @@ export default function ReservationCard({ reservation }: props) {
           </div>
           <div className={"reservation-card-user-info"}>
             <div className="reservation-card-image-holder">
-              <Image
+              <Img
                 className="reservation-card-image"
-                src={targetUser.profileImage}
+                src={image}
                 alt={targetUser.nickname}
+                onError={() => setImage("/default_profile.png")}
                 width={200}
                 height={200}
               />

42manito/src/components/Reservation/feedback/FeedbackCard.tsx

@@ -1,23 +1,32 @@
 import { MenteeFeedbacksResDto } from "@/Types/MenteeFeedbacks/MenteeFeedbacksRes.dto";
 import { useGetUserQuery } from "@/RTK/Apis/User";
 import Rating from "@mui/material/Rating";
-import Image from "next/image";
+import { useEffect, useState } from "react";
+import { Img } from "@storybook/components";
 
 interface props {
   menteeFeedback: MenteeFeedbacksResDto;
 }
 export default function FeedbackCard({ menteeFeedback }: props) {
-  const { data: mentee } = useGetUserQuery({ id: menteeFeedback.menteeId });
+  const { data: mentee, isLoading } = useGetUserQuery({
+    id: menteeFeedback.menteeId,
+  });
+  const [image, setImage] = useState(mentee?.profileImage);
+  useEffect(() => {
+    if (isLoading) return;
+    setImage(mentee?.profileImage);
+  }, [mentee, isLoading]);
 
   if (!mentee) return <></>;
   const dateString = new Date(menteeFeedback.createdAt).toLocaleDateString();
   return (
     <>
       <div className="feedback-wrapper">
         <div className="feedback-header">
-          <Image
-            src={mentee.profileImage}
+          <Img
+            src={image}
             alt={mentee.nickname}
+            onError={() => setImage("/default_profile.png")}
             className={"feedback-profile-img mt-1"}
             width={60}
             height={60}