Merge pull request #18 from Team-DailySnap/feat/navigation-bar

Feat/navigation bar

Author: thswogh

app/(tabs)/_layout.tsx

@@ -1,46 +1,55 @@
+import { Icon } from "@/shared/ui/icon";
+import { DefaultNavigationOptions } from "@/shared/ui/navigation";
 import { Tabs } from "expo-router";
+import { useMemo } from "react";
+import { SafeAreaView } from "react-native-safe-area-context";
 
-export default function TabsLayout() {
-  return (
-    <Tabs
-      screenOptions={{
-        headerShown: false,
-      }}
-    >
-      <Tabs.Screen
-        name="home"
-        options={{
-          title: "홈",
-        }}
-      />
-
-      <Tabs.Screen
-        name="archive"
-        options={{
-          title: "아카이브",
-        }}
-      />
-
-      <Tabs.Screen
-        name="upload"
-        options={{
-          title: "업로드",
-        }}
-      />
+export default function TabLayout() {
+  const screenOptions = useMemo(() => {
+    return {
+      ...DefaultNavigationOptions,
+    };
+  }, []);
 
-      <Tabs.Screen
-        name="awards"
-        options={{
-          title: "우수작",
-        }}
-      />
-
-      <Tabs.Screen
-        name="profile"
-        options={{
-          title: "마이",
-        }}
-      />
-    </Tabs>
+  return (
+    <SafeAreaView edges={["top"]} style={{ flex: 1 }}>
+      <Tabs screenOptions={screenOptions}>
+        <Tabs.Screen
+          name="home"
+          options={{
+            title: "홈",
+            tabBarIcon: ({ focused }) => <Icon name={focused ? "home_active" : "home"} />,
+          }}
+        />
+        <Tabs.Screen
+          name="archive"
+          options={{
+            title: "아카이빙",
+            tabBarIcon: ({ focused }) => <Icon name={focused ? "archiving_active" : "archiving"} />,
+          }}
+        />
+        <Tabs.Screen
+          name="upload"
+          options={{
+            title: "업로드",
+            tabBarIcon: ({ focused }) => <Icon name={focused ? "uploading_active" : "uploading"} />,
+          }}
+        />
+        <Tabs.Screen
+          name="awards"
+          options={{
+            title: "우수작",
+            tabBarIcon: ({ focused }) => <Icon name={focused ? "ranking_active" : "ranking"} />,
+          }}
+        />
+        <Tabs.Screen
+          name="profile"
+          options={{
+            title: "마이",
+            tabBarIcon: ({ focused }) => <Icon name={focused ? "my_active" : "my"} />,
+          }}
+        />
+      </Tabs>
+    </SafeAreaView>
   );
 }

app/index.tsx

@@ -6,25 +6,26 @@ import { View, ActivityIndicator } from "react-native";
 
 export default function App() {
   const router = useRouter();
-  const { userInfo } = useAuth();
+  // const { userInfo } = useAuth();
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      if (userInfo) {
-        // 로그인된 사용자면, 홈 네비게이션으로 이동
-        router.replace("/(tabs)/home");
-      } else {
-        // 로그인되지 않았으면 로그인 페이지로 이동
-        router.replace("/login");
-      }
+      router.replace("/(tabs)/home");
+      // if (userInfo) {
+      //   // 로그인된 사용자면, 홈 네비게이션으로 이동
+      //   router.replace("/(tabs)/home");
+      // } else {
+      //   // 로그인되지 않았으면 로그인 페이지로 이동
+      //   router.replace("/login");
+      // }
     }, 100);
 
     return () => clearTimeout(timer);
-  }, [userInfo, router]);
+  }, [router]);
 
   // 로딩 화면 표시. TODO: 추후에 디자인 된 로딩스피너로 수정
   return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
       <ActivityIndicator size="large" color="#195B35" />
     </View>
   );

metro.config.js

@@ -1,8 +1,19 @@
 const { getDefaultConfig } = require("expo/metro-config");
 
-/** @type {import('expo/metro-config').MetroConfig} */
-const config = getDefaultConfig(__dirname);
-config.resolver.sourceExts.push("css");
-config.resolver.assetExts.push("png", "jpg", "jpeg", "gif", "svg");
+module.exports = (() => {
+  const config = getDefaultConfig(__dirname);
 
-module.exports = config;
+  const { transformer, resolver } = config;
+
+  config.transformer = {
+    ...transformer,
+    babelTransformerPath: require.resolve("react-native-svg-transformer/expo"),
+  };
+  config.resolver = {
+    ...resolver,
+    assetExts: resolver.assetExts.filter(ext => ext !== "svg"),
+    sourceExts: [...resolver.sourceExts, "svg"],
+  };
+
+  return config;
+})();