Merge pull request #149 from Dindb-dong/feat/144/MyPage

#144, #148: feat/MyPage error fix, Stack Navigating
sdp-tech · Nov 8, 2024 · c7cdcd4 · c7cdcd4
2 parents b9380af + 6401af1
commit c7cdcd4
Show file tree

Hide file tree

Showing 25 changed files with 700 additions and 482 deletions.
diff --git a/App.tsx b/App.tsx
@@ -3,7 +3,6 @@ import { View, TouchableOpacity, Text } from 'react-native';
 import {
   NavigationContainer,
   DefaultTheme,
-  getFocusedRouteNameFromRoute,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import {
@@ -16,24 +15,23 @@ import MyPageScreen from './src/pages/MyPage';
 import OrderManagement from './src/components/Home/Order/OrderManagement';
 
 import useLoginGuard from './src/hooks/useLoginGuard';
-
 import HomeIcon from './src/assets/navbar/Home.svg';
 import MyPageIcon from './src/assets/navbar/MyPage.svg';
 import OrderManagementIcon from './src/assets/navbar/OrderManagement.svg';
 import SignIn from './src/components/Auth/SignIn';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { BottomBarProvider, useBottomBar } from './contexts/BottomBarContext';
-import { LoginContext, LoginProvider, UserProvider } from './src/common/Context';
+import { LoginProvider, UserProvider } from './src/common/Context';
 import Reformer from './src/components/Auth/Reformer/Reformer';
 import SplashScreen from './src/common/SplashScreen';
 
 export type StackProps = {
-  Home: undefined;
+  Main: undefined;
   Signin: undefined;
   ReformProfile: undefined;
 };
 
-const Stack = createNativeStackNavigator<StackProps>();
+const AppStack = createNativeStackNavigator<StackProps>(); // 최상위 스택. SignInStack에는 바텀바 안 뜸.
 
 const GlobalTheme = {
   ...DefaultTheme,
@@ -60,14 +58,13 @@ function App(): React.JSX.Element {
               {!isSplashFinished ? (
                 <SplashScreen onFinish={finishSplash} />
               ) : (
-                <Stack.Navigator
-                  screenOptions={() => ({
-                    headerShown: false,
-                  })}>
-                  <Stack.Screen name="Home" component={HomeTab} />
-                  <Stack.Screen name="Signin" component={SignIn} />
-                  <Stack.Screen name="ReformProfile" component={Reformer} />
-                </Stack.Navigator>
+                <AppStack.Navigator
+                  screenOptions={{ headerShown: false }}
+                >
+                  <AppStack.Screen name="Main" component={MainTabNavigator} />
+                  <AppStack.Screen name="Signin" component={SignIn} />
+                  <AppStack.Screen name="ReformProfile" component={Reformer} />
+                </AppStack.Navigator>
               )}
             </NavigationContainer>
           </UserProvider>
@@ -79,70 +76,53 @@ function App(): React.JSX.Element {
 
 export type TabProps = {
   홈: undefined;
+  주문관리: undefined;
   마이페이지: undefined;
 };
 
 const CustomTab = ({ state, descriptors, navigation }: BottomTabBarProps) => {
   const loginGuard = useLoginGuard();
-  const { options } = descriptors;
-  const { isVisible } = useBottomBar(); // 바텀바 보임/숨김 상태를 가져옵니다.
+  const { isVisible } = useBottomBar(); // 바텀바 보임/숨김 상태를 가져옴.
 
   if (!isVisible) {
-    return null; // isVisible이 false일 경우 탭바를 렌더링하지 않습니다.
+    return null; // isVisible이 false일 경우 탭바를 렌더링하지 않음.
   }
 
   return (
     <View
       style={{
-        display: 'flex',
         height: 86,
         flexDirection: 'row',
         justifyContent: 'space-around',
         backgroundColor: '#FFFFFF',
         paddingHorizontal: 10,
       }}>
       {state.routes.map((route, index) => {
-        const isFocused = state.index == index;
-        const onPress = () => { // 하단 탭바 추가하면 여기 수정해야합니다!!!! 
-          if (route.name == '홈') {
-            if (isFocused)
-              navigation.reset({
-                routes: [{ name: route.name, params: { id: undefined } }],
-              });
-            else navigation.navigate(route.name, { id: undefined });
-          } else if (route.name == '주문관리') {
-            if (isFocused)
-              navigation.reset({
-                routes: [{ name: route.name, params: { id: undefined } }],
-              });
-            else navigation.navigate(route.name, { id: undefined });
-          } else if (route.name == '마이페이지') {
-            if (isFocused)
-              navigation.reset({
-                routes: [{ name: route.name, params: { id: undefined } }],
-              });
-            else navigation.navigate(route.name, { id: undefined });
+        const isFocused = state.index === index; // 한 번 더 눌렀을 때 
+        const onPress = () => {
+          if (isFocused) {
+            navigation.reset({
+              routes: [{ name: route.name }],
+            });
+          } else {
+            navigation.navigate(route.name);
           }
         };
+
         return (
           <TouchableOpacity
             key={index}
-            onPress={route.name == '마이페이지' ? loginGuard(onPress) : onPress}
-            // onPress={onPress}
+            onPress={route.name === '마이페이지' ? loginGuard(onPress) : onPress}
             style={{
               width: '20%',
-              display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
             }}>
-            {
-              {
-                0: <HomeIcon color="#000000" opacity={isFocused ? 1 : 0.4} />,
-                1: <OrderManagementIcon color="#000000" opacity={isFocused ? 1 : 0.4} />,
-                2: <MyPageIcon color="#000000" opacity={isFocused ? 1 : 0.4} />,
-
-              }[index]
-            }
+            {{
+              홈: <HomeIcon color="#000000" opacity={isFocused ? 1 : 0.4} />,
+              주문관리: <OrderManagementIcon color="#000000" opacity={isFocused ? 1 : 0.4} />,
+              마이페이지: <MyPageIcon color="#000000" opacity={isFocused ? 1 : 0.4} />,
+            }[route.name]}
 
             <Text
               style={{
@@ -161,24 +141,20 @@ const CustomTab = ({ state, descriptors, navigation }: BottomTabBarProps) => {
 };
 
 const Tab = createBottomTabNavigator<TabProps>();
-const HomeTab = (): JSX.Element => {
+
+// 하단 탭 네비게이터 정의
+const MainTabNavigator = () => {
   return (
     <Tab.Navigator
       tabBar={props => <CustomTab {...props} />}
-      id="MainHome"
       initialRouteName="홈"
-      screenOptions={() => ({
-        headerShown: false,
-      })}>
-      <Tab.Screen
-        name={'홈'}
-        component={HomeScreen}
-        options={{ tabBarStyle: { display: 'none' } }}
-      />
-      <Tab.Screen name={'주문관리'} component={OrderManagement} />
-      <Tab.Screen name={'마이페이지'} component={MyPageScreen} />
+      screenOptions={{ headerShown: false }}
+    >
+      <Tab.Screen name="홈" component={HomeScreen} />
+      <Tab.Screen name="주문관리" component={OrderManagement} />
+      <Tab.Screen name="마이페이지" component={MyPageScreen} />
     </Tab.Navigator>
   );
 };
 
-export default App;
+export default App;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -65,7 +65,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
+    "@babel/runtime": "^7.26.0",
     "@react-native-community/eslint-config": "^3.2.0",
     "@react-native/babel-preset": "0.73.19",
     "@react-native/eslint-config": "0.73.2",

diff --git a/src/assets/common/Logo.svg b/src/assets/common/Logo.svg
diff --git a/src/common/Context.tsx b/src/common/Context.tsx
@@ -85,9 +85,8 @@ export const LoginProvider = ({ children }: { children: ReactNode }) => {
   const { setUser, setRole } = useUser();
 
   const logout = () => {
-      setUser(null);
-      setRole('');
-      setIsLogin(false);
+    setRole('customer');
+    setIsLogin(false);
   };
 
   const setLogin = (value: boolean) => {

diff --git a/src/common/SignUpCompleteModal.tsx b/src/common/SignUpCompleteModal.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { Modal, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { useNavigation, useRoute } from '@react-navigation/native';
+import { CommonActions, useNavigation, useRoute } from '@react-navigation/native';
 import Check from '../assets/common/CheckIcon.svg'
 import { StackNavigationProp } from '@react-navigation/stack';
 import { SignInParams } from '../components/Auth/SignIn';
@@ -13,16 +13,23 @@ const SignupCompleteModal = ({ visible, onClose }: SignupModalProps) => {
     const handleGoToReformer = async () => {
         onClose(); // 모달을 닫고
         await new Promise(resolve => setTimeout(resolve, 100)); // 딜레이 추가
+        console.log('BasicForm에서 Reformer로 이동합니다.');
         navigation.navigate('Reformer'); // 네비게이션 수행
     };
 
     const handleSkip = async () => {
         onClose(); // 모달을 닫고
         await new Promise(resolve => setTimeout(resolve, 100)); // 딜레이 추가
-        navigation.getParent()?.reset({
-            index: 0, // 첫 번째 화면부터 시작
-            routes: [{ name: 'Home' }], // 새로운 스택에 홈 화면만 남김
-        });
+        navigation.dispatch(
+            CommonActions.navigate({
+                name: "Main",
+                params: {
+                    screen: "홈", // MainTabNavigator의 홈 화면으로 이동
+                },
+            })
+        );
+        console.log('홈으로 이동합니다.');
+
     };
 
     return (