라우팅 구조 설계 및 탭바 구현

app/(tabs)/_layout.tsx

@@ -0,0 +1,43 @@
+import MainIcon from "@/assets/icons/main";
+import MyPageIcon from "@/assets/icons/mypage";
+import PersonalIcon from "@/assets/icons/personal";
+import { globalGray50, globalGreen300 } from "@/shared/ui";
+import { Tabs } from "expo-router";
+
+export default function TabsLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: globalGreen300,
+        tabBarStyle: { backgroundColor: globalGray50, borderTopWidth: 0 },
+        headerStyle: {
+          backgroundColor: globalGray50,
+        },
+        headerShadowVisible: false,
+        headerShown: true,
+      }}
+    >
+      <Tabs.Screen
+        name="home"
+        options={{
+          title: "",
+          tabBarIcon: ({ color }) => <MainIcon color={color} size={24} />,
+        }}
+      />
+      <Tabs.Screen
+        name="personal"
+        options={{
+          title: "",
+          tabBarIcon: ({ color }) => <PersonalIcon color={color} size={24} />,
+        }}
+      />
+      <Tabs.Screen
+        name="my"
+        options={{
+          title: "",
+          tabBarIcon: ({ color }) => <MyPageIcon color={color} size={24} />,
+        }}
+      />
+    </Tabs>
+  );
+}

app/(tabs)/home/_layout.tsx

@@ -0,0 +1,16 @@
+import { globalGray50 } from "@/shared/ui";
+import { Stack } from "expo-router";
+
+export default function HomeLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          headerShown: false,
+          contentStyle: { backgroundColor: globalGray50 },
+        }}
+      />
+    </Stack>
+  );
+}

app/(tabs)/home/index.tsx

@@ -0,0 +1,15 @@
+import { StyleSheet, Text, View } from "react-native";
+
+interface GroupScreenProps {}
+
+const GroupScreen = ({}: GroupScreenProps) => {
+  return (
+    <View>
+      <Text>GroupPage</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({});
+
+export default GroupScreen;

app/(tabs)/my/_layout.tsx

@@ -0,0 +1,16 @@
+import { globalGray50 } from "@/shared/ui";
+import { Stack } from "expo-router";
+
+export default function MyLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          headerShown: false,
+          contentStyle: { backgroundColor: globalGray50 },
+        }}
+      />
+    </Stack>
+  );
+}

app/(tabs)/my/index.tsx

@@ -0,0 +1,15 @@
+import { StyleSheet, Text, View } from "react-native";
+
+interface MyScreenProps {}
+
+const MyScreen = ({}: MyScreenProps) => {
+  return (
+    <View>
+      <Text>MyScreen</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({});
+
+export default MyScreen;

app/(tabs)/personal/_layout.tsx

@@ -0,0 +1,15 @@
+import { globalGray50 } from "@/shared/ui";
+import { Stack } from "expo-router";
+
+export default function PersonalLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        contentStyle: { backgroundColor: globalGray50 },
+      }}
+    >
+      <Stack.Screen name="index" />
+    </Stack>
+  );
+}

app/(tabs)/personal/index.tsx

@@ -0,0 +1,15 @@
+import { StyleSheet, Text, View } from "react-native";
+
+interface PersonalScreenProps {}
+
+const PersonalScreen = ({}: PersonalScreenProps) => {
+  return (
+    <View>
+      <Text>PersonalPage</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({});
+
+export default PersonalScreen;

app/_layout.tsx

@@ -1,5 +1,18 @@
-import { Tabs } from "expo-router";
+import { globalGray50 } from "@/shared/ui";
+import { Stack } from "expo-router";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 export default function RootLayout() {
-  return <Tabs />;
+  return (
+    <SafeAreaProvider>
+      <Stack
+        screenOptions={{
+          headerShown: false,
+          contentStyle: { backgroundColor: globalGray50 },
+        }}
+      >
+        <Stack.Screen name="(tabs)" />
+      </Stack>
+    </SafeAreaProvider>
+  );
 }

app/index.tsx

@@ -1,15 +1,6 @@
-import { Text, View } from "react-native";
+import { Redirect } from "expo-router";
 
 export default function Index() {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <Text>Edit app/index.tsx to edit this screen.</Text>
-    </View>
-  );
+  // auth 구현 전, 개발 편의를 위해 초기 진입 시 홈으로 리다이렉트
+  return <Redirect href="/(tabs)/home" />;
 }

assets/icons/main.tsx

@@ -0,0 +1,33 @@
+import { globalGray500 } from "@/shared/ui";
+import * as React from "react";
+import Svg, { Path, SvgProps } from "react-native-svg";
+
+interface MainIconProps extends SvgProps {
+  size?: number;
+  color?: string;
+}
+
+const MainIcon = ({
+  size = 24,
+  color = globalGray500,
+  ...props
+}: MainIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+    <Path
+      d="M15 21.0005V13.0005C15 12.7353 14.8946 12.4809 14.7071 12.2934C14.5196 12.1058 14.2652 12.0005 14 12.0005H10C9.73478 12.0005 9.48043 12.1058 9.29289 12.2934C9.10536 12.4809 9 12.7353 9 13.0005V21.0005"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M3 10.0005C2.99993 9.70955 3.06333 9.4221 3.18579 9.1582C3.30824 8.89429 3.4868 8.66028 3.709 8.47248L10.709 2.47248C11.07 2.16739 11.5274 2 12 2C12.4726 2 12.93 2.16739 13.291 2.47248L20.291 8.47248C20.5132 8.66028 20.6918 8.89429 20.8142 9.1582C20.9367 9.4221 21.0001 9.70955 21 10.0005V19.0005C21 19.5309 20.7893 20.0396 20.4142 20.4147C20.0391 20.7898 19.5304 21.0005 19 21.0005H5C4.46957 21.0005 3.96086 20.7898 3.58579 20.4147C3.21071 20.0396 3 19.5309 3 19.0005V10.0005Z"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default MainIcon;

assets/icons/mypage.tsx

@@ -0,0 +1,43 @@
+import { globalGray500 } from "@/shared/ui";
+import * as React from "react";
+import Svg, { Path, SvgProps } from "react-native-svg";
+
+interface MyPageIconProps extends SvgProps {
+  size?: number;
+  color?: string;
+}
+
+const MyPageIcon = ({
+  size = 24,
+  color = globalGray500,
+  ...props
+}: MyPageIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+    <Path d="M4 5H20H4Z" fill={color} />
+    <Path
+      d="M4 5H20"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path d="M4 12H20H4Z" fill={color} />
+    <Path
+      d="M4 12H20"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path d="M4 19H20H4Z" fill={color} />
+    <Path
+      d="M4 19H20"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default MyPageIcon;

assets/icons/personal.tsx

@@ -0,0 +1,54 @@
+import { globalGray500 } from "@/shared/ui";
+import * as React from "react";
+import Svg, { Path, SvgProps } from "react-native-svg";
+
+interface PersonalIconProps extends SvgProps {
+  size?: number;
+  color?: string;
+}
+
+const PersonalIcon = ({
+  size = 24,
+  color = globalGray500,
+  ...props
+}: PersonalIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+    <Path
+      d="M3 20C2.99992 18.4603 3.44413 16.9533 4.27935 15.6598C5.11456 14.3664 6.30527 13.3414 7.7086 12.708C9.11193 12.0745 10.6682 11.8595 12.1908 12.0886C13.7133 12.3178 15.1373 12.9815 16.292 14"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M11 12C13.7614 12 16 9.76142 16 7C16 4.23858 13.7614 2 11 2C8.23858 2 6 4.23858 6 7C6 9.76142 8.23858 12 11 12Z"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M20.101 16H13.899C13.4025 16 13 16.483 13 17.0788V20.9212C13 21.517 13.4025 22 13.899 22H20.101C20.5975 22 21 21.517 21 20.9212V17.0788C21 16.483 20.5975 16 20.101 16Z"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M15 15L15 17"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M19 15L19 17"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default PersonalIcon;