[Feat/#15] 공통 하단 탭 바 UI 구현 및 라우팅 연결

.vscode/extensions.json

@@ -1,6 +1,3 @@
 {
-  "recommendations": [
-    "expo.vscode-expo-tools",
-    "bradlc.vscode-tailwindcss"
-  ]
+  "recommendations": ["expo.vscode-expo-tools", "bradlc.vscode-tailwindcss"]
 }

app/(tabs)/_layout.tsx

@@ -1,33 +1,22 @@
 import { Tabs } from "expo-router";
 import React from "react";
 
-import { HapticTab } from "@/components/haptic-tab";
-import { IconSymbol } from "@/components/ui/icon-symbol";
+import { BottomTabBar } from "@/src/components/common/BottomTabBar";
 import { Colors } from "@/constants/theme";
 import { useColorScheme } from "@/hooks/use-color-scheme";
 
-// 임시 - 공통 컴포넌트 구현 후 교체 예정
-// 네비게이션 탭으로 이동하여 보여지는 페이지들을 라우팅
 export default function TabLayout() {
   const colorScheme = useColorScheme();
 
   return (
     <Tabs
+      tabBar={(props) => <BottomTabBar {...props} />}
       screenOptions={{
         tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
         headerShown: false,
-        tabBarButton: HapticTab,
       }}
     >
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "홈",
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="house.fill" color={color} />
-          ),
-        }}
-      />
+      <Tabs.Screen name="index" options={{ title: "홈" }} />
       <Tabs.Screen name="calendar" options={{ title: "캘린더" }} />
       <Tabs.Screen name="statistics" options={{ title: "통계분석" }} />
       <Tabs.Screen name="settings" options={{ title: "설정" }} />

app/(tabs)/index.tsx

@@ -1,11 +1,171 @@
-import { Text } from "react-native";
+import { useMemo, useState } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { router } from "expo-router";
+import { AddScheduleButton } from "@/src/components/common/AddScheduleButton";
+import { ScheduleCheckItem } from "@/src/components/common/ScheduleCheckItem";
 
-import { ScreenContainer } from "@/src/components/common";
+type Schedule = {
+  id: string;
+  categoryLabel: string;
+  categoryColor: string;
+  description: string;
+  checked: boolean;
+};
+
+const MOCK_SCHEDULES: Schedule[] = [
+  {
+    id: "1",
+    categoryLabel: "CATEGORY",
+    categoryColor: "#5B8FD9",
+    description: "Lorem ipsum dolor sit amet consectetur.",
+    checked: false,
+  },
+  {
+    id: "2",
+    categoryLabel: "CATEGORY",
+    categoryColor: "#D9A05B",
+    description: "Lorem ipsum dolor sit amet consectetur.",
+    checked: false,
+  },
+  {
+    id: "3",
+    categoryLabel: "CATEGORY",
+    categoryColor: "#5FAE72",
+    description: "Lorem ipsum dolor sit amet consectetur.",
+    checked: false,
+  },
+  {
+    id: "4",
+    categoryLabel: "CATEGORY",
+    categoryColor: "#9B7ED9",
+    description: "Lorem ipsum dolor sit amet consectetur.",
+    checked: false,
+  },
+  {
+    id: "5",
+    categoryLabel: "CATEGORY",
+    categoryColor: "#D95B8F",
+    description: "Lorem ipsum dolor sit amet consectetur.",
+    checked: false,
+  },
+];
+
+function useFormattedDate() {
+  return useMemo(() => {
+    const days = ["일", "월", "화", "수", "목", "금", "토"];
+    const now = new Date();
+    return `${now.getMonth() + 1}월 ${now.getDate()}일 ${days[now.getDay()]}요일`;
+  }, []);
+}
 
 export default function HomeScreen() {
+  const insets = useSafeAreaInsets();
+  const dateLabel = useFormattedDate();
+  const [schedules, setSchedules] = useState<Schedule[]>(MOCK_SCHEDULES);
+  const hasSchedules = schedules.length > 0;
+
+  const toggleSchedule = (id: string) => {
+    setSchedules((prev) =>
+      prev.map((s) => (s.id === id ? { ...s, checked: !s.checked } : s))
+    );
+  };
+
   return (
-    <ScreenContainer>
-      <Text>홈</Text>
-    </ScreenContainer>
+    <View
+      className="flex-1"
+      style={{
+        backgroundColor: "#F5F9F6",
+        paddingTop: insets.top + 20,
+        paddingHorizontal: 16,
+      }}
+    >
+      <ScrollView showsVerticalScrollIndicator={false}>
+        {/* 로고 영역 */}
+        <View className="mb-2 h-[32px] items-start justify-center">
+          <Text style={{ fontSize: 22, fontWeight: "700", color: "#4D826C" }}>
+            DA·LOG
+          </Text>
+        </View>
+
+        {/* 날짜 */}
+        <Text
+          className="mb-3"
+          style={{
+            fontFamily: "SUIT-SemiBold",
+            fontWeight: "600",
+            fontSize: 20,
+            lineHeight: 30, // 20 * 150%
+            letterSpacing: -0.4, // 20 * -2%
+            color: "#15231D",
+          }}
+        >
+          {dateLabel}
+        </Text>
+
+        {/* 일정 카드 */}
+        <View className="w-full rounded-2xl bg-white px-4 py-4">
+          <Text
+            className="mb-2"
+            style={{
+              fontFamily: "SUIT-Regular",
+              fontWeight: "400",
+              fontSize: 16,
+              lineHeight: 24, // 16 * 150%
+              letterSpacing: -0.32, // 16 * -2%
+              color: "#020303",
+            }}
+          >
+            {hasSchedules
+              ? "오늘 계획한 일정은 모두 마치셨나요?"
+              : "오늘 계획된 일정이 없어요."}
+          </Text>
+
+          {hasSchedules &&
+            schedules.map((s) => (
+              <ScheduleCheckItem
+                key={s.id}
+                categoryLabel={s.categoryLabel}
+                categoryColor={s.categoryColor}
+                description={s.description}
+                checked={s.checked}
+                onToggle={() => toggleSchedule(s.id)}
+              />
+            ))}
+
+          <View className={hasSchedules ? "mt-2" : ""}>
+            <AddScheduleButton onPress={() => router.push("/schedule")} />
+          </View>
+        </View>
+
+        {/* 오늘의 질문 */}
+        <View className="mt-6">
+          <Text
+            className="mb-3"
+            style={{
+              fontFamily: "SUIT-Medium",
+              fontWeight: "500",
+              fontSize: 18,
+              lineHeight: 27, // 18 * 150%
+              letterSpacing: -0.36, // 18 * -2%
+              color: "#15231D",
+            }}
+          >
+            오늘의 질문
+          </Text>
+          <Pressable
+            className="w-full items-center justify-center rounded-2xl py-4"
+            style={{ backgroundColor: "#4D826C", outlineStyle: "none" } as any}
+          >
+            <Text
+              className="text-white"
+              style={{ fontSize: 16, fontWeight: "600" }}
+            >
+              질문 받기
+            </Text>
+          </Pressable>
+        </View>
+      </ScrollView>
+    </View>
   );
 }

components/ui/icon-symbol.tsx

@@ -16,9 +16,7 @@ type IconSymbolName = keyof typeof MAPPING;
  * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
  * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
  */
-const MAPPING = {
-  "house.fill": "home",
-} as IconMapping;
+const MAPPING = {} as IconMapping;
 
 /**
  * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.

src/components/common/AddButton.tsx

@@ -18,7 +18,7 @@ export function AddButton({ label, className, ...rest }: AddButtonProps) {
       {...rest}
     >
       <PlusIcon width={16} height={16} color="#82B5A0" />
-      <Text className="text-b-04-m text-green-400">{label}</Text>
+      <Text className="text-green-400 text-b-04-m">{label}</Text>
     </Pressable>
   );
 }

src/components/common/AddScheduleButton.tsx

@@ -21,8 +21,8 @@ export function AddScheduleButton({
       )}
       {...rest}
     >
-      <Text className="text-b-03-m text-gray-800">{label}</Text>
+      <Text className="text-gray-800 text-b-03-m">{label}</Text>
       <PlusIcon width={24} height={24} color="#2F3131" />
     </Pressable>
   );
-}
+}