Merge branch 'dev' of https://github.com/dypark26/catchpill into feat…

…ure/my-page

App.js

@@ -1,23 +1,15 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
 import { QueryClientProvider, QueryClient } from 'react-query';
+import { NavigationContainer } from '@react-navigation/native';
+import Root from './src/Navigations/Root';
 
 const queryClient = new QueryClient();
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      {/* <Router>
-      </Router> */}
+      <NavigationContainer>
+        <Root />
+      </NavigationContainer>
     </QueryClientProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

src/Hooks/usePill.js

@@ -0,0 +1,13 @@
+import { useMutation } from 'react-query';
+import { dbService } from '../shared/firebase';
+import { addDoc, collection } from 'firebase/firestore';
+
+// 약 추가 함수 / firestore에 약 새로운 약 정보 추가
+const addPill = (pill) => {
+  return addDoc(collection(dbService, 'pill'), pill);
+};
+
+// 약 추가 함수
+export const useAddPillData = () => {
+  return useMutation(addPill);
+};

src/Navigations/Root.js

@@ -0,0 +1,16 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Tabs from './Tabs';
+import Stacks from './Stacks';
+
+const Stack = createNativeStackNavigator();
+
+const Root = () => {
+  return (
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="Tabs" component={Tabs} />
+      <Stack.Screen name="Stacks" component={Stacks} />
+    </Stack.Navigator>
+  );
+};
+
+export default Root;

src/Navigations/Stacks.js

@@ -0,0 +1,17 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import { SignupPage, LoginPage, EditPage } from '../screen/Index';
+
+const Stack = createNativeStackNavigator();
+
+const Stacks = () => {
+  return (
+    <Stack.Navigator initialRouteName="로그인">
+      <Stack.Screen name="회원가입" component={SignupPage} />
+      <Stack.Screen name="로그인" component={LoginPage} />
+      <Stack.Screen name="수정 페이지" component={EditPage} />
+    </Stack.Navigator>
+  );
+};
+
+export default Stacks;

src/Navigations/Tabs.js

@@ -0,0 +1,44 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { MyPage, MainPage } from '../screen/Index';
+import { Entypo } from '@expo/vector-icons';
+import { FontAwesome } from '@expo/vector-icons';
+
+const Tab = createBottomTabNavigator();
+
+const Tabs = () => {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen
+        options={{
+          headerTitleAlign: 'center',
+          tabBarShowLabel: false,
+          tabBarIcon: ({ focused }) =>
+            focused ? (
+              <Entypo name="home" size={25} color="black" />
+            ) : (
+              <Entypo name="home" size={25} color="lightgrey" />
+            ),
+        }}
+        name="메인 페이지"
+        component={MainPage}
+      />
+
+      <Tab.Screen
+        options={{
+          headerTitleAlign: 'center',
+          tabBarShowLabel: false,
+          tabBarIcon: ({ focused }) =>
+            focused ? (
+              <FontAwesome name="list-ul" size={23} color="black" />
+            ) : (
+              <FontAwesome name="list-ul" size={23} color="lightgrey" />
+            ),
+        }}
+        name="마이 페이지"
+        component={MyPage}
+      />
+    </Tab.Navigator>
+  );
+};
+
+export default Tabs;

src/screen/EditPage.jsx

@@ -0,0 +1,93 @@
+import { View, Text } from 'react-native';
+import { useState } from 'react';
+import styled from '@emotion/native';
+import { useAddPillData } from '../Hooks/usePill';
+
+function EditPage({ navigation: { navigate } }) {
+  const [pillName, setPillName] = useState('');
+  const [time, setTime] = useState('');
+
+  // usePill 커스텀 훅에서 약 추가 함수 import
+  const { mutate: addPill, isError, isSuccess } = useAddPillData();
+
+  // 새로 추가될 약 정보
+  const newPill = {
+    userId: 'ALsTlRugmucb8QA1i8CVMNkSQgR2',
+    pillName,
+    time,
+    isTaken: false,
+  };
+
+  // 약 추가 로직
+  const handleAddPill = () => {
+    addPill(newPill);
+    if (isError) {
+      console.log('새로운 약 추가 실패');
+    }
+    if (isSuccess) {
+      console.log(`${pillName} 추가 성공`);
+    }
+    setPillName('');
+    setTime('');
+  };
+
+  return (
+    <EditPageContainer>
+      {/* page 의 title */}
+      <EditPageTitle>나의 약 정보</EditPageTitle>
+      {/* 수정 폼 */}
+      <EditForm>
+        {/* 약 이름 인풋 */}
+        <CustomInput
+          placeholder="이름"
+          value={pillName}
+          onChangeText={setPillName}
+        />
+        {/* 약 복용시간 인풋 */}
+        <CustomInput
+          placeholder="복용시간"
+          value={time}
+          onChangeText={setTime}
+        />
+        <CustomButtonWrapper>
+          {/* 약 추가/저장 버튼 */}
+          {/* 커스텀 버튼 완료시 children 값 변경하기 : Add 일때는 '추가' Edit 일때는 '저장'으로 */}
+          <CustomButton onPress={handleAddPill} disabled={!pillName || !time}>
+            <Text>저장</Text>
+          </CustomButton>
+          {/* 취소 / 돌아가기 버튼 */}
+          <CustomButton onPress={() => navigate('Tabs', { screen: 'My' })}>
+            <Text>취소</Text>
+          </CustomButton>
+        </CustomButtonWrapper>
+      </EditForm>
+    </EditPageContainer>
+  );
+}
+
+export default EditPage;
+
+const EditPageContainer = styled.View``;
+
+const EditPageTitle = styled.Text`
+  font-size: 36px;
+  font-weight: 600;
+`;
+
+const EditForm = styled.View``;
+
+const CustomInput = styled.TextInput`
+  background-color: aqua;
+  flex-direction: row;
+  padding: 16px;
+`;
+
+const CustomButtonWrapper = styled.View`
+  flex-direction: row;
+`;
+
+const CustomButton = styled.TouchableOpacity`
+  background-color: #0feec6;
+  width: 50%;
+  padding: 16px;
+`;

src/screen/Index.js

@@ -0,0 +1,7 @@
+import SignupPage from './SignupPage';
+import MyPage from './MyPage';
+import MainPage from './MainPage';
+import LoginPage from './LoginPage';
+import EditPage from './EditPage';
+
+export { SignupPage, MyPage, MainPage, LoginPage, EditPage };

src/screen/LoginPage.jsx

@@ -0,0 +1,18 @@
+import { TouchableOpacity, View, Text } from 'react-native';
+
+const LoginPage = ({ navigation: { navigate } }) => {
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => navigate('Tabs', { screen: '메인 페이지' })}
+      >
+        <Text>로그인</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => navigate('회원가입')}>
+        <Text>회원가입</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default LoginPage;

src/screen/MainPage.jsx

@@ -0,0 +1,15 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const MainPage = ({ navigation: { navigate } }) => {
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => navigate('Stacks', { screen: '로그인' })}
+      >
+        <Text>로그아웃</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default MainPage;

src/screen/SignupPage.jsx

@@ -0,0 +1,18 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const SignupPage = ({ navigation: { navigate } }) => {
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => navigate('Tabs', { screen: '메인 페이지' })}
+      >
+        <Text>회원가입</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => navigate('로그인')}>
+        <Text>로그인 페이지로</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default SignupPage;