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

@@ -23,6 +23,7 @@ export default function Friend() {
     isFetchingNextPage,
     error,
     loadMore,
+    refetch,
   } = useInfiniteLoad({
     queryFn: getFriends(keyword),
     queryKey: ["friends", keyword],
@@ -80,6 +81,7 @@ export default function Friend() {
 
   return (
     <SearchLayout
+      refetch={refetch}
       data={friends}
       onChangeKeyword={handleKeywordChange}
       loadMore={loadMore}

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

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { ActivityIndicator, FlatList, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
@@ -7,6 +7,7 @@ import { FriendRequest } from "@/components/FriendItem";
 import LoadingScreen from "@/components/LoadingScreen";
 import colors from "@/constants/colors";
 import useInfiniteLoad from "@/hooks/useInfiniteLoad";
+import useScrollToTop from "@/hooks/useScrollToTop";
 import {
   getFriendRequests,
   subscribeFriendRequest,
@@ -20,6 +21,7 @@ const LIMIT = 12;
 
 export default function Request() {
   const queryClient = useQueryClient();
+  const flatListRef = useRef<FlatList>(null);
 
   // 유저의 친구 요청 정보 조회
   const {
@@ -28,6 +30,7 @@ export default function Request() {
     isFetchingNextPage,
     error,
     loadMore,
+    refetch,
   } = useInfiniteLoad({
     queryFn: getFriendRequests,
     queryKey: ["friendRequests"],
@@ -36,11 +39,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 +65,8 @@ export default function Request() {
     };
   }, [queryClient.invalidateQueries]);
 
+  useScrollToTop({ flatListRef, refetch, eventName: "SCROLL_REQUEST_TO_TOP" });
+
   // 에러 스크린
   if (error) {
     return <ErrorScreen errorMessage={error.message} />;

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

@@ -8,10 +8,11 @@ import useFetchData from "@/hooks/useFetchData";
 import useInfiniteLoad from "@/hooks/useInfiniteLoad";
 import { useModal } from "@/hooks/useModal";
 import useRefresh from "@/hooks/useRefresh";
+import useScrollToTop from "@/hooks/useScrollToTop";
 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,
   Dimensions,
@@ -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,16 @@ export default function Home() {
     handleLoadId();
   }, []);
 
+  useScrollToTop({
+    refetch,
+    flatListRef,
+    eventName: "SCROLL_HOME_TO_TOP",
+  });
+
   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,5 +1,7 @@
 import images from "@/constants/images";
+import useScrollToTop from "@/hooks/useScrollToTop";
 import { useRouter } from "expo-router";
+import { useRef } from "react";
 import {
   Dimensions,
   FlatList,
@@ -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,12 @@ export default function PostGrid({ posts, isError }: PostGridProps) {
     );
   }
 
+  useScrollToTop({ refetch, flatListRef, eventName: "SCROLL_MY_PAGE_TO_TOP" });
+
   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,6 +1,7 @@
 import colors from "@/constants/colors";
+import useScrollToTop from "@/hooks/useScrollToTop";
 import type { UserProfile } from "@/types/User.interface";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import {
   ActivityIndicator,
   FlatList,
@@ -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,18 @@ export function SearchLayout<T>({
   emptyComponent,
 }: SearchLayoutProps) {
   const [keyword, setKeyword] = useState("");
+  const flatListRef = useRef<FlatList>(null);
+
+  useScrollToTop({
+    refetch: refetch ?? (() => {}),
+    flatListRef,
+    eventName: "SCROLL_FRIEND_TO_TOP",
+  });
 
   return (
     <SafeAreaView edges={[]} className="flex-1 bg-white">
       <FlatList
+        ref={flatListRef}
         className="w-full grow px-6"
         data={data}
         keyExtractor={(elem) => elem.id}

hooks/useScrollToTop.ts

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { DeviceEventEmitter, type FlatList } from "react-native";
+
+const useScrollToTop = ({
+  flatListRef,
+  refetch,
+  eventName,
+}: {
+  flatListRef: React.RefObject<FlatList>;
+  refetch: () => void;
+  eventName: string;
+}) => {
+  useEffect(() => {
+    const subscription = DeviceEventEmitter.addListener(eventName, () => {
+      flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
+      refetch();
+    });
+
+    return () => subscription.remove();
+  }, [flatListRef, refetch, eventName]);
+};
+
+export default useScrollToTop;