fix: Image 최적화를 위한 cache, prefetch 적용

app.json

@@ -19,12 +19,7 @@
         "NSMicrophoneUsageDescription": "영상 녹화를 위해 마이크에 접근합니다.",
         "ITSAppUsesNonExemptEncryption": false
       },
-      "buildNumber": "12",
-      "splash": {
-        "image": "./assets/splash-large.png",
-        "resizeMode": "contain",
-        "backgroundColor": "#DC6E3F"
-      }
+      "buildNumber": "12"
     },
     "plugins": ["expo-apple-authentication", "expo-video"],
     "android": {

ios/Podfile.lock

@@ -282,6 +282,13 @@ PODS:
     - ExpoModulesCore
   - ExpoFont (13.3.2):
     - ExpoModulesCore
+  - ExpoImage (2.4.1):
+    - ExpoModulesCore
+    - libavif/libdav1d
+    - SDWebImage (~> 5.21.0)
+    - SDWebImageAVIFCoder (~> 0.11.0)
+    - SDWebImageSVGCoder (~> 1.7.0)
+    - SDWebImageWebPCoder (~> 0.14.6)
   - ExpoImagePicker (16.1.4):
     - ExpoModulesCore
   - ExpoKeepAwake (14.1.4):
@@ -340,6 +347,23 @@ PODS:
     - KakaoSDKCommon/Common (= 2.22.0)
   - KakaoSDKUser (2.22.0):
     - KakaoSDKAuth (= 2.22.0)
+  - libavif/core (0.11.1)
+  - libavif/libdav1d (0.11.1):
+    - libavif/core
+    - libdav1d (>= 0.6.0)
+  - libdav1d (1.2.0)
+  - libwebp (1.5.0):
+    - libwebp/demux (= 1.5.0)
+    - libwebp/mux (= 1.5.0)
+    - libwebp/sharpyuv (= 1.5.0)
+    - libwebp/webp (= 1.5.0)
+  - libwebp/demux (1.5.0):
+    - libwebp/webp
+  - libwebp/mux (1.5.0):
+    - libwebp/demux
+  - libwebp/sharpyuv (1.5.0)
+  - libwebp/webp (1.5.0):
+    - libwebp/sharpyuv
   - RCT-Folly (2024.11.18.00):
     - boost
     - DoubleConversion
@@ -2457,6 +2481,17 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - SDWebImage (5.21.3):
+    - SDWebImage/Core (= 5.21.3)
+  - SDWebImage/Core (5.21.3)
+  - SDWebImageAVIFCoder (0.11.1):
+    - libavif/core (>= 0.11.0)
+    - SDWebImage (~> 5.10)
+  - SDWebImageSVGCoder (1.7.0):
+    - SDWebImage/Core (~> 5.6)
+  - SDWebImageWebPCoder (0.14.6):
+    - libwebp (~> 1.0)
+    - SDWebImage/Core (~> 5.17)
   - SocketRocket (0.7.1)
   - Yoga (0.0.0)
 
@@ -2477,6 +2512,7 @@ DEPENDENCIES:
   - ExpoAsset (from `../node_modules/expo-asset/ios`)
   - ExpoFileSystem (from `../node_modules/expo-file-system/ios`)
   - ExpoFont (from `../node_modules/expo-font/ios`)
+  - ExpoImage (from `../node_modules/expo-image/ios`)
   - ExpoImagePicker (from `../node_modules/expo-image-picker/ios`)
   - ExpoKeepAwake (from `../node_modules/expo-keep-awake/ios`)
   - ExpoModulesCore (from `../node_modules/expo-modules-core`)
@@ -2571,6 +2607,13 @@ SPEC REPOS:
     - KakaoSDKAuth
     - KakaoSDKCommon
     - KakaoSDKUser
+    - libavif
+    - libdav1d
+    - libwebp
+    - SDWebImage
+    - SDWebImageAVIFCoder
+    - SDWebImageSVGCoder
+    - SDWebImageWebPCoder
     - SocketRocket
 
 EXTERNAL SOURCES:
@@ -2606,6 +2649,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo-file-system/ios"
   ExpoFont:
     :path: "../node_modules/expo-font/ios"
+  ExpoImage:
+    :path: "../node_modules/expo-image/ios"
   ExpoImagePicker:
     :path: "../node_modules/expo-image-picker/ios"
   ExpoKeepAwake:
@@ -2796,6 +2841,7 @@ SPEC CHECKSUMS:
   ExpoAsset: ef06e880126c375f580d4923fdd1cdf4ee6ee7d6
   ExpoFileSystem: 7f92f7be2f5c5ed40a7c9efc8fa30821181d9d63
   ExpoFont: cf508bc2e6b70871e05386d71cab927c8524cc8e
+  ExpoImage: b0b4a838c62bb9d5438bb475cccc85619a5f59dc
   ExpoImagePicker: 0963da31800c906e01c03e25d7c849f16ebf02a2
   ExpoKeepAwake: bf0811570c8da182bfb879169437d4de298376e7
   ExpoModulesCore: 00a1b5c73248465bd0b93f59f8538c4573dac579
@@ -2811,6 +2857,9 @@ SPEC CHECKSUMS:
   KakaoSDKAuth: 569b377eda622d93d4575240b8031cd658163eef
   KakaoSDKCommon: d57127c339fc79e73aa8b236a4c77211c29924f1
   KakaoSDKUser: 043bcd7e91454ebf3bf64f150c430e6f65f0a08d
+  libavif: 84bbb62fb232c3018d6f1bab79beea87e35de7b7
+  libdav1d: 23581a4d8ec811ff171ed5e2e05cd27bad64c39f
+  libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8
   RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
   RCTDeprecation: 5f638f65935e273753b1f31a365db6a8d6dc53b5
   RCTRequired: 8b46a520ea9071e2bc47d474aa9ca31b4a935bd8
@@ -2883,6 +2932,10 @@ SPEC CHECKSUMS:
   RNScreens: f0678748c5310b49a3f920f1485f5ec477afd345
   RNSVG: 794f269526df9ddc1f79b3d1a202b619df0368e3
   RNWorklets: c8214ac73c6bc6181f4564a9bcafba1db7ed0c44
+  SDWebImage: 16309af6d214ba3f77a7c6f6fdda888cb313a50a
+  SDWebImageAVIFCoder: afe194a084e851f70228e4be35ef651df0fc5c57
+  SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
+  SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: adb397651e1c00672c12e9495babca70777e411e
 

ios/zipbap.xcodeproj/project.pbxproj

@@ -275,6 +275,7 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNSVG/RNSVGFilters.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/React-Core_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/SDWebImage/SDWebImage.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/boost/boost_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/expo-dev-launcher/EXDevLauncher.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/expo-dev-menu/EXDevMenu.bundle",
@@ -292,6 +293,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNSVGFilters.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-Core_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SDWebImage.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/boost_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXDevLauncher.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXDevMenu.bundle",

ios/zipbap/Info.plist

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

package.json

@@ -38,6 +38,7 @@
     "expo": "~53.0.22",
     "expo-apple-authentication": "~7.2.4",
     "expo-dev-client": "~5.2.4",
+    "expo-image": "~2.4.1",
     "expo-image-picker": "^16.1.4",
     "expo-network": "~7.1.5",
     "expo-status-bar": "~2.2.3",

src/app/AndroidSplashScreen.tsx

@@ -1,5 +1,6 @@
+import { Image } from 'expo-image';
 import React from 'react';
-import { View, Image, Dimensions } from 'react-native';
+import { View, Dimensions } from 'react-native';
 import SplashImg from '@/assets/img/splash-large.png';
 
 const { width } = Dimensions.get('window');
@@ -15,7 +16,8 @@ const AndroidSplashScreen = () => {
           position: 'relative',
           top: -20,
         }}
-        resizeMode="contain"
+        contentFit="contain"
+        cachePolicy="memory-disk"
       />
     </View>
   );

src/app/Navigation.tsx

@@ -43,11 +43,7 @@ export function Navigation() {
             component={RecipeCreateForm}
             options={{ headerShown: false }}
           />
-          <Stack.Screen
-            name="AnotherUserPage"
-            component={AnotherUserPage}
-            options={{ header: () => <AnotherUserHeader /> }}
-          />
+
           {/* NOTE: 모달 페이지 관리 */}
           <Stack.Group
             screenOptions={{
@@ -62,6 +58,11 @@ export function Navigation() {
             <Stack.Screen name="ProfileEdit" component={ProfileEdit} />
             <Stack.Screen name="FollowDetail" component={FollowDetail} />
             <Stack.Screen name="Secession" component={Secession} />
+            <Stack.Screen
+              name="AnotherUserPage"
+              component={AnotherUserPage}
+              options={{ header: () => <AnotherUserHeader /> }}
+            />
           </Stack.Group>
         </Stack.Navigator>
       </NavigationContainer>

src/entities/recipe/api/useRecipeDelete.ts

@@ -9,6 +9,7 @@ export const useRecipeDelete = () => {
     queryClient.invalidateQueries({ queryKey: queryKeys.recipeTemp.all });
     queryClient.invalidateQueries({ queryKey: queryKeys.recipeFinal.all });
     queryClient.invalidateQueries({ queryKey: queryKeys.recipes.all });
+    queryClient.invalidateQueries({ queryKey: queryKeys.feed.all });
   };
   return useMutation({
     mutationFn: async (recipeId: string) => {

src/entities/recipe/ui/ArticleView.tsx

@@ -1,4 +1,5 @@
-import { View, Image, Text, Pressable } from 'react-native';
+import { Image } from 'expo-image';
+import { View, Text, Pressable } from 'react-native';
 
 import TimerIcon from '@/assets/img/recipe/timeer.svg';
 
@@ -18,7 +19,11 @@ const ArticleView = ({ item, navigate }: Props) => {
       onPress={() => navigate(item.id)}
       className="mb-[33px] flex-row gap-4 rounded-xl bg-white"
     >
-      <Image className="h-[90px] w-[94px] rounded-xl" source={{ uri: item.thumbnail }} />
+      <Image
+        source={{ uri: item.thumbnail }}
+        style={{ height: 90, width: 94, borderRadius: 12 }}
+        cachePolicy={'memory-disk'}
+      />
       <View className="flex-1">
         {/* 서브타이틀, 요리시간 */}
         <View className="flex-row items-center">

src/entities/recipe/ui/DetailDeleteComponent.tsx

@@ -1,12 +1,27 @@
-import { Pressable } from 'react-native';
-
+import { Pressable, Alert } from 'react-native';
 import TrashIcon from '@/assets/img/recipe/trash-slide.svg';
 import { useRecipeDelete } from '@entities/recipe';
 
 const DetailDeleteComponent = ({ targetId }: { targetId: string }) => {
   const { mutate: deleteRecipe } = useRecipeDelete();
+
   const handleDelete = () => {
-    deleteRecipe(targetId);
+    Alert.alert(
+      '레시피 삭제',
+      '정말 삭제하시겠습니까?',
+      [
+        {
+          text: '취소',
+          style: 'cancel',
+        },
+        {
+          text: '삭제',
+          style: 'destructive',
+          onPress: () => deleteRecipe(targetId),
+        },
+      ],
+      { cancelable: true },
+    );
   };
 
   return (

src/entities/recipe/ui/FeedView.tsx

@@ -1,4 +1,5 @@
-import { Image, Text, Pressable } from 'react-native';
+import { Image } from 'expo-image';
+import { Text, Pressable } from 'react-native';
 
 import { Recipe } from '../model';
 
@@ -10,7 +11,11 @@ interface Props {
 const FeedView = ({ item, navigate }: Props) => {
   return (
     <Pressable onPress={() => navigate(item.id)} className="mb-[33px] flex-col">
-      <Image className="relative h-52 self-stretch rounded-3xl" source={{ uri: item.thumbnail }} />
+      <Image
+        source={{ uri: item.thumbnail }}
+        style={{ height: 208, borderRadius: 24, position: 'relative', alignSelf: 'stretch' }}
+        cachePolicy={'memory-disk'}
+      />
       <Text className="mt-[16px] justify-start self-stretch font-['Pretendard'] text-lg font-bold leading-snug text-black">
         {item.title}
       </Text>

src/entities/recipe/ui/ImageView.tsx

@@ -1,4 +1,5 @@
-import { View, Image, Text, Pressable } from 'react-native';
+import { Image } from 'expo-image';
+import { View, Text, Pressable } from 'react-native';
 
 import { Recipe } from '../model';
 
@@ -13,7 +14,11 @@ const ImageView = ({ item, navigate }: Props) => {
       className="mb-[12px] flex-1 flex-col items-start gap-2"
       onPress={() => navigate(item.id)}
     >
-      <Image className="h-44 w-full rounded-[20px]" source={{ uri: item.thumbnail }} />
+      <Image
+        source={{ uri: item.thumbnail }}
+        style={{ height: 176, width: '100%', borderRadius: 20 }}
+        cachePolicy={'memory-disk'}
+      />
       <View className="w-full flex-col items-start">
         <Text className="w-full text-base font-semibold leading-normal text-black">
           {item.title}

src/entities/user/ui/AnotherUserHeader.tsx

@@ -1,12 +1,16 @@
+import { useNavigation } from '@react-navigation/native';
 import React, { useState } from 'react';
 import { TouchableOpacity } from 'react-native';
-
 import AlarmOffSvgIcon from '@/assets/img/alarm-off.svg';
 import AlarmOnSvgIcon from '@/assets/img/alarm-on.svg';
+import BackIcon from '@/assets/img/back-icon.svg';
 import HeaderLogo from '@/assets/img/header-logo.svg';
+import { RootNavigationProp } from '@shared/types';
 import { Header } from '@shared/ui';
 
 const AnotherUserHeader = () => {
+  const navigation = useNavigation<RootNavigationProp<'Main'>>();
+
   const [alarmOn, setAlarmOn] = useState(false); // false면 Off, true면 On
 
   const toggleAlarm = () => {
@@ -16,6 +20,15 @@ const AnotherUserHeader = () => {
   return (
     <Header
       style={undefined}
+      left={
+        <TouchableOpacity
+          onPress={() => {
+            navigation.goBack();
+          }}
+        >
+          <BackIcon />
+        </TouchableOpacity>
+      }
       center={<HeaderLogo width={75} height={12} />}
       right={
         <TouchableOpacity onPress={toggleAlarm}>

src/features/chat/ui/ChatInput.tsx

@@ -1,5 +1,6 @@
+import { Image } from 'expo-image';
 import React, { forwardRef, useState } from 'react';
-import { View, TextInput, Pressable, Image, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, TextInput, Pressable, Text, TouchableWithoutFeedback } from 'react-native';
 import NoneProfileImgSvg from '@/assets/img/none-profile-img.svg';
 import SendButtonIconSvg from '@/assets/img/send-button-icon.svg';
 import { useUserStore } from '@shared/store';
@@ -20,7 +21,11 @@ const ChatInput = forwardRef<TextInput, Props>(
       <TouchableWithoutFeedback>
         <View className="min-h-[80px] flex-row items-center gap-[16px] rounded-tl-3xl rounded-tr-3xl bg-g4 px-[16px] py-[12px]">
           {userProfile ? (
-            <Image source={{ uri: userProfile }} className="h-[40px] w-[40px] rounded-full" />
+            <Image
+              source={{ uri: userProfile }}
+              style={{ width: 40, height: 40, borderRadius: '100%' }}
+              cachePolicy={'memory-disk'}
+            />
           ) : (
             <NoneProfileImgSvg width={40} height={40} />
           )}

src/features/chat/ui/CommentItem.tsx

@@ -1,5 +1,6 @@
+import { Image } from 'expo-image';
 import React, { useState } from 'react';
-import { View, Text, Image, Pressable } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import NoneProfileImgSvg from '@/assets/img/none-profile-img.svg';
 import { Comment } from '@entities/comment';
 import { getTimeAgo } from '@shared/lib/getTimeAgo';
@@ -19,7 +20,8 @@ const CommentItem = ({ comment, onReplyPress, depth = 1 }: Props) => {
         {comment.profileImage ? (
           <Image
             source={{ uri: comment.profileImage }}
-            className="mr-[12px] h-[40px] w-[40px] rounded-full"
+            style={{ marginRight: 12, height: 40, width: 40, borderRadius: '100%' }}
+            cachePolicy={'memory-disk'}
           />
         ) : (
           <NoneProfileImgSvg width={40} height={40} style={{ marginRight: 12 }} />