인프런 커뮤니티 질문&답변

강의 잘 따라가다가 로그인까지 성공했는데 20강부터 갑자기 add,activity,user탭을 눌러도 전환이 안돼요.. home이랑 search만 전환이 됩니다. 에러도 안떠서 어디부터 잘못된건지 감이 안 오는데 어떤 파일을 확인해야 할까요?

app/(tabs)_layout.tsx 입니다

import { Ionicons } from "@expo/vector-icons";
import { type BottomTabBarButtonProps } from "@react-navigation/bottom-tabs";
import { Tabs, useRouter } from "expo-router";
import { useContext, useRef, useState } from "react";
import { Animated, Modal, Pressable, Text, TouchableOpacity, View } from "react-native";
import { AuthContext } from "../_layout";


export default function TabLayout(){
  const router=useRouter();
  const [isLoginModalOpen,setIsLoginModalOpen]=useState(false);
  const {user}=useContext(AuthContext);
   const isLoggedIn = !!user;
   

  const openLoginModal=()=>{
    setIsLoginModalOpen(true);
  };
  const closeLoginModal=()=>{
    setIsLoginModalOpen(false);
  };

  const toLoginPage= ()=>{
    setIsLoginModalOpen(false);
    router.push("/login");
  }
  const AnimatedTabBarButton=({
    children,
    onPress,
    style,
    ...restProps
  }: BottomTabBarButtonProps)=>{
    const scaleValue=useRef(new Animated.Value(1)).current;
    const handlePressOut=()=>{
      Animated.sequence([
      Animated.spring(scaleValue,{
        toValue:1.2,
        useNativeDriver:true, 
        speed:200,
      }),
      Animated.spring(scaleValue,{
        toValue:1,
        useNativeDriver:true,
        speed:200,
      }),
    ]).start();
    }
    return (
    <Pressable
      onPress={onPress}
      onPressOut={handlePressOut}
      style={[{ flex: 1, justifyContent: "center", alignItems: "center" }, style]}
      android_ripple={{ borderless: false, radius: 0 }}
    >
      <Animated.View style={{ transform: [{ scale: scaleValue }] }}>
        {children}
      </Animated.View>
    </Pressable>

  );
  }

  return (
    <>
      <Tabs
        backBehavior="history"
        screenOptions={{
          headerShown:false,
          tabBarButton: (props)=><AnimatedTabBarButton {...props}/>,
        }}
       
      >
      <Tabs.Screen 
        name="(home)"
        options={{
          tabBarLabel:()=>null,
          tabBarIcon:({focused})=>(
            <Ionicons
              name="home"
              size={24}
              color={focused ? "black":"gray"}/>
          ),
        }}
        />
      <Tabs.Screen name="search"
       options={{
          tabBarLabel:()=>null,
          tabBarIcon:({focused})=>(
            <Ionicons
              name="search"
              size={24}
              color={focused ? "black":"gray"}/>
          ),
        }}/>
      <Tabs.Screen name="add"
      listeners={{
       tabPress:(e)=>{
        e.preventDefault();
        if(!isLoggedIn){
          openLoginModal();
        }
      }
      }}
      options={{
          tabBarLabel:()=>null,
          tabBarIcon:({focused})=>(
            <Ionicons
              name="add"
              size={24}
              color={focused ? "black":"gray"}/>
          ),
        }}
      />
      <Tabs.Screen name="activity"
      listeners={{
        tabPress:(e)=>{
          e.preventDefault();
          if(!isLoggedIn){
            openLoginModal();
          }
        },
      }}
       options={{
          tabBarLabel:()=>null,
          tabBarIcon:({focused})=>(
            <Ionicons
              name="heart-outline"
              size={24}
              color={focused ? "black":"gray"}/>
          ),
        }}/>
      <Tabs.Screen name="[username]"
      listeners={{
        tabPress:(e)=>{
          e.preventDefault();
          if(!isLoggedIn){
            openLoginModal();
          }
        },
      }}
       options={{
          tabBarLabel:()=>null,
          tabBarIcon:({focused})=>(
            <Ionicons
              name="person-outline"
              size={24}
              color={focused ? "black":"gray"}/>
          ),
        }}/>
        <Tabs.Screen
        name="(post)/[username]/post/[postID]"
        options={{
          href:null,
        }}
      />
      </Tabs>
      <Modal
        visible={isLoginModalOpen} transparent={true} animationType="slide"
        >
        <View
          style={{
            flex:1,
            justifyContent:"flex-end",
            backgroundColor:"rgba(0,0,0,0.5)"
          }}>
            <View style={{backgroundColor:"white",padding:20}}>
              <Pressable onPress={toLoginPage}>
                <Text>Login Modal</Text>
              </Pressable>
              <TouchableOpacity
                onPress={closeLoginModal}>
                <Ionicons name="close" size={24} color='#555'/>
          </TouchableOpacity>
            </View>
        </View>
      </Modal>
      </>
  );
}