feat: 해당하는 페이지에서 하단 탭 터치시 스크롤 최상단으로 이동

app/(protected)/(tabs)/_layout.tsx

@@ -1,5 +1,5 @@
 import { Tabs } from "expo-router";
-import { Platform, Text, View } from "react-native";
+import { DeviceEventEmitter, Platform, Text, View } from "react-native";
 
 import { HeaderWithBack, HeaderWithNotification } from "@/components/Header";
 import useSubscribeNotification from "@/hooks/useSubscribeNotification";
@@ -81,6 +81,14 @@ export default function TabsLayout() {
             title: "Home",
             tabBarIcon: ({ color }) => <TabIcon color={color} name="HOME" />,
           }}
+          listeners={({ navigation, route }) => ({
+            tabPress: (e) => {
+              const state = navigation.getState();
+              if (state.routes[state.index].name === route.name) {
+                DeviceEventEmitter.emit("SCROLL_HOME_TO_TOP");
+              }
+            },
+          })}
         />
         <Tabs.Screen
           name="friend"
@@ -89,6 +97,28 @@ export default function TabsLayout() {
             title: "Friend",
             tabBarIcon: ({ color }) => <TabIcon color={color} name="FRIEND" />,
           }}
+          listeners={({ navigation, route }) => ({
+            tabPress: (e) => {
+              const rootState = navigation.getState();
+              if (rootState.routes[rootState.index].name === route.name) {
+                const nestedState = rootState.routes[rootState.index].state as
+                  | {
+                      index: number;
+                      routeNames: string[];
+                    }
+                  | undefined;
+                if (nestedState) {
+                  const topTabIndex = nestedState.index;
+                  const topTabName = nestedState.routeNames[topTabIndex];
+                  if (topTabName === "index") {
+                    DeviceEventEmitter.emit("SCROLL_FRIEND_TO_TOP");
+                  } else if (topTabName === "request") {
+                    DeviceEventEmitter.emit("SCROLL_REQUEST_TO_TOP");
+                  }
+                }
+              }
+            },
+          })}
         />
         <Tabs.Screen
           name="upload"
@@ -119,6 +149,14 @@ export default function TabsLayout() {
             title: "MyPage",
             tabBarIcon: ({ color }) => <TabIcon color={color} name="MY_PAGE" />,
           }}
+          listeners={({ navigation, route }) => ({
+            tabPress: (e) => {
+              const state = navigation.getState();
+              if (state.routes[state.index].name === route.name) {
+                DeviceEventEmitter.emit("SCROLL_MY_PAGE_TO_TOP");
+              }
+            },
+          })}
         />
       </Tabs>
     </>

app/(protected)/(tabs)/friend/index.tsx

@@ -1,5 +1,5 @@
 import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import ErrorScreen from "@/components/ErrorScreen";
 import { FriendItem } from "@/components/FriendItem";
@@ -23,6 +23,7 @@ export default function Friend() {
     isFetchingNextPage,
     error,
     loadMore,
+    refetch,
   } = useInfiniteLoad({
     queryFn: getFriends(keyword),
     queryKey: ["friends", keyword],
@@ -35,11 +36,13 @@ export default function Friend() {
   }, 200);
 
   // 친구창에 focus 들어올 때마다 친구목록 새로고침 (검색중일 때 제외)
-  useFocusEffect(() => {
-    if (!keyword && !isFetchingNextPage) {
-      queryClient.invalidateQueries({ queryKey: ["friends"] });
-    }
-  });
+  useFocusEffect(
+    useCallback(() => {
+      if (!keyword && !isFetchingNextPage) {
+        queryClient.invalidateQueries({ queryKey: ["friends"] });
+      }
+    }, [queryClient, keyword, isFetchingNextPage]),
+  );
 
   // 친구의 운동 정보가 바뀌면 쿼리 다시 패치하도록 정보 구독
   useEffect(() => {
@@ -80,6 +83,7 @@ export default function Friend() {
 
   return (
     <SearchLayout
+      refetch={refetch}
       data={friends}
       onChangeKeyword={handleKeywordChange}
       loadMore={loadMore}

app/(protected)/(tabs)/friend/request.tsx

@@ -1,5 +1,10 @@
-import { useEffect } from "react";
-import { ActivityIndicator, FlatList, View } from "react-native";
+import { useCallback, useEffect, useRef } from "react";
+import {
+  ActivityIndicator,
+  DeviceEventEmitter,
+  FlatList,
+  View,
+} from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 import ErrorScreen from "@/components/ErrorScreen";
@@ -20,6 +25,7 @@ const LIMIT = 12;
 
 export default function Request() {
   const queryClient = useQueryClient();
+  const flatListRef = useRef<FlatList>(null);
 
   // 유저의 친구 요청 정보 조회
   const {
@@ -28,6 +34,7 @@ export default function Request() {
     isFetchingNextPage,
     error,
     loadMore,
+    refetch,
   } = useInfiniteLoad({
     queryFn: getFriendRequests,
     queryKey: ["friendRequests"],
@@ -36,11 +43,13 @@ export default function Request() {
   const hasRequests = !!requestData?.pages[0].total;
 
   // 친구 요청창에 focus 들어올 때마다 친구목록 새로고침
-  useFocusEffect(() => {
-    if (!isFetchingNextPage) {
-      queryClient.invalidateQueries({ queryKey: ["friendRequests"] });
-    }
-  });
+  useFocusEffect(
+    useCallback(() => {
+      if (!isFetchingNextPage) {
+        queryClient.invalidateQueries({ queryKey: ["friendRequests"] });
+      }
+    }, [isFetchingNextPage, queryClient]),
+  );
 
   // 친구 요청이 추가되면 쿼리 다시 패치하도록 정보 구독
   useEffect(() => {
@@ -60,6 +69,20 @@ export default function Request() {
     };
   }, [queryClient.invalidateQueries]);
 
+  const handleScrollToTop = useCallback(() => {
+    flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
+    refetch();
+  }, [refetch]);
+
+  useEffect(() => {
+    const subscription = DeviceEventEmitter.addListener(
+      "SCROLL_REQUEST_TO_TOP",
+      () => handleScrollToTop,
+    );
+
+    return () => subscription.remove();
+  }, [handleScrollToTop]);
+
   // 에러 스크린
   if (error) {
     return <ErrorScreen errorMessage={error.message} />;
@@ -73,6 +96,7 @@ export default function Request() {
   return (
     <SafeAreaView edges={[]} className="flex-1 bg-white">
       <FlatList
+        ref={flatListRef}
         className="w-full grow px-8"
         data={hasRequests ? requestData.pages.flatMap((page) => page.data) : []}
         keyExtractor={(request) => String(request.requestId)}

app/(protected)/(tabs)/home.tsx

@@ -11,9 +11,10 @@ import useRefresh from "@/hooks/useRefresh";
 import { getPostLikes, getPosts } from "@/utils/supabase";
 import { useRouter } from "expo-router";
 import * as SecureStore from "expo-secure-store";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   ActivityIndicator,
+  DeviceEventEmitter,
   Dimensions,
   FlatList,
   Image,
@@ -33,6 +34,7 @@ export default function Home() {
   const [selectedPostId, setSelectedPostId] = useState<number | null>(null);
   const [selectedAuthorId, setSelectedAuthorId] = useState<string | null>(null);
   const [isLikedModalVisible, setIsLikedModalVisible] = useState(false);
+  const flatListRef = useRef<FlatList>(null);
   const { openModal } = useModal();
 
   const router = useRouter();
@@ -91,9 +93,24 @@ export default function Home() {
     handleLoadId();
   }, []);
 
+  const handleScrollToTop = useCallback(() => {
+    flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
+    refetch();
+  }, [refetch]);
+
+  useEffect(() => {
+    const subscription = DeviceEventEmitter.addListener(
+      "SCROLL_HOME_TO_TOP",
+      () => handleScrollToTop,
+    );
+
+    return () => subscription.remove();
+  }, [handleScrollToTop]);
+
   return (
     <SafeAreaView edges={[]} className="flex-1 items-center justify-center">
       <FlatList
+        ref={flatListRef}
         data={data?.pages.flatMap((page) => page.data) ?? []}
         keyExtractor={(item) => item.id.toString()}
         contentContainerStyle={{ gap: 10 }}

app/(protected)/(tabs)/mypage.tsx

@@ -20,6 +20,7 @@ export default function MyPage() {
     data: posts,
     isLoading: isPostsLoading,
     isError: isPostsError,
+    refetch,
   } = useFetchData(
     ["userPosts"],
     () => getMyPosts(),
@@ -43,6 +44,7 @@ export default function MyPage() {
             }
           />
           <PostGrid
+            refetch={refetch}
             posts={
               posts
                 ? posts.map((post) => ({ ...post, id: post.id.toString() }))

components/PostGrid.tsx

@@ -1,6 +1,8 @@
 import images from "@/constants/images";
 import { useRouter } from "expo-router";
+import { useCallback, useEffect, useRef } from "react";
 import {
+  DeviceEventEmitter,
   Dimensions,
   FlatList,
   Image,
@@ -14,12 +16,14 @@ interface Post {
 }
 
 interface PostGridProps {
+  refetch: () => void;
   posts: Post[] | null;
   isError?: boolean;
 }
 
-export default function PostGrid({ posts, isError }: PostGridProps) {
+export default function PostGrid({ refetch, posts, isError }: PostGridProps) {
   const router = useRouter();
+  const flatListRef = useRef<FlatList>(null);
 
   if (isError) {
     return (
@@ -49,9 +53,24 @@ export default function PostGrid({ posts, isError }: PostGridProps) {
     );
   }
 
+  const handleScrollToTop = useCallback(() => {
+    flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
+    refetch();
+  }, [refetch]);
+
+  useEffect(() => {
+    const subscription = DeviceEventEmitter.addListener(
+      "SCROLL_MY_PAGE_TO_TOP",
+      () => handleScrollToTop,
+    );
+
+    return () => subscription.remove();
+  }, [handleScrollToTop]);
+
   return (
     <View className="mt-[32px] h-full bg-gray-5">
       <FlatList
+        ref={flatListRef}
         data={posts}
         renderItem={({ item }) => {
           const size = Dimensions.get("window").width / 3;

components/SearchLayout.tsx

@@ -1,8 +1,9 @@
 import colors from "@/constants/colors";
 import type { UserProfile } from "@/types/User.interface";
-import { useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   ActivityIndicator,
+  DeviceEventEmitter,
   FlatList,
   type ListRenderItemInfo,
   View,
@@ -11,6 +12,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import SearchBar from "./SearchBar";
 
 interface SearchLayoutProps {
+  refetch?: () => void;
   data: UserProfile[]; // 추후 검색 사용 범위 넓어지면 변경 가능
   isFetchingNextPage?: boolean;
   onChangeKeyword: (newKeyword: string) => void;
@@ -20,6 +22,7 @@ interface SearchLayoutProps {
 }
 
 export function SearchLayout<T>({
+  refetch,
   data,
   isFetchingNextPage,
   onChangeKeyword,
@@ -28,10 +31,26 @@ export function SearchLayout<T>({
   emptyComponent,
 }: SearchLayoutProps) {
   const [keyword, setKeyword] = useState("");
+  const flatListRef = useRef<FlatList>(null);
+
+  const handleScrollToTop = useCallback(() => {
+    flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
+    refetch?.();
+  }, [refetch]);
+
+  useEffect(() => {
+    const subscription = DeviceEventEmitter.addListener(
+      "SCROLL_FRIEND_TO_TOP",
+      () => handleScrollToTop,
+    );
+
+    return () => subscription.remove();
+  }, [handleScrollToTop]);
 
   return (
     <SafeAreaView edges={[]} className="flex-1 bg-white">
       <FlatList
+        ref={flatListRef}
         className="w-full grow px-6"
         data={data}
         keyExtractor={(elem) => elem.id}