Feat/#7 menu

.gitignore

@@ -1,3 +1,4 @@
+HEAD
 # Logs
 logs
 *.log
@@ -137,3 +138,46 @@ dist
 # Vite logs files
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# generated native folders
+/ios
+/android
+7403bcd (Initial commit)

App.js

@@ -0,0 +1,20 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Text>Open up App.js to start working on your app!</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

app.json

@@ -0,0 +1,36 @@
+{
+  "expo": {
+    "name": "PastUs_FE",
+    "slug": "PastUs_FE",
+    "version": "1.0.0",
+    "scheme": "pastus",
+    "orientation": "portrait",
+    "icon": "./assets/PastUs_SplashText.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/PastUs_SplashText.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#2B57D0"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/PastUs_SplashText.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true
+    },
+    "web": {
+      "favicon": "./assets/PastUs_SplashText.png"
+    },
+    "plugins": [
+      "expo-router",
+      "expo-secure-store",
+      "expo-font"
+    ]
+  }
+}
+

app/(tabs)/_layout.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Tabs } from 'expo-router';
+import BottomBar from '../../src/components/navigation/BottomBar';
+
+export default function TabLayout() {
+  return (
+    <Tabs 
+      tabBar={(props) => (
+        // 🚀 현재 인덱스에 따라 activeTab을 home 또는 profile로 전달합니다.
+        <BottomBar activeTab={props.state.index === 0 ? 'home' : 'profile'} />
+      )} 
+      screenOptions={{ headerShown: false }}
+    >
+      <Tabs.Screen name="main" />   
+      <Tabs.Screen name="profile" />
+    </Tabs>
+  );
+}

app/(tabs)/main.js

@@ -0,0 +1,210 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, ScrollView, StyleSheet, Pressable, ActivityIndicator } from 'react-native';
+import { useRouter, Stack } from 'expo-router'; // 🚀 Stack 추가!
+import * as SecureStore from 'expo-secure-store';
+import { Ionicons } from '@expo/vector-icons';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { getMyProfile } from '../../src/api/userService';
+import { getAllPosts, getTrendingPosts, getTrendingTags } from '../../src/api/postService';
+import PostCard from '../../src/components/main/PostCard'; 
+
+export default function MainScreen() {
+  const router = useRouter();
+  const [userInfo, setUserInfo] = useState(null);
+  const [popularTags, setPopularTags] = useState([]);
+  const [popularPosts, setPopularPosts] = useState([]);
+  const [recentPosts, setRecentPosts] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => { fetchAllData(); }, []);
+
+  const fetchAllData = async () => {
+    try {
+      const token = await SecureStore.getItemAsync('userToken');
+      if (!token) { router.replace('/auth/login'); return; }
+
+      const [userRes, tagsRes, popRes, recentRes] = await Promise.all([
+        getMyProfile(),
+        getTrendingTags(),
+        getTrendingPosts(),
+        getAllPosts(0, 3), 
+      ]);
+
+      if (userRes.status === 200) setUserInfo(userRes.data);
+      if (tagsRes.status === 200) setPopularTags(tagsRes.data);
+      if (popRes.status === 200) setPopularPosts(popRes.data.slice(0, 3)); 
+      if (recentRes.status === 200) setRecentPosts(recentRes.data.content);
+
+    } catch (error) {
+      console.log("데이터 로딩 중 에러:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) return <ActivityIndicator size="large" color="#2B57D0" style={{ flex: 1 }} />;
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top']}>
+      {/* 🚀 시스템 헤더 숨기기 */}
+      <Stack.Screen options={{ headerShown: false }}/>
+
+      {/* 🚀 헤더 섹션: View로 감싸서 가로 정렬 */}
+      <View style={styles.header}>
+        <Text style={styles.logo}>PastUs</Text>
+        <View style={styles.headerIcons}>
+          <Pressable onPress={() => router.push('/search')}>
+            <Ionicons name="search-outline" size={28} color="black" />
+          </Pressable>
+          <Pressable onPress={() => router.push('/menu')} hitSlop={15}>
+            <Ionicons name="menu-outline" size={28} color="black" style={{ marginLeft: 15 }} />
+          </Pressable>
+        </View>
+      </View>
+
+      <ScrollView showsVerticalScrollIndicator={false}>
+        {/* 상단 배너 */}
+        <View style={styles.proBanner}>
+          <Text style={styles.proTitle}>정확한 문장 검색 + 제약없는 글쓰기</Text>
+          <Text style={styles.proSub}>
+            {userInfo?.userName}님의 현재 신뢰도는 {userInfo?.trustScore}% 입니다.
+          </Text>
+        </View>
+
+        {/* 인기 태그 */}
+        <View style={styles.tagSection}>
+          <Text style={styles.sectionTitle}>이번 주 인기 태그</Text>
+          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.tagList}>
+            {popularTags.map((tag, index) => (
+              <View key={index} style={styles.tagBadge}>
+                <Text style={styles.tagText}>#{tag}</Text>
+              </View>
+            ))}
+          </ScrollView>
+        </View>
+
+        {/* 인기글 3개 */}
+        <View style={styles.section}>
+          <View style={styles.sectionHeader}>
+            <Text style={styles.sectionTitle}>이번 주 인기글 Top 10</Text>
+            <Pressable 
+              onPress={() => router.push('/posts/popular-list')}
+              hitSlop={{ top:20, bottom: 20, left: 20, right: 20}}
+              >
+              <Ionicons name="chevron-forward" size={20} color="#000" />
+            </Pressable>
+          </View>
+          {popularPosts.map(post => <PostCard key={post.postId} item={post} />)}
+        </View>
+
+        {/* 전체글 3개 */}
+        <View style={styles.section}>
+          <View style={styles.sectionHeader}>
+            <Text style={styles.sectionTitle}>전체글 보기</Text>
+            <Pressable 
+              onPress={() => router.push('/posts/all-list')}
+              hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+            >
+              <Ionicons name="chevron-forward" size={20} color="#000" />
+            </Pressable>
+          </View>
+          {recentPosts.map(post => <PostCard key={post.postId} item={post} />)}
+        </View>
+      </ScrollView>
+
+
+
+    </SafeAreaView> // 🚀 여기서 닫아야 모든 콘텐츠가 안전 영역 안에 들어옵니다!
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { 
+    flex: 1, 
+    backgroundColor: '#fff' 
+  },
+  /* 🚀 1. 헤더: 로고와 아이콘 정밀 배치 */
+  header: { 
+    flexDirection: 'row', 
+    justifyContent: 'space-between', 
+    alignItems: 'center', 
+    paddingHorizontal: 20, 
+    paddingVertical: 12 
+  },
+  logo: { 
+    fontSize: 26, 
+    fontWeight: '700', 
+    fontFamily: 'NoticiaText-Bold',
+    color: '#000'
+  },
+  headerIcons: { 
+    flexDirection: 'row', 
+    alignItems: 'center' 
+  },
+
+  /* 🚀 2. 프로 배너: 피그마 블루 컬러 적용 */
+  proBanner: { 
+    backgroundColor: '#2B57D0', 
+    marginHorizontal: 20, 
+    marginVertical: 15,
+    paddingVertical: 24, 
+    borderRadius: 12, // 시안의 둥근 모서리
+    alignItems: 'center' 
+  },
+  proTitle: { 
+    color: '#fff', 
+    fontSize: 16, 
+    fontWeight: '700' 
+  },
+  proSub: { 
+    color: 'rgba(255, 255, 255, 0.8)', 
+    fontSize: 12, 
+    marginTop: 6 
+  },
+
+  /* 🚀 3. 섹션 타이틀: 피그마 규격(18px, 600) 강제 적용 */
+  section: { 
+    paddingHorizontal: 20, 
+    marginBottom: 30 
+  },
+  sectionHeader: { 
+    flexDirection: 'row', 
+    justifyContent: 'space-between', 
+    alignItems: 'center', 
+    marginBottom: 12 
+  },
+  sectionTitle: { 
+    fontSize: 18,        // 피그마 명세
+    fontWeight: '600',    // 피그마 명세 (SemiBold)
+    lineHeight: 22,      // 피그마 명세
+    color:'#000' 
+  },
+  more: { 
+    fontSize: 20, 
+    color: '#000', 
+    fontWeight: '300' 
+  },
+
+  /* 🚀 4. 인기 태그: 가로 스크롤 및 배지 스타일 */
+  tagSection: { 
+    paddingLeft: 20, // 왼쪽 정렬 유지를 위해 패딩 분리
+    marginBottom: 30 
+  },
+  tagList: { 
+    marginTop: 10 
+  },
+  tagBadge: { 
+    backgroundColor: '#2B57D0', 
+    paddingHorizontal: 14, 
+    paddingVertical: 7, 
+    borderRadius: 20, 
+    marginRight: 8 
+  },
+  tagText: { 
+    color: '#fff', 
+    fontSize: 12, 
+    fontWeight: '700' 
+  },
+
+});