fix: image prefetch(cache) 최적화

ios/zipbap/Info.plist

@@ -38,7 +38,7 @@
       </dict>
     </array>
     <key>CFBundleVersion</key>
-    <string>19</string>
+    <string>22</string>
     <key>ITSAppUsesNonExemptEncryption</key>
     <false/>
     <key>KAKAO_APP_KEY</key>

src/features/feed/api/useToggleBookmarkMutation.ts

@@ -6,7 +6,6 @@ import { useUserStore } from '@shared/store';
 export const useToggleBookmarkMutation = () => {
   const { user } = useUserStore();
   const queryClient = useQueryClient();
-  console.log(user?.id);
 
   return useMutation({
     mutationFn: async ({ recipeId, isBookmarked }: { recipeId: string; isBookmarked: boolean }) => {

src/features/feed/ui/FeedModalImageViewer.tsx

@@ -37,7 +37,6 @@ const FeedModalImageViewer = ({ visible, onClose, item }: Props) => {
               <Text className="mb-1 text-[14px] font-semibold color-sub1">
                 step {item.turn.toString().padStart(2, '0')}
               </Text>
-              <Text className="mb-4 text-[18px] font-bold color-black">{item.description}</Text>
               <View className="w-full flex-row justify-between gap-5">
                 <Text className="flex-1 text-[16px] font-medium leading-5 color-g1">
                   {item.description}

src/features/recipe/model/useRecipeCreateForm.ts

@@ -96,7 +96,6 @@ export const useRecipeCreateForm = () => {
   // 임시 저장
   const tempSaveMutation = useMutation({
     mutationFn: async (recipe: RecipeDetail) => {
-      console.log(recipe.id);
       const res = await apiInstance.put(`/recipes/${recipe.id}/temp`, recipe);
       return res.data;
     },

src/features/user/ui/FollowItem.tsx

@@ -33,7 +33,6 @@ const FollowItem = ({ user, navigation }: Props) => {
     );
   };
 
-  console.log(isFollowing);
   return (
     <TouchableOpacity
       className="flex-row items-center justify-between bg-white px-4 py-3"

src/pages/feed/ui/FeedDetail.tsx

@@ -1,12 +1,13 @@
 import { Image } from 'expo-image';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { Text, View, Pressable, ScrollView, TouchableOpacity } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import BookmarkOffSvg from '@/assets/img/feed/bookmark-off-icon.svg';
 import BookmarkOnSvg from '@/assets/img/feed/bookmark-on-icon.svg';
 import HeartOffSvg from '@/assets/img/feed/heart-off-icon.svg';
 import HeartOnSvg from '@/assets/img/feed/heart-on-icon.svg';
 import NoneUserSvg from '@/assets/img/none-profile-img.svg';
+import { usePrefetchImages } from '@/src/shared/lib/usePrefetchImages';
 import {
   useFeedDetailQuery,
   FeedBottomTab,
@@ -83,23 +84,19 @@ const FeedDetail = ({ navigation, route }: FeedDetailProps) => {
     }
   }, [feedDetail]);
 
-  // prefetch recipe orders image
-  useEffect(() => {
-    if (!feedDetail) return;
-
-    const prefetchStepImages = async () => {
-      for (const order of feedDetail.cookingOrders) {
-        if (order.image) {
-          const cachePath = await Image.getCachePathAsync(order.image);
+  // prefetch image
+  const imagesToPrefetch = useMemo(() => {
+    if (!feedDetail) return [];
 
-          if (!cachePath) await Image.prefetch(order.image);
-        }
-      }
-    };
-
-    prefetchStepImages();
+    return [
+      feedDetail.thumbnail,
+      feedDetail.profileImage,
+      ...feedDetail.cookingOrders.map(order => order.image),
+    ];
   }, [feedDetail]);
 
+  usePrefetchImages(imagesToPrefetch);
+
   // Skeleton ui
   if (!feedDetail || !feedId || isLoading) return <FeedDetailSkeleton />;
 

src/pages/recipe/ui/MyRecipe.tsx

@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
-import { Image } from 'expo-image';
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { View, FlatList } from 'react-native';
 import { Portal } from 'react-native-portalize';
 import loginVideo from '@/assets/video/emptyScreenVideo.mp4';
+import { usePrefetchImages } from '@/src/shared/lib/usePrefetchImages';
 import { RecipeItemSkeleton } from '@features/recipe';
 import { EmptyStateUsingVideo } from '@features/user';
 import { useCategories } from '@entities/category';
@@ -37,24 +37,9 @@ const MyRecipe: React.FC<RecipePageProps> = ({ navigation }) => {
   // recipes
   const recipeList: Recipe[] = useMemo(() => recipes?.result || [], [recipes]);
 
-  // prefetch image
-  useEffect(() => {
-    if (!recipeList) return;
-    const prefetchMyrecipeImage = async () => {
-      for (const recipe of recipeList) {
-        if (!recipe.thumbnail) return;
-
-        const cachePath = await Image.getCachePathAsync(recipe.thumbnail);
-
-        // cache miss
-        if (!cachePath) {
-          await Image.prefetch(recipe.thumbnail);
-        }
-      }
-    };
-
-    prefetchMyrecipeImage();
-  }, [recipeList]);
+  // prefetch recipe thumbnail
+  const thumbnailUrls = useMemo(() => recipeList.map(recipe => recipe.thumbnail), [recipeList]);
+  usePrefetchImages(thumbnailUrls);
 
   // filtered recipes
   const filteredRecipes = recipeList.filter(recipe => {

src/pages/recipe/ui/RecipeCreate.tsx

@@ -1,9 +1,9 @@
-import { Image } from 'expo-image';
-import React, { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { View, FlatList, TouchableOpacity } from 'react-native';
 import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
 import PlusIcon from '@/assets/img/recipe/plus-float.svg';
 import loginVideo from '@/assets/video/emptyScreenVideo.mp4';
+import { usePrefetchImages } from '@/src/shared/lib/usePrefetchImages';
 import { EmptyStateUsingVideo } from '@features/user';
 import { useRecipeListQuery, ArticleView, DetailDeleteComponent, Recipe } from '@entities/recipe';
 import { useRecipeTypeStore } from '@shared/store';
@@ -13,7 +13,7 @@ interface MainPageProps {
   navigation: RootNavigationProp<'Main'>;
 }
 
-const RecipeCreate: React.FC<MainPageProps> = ({ navigation }) => {
+const RecipeCreate = ({ navigation }: MainPageProps) => {
   // recipe type
   const { recipeType } = useRecipeTypeStore();
 
@@ -22,22 +22,9 @@ const RecipeCreate: React.FC<MainPageProps> = ({ navigation }) => {
   const recipeList = useMemo(() => (data || []) as Recipe[], [data]);
   const isRecipeListEmpty = recipeList.length === 0;
 
-  // prefetch image
-  useEffect(() => {
-    if (isRecipeListEmpty) return;
-    const perfetchImage = async () => {
-      for (const recipe of recipeList) {
-        if (!recipe.thumbnail) return;
-
-        const cachePath = await Image.getCachePathAsync(recipe.thumbnail);
-
-        if (!cachePath) {
-          await Image.prefetch(recipe.thumbnail);
-        }
-      }
-    };
-    perfetchImage();
-  }, [isRecipeListEmpty, recipeList]);
+  // prefetch thumbnail
+  const thumbnailUrls = useMemo(() => recipeList.map(recipe => recipe.thumbnail), [recipeList]);
+  usePrefetchImages(thumbnailUrls);
 
   // navigate
   const navigateToRecipeCreateForm = () => {

src/pages/recipe/ui/RecipeDetail.tsx

@@ -1,7 +1,8 @@
 import { Image } from 'expo-image';
-import React, { useEffect } from 'react';
+import React, { useMemo } from 'react';
 import { Text, View, ScrollView } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { usePrefetchImages } from '@/src/shared/lib/usePrefetchImages';
 import {
   RecipeDetailSection,
   RecipeStepsArticleViewType,
@@ -43,22 +44,11 @@ const RecipeDetail = ({ navigation, route }: RecipeDetailProps) => {
   // recipe list
   const { data: detailRecipe, isLoading } = useRecipeDetailQuery(recipeId);
 
-  // prefetch: recipe orders image
-  useEffect(() => {
-    if (!detailRecipe) return;
-
-    const prefetchStepImages = async () => {
-      for (const order of detailRecipe.cookingOrders) {
-        if (order.image) {
-          const cachePath = await Image.getCachePathAsync(order.image);
-
-          if (!cachePath) await Image.prefetch(order.image);
-        }
-      }
-    };
-
-    prefetchStepImages();
-  }, [detailRecipe]);
+  const thumbnailUrls = useMemo(
+    () => detailRecipe?.cookingOrders.map(order => order.image) || [],
+    [detailRecipe],
+  );
+  usePrefetchImages(thumbnailUrls);
 
   // category
   const { categoryValue } = useCategories();
@@ -142,7 +132,7 @@ const RecipeDetail = ({ navigation, route }: RecipeDetailProps) => {
                     {detailRecipe?.ingredientInfo}
                   </Text>
                 }
-                subTitle="레시피 소개"
+                subTitle="재료 소개"
               />
               {/* 레시피 영상 */}
               {detailRecipe?.video && (

src/pages/user/ui/ProfileEdit.tsx

@@ -16,7 +16,6 @@ import {
 
 const ProfileEdit = ({ navigation, route }: ProfileEditProps) => {
   const { userId } = route.params;
-  console.log(userId);
 
   const { user } = useUserStore();
 

src/pages/user/ui/Secession.tsx

@@ -9,7 +9,6 @@ import { defaultShadow, ModalHeader } from '@shared/ui';
 
 const Secession = ({ navigation, route }: SecessionProps) => {
   const { userId } = route.params;
-  console.log(userId);
   const insets = useSafeAreaInsets();
   const [confirmText, setConfirmText] = useState('');
   const [isChecked, setIsChecked] = useState(false);

src/pages/user/ui/UserSettingBottomSheet.tsx

@@ -31,7 +31,6 @@ const UserSettingBottomSheet = ({
   const handleCatagorySave = () => {
     // 카테고리 저장 로직
     bottomSheetClose();
-    console.log(2);
   };
   console.log(pushAll);
 

src/shared/lib/usePrefetchImages.ts

@@ -0,0 +1,34 @@
+import { Image } from 'expo-image';
+import { useEffect, useMemo } from 'react';
+
+type PrefetchableImages = string | undefined | null;
+
+const CHUNK_SIZE = 10;
+
+export const usePrefetchImages = (imageUrls: readonly PrefetchableImages[]) => {
+  const stringifiedUrls = useMemo(() => JSON.stringify(imageUrls), [imageUrls]);
+
+  useEffect(() => {
+    const urls: PrefetchableImages[] = JSON.parse(stringifiedUrls);
+    const prefetchUrls = urls.filter((url): url is string => !!url);
+
+    if (prefetchUrls.length === 0) return;
+
+    const executePrefetchInChunks = async () => {
+      for (let i = 0; i < prefetchUrls.length; i += CHUNK_SIZE) {
+        const chunk = prefetchUrls.slice(i, i + CHUNK_SIZE);
+
+        const prefetchTasks = chunk.map(async url => {
+          const cachePath = await Image.getCachePathAsync(url);
+          if (!cachePath) {
+            return Image.prefetch(url);
+          }
+        });
+
+        await Promise.allSettled(prefetchTasks);
+      }
+    };
+
+    executePrefetchInChunks();
+  }, [stringifiedUrls]);
+};