fix: follow-detail-screen status->api 교체+안드로이드 ndk버전 업그레이드

android/app/build.gradle

@@ -118,8 +118,9 @@ android {
         }
     }
     packagingOptions {
+        // NOTE: 16KB 페이지 크기 지원을 위해 레거시 패키징 사용을 비활성
         jniLibs {
-            useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
+            useLegacyPackaging (false)
         }
     }
     androidResources {

android/gradle.properties

@@ -54,7 +54,7 @@ EX_DEV_CLIENT_NETWORK_INSPECTOR=true
 
 # Use legacy packaging to compress native libraries in the resulting APK.
 expo.useLegacyPackaging=false
-ndkVersion=26.1.10909125
-
+# ndkVersion=26.1.10909125
+ndkVersion=29.0.14206865
 # Whether the app is configured to use edge-to-edge via the app config or `react-native-edge-to-edge` plugin
 expo.edgeToEdgeEnabled=true

eas.json

@@ -28,7 +28,11 @@
     "production": {
       "autoIncrement": true,
       "android": {
-        "buildType": "app-bundle"
+        //"buildType": "apk"
+        "buildType": "app-bundle",
+        // NOTE: 16KB를 지원하기 위한 ndk 설정
+        "ndk": "29.0.14206865",
+        "image": "latest"
       },
       "ios": {
         "autoIncrement": "buildNumber",

src/entities/recipe/ui/DetailDeleteComponent.tsx

@@ -1,6 +1,6 @@
 import { Pressable, Alert } from 'react-native';
 import TrashIcon from '@/assets/img/recipe/trash-slide.svg';
-import { useRecipeDelete } from '@entities/recipe';
+import { useRecipeDelete } from '@entities/recipe/api/useRecipeDelete';
 
 const DetailDeleteComponent = ({ targetId }: { targetId: string }) => {
   const { mutate: deleteRecipe } = useRecipeDelete();

src/features/chat/ui/ChatInput.tsx

@@ -23,7 +23,7 @@ const ChatInput = forwardRef<TextInput, Props>(
           {userProfile ? (
             <Image
               source={{ uri: userProfile }}
-              style={{ width: 40, height: 40, borderRadius: '100%' }}
+              style={{ width: 40, height: 40, borderRadius: 20 }}
               cachePolicy={'memory-disk'}
             />
           ) : (

src/features/chat/ui/CommentItem.tsx

@@ -20,7 +20,7 @@ const CommentItem = ({ comment, onReplyPress, depth = 1 }: Props) => {
         {comment.profileImage ? (
           <Image
             source={{ uri: comment.profileImage }}
-            style={{ marginRight: 12, height: 40, width: 40, borderRadius: '100%' }}
+            style={{ marginRight: 12, height: 40, width: 40, borderRadius: 20 }}
             cachePolicy={'memory-disk'}
           />
         ) : (

src/features/feed/ui/FeedCard.tsx

@@ -35,7 +35,7 @@ const FeedCard = ({ feed, navigation }: Props) => {
                 <Image
                   source={{ uri: feed.profileImage }}
                   cachePolicy={'memory-disk'}
-                  style={{ marginRight: 12, width: 55, height: 55, borderRadius: '100%' }}
+                  style={{ marginRight: 12, width: 55, height: 55, borderRadius: 55 / 2 }}
                 />
               ) : (
                 <NoneUserSvg width={55} height={55} style={{ marginRight: 12 }} />

src/features/user/model/useMyPageControllerQueries.ts

@@ -8,7 +8,7 @@ import { myPageApi } from '../api/myPageApi';
 export const useFeedQuery = (userId: string) => {
   const { user: myUser } = useUserStore();
   const queryClient = useQueryClient();
-  const { data, isLoading, isError, refetch } = useQuery({
+  const { data, isError, refetch } = useQuery({
     queryKey: queryKeys.feed.list(userId),
     queryFn: () => {
       return myPageApi.getAllFeeds(userId);
@@ -64,7 +64,6 @@ export const useFeedQuery = (userId: string) => {
   return {
     profile,
     feeds,
-    isLoading,
     isError,
     ensure,
     refetch,

src/features/user/ui/EmptyStateUsingVideo.tsx

@@ -23,6 +23,7 @@ const EmptyStateUsingVideo = ({
 }: Props) => {
   const player = useVideoPlayer(video, player => {
     player.loop = true;
+    player.muted = true;
     player.play();
   });
 

src/features/user/ui/FollowItem.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, Text, Pressable, TouchableOpacity } from 'react-native';
 
 import { FollowingAndFollowerList } from '@entities/user';
@@ -9,11 +9,18 @@ import { UserProfileImage } from '@shared/ui';
 interface Props {
   user: FollowingAndFollowerList;
   navigation: RootNavigationProp<'FollowDetail'>;
+  followingList: FollowingAndFollowerList[] | undefined;
 }
 
-const FollowItem = ({ user, navigation }: Props) => {
-  // NOTE: 팔로우 기능 해야딤
-  const [isFollowing, setIsFollowing] = useState(true);
+const FollowItem = ({ user, navigation, followingList }: Props) => {
+  const [isFollowing, setIsFollowing] = useState(false);
+  useEffect(() => {
+    if (!followingList) return;
+
+    const found = followingList.some(item => item.userId === user.userId);
+    console.log(found);
+    setIsFollowing(found);
+  }, [followingList, user]);
 
   // 팔로우/언팔로우 mutation 훅
   const followMutation = useFollowUserQuery();

src/features/user/ui/FollowList.tsx

@@ -8,12 +8,17 @@ import EmptyFollowList from './EmptyFollowList';
 import FollowItem from './FollowItem';
 
 interface Props {
-  users: FollowingAndFollowerList[] | undefined;
+  followerList: FollowingAndFollowerList[] | undefined;
+  followingList: FollowingAndFollowerList[] | undefined;
   navigation: RootNavigationProp<'FollowDetail'>;
+  tab: string;
 }
 
-const FollowList = ({ users, navigation }: Props) => {
+const FollowList = ({ followerList, followingList, navigation, tab }: Props) => {
   const { height } = Dimensions.get('window');
+  console.log(tab);
+  const users = tab === 'follower' ? followerList : followingList;
+
   return (
     <View className="mt-[12px] flex-1">
       <FlatList
@@ -39,7 +44,9 @@ const FollowList = ({ users, navigation }: Props) => {
             />
           </View>
         }
-        renderItem={({ item }) => <FollowItem user={item} navigation={navigation} />}
+        renderItem={({ item }) => (
+          <FollowItem user={item} navigation={navigation} followingList={followingList} />
+        )}
       />
     </View>
   );

src/features/user/ui/header/AnotherUserHeaderSection.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { View, Text, TouchableOpacity, Pressable } from 'react-native';
 
 import { UserFeeds } from '@entities/user';
@@ -10,11 +10,17 @@ type Props = {
   navigation: RootNavigationProp<'AnotherUserPage'>;
   profile: UserFeeds['profileBlockDto'];
   feedCount: number | undefined;
+  isFollowing: boolean;
+  setIsFollowing: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const AnotherUserHeaderSection = ({ profile, navigation, feedCount }: Props) => {
-  const [isFollowing, setIsFollowing] = useState(true);
-
+const AnotherUserHeaderSection = ({
+  profile,
+  navigation,
+  feedCount,
+  isFollowing,
+  setIsFollowing,
+}: Props) => {
   // 팔로우/언팔로우 mutation 훅
   const followMutation = useFollowUserQuery();
 
@@ -32,6 +38,7 @@ const AnotherUserHeaderSection = ({ profile, navigation, feedCount }: Props) =>
       },
     );
   };
+
   return (
     <View
       style={[defaultShadow.roundedContainer]}

src/pages/user/ui/AnotherUserPage.tsx

@@ -1,15 +1,41 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, View } from 'react-native';
 import { AnotherUserHeader } from '@/src/entities/user';
-import { AnotherUserHeaderSection, AnotherUserFeedGrid, useFeedQuery } from '@features/user';
+import {
+  AnotherUserHeaderSection,
+  AnotherUserFeedGrid,
+  useFeedQuery,
+  useFollowingListQuery,
+} from '@features/user';
+import { useUserStore } from '@shared/store';
 import { AnotherUserPageProps } from '@shared/types';
 
 const AnotherUserPage = ({ navigation, route }: AnotherUserPageProps) => {
   const { userId } = route.params;
+  const { user: myUser } = useUserStore();
+
+  const { profile, feeds } = useFeedQuery(userId!);
+
+  const { data: FollowingListData, isLoading: isLoadingFollowingList } = useFollowingListQuery(
+    myUser?.id ?? '0',
+  );
+
+  console.log(FollowingListData);
+
+  const [isFollowing, setIsFollowing] = useState(false);
+
+  // NOTE: 팔로잉 여부 계산
+  useEffect(() => {
+    if (!FollowingListData) return;
+
+    const found = FollowingListData.some(item => item.userId === userId);
+    console.log('파운드');
+    console.log(found);
+    setIsFollowing(found);
+  }, [FollowingListData, userId]);
 
-  const { profile, feeds, isLoading: isLoadingRecipe } = useFeedQuery(userId!);
   if (!userId) return null;
-  else if (isLoadingRecipe || !profile) {
+  else if (!profile || isLoadingFollowingList) {
     return (
       <View className="flex-1 items-center justify-center bg-white">
         <ActivityIndicator size="large" color="#DC6E3F" />
@@ -25,6 +51,8 @@ const AnotherUserPage = ({ navigation, route }: AnotherUserPageProps) => {
           profile={profile}
           navigation={navigation}
           feedCount={feeds?.content.length}
+          isFollowing={isFollowing}
+          setIsFollowing={setIsFollowing}
         />
 
         {/* 피드/북마크 */}

src/pages/user/ui/FollowDetail.tsx

@@ -65,11 +65,14 @@ const FollowDetail = ({ navigation, route }: FollowDetailProps) => {
       <View className="flex w-full flex-1 flex-col px-[8px]">
         <View className={cn(Platform.OS === 'ios' ? 'h-[180px]' : 'h-[150px]')} />
         <SearchBox searchTitle="검색" />
-        {tab === 'follower' ? (
-          <FollowList users={FollowerListData} navigation={navigation} />
-        ) : tab === 'following' ? (
-          <FollowList users={FollowingListData} navigation={navigation} />
-        ) : null}
+        {tab && (
+          <FollowList
+            followerList={FollowerListData}
+            navigation={navigation}
+            followingList={FollowingListData}
+            tab={tab}
+          />
+        )}
       </View>
     </View>
   );

src/pages/user/ui/Mypage.tsx

@@ -19,12 +19,7 @@ const Mypage: React.FC<MyPageProps> = ({ navigation }) => {
   const { bottomSheetVisible, bottomSheetClose } = useSettingBottomSheetStore();
   const { user } = useUserStore();
 
-  const {
-    profile,
-    feeds,
-    isLoading: isLoadingFeed,
-    ensure: feedEnsure,
-  } = useFeedQuery(user?.id ?? '0');
+  const { profile, feeds, ensure: feedEnsure } = useFeedQuery(user?.id ?? '0');
   const {
     bookmarks,
     isStale: isStaleBookmark,
@@ -38,7 +33,7 @@ const Mypage: React.FC<MyPageProps> = ({ navigation }) => {
     }, [bookmarkEnsure, feedEnsure]),
   );
 
-  if (isLoadingFeed || isStaleBookmark || !profile) {
+  if (isStaleBookmark || !profile) {
     return (
       <View className="flex-1 items-center justify-center bg-white">
         <ActivityIndicator size="large" color="#DC6E3F" />

src/shared/api/useUserQuery.ts

@@ -28,6 +28,7 @@ export const useUserQuery = () => {
 
   useEffect(() => {
     if (query.isSuccess && query.data.result) {
+      console.log(query.data.result);
       setUser(query.data.result);
     }
   }, [query.isSuccess, query.data, setUser]);

src/shared/ui/UserProfileImage.tsx

@@ -11,7 +11,7 @@ const UserProfileImage: React.FC<Props> = ({ uri, size = 110 }) => {
   return uri ? (
     <Image
       source={{ uri }}
-      style={{ width: size, height: size, borderRadius: '100%' }}
+      style={{ width: size, height: size, borderRadius: size / 2 }}
       cachePolicy={'memory-disk'}
     />
   ) : (