Feat: 환경에 따른 이미지 핸들링

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --mode development",
+    "build:dev": "tsc && vite build --mode development",
     "build": "tsc && vite build --mode production",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",

src/apis/getSearchedChallengeItem.ts

@@ -1,3 +1,4 @@
+import { APIImage } from "@/types/apiImageType";
 import { acceptInstance } from "./axios/axios";
 import requests from "./axios/request";
 
@@ -13,9 +14,7 @@ interface Data {
   keyword: string;
   participantCount: number;
   pointPerPerson: number;
-  fileResponse: {
-    source: string;
-  };
+  fileResponse: APIImage;
 }
 
 const getSearchedChallengeItem = async ({
@@ -44,9 +43,7 @@ const getSearchedChallengeItem = async ({
 
       const { last } = res.data.data;
       const { pageNumber } = res.data.data.pageable;
-      return (
-        { posts: transformedContent, isLast: last, page: pageNumber } || {}
-      );
+      return { posts: transformedContent, isLast: last, page: pageNumber };
     });
   return data || {};
 };

src/components/Admin/AdminInstance/InstanceListComponent/InstanceListComponent.tsx

@@ -7,6 +7,7 @@ import { useQueryClient } from "react-query";
 import { encrypt } from "@/hooks/useCrypto";
 import { PATH } from "@/constants/path";
 import { format } from "date-fns";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 type instanceListPropsType = {
   instanceList: instanceListDataType[];
@@ -26,7 +27,7 @@ const InstanceListComponent = ({ instanceList }: instanceListPropsType) => {
       <ul className="flex flex-col gap-10 rounded-xl h-full">
         <>
           {instanceList.map((item: instanceListDataType) => {
-            const imageData = item.fileResponse.source;
+            const imageData = makeAPIImage(item.fileResponse);
             const startDate = format(item.startedAt, "yyyy-MM-dd");
             const completedDate = format(item.completedAt, "yyyy-MM-dd");
             return (

src/components/Certification/Certification/ChallengeInformation/ChallengeInformation.tsx

@@ -10,6 +10,7 @@ import { useParams } from "react-router-dom";
 import Loading from "@/components/Common/Loading/Loading";
 import { decrypt } from "@/hooks/useCrypto";
 import { useGetCertificationInstanceDetail } from "@/hooks/queries/useCertificationQuery";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 function ChallengeInformation() {
   const { id } = useParams();
@@ -29,7 +30,7 @@ function ChallengeInformation() {
     <>
       <div className="relative">
         <ChallengeImage
-          imgSrc={data.fileResponse.source}
+          imgSrc={makeAPIImage(data.fileResponse)}
           alt={"챌린지 이미지"}
         />
 

src/components/Certification/MyAllCurrentCertification/MyProfile/MyProfile.tsx

@@ -3,6 +3,7 @@ import { FRAMEID } from "@/constants/localStorageKey";
 import { decrypt } from "@/hooks/useCrypto";
 import { useGetUserProfile } from "@/hooks/queries/useProfileQuery";
 import { profileImageFrame } from "@/data/frameData";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 interface Props {
   decryptedUserId: number;
@@ -24,7 +25,7 @@ function MyProfile({ decryptedUserId }: Props) {
             />
           )}
           <Profile.Image
-            imgSrc={userProfile.fileResponse.source}
+            imgSrc={makeAPIImage(userProfile.fileResponse)}
             alt={"프로필 이미지"}
             width="w-[13rem]"
           />

src/components/Certification/OthersAllCurrentCertification/OthersProfile/OthersProfile.tsx

@@ -1,6 +1,7 @@
 import { Profile } from "@/components/Common/Profile/Profile";
 import { useGetUserProfile } from "@/hooks/queries/useProfileQuery";
 import { profileImageFrame } from "@/data/frameData";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 interface Props {
   decryptedUserId: number;
@@ -20,7 +21,7 @@ function OthersProfile({ decryptedUserId }: Props) {
             />
           )}
           <Profile.Image
-            imgSrc={userProfile.fileResponse.source}
+            imgSrc={makeAPIImage(userProfile.fileResponse)}
             alt={"프로필 이미지"}
             width="w-[13rem]"
           />

src/components/ChallengeDetail/ChallengeDetailContent/ChallengeDetailContent.tsx

@@ -4,6 +4,7 @@ import Image from "@/components/ChallengeDetail/Image/Image";
 import Information from "@/components/ChallengeDetail/Information/Information";
 import Line from "@/components/ChallengeDetail/Line/Line";
 import ParticipationCancelButton from "@/components/ChallengeDetail/ParticipationCancelButton/ParticipationCancelButton";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 import { useGetChallengeDetail } from "@/hooks/queries/useInstanceDetailQuery";
 
 interface Props {
@@ -26,7 +27,7 @@ function ChallengeDetailContent({ decryptId }: Props) {
   return (
     <>
       <div className="max-w-[54.6rem] w-full flex flex-col gap-[2.3rem]">
-        <Image imgSrc={data.fileResponse.source} alt={"챌린지 이미지"} />
+        <Image imgSrc={makeAPIImage(data.fileResponse)} alt={"챌린지 이미지"} />
         <CoreInformation
           challengeTitle={data.title}
           applicant={data.participantCount}

src/components/Common/ChallengeItem/ChallengeItem.tsx

@@ -80,7 +80,7 @@ function Image({
     horizontal: "w-[18.8rem] h-[12.6rem]",
     vertical: maxWidth
       ? `w-full ${maxWidth} ${paddingBottom}`
-      : "w-full max-w-[16.4rem] pb-[77%]",
+      : "w-full pb-[70%]",
   };
 
   const onErrorImageLoad = (

src/components/Common/VerticalChallengeItems/VerticalChallengeItems.tsx

@@ -2,15 +2,15 @@ import { useNavigate } from "react-router-dom";
 import ChallengeItem from "../ChallengeItem/ChallengeItem";
 import { PATH } from "@/constants/path";
 import { encrypt } from "@/hooks/useCrypto";
+import { APIImage } from "@/types/apiImageType";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 interface ChallengeItemProps {
   instanceId: number;
   title: string;
   participantCnt: number;
   pointPerPerson: number;
-  fileResponse: {
-    source: string;
-  };
+  fileResponse: APIImage;
 }
 
 interface Props {
@@ -31,7 +31,7 @@ function VerticalChallengeItems({ data }: Props) {
             onClick={() => onClick(encrypt(item.instanceId))}
           >
             <ChallengeItem.Image
-              imgSrc={item.fileResponse.source}
+              imgSrc={makeAPIImage(item.fileResponse)}
               direction="vertical"
               alt="챌린지 이미지"
             >

src/components/Home/InfiniteNewChallenge/InfiniteNewChallenge.tsx

@@ -27,7 +27,7 @@ function InfiniteNewChallenge() {
           </EmptyDataView>
         </div>
       )}
-      <div className="w-full max-w-[72.2rem] grid grid-cols-4 gap-x-[2.2rem] gap-y-[0.3rem] _md:grid-cols-3 _sm:grid-cols-2">
+      <div className=" w-full max-w-[72.2rem] grid grid-cols-4 gap-x-[2.2rem] gap-y-[0.3rem] _md:grid-cols-3 _sm:grid-cols-2">
         {data?.pages.map((page) => (
           <VerticalChallengeItems key={page.page} data={page.posts} />
         ))}

src/components/Home/PopularChallengeItems/PopularChallengeItems.tsx

@@ -8,6 +8,7 @@ import { useState } from "react";
 import { encrypt } from "@/hooks/useCrypto";
 import { useGetPopularInstance } from "@/hooks/queries/useHomeInstanceQuery";
 import EmptyDataComponent from "../EmptyDataComponent/EmptyDataComponent";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 function PopularChallengeItems() {
   const [clickPossible, setClickPossible] = useState<boolean>(true);
@@ -45,7 +46,7 @@ function PopularChallengeItems() {
                       onClick={() => onClick(item.instanceId, clickPossible)}
                     >
                       <ChallengeItem.Image
-                        imgSrc={item.fileResponse.source}
+                        imgSrc={makeAPIImage(item.fileResponse)}
                         alt="챌린지 사진"
                         direction="horizontal"
                       >

src/components/Home/SuggestionChallengeItems/SuggestionChallengeItems.tsx

@@ -8,6 +8,7 @@ import { useState } from "react";
 import { encrypt } from "@/hooks/useCrypto";
 import { useGetRecommendInstance } from "@/hooks/queries/useHomeInstanceQuery";
 import EmptyDataComponent from "../EmptyDataComponent/EmptyDataComponent";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 function SuggestionChallengeItems() {
   const [clickPossible, setClickPossible] = useState<boolean>(true);
@@ -43,7 +44,7 @@ function SuggestionChallengeItems() {
                       onClick={() => onClick(item.instanceId, clickPossible)}
                     >
                       <ChallengeItem.Image
-                        imgSrc={item.fileResponse.source}
+                        imgSrc={makeAPIImage(item.fileResponse)}
                         alt="챌린지 사진"
                         direction="horizontal"
                       >

src/components/Main/MyChallenge/MyChallengeActivityList/MyChallengeActivityList.tsx

@@ -11,6 +11,7 @@ import CertificationModal from "@/components/Main/MyChallenge/MyChallengeModal/C
 import { EmptyDataView } from "@/components/Common/EmptyDataView/EmptyDataView";
 import { PATH } from "@/constants/path";
 import { useModalStore } from "@/stores/modalStore";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 interface PassItemModal {
   e: React.MouseEvent;
@@ -70,7 +71,7 @@ const MyChallengeActivityList = () => {
                 <div className="min-w-[16.4rem] w-[16.4rem]">
                   <ChallengeItem>
                     <ChallengeItem.Image
-                      imgSrc={item.fileResponse.source}
+                      imgSrc={makeAPIImage(item.fileResponse)}
                       alt={"챌린지 이미지"}
                       direction="vertical"
                     >

src/components/Main/MyChallenge/MyChallengeDoneList/MyChallengeDoneList.tsx

@@ -9,6 +9,7 @@ import React from "react";
 import { EmptyDataView } from "@/components/Common/EmptyDataView/EmptyDataView";
 import { useModalStore } from "@/stores/modalStore";
 import { useGetMyDoneChallenges } from "@/hooks/queries/useMyChallengeQuery";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 const MyChallengeDoneList = () => {
   const { setModal } = useModalStore();
@@ -60,7 +61,7 @@ const MyChallengeDoneList = () => {
                 <div className="min-w-[16.4rem] w-[16.4rem]">
                   <ChallengeItem>
                     <ChallengeItem.Image
-                      imgSrc={item.fileResponse.source}
+                      imgSrc={makeAPIImage(item.fileResponse)}
                       alt={"챌린지 이미지"}
                       direction="vertical"
                     >

src/components/Main/MyChallenge/MyChallengePreActivityList/MyChallengePreActivityList.tsx

@@ -6,6 +6,7 @@ import MyChallengeWrap from "../MyChallengeWrap/MyChallengeWrap";
 import { useGetMyPreActivityChallenges } from "@/hooks/queries/useMyChallengeQuery";
 import { EmptyDataView } from "@/components/Common/EmptyDataView/EmptyDataView";
 import { PATH } from "@/constants/path";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 function MyChallengePreActivityList() {
   const { data } = useGetMyPreActivityChallenges();
@@ -29,7 +30,7 @@ function MyChallengePreActivityList() {
                 <div className="min-w-[16.4rem] w-[16.4rem] h-[12.6rem]">
                   <ChallengeItem>
                     <ChallengeItem.Image
-                      imgSrc={item.fileResponse.source}
+                      imgSrc={makeAPIImage(item.fileResponse)}
                       alt={"챌린지 이미지"}
                       direction="vertical"
                     >

src/components/MyPage/InterestChallenge/InfiniteInterestChallenge/InfiniteInterestChallenge.tsx

@@ -2,6 +2,7 @@ import ChallengeItem from "@/components/Common/ChallengeItem/ChallengeItem";
 import { EmptyDataView } from "@/components/Common/EmptyDataView/EmptyDataView";
 import LoadingBox from "@/components/Common/Loading/LoadingBox/LoadingBox";
 import { PATH } from "@/constants/path";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 import {
   useDeleteLikesChallenge,
   useGetInfiniteLikedChallenges,
@@ -51,7 +52,7 @@ function InfiniteInterestChallenge() {
           </div>
         )}
         {!!data?.pages[0].posts.length && (
-          <div className="pt-[3rem] _sm:pt-[1.6rem] w-full max-w-[51.5rem] _sm:max-w-[34.9rem] grid grid-cols-3 gap-x-[1rem] _sm:grid-cols-2">
+          <div className="w-full max-w-[72.2rem] grid grid-cols-4 gap-x-[2.2rem] gap-y-[0.3rem] _md:grid-cols-3 _sm:grid-cols-2">
             {data?.pages.map((page, pageIndex) =>
               page.posts.map(
                 (post: InstanceThumbnailDataType, postIndex: number) => (
@@ -63,11 +64,9 @@ function InfiniteInterestChallenge() {
                       onClick={() => onClickChallengeItem(post.instanceId)}
                     >
                       <ChallengeItem.Image
-                        imgSrc={post.fileResponse.source}
+                        imgSrc={makeAPIImage(post.fileResponse)}
                         alt={"챌린지 이미지"}
                         direction="vertical"
-                        maxWidth="max-w-[16.5rem]"
-                        paddingBottom="pb-[72.7%]"
                       >
                         <ChallengeItem.Heart
                           onClick={(e) => onClickHeart(e, post.likesId)}

src/components/MyPage/MyPage/MyProfile/MyProfile.tsx

@@ -6,6 +6,7 @@ import { FRAMEID } from "@/constants/localStorageKey";
 import { decrypt } from "@/hooks/useCrypto";
 import { useGetMyProfile } from "@/hooks/queries/useProfileQuery";
 import { profileImageFrame } from "@/data/frameData";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 function MyProfile() {
   const { data } = useGetMyProfile();
@@ -29,7 +30,7 @@ function MyProfile() {
               />
             )}
             <Profile.Image
-              imgSrc={data.fileResponse.source}
+              imgSrc={makeAPIImage(data.fileResponse)}
               alt="프로필 이미지"
               width="w-[10.2rem]"
             />

src/components/MyPage/UserInfoEdit/UserInformationEditForm/UserInformationEditForm.tsx

@@ -15,9 +15,9 @@ import { Input, TextArea } from "@/components/Common/Form";
 import { useGetCheckNickName } from "@/hooks/queries/useUserQuery";
 import Button from "@/components/Common/Button";
 import ProfileImage from "../../MyPage/UserEdit/UserImg/UserImg";
-import { makeBase64URL } from "@/utils/makeBase64URL";
 import userImage from "@/assets/icon/image-edit.svg";
 import CommonModal from "@/components/Common/CommonModal/CommonModal";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 interface UserInformationFormType {
   nickname: string;
@@ -136,15 +136,11 @@ function UserInformationEditForm() {
   };
 
   useEffect(() => {
+    if (!profileData) return;
     const file = changedImage?.[0];
 
     if (!file) {
-      setImagePreview(
-        makeBase64URL({
-          uri: profileData?.fileResponse?.source,
-          format: "jpg",
-        })
-      );
+      setImagePreview(makeAPIImage(profileData.fileResponse));
       return;
     }
 
@@ -154,7 +150,7 @@ function UserInformationEditForm() {
     return () => {
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
-  }, [profileData?.fileResponse?.source, changedImage]);
+  }, [profileData, changedImage]);
 
   const validateFileSize = (files: FileList | null) => {
     if (!files?.length) return true;

src/helpers/makeAPIImage.ts

@@ -0,0 +1,8 @@
+import { APIImage } from "@/types/apiImageType";
+import { makeBase64URL } from "@/utils/makeBase64URL";
+
+export const makeAPIImage = (file: APIImage) => {
+  const { source, environment } = file;
+  if (environment === "LOCAL") return makeBase64URL({ uri: source });
+  else return source;
+};

src/pages/Admin/AdminInstance/InstanceEdit/InstanceEdit.tsx

@@ -18,7 +18,7 @@ import { interestsOption } from "@/data/InterestData";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { ko } from "date-fns/locale";
-import { makeBase64URL } from "@/utils/makeBase64URL";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 type DateRange = [Date | null, Date | null];
 
@@ -108,12 +108,7 @@ const InstanceEdit = () => {
     trigger("image");
     const file = image?.[0];
     if (!file) {
-      setImagePreview(
-        makeBase64URL({
-          uri: instanceDetail?.fileResponse?.source,
-          format: "jpg",
-        })
-      );
+      setImagePreview(makeAPIImage(instanceDetail.fileResponse));
       return;
     }
 
@@ -123,7 +118,7 @@ const InstanceEdit = () => {
     return () => {
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
-  }, [image, instanceDetail?.fileResponse?.source, trigger]);
+  }, [image, instanceDetail, trigger]);
 
   useEffect(() => {
     if (instanceDetail) {

src/pages/Certification/OthersCurrentCertification/OthersCurrentCertification.tsx

@@ -9,6 +9,7 @@ import { useParams } from "react-router-dom";
 import { AllWeekCertificationDataType } from "@/types/certificationType";
 import LoadingBox from "@/components/Common/Loading/LoadingBox/LoadingBox";
 import { useGetAllCertificationWeek } from "@/hooks/queries/useCertificationQuery";
+import { makeAPIImage } from "@/helpers/makeAPIImage";
 
 function OthersCurrentCertification() {
   const { id } = useParams();
@@ -39,7 +40,7 @@ function OthersCurrentCertification() {
                 <div>
                   <div className="flex justify-between mb-[2.3rem] _sm:mb-[1.7rem]">
                     <OthersProfile
-                      imgSrc={post.profile.source}
+                      imgSrc={makeAPIImage(post.profile)}
                       alt="프로필 이미지"
                       nickName={post.nickname}
                       frameId={post.frameId}