diff --git a/App.js b/App.js
index 2ebec8b..1012493 100644
--- a/App.js
+++ b/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 (
- {/*
- */}
+
+
+
);
}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
-});
diff --git a/src/Hooks/usePill.js b/src/Hooks/usePill.js
new file mode 100644
index 0000000..3387c9f
--- /dev/null
+++ b/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);
+};
diff --git a/src/Navigations/Root.js b/src/Navigations/Root.js
index e69de29..f0195a1 100644
--- a/src/Navigations/Root.js
+++ b/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 (
+
+
+
+
+ );
+};
+
+export default Root;
diff --git a/src/Navigations/Stack.js b/src/Navigations/Stack.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/Navigations/Stacks.js b/src/Navigations/Stacks.js
new file mode 100644
index 0000000..af2660d
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ );
+};
+
+export default Stacks;
diff --git a/src/Navigations/Tab.js b/src/Navigations/Tab.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/Navigations/Tabs.js b/src/Navigations/Tabs.js
new file mode 100644
index 0000000..12b197b
--- /dev/null
+++ b/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 (
+
+
+ focused ? (
+
+ ) : (
+
+ ),
+ }}
+ name="메인 페이지"
+ component={MainPage}
+ />
+
+
+ focused ? (
+
+ ) : (
+
+ ),
+ }}
+ name="마이 페이지"
+ component={MyPage}
+ />
+
+ );
+};
+
+export default Tabs;
diff --git a/src/screen/EditPage.jsx b/src/screen/EditPage.jsx
index e69de29..f6ed61e 100644
--- a/src/screen/EditPage.jsx
+++ b/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 (
+
+ {/* page 의 title */}
+ 나의 약 정보
+ {/* 수정 폼 */}
+
+ {/* 약 이름 인풋 */}
+
+ {/* 약 복용시간 인풋 */}
+
+
+ {/* 약 추가/저장 버튼 */}
+ {/* 커스텀 버튼 완료시 children 값 변경하기 : Add 일때는 '추가' Edit 일때는 '저장'으로 */}
+
+ 저장
+
+ {/* 취소 / 돌아가기 버튼 */}
+ navigate('Tabs', { screen: 'My' })}>
+ 취소
+
+
+
+
+ );
+}
+
+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;
+`;
diff --git a/src/screen/Index.js b/src/screen/Index.js
index e69de29..f36952d 100644
--- a/src/screen/Index.js
+++ b/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 };
diff --git a/src/screen/LoginPage.jsx b/src/screen/LoginPage.jsx
index e69de29..32a96db 100644
--- a/src/screen/LoginPage.jsx
+++ b/src/screen/LoginPage.jsx
@@ -0,0 +1,18 @@
+import { TouchableOpacity, View, Text } from 'react-native';
+
+const LoginPage = ({ navigation: { navigate } }) => {
+ return (
+
+ navigate('Tabs', { screen: '메인 페이지' })}
+ >
+ 로그인
+
+ navigate('회원가입')}>
+ 회원가입
+
+
+ );
+};
+
+export default LoginPage;
diff --git a/src/screen/MainPage.jsx b/src/screen/MainPage.jsx
index e69de29..a919076 100644
--- a/src/screen/MainPage.jsx
+++ b/src/screen/MainPage.jsx
@@ -0,0 +1,15 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const MainPage = ({ navigation: { navigate } }) => {
+ return (
+
+ navigate('Stacks', { screen: '로그인' })}
+ >
+ 로그아웃
+
+
+ );
+};
+
+export default MainPage;
diff --git a/src/screen/SignupPage.jsx b/src/screen/SignupPage.jsx
index e69de29..c65055c 100644
--- a/src/screen/SignupPage.jsx
+++ b/src/screen/SignupPage.jsx
@@ -0,0 +1,18 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const SignupPage = ({ navigation: { navigate } }) => {
+ return (
+
+ navigate('Tabs', { screen: '메인 페이지' })}
+ >
+ 회원가입
+
+ navigate('로그인')}>
+ 로그인 페이지로
+
+
+ );
+};
+
+export default SignupPage;