feat: 메인 화면 바텀 네비게이션 생성

.gitignore

@@ -41,3 +41,4 @@ yarn-error.*
 /android
 .env.*
 .idea
+package-lock.json

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-navigation/bottom-tabs": "^7.9.0",
     "@react-navigation/native": "^7.1.26",
     "@react-navigation/native-stack": "^7.9.0",
     "expo": "~54.0.30",

src/api/auth.types.ts

@@ -14,5 +14,14 @@ export type LoginData = {
 export type LoginResponse = ApiResponse<LoginData>;
 
 // 회원가입 api
-export type SignUpRequest = { loginId: string; password: string };
+export type SignUpRequest = {
-export type SignUpResponse = { userId: number };
+  loginId: string;
+  password: string;
+};
+
+export type SignUpData = {
+  accessToken: string;
+  refreshToken: string;
+};
+
+export type SignUpResponse = ApiResponse<SignUpData>;

src/navigation/AppStack.tsx

@@ -1,9 +1,9 @@
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import React from "react";
-import HomeScreen from "../screens/HomeScreen";
+import AppTabs from "./AppTabs";
 
 export type AppStackParamList = {
-  Home: undefined;
+  MainTabs: undefined;
 };
 
 const Stack = createNativeStackNavigator<AppStackParamList>();
@@ -11,7 +11,7 @@ const Stack = createNativeStackNavigator<AppStackParamList>();
 export default function AppStack() {
   return (
     <Stack.Navigator screenOptions={{ headerShown: false }}>
-      <Stack.Screen name="Home" component={HomeScreen} />
+      <Stack.Screen name="MainTabs" component={AppTabs} />
     </Stack.Navigator>
   );
 }

src/navigation/AppTabs.tsx

@@ -0,0 +1,30 @@
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import React from "react";
+import HomeScreen from "../screens/HomeScreen";
+import { Colors } from "../theme/colors";
+
+export type AppTabParamList = {
+  Library: undefined;
+  Home: undefined;
+  Settings: undefined;
+};
+
+const Tab = createBottomTabNavigator<AppTabParamList>();
+
+export default function AppTabs() {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: {
+          backgroundColor: Colors.surface,
+          borderTopColor: Colors.border,
+        },
+        tabBarActiveTintColor: Colors.text,
+        tabBarInactiveTintColor: Colors.mutedText,
+      }}
+    >
+      <Tab.Screen name="Home" component={HomeScreen} />
+    </Tab.Navigator>
+  );
+}

src/screens/HomeScreen.tsx

@@ -1,20 +1,15 @@
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import { Button, StyleSheet, View } from "react-native";
+import AppText from "../components/ui/AppText";
 import { useAuth } from "../store/auth";
+import { Colors } from "../theme/colors";
 
 export default function HomeScreen() {
   const { signOut } = useAuth();
   return (
     <View style={styles.container}>
-      <Button
-        title="Debug Storage"
-        onPress={async () => {
-          const keys = await AsyncStorage.getAllKeys();
-          const entries = await AsyncStorage.multiGet(keys);
-          console.log(entries);
-        }}
-      />
       <Button title="logout" onPress={() => signOut()}></Button>
+      <AppText>fewfeaw</AppText>
+      <AppText>fewfeaw</AppText>
     </View>
   );
 }
@@ -22,8 +17,14 @@ export default function HomeScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "red",
+    backgroundColor: Colors.bg,
     alignContent: "center",
     justifyContent: "center",
   },
+  row: {
+    flexDirection: "row",
+    gap: 12,
+    justifyContent: "center",
+    alignItems: "center",
+  },
 });

src/screens/LibraryScreen.tsx

@@ -0,0 +1,5 @@
+import { View } from "react-native";
+
+export default function LibraryScreen() {
+  return <View>Library</View>;
+}