DongM

App.js

@@ -8,8 +8,16 @@ import Monthly from './Monthly';
 import Analy from './Analy';
 import MoneyDB from './MoneyDB';
 import DeptPage from './DeptPage';
-import ReviewForm from './screens/reviewForm';
+import InfoForm from './screens/infoForm';
 import { SpeedDial } from 'react-native-elements';
+import { StackRouter } from 'react-navigation';
+import InfoDetails from './screens/InfoDetails';
+import { createStackNavigator } from '@react-navigation/stack';
+// import HomeStack from './routes/HomeStack';
+// import MainScreen from './screens/MainScreen';
+
+
+
 
 
 
@@ -22,15 +30,9 @@ function MainScreen({ navigation }) {
   // ]);
   const [open, setOpen] = useState(false)
 
-  const addReview = (review) => {
-    review.key = Math.random().toString();
-    setReviews((currentReviews) => {
-      return [review, ...currentReviews]
-    });
-    setModalOpen(false);
-  }
 
   return (
+
     <>
       <TouchableWithoutFeedback onPress={() => {
         Keyboard.dismiss();
@@ -64,54 +66,48 @@ function MainScreen({ navigation }) {
             <SpeedDial.Action
               icon={{ name: 'add', color: '#fff' }}
               title="부채"
-              onPress={() => setModalOpen(true)}
+              onPress={() => navigation.navigate('DeptPage')}
             />
             <SpeedDial.Action
               icon={{ name: 'delete', color: '#fff' }}
               title="Delete"
-              onPress={() => setModalOpen(true)}
+              onPress={() => navigation.navigate('DeptPage')}
             />
 
           </SpeedDial>
-          <Modal visible={modalOpen} animationType='slide'>
-              <View style={style.modalContent}>
-                <Ionicons
-                  name='close'
-                  color='red'
-                  size={24}
-                  style={{ ...style.modalToggle, ...style.modalClose }} //...은 중괄호를 풀어서 합치려고 이용함
-                  onPress={() => setModalOpen(false)}
-                />
-                <DeptPage />
-              </View>
-            </Modal>
-          <MoneyDB />
 
         </View>
 
+        {/* <MoneyDB /> */}
+
+
+
       </TouchableWithoutFeedback>
     </>
   )
 }
 
 
-
 const Tab = createBottomTabNavigator();
+const Stack = createStackNavigator();
 
-function App() {
+
+function Home() {
   return (
-    <NavigationContainer>
     <Tab.Navigator screenOptions={({ route }) => ({
       tabBarIcon: ({ focused, color, size }) => {
         let iconName;
 
         if (route.name === 'Main') {
-            iconName = focused ? 'home' : 'home-outline';
+          iconName = focused
+            ? 'home'
+            : 'home-outline';
         } else if (route.name === 'Monthly') {
           iconName = focused ? 'calendar' : 'calendar-outline';
         } else if (route.name === 'Analy') {
           iconName = focused ? 'bar-chart' : 'bar-chart-outline';
         }
+
         // You can return any component that you like here!
         return <Ionicons name={iconName} size={size} color={color} />;
       },
@@ -124,23 +120,34 @@ function App() {
       <Tab.Screen name="Monthly" component={Monthly} />
       <Tab.Screen name="Analy" component={Analy} />
     </Tab.Navigator>
-    </NavigationContainer>
+  );
+}
 
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={Home} />
+        <Stack.Screen name="DeptPage" component={DeptPage} />
+        <Stack.Screen name="InfoDetails" component={InfoDetails} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }
 
 const style = StyleSheet.create({
   modalToggle: {
-    marginBottom: 10,
-    borderWidth: 1,
-    borderColor: 'grey', //grey
+
     padding: 10,
     borderRadius: 10,
-    alignSelf: 'center', //위치를 center로
+    alignSelf: 'flex-start',
+    marginTop: -40, //위치를 center로
   },
   modalClose: {
-    marginTop: 20,
-    marginBottom: 0,
+    alignSelf: 'center',
+    alignItems: 'flex-start',
+    marginTop: 150,
+    marginBottom: 50,
   },
   modalContent: {
     flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard

DeptPage.js

 import React, { useState } from 'react';
-import { StyleSheet, Text, View, FlatList, Alert, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import { StyleSheet, Text, View, FlatList, TouchableOpacity, Modal, Alert, TouchableWithoutFeedback, Keyboard } from 'react-native';
 import Header from './components/header';
-import TodoItem from './components/todoItem';
 import AddTodo from './components/addTodo';
-import Sandbox from './components/sandbox';
+import TodoItem from './components/todoItem';
+import InfoForm from './screens/infoForm';
+import { globalStyles } from './styles/global';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import Infodetails from './screens/InfoDetails'
+import ButtonsForm from './components/ButtonsForm';
+import StyledButton from './components/StyledButton';
+import { NavigationContainer } from '@react-navigation/native';
 
 
-export default function DeptPage() {
+export default function DeptPage({ navigation }) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [modallOpen, setModallOpen] = useState(false);
   const [todos, setTodos] = useState([
-        { text: 'buy coffee', key: '1' },
-        { text: 'create an app', key: '2' },
-        { text: 'play on the swithch', key: '3' }
+    { date: '7/10', person: '수빈이', money: '100만원', remaied_money: '10만원남음', key: '1' },
+    { date: '7/10', person: '수현이', money: '100만원', remaied_money: '10만원남음', key: '2' },
+    { date: '7/10', person: '가영이', money: '100만원', remaied_money: '10만원남음', key: '3' }
   ]);
 
+  const addInfo = (info) => {
+    info.key = Math.random().toString(); //앞에 key를 받아올수있도록 생성
+    setTodos((currentInfos) => {
+      return [info, ...currentInfos]; //새로운 정보와 지금까지 정보를 합친다
+    });
+    setModallOpen(false); //modal이 보여지지 않게
+  }
+
   const pressHandler = (key) => {
     setTodos((prevTodos) => {
       return prevTodos.filter(todo => todo.key != key);
     });
   }
 
-    //이 함수로 내용 추가를 함 Addtodo함수에서 이용
-    const submitHandler = (text) => {
-        //alert를 사용하기위해 조건문 지정
-        if (text.length > 3) {
-            setTodos((prevTodos) => {
-                return [
-                    { text: text, key: Math.random().toString() },
-                    ...prevTodos  //앞의 todos에 추가하여 내용을 더 추가함
-                ];
-            });
-        } else { //3글자 보다 작으면 alert
-            Alert.alert('OOPs!', '3글짜 이상!', [
-                { text: 'Understood', onPress: () => console.log('alert closed') }//understood 버튼 누르면 alert꺼짐
-            ]);
+
+
+  // const [modalOpen, setModalOpen] = useState(false);
+  // //이 함수로 내용 추가를 함 Addtodo함수에서 이용
+  // const submitHandler = (text) => {
+  //   //alert를 사용하기위해 조건문 지정
+  //   if (text.length > 3) {
+  //     setTodos((prevTodos) => {
+  //       return [
+  //         { text: text, key: Math.random().toString() },
+  //         ...prevTodos  //앞의 todos에 추가하여 내용을 더 추가함
+  //       ];
+  //     });
+  //   } else { //3글자 보다 작으면 alert
+  //     Alert.alert('OOPs!', '3글짜 이상!', [
+  //       { text: 'Understood', onPress: () => console.log('alert closed') }//understood 버튼 누르면 alert꺼짐
+  //     ]);
+  //   }
+
+  // }
+  const insertData = async () => {
+    try {
+      if (selectedIndex === 0) { type = '빌려준금액' }
+      else { type = '빌린금액' }
+
+      (await db).transaction((tx) => {
+        console.log("데이터 삽입하기");
+        tx.executeSql('INSERT INTO Money (type, date, contents, price, asset_type, category) VALUES (?,?);',
+          [expense, income],
+          () => { console.log("삽입 성공"); },
+          (error) => console.log(error))
+      })
+    } catch (error) {
+      console.log('error in insert data', error)
     }
   }
 
+
+
   return (
-        // <Sandbox />
+
+
+
     <TouchableWithoutFeedback onPress={() => {
       Keyboard.dismiss();
-            console.log('dismissed keyboard');
     }}>
-
       <View Style={styles.container}>
         <Header />
-                <View style={styles.content}>
-                    <AddTodo submitHandler={submitHandler} />
+        <ButtonsForm
+          onPress={(index) => setSelectedIndex(index)}
+          selectedIndex={selectedIndex}
+          group={["빌려준금액", "빌린금액"]} />
+
         <View style={styles.list}>
           <FlatList
             data={todos}
             renderItem={({ item }) => (
+              <TouchableOpacity onPress={() => navigation.navigate('InfoDetails', item)}>
                 <TodoItem item={item} pressHandler={pressHandler} />
+              </TouchableOpacity>
             )}
           />
+          <View style={styles.content}>
+            <Modal visible={modallOpen} animationType='slide'>
+              <View style={style.modalContent}>
+                <Ionicons
+                  name='close'
+                  size={24}
+                  style={style.modalToggle}
+                  onPress={() => setModallOpen(false)}
+                />
+                <InfoForm addInfo={addInfo} />
+
+              </View>
+            </Modal>
+            <Ionicons
+              name='add'
+              size={24}
+              style={{ ...style.modalToggle, ...style.modalClose }} //...은 중괄호를 풀어서 합치려고 이용함
+              onPress={() => setModallOpen(true)}
+            />
           </View>
         </View>
       </View>
@@ -62,6 +124,7 @@ export default function DeptPage() {
 }
 
 
+
 //content는 내용이 추가되면 계속 커진다
 const styles = StyleSheet.create({
   container: {
@@ -75,3 +138,33 @@ const styles = StyleSheet.create({
     marginTop: 20, //top에서부터 거리
   }
 });
+
+const style = StyleSheet.create({
+  modalToggle: {
+    marginBottom: 10,
+    borderWidth: 1,
+    borderColor: 'grey', //grey
+    padding: 10,
+    borderRadius: 10,
+    alignSelf: 'center', //위치를 center로
+  },
+  modalClose: {
+    alignSelf: 'center',
+    alignItems: 'flex-end',
+    marginTop: 130,
+    marginBottom: 20,
+  },
+  modalContent: {
+    flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
+  },
+
+  TextInput: {
+    borderColor: 'skyblue',
+    height: 40,
+    margin: 12,
+    borderWidth: 1
+  },
+  Font: {
+    fontSize: 24
+  }
+});
\ No newline at end of file

components/ButtonsForm.js

+import React from 'react';
+import { ButtonGroup } from 'react-native-elements';
+import { StyleSheet, Text } from 'react-native';
+
+const ButtonsForm = (props) => {
+
+    const component1 = () => <Text>{props.group[0]}</Text>
+    const component2 = () => <Text>{props.group[1]}</Text>
+
+    return (
+        <ButtonGroup
+            onPress={props.onPress}
+            selectedIndex={props.selectedIndex}
+            buttons={[{ element: component1 }, { element: component2 }]}
+            containerStyle={style.container}
+            selectedButtonStyle={style.selectedButton}
+            selectedTextStyle={style.selectedText}
+        />
+    );
+};
+
+const style = StyleSheet.create({
+    container: {
+        height: 50,
+        flexDirection: 'row',
+        alignItems: "center",
+        backgroundColor: "#f5f5f5",
+    },
+    text: {
+        color: "#808080",
+        fontSize: 24
+    },
+    selectedButton: {
+        backgroundColor: "#adadad",
+    },
+    selectedText: {
+        color: "#1467ff",
+        fontWeight: "bold",
+    },
+})
+
+export default ButtonsForm

components/StyledButton.js

+import React from 'react';
+import { StyleSheet, Pressable, Text, View } from 'react-native';
+
+const StyledButton = (props) => {
+    return (
+        <Pressable
+            style={({ pressed }) => [
+                {
+                    backgroundColor: pressed ? '#437dd9' : '#4e8ff5',
+                },
+                style.pressableStyle,
+                props.style
+            ]}
+            onPress={props.onPress}>
+            <Text style={style.buttonText}>{props.name}</Text>
+        </Pressable>
+    );
+};
+
+const style = StyleSheet.create({
+    pressableStyle: {
+        alignItems: "center",
+        justifyContent: "center",
+        marginRight: 3,
+        borderRadius: 2,
+    },
+    buttonText: {
+        fontSize: 20,
+    },
+})
+
+export default StyledButton

components/addTodo.js

@@ -13,7 +13,7 @@ export default function AddTodo({submitHandler}) {
         <View>
             <TextInput
                 style = {styles.input}
-                placeholder = 'new todo...' //처음에 나오는 text
+                placeholder = '돈 갚아라...' //처음에 나오는 text
                 onChangeText={changeHandler} //value 받은 것 저장
             />
             <Button onPress= {() =>submitHandler(text)} title = '입력' color = 'coral' />

components/todoItem.js

@@ -2,16 +2,18 @@ import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
-//item은 앞의 text를 받음
-export default function TodoItem({ item, pressHandler }) {
 
+
+export default function TodoItem({ item, pressHandler, navigation }) {
     return (
-        <TouchableOpacity onPress={() => pressHandler(item.key)}>
         <View style={styles.item}>
-                <Ionicons name='trash-outline' size={15} color='#333' />
-                <Text style={styles.itemText}>{item.text}</Text>
+            <Ionicons name='trash-outline' size={15} color='#333' onPress={() => pressHandler(item.key)} />
+            <Text style={styles.itemText}>{item.date}</Text>
+            <Text style={styles.itemText}>{item.person}</Text>
+            <Text style={styles.itemText}>{item.money}</Text>
+            <Text style={styles.itemText}>{item.remained_money}</Text>
         </View>
-        </TouchableOpacity>
+
     )
 
 }

routes/homeStack.js

-import  {createStackNavigator}  from 'react-navigation-stack';
-import {createAppContainer} from 'react-navigation';
-import Home from '../screens/home';
-import ReviewDetails from '../screens/reviewDetails';
+import { createStackNavigator } from 'react-navigation-stack';
+import { createAppContainer } from 'react-navigation';
+import DeptPage from '../DeptPage';
+import InfoDetails from '../screens/InfoDetails';
+import MainScreen from '../screens/MainScreen';
 
 const screens = {
-    Home:{
-        screen:Home
+    
+    DeptPage: {
+        screen: DeptPage,
+        navigationOptions: {
+            title: 'GameZone',
+            headerStyle: { backgroundColor: '#eee' }
+        }
     },
-    ReviewDetails:{
-        screen: ReviewDetails
+    InfoDetails: {
+        screen: InfoDetails,
+        navigationOptions: {
+            title: 'Info Details',
+            headerStyle: { backgroundColor: '#eee' }
+        }
     }
 }
 

screens/InfoDetails.js

+import React from 'react';
+import { StyleSheet, View, Text, Button } from 'react-native';
+import { globalStyles } from '../styles/global';
+
+
+
+
+export default function InfoDetails({ route, navigation }) {
+
+
+    return (
+        <View style={globalStyles.container}>
+            <Text>{route.params?.date}</Text>
+            <Text>{route.params?.person}</Text>
+            <Text>{route.params?.money}</Text>
+            <Text>{route.params?.remained_money}</Text>
+        </View>
+    )
+}
+
+

screens/infoForm.js

+import React from 'react';
+import { StyleSheet, Button, TextInput, View, Text } from 'react-native';
+import { globalStyles } from '../styles/global.js'
+import { Formik } from 'formik';
+import * as yup from 'yup';
+
+const ReviewSchema = yup.object({
+    date: yup.string() //string만 받는다
+        .required()  //아무것도 입력안했하면 안받음
+        .min(4),  //최소4글짜
+    person: yup.string()
+        .required()
+        .min(2),
+    money: yup.string()
+        .required(),
+        
+    remained_money: yup.string()
+        .required()
+})
+
+
+
+
+export default function InfoForm({ addInfo }) {
+    return (
+        <View style={globalStyles.container} >
+            <Formik
+                initialValues={{ date: '', person: '', money: '', remained_money: '' }}
+                validationSchema={ReviewSchema}
+                onSubmit={(values) => {//위의 4개의 val들을 전달
+
+                    addInfo(values);
+                }}
+
+            >
+                {(props) => (
+                    <View>
+                        <TextInput
+                            style={globalStyles.input}
+                            placeholder='날짜'
+                            onChangeText={props.handleChange('date')} //우리가 바꾸려는 val
+                            value={props.values.date}
+                        />
+                         
+                        <TextInput
+                            style={globalStyles.input}
+                            placeholder='누구에게'
+                            onChangeText={props.handleChange('person')}
+                            value={props.values.person}
+                        />
+
+                        <TextInput
+                            style={globalStyles.input}
+                            placeholder='금액'
+                            onChangeText={props.handleChange('money')}
+                            value={props.values.money}
+                            keyboardType='numeric'
+                        />
+
+                        <TextInput
+                            style={globalStyles.input}
+                            placeholder='남은 금액'
+                            onChangeText={props.handleChange('remained_money')}
+                            value={props.values.remained_money}
+                            keyboardType='numeric'
+                        />
+
+                        <Button title='입력' color='maroon' onPress={props.handleSubmit} />
+                    </View>
+                )}
+
+            </Formik>
+
+        </View >
+    )
+}
+

styles/global.js

@@ -14,7 +14,7 @@ export const globalStyles = StyleSheet.create({
         marginVertical: 8,
         lineHeight:20,
     },
-    imput: {
+    input: {
         borderWidth: 1,
         borderColor: '#ddd',
         padding: 10,