Merge remote-tracking branch 'origin/Dongmin' into rkyoung

App.js

-import React, { useState } from 'react';
-import { StyleSheet, View, Text, TextInput, Button } from 'react-native';
+import React from 'react';
+import { StyleSheet } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createStackNavigator } from '@react-navigation/stack';
@@ -9,6 +9,10 @@ import Analy from './Analy';
 import PostMoney from './PostMoney';
 import MainScreen from './MainScreen';
 import DetailInfo from './DetailInfo';
+import DeptPage from './DeptPage';
+import InfoDetails from './screens/InfoDetails';
+import MemoPage from './MemoPage';
+import MemoDetails from './screens/MemoDetails';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -28,11 +32,6 @@ function Home() {
         } else if (route.name === 'Analy') {
           iconName = focused ? 'bar-chart' : 'bar-chart-outline';
         }
-        // else if (route.name === 'Calendar') {
-        //   iconName = focused ? 'calendar-sharp' : 'calendar-sharp';
-        // }
-
-        // You can return any component that you like here!
         return <Ionicons name={iconName} size={size} color={color} />;
       },
     })}
@@ -42,7 +41,6 @@ function Home() {
       }}>
       <Tab.Screen name="Main" component={MainScreen} />
       <Tab.Screen name="Monthly" component={Monthly} />
-      {/*<Tab.Screen name="Calendar" component={Calendar} />*/}
       <Tab.Screen name="Analy" component={Analy} />
       <Tab.Screen name="PostMoney" component={PostMoney} />
     </Tab.Navigator>
@@ -52,8 +50,35 @@ function Home() {
 function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen options={{ headerShown: false }} name="Home" component={Home} />
+      <Stack.Navigator screenOptions={{
+        headerStyle: {
+          backgroundColor: '#eee'
+        },
+        headerTitleStyle: {
+          fontWeight: 'bold',
+        },
+        headerTitleAlign: 'center'
+      }} >
+        <Stack.Screen
+          name="Home"
+          component={Home}
+          options={{ headerShown: false }} />
+        <Stack.Screen
+          name="DeptPage"
+          component={DeptPage}
+          options={{ title: "부채", headerStyle: { backgroundColor: 'coral' } }} />
+        <Stack.Screen
+          name="InfoDetails"
+          component={InfoDetails}
+          options={{ title: "상세정보" }} />
+        <Stack.Screen
+          name="MemoPage"
+          component={MemoPage}
+          options={{ title: "메모", headerStyle: { backgroundColor: 'coral' } }} />
+        <Stack.Screen
+          name="MemoDetails"
+          component={MemoDetails}
+          options={{ title: "상세내용" }} />
         <Stack.Screen name="DetailInfo" component={DetailInfo} />
       </Stack.Navigator>
     </NavigationContainer>
@@ -61,6 +86,7 @@ function App() {
 }
 
 const style = StyleSheet.create({
+
   TextInput: {
     borderColor: 'skyblue',
     height: 40,

DeptPage.js

+import React, { useState } from 'react';
+import { StyleSheet, Text, View, FlatList, TouchableOpacity, Modal, Alert, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import TodoItem from './components/todoItem';
+import InfoForm from './screens/InfoForm';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import Infodetails from './screens/InfoDetails'
+import ButtonsForm from './components/ButtonsForm';
+import { TabView } from 'react-native-elements';
+
+
+function DeptPage({ navigation }) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [modallOpen, setModallOpen] = useState(false);
+  const [todo, setTodo] = useState([
+    { date: '7/10', person: 'Mark', money: '100만원', remained_money: '10만원남음', key: '1' },
+    { date: '7/10', person: 'John', money: '100만원', remained_money: '10만원남음', key: '2' },
+    { date: '7/10', person: 'Steve', money: '100만원', remained_money: '10만원남음', key: '3' }
+]);
+  const [todos, setTodos] = useState([
+    { date: '7/10', person: '수빈이', money: '100만원', remained_money: '10만원남음', key: '1' },
+    { date: '7/10', person: '수현이', money: '100만원', remained_money: '10만원남음', key: '2' },
+    { date: '7/10', person: '가영이', money: '100만원', remained_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);
+    });
+  }
+
+
+
+
+  return (
+    <TouchableWithoutFeedback onPress={() => {
+      Keyboard.dismiss();
+    }}>
+      <View Style={style.container}>
+        <ButtonsForm
+          onPress={(index) => setSelectedIndex(index)}
+          selectedIndex={selectedIndex}
+          group={["빌려준금액", "빌린금액"]} />
+
+        <View>
+          <View style={{ width: '100%', height: '75%' }}>
+            <TabView value={selectedIndex} onChange={setSelectedIndex} >
+              <TabView.Item style={{ width: '100%', height: '100%' }}>
+                <FlatList
+                  data={todo}
+                  renderItem={({ item }) => (
+                    <TouchableOpacity onPress={() => navigation.navigate('InfoDetails', item)}>
+                      <TodoItem item={item} pressHandler={pressHandler} />
+                    </TouchableOpacity>
+                  )}
+                />
+              </TabView.Item>
+              <TabView.Item style={{ width: '100%', height: '100%' }}>
+                <FlatList
+                  data={todos}
+                  renderItem={({ item }) => (
+                    <TouchableOpacity onPress={() => navigation.navigate('InfoDetails', item)}>
+                      <TodoItem item={item} pressHandler={pressHandler} />
+                    </TouchableOpacity>
+                  )}
+                />
+              </TabView.Item>
+            </TabView>
+          </View>
+          <Ionicons
+            name='add'
+            size={24}
+            style={style.modalToggle} //...은 중괄호를 풀어서 합치려고 이용함
+            onPress={() => setModallOpen(true)}
+          />
+        </View>
+        <View>
+          <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>
+        </View>
+      </View>
+    </TouchableWithoutFeedback >
+  );
+}
+
+
+
+
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+  },
+  modalToggle: {
+    borderWidth: 1,
+    borderColor: 'gray', //gray
+    padding: 5,
+    borderRadius: 10,
+    alignSelf: 'center', //위치를 center로
+  },
+
+  modalContent: {
+    flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
+  },
+
+  TextInput: {
+    borderColor: 'skyblue',
+    height: 40,
+    margin: 12,
+    borderWidth: 1
+  },
+  Font: {
+    fontSize: 24
+  }
+});
+
+export default DeptPage;

MainScreen.js

 import React from 'react';
-import { View, Text, TextInput, StyleSheet, Button } from 'react-native';
+import { View, Text, TextInput, StyleSheet, Button, Keyboard, TouchableWithoutFeedback, Modal } from 'react-native';
+import { SpeedDial } from 'react-native-elements';
 import WeeklyCalendar from './components/WeeklyCalendar';
 import InsertCat from './InsertCat';
 
 function MainScreen({ navigation }) {
-    const [number, onChangeNumber] = React.useState(null);
+    const [number, onChangeNumber] = useState(null);
+    const [modalOpen, setModalOpen] = useState(false);
+    // const [reviews, setReviews] = useState([
+    //   { title: 'aa', rating: 5, body: 'bb', key: '1' },
+    // ]);
+    const [open, setOpen] = useState(false)
+
     return (
         <>
-            <View>
-                <WeeklyCalendar />
-                <Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
-                <Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
-                <TextInput
-                    style={style.TextInput}
-                    onChangeText={onChangeNumber}
-                    keyboardType="numeric"
-                />
-                <Text>입력한 숫자 보기: {number} </Text>
-            </View>
-            <Button
-                title="월별 페이지로 이동"
-                onPress={() => navigation.navigate('Monthly')}
-            />
-            <InsertCat />
+            <TouchableWithoutFeedback onPress={() => {
+                Keyboard.dismiss();
+            }}>
+                <View style={{ flex: 1 }}>
+                    <WeeklyCalendar />
+
+                    <View >
+                        <Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
+                        <Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
+                        <TextInput
+                            style={style.TextInput}
+                            onChangeText={onChangeNumber}
+                            keyboardType="numeric"
+                        />
+                        <Text>입력한 숫자 보기: {number} </Text>
+                    </View>
+
+                    <Button
+                        title="월별 페이지로 이동"
+                        onPress={() => navigation.navigate('Monthly')}
+                    />
+                    <SpeedDial
+                        isOpen={open}
+                        icon={{ name: 'edit', color: '#fff' }} //연필모양
+                        openIcon={{ name: 'close', color: '#fff' }} //x모양
+                        onOpen={() => setOpen(!open)}
+                        onClose={() => setOpen(!open)}
+                    >
+                        <SpeedDial.Action
+                            icon={{ name: 'add', color: '#fff' }}
+                            title="부채"
+                            onPress={() => navigation.navigate('DeptPage')}
+                        />
+                        <SpeedDial.Action
+                            icon={{ name: 'add', color: '#fff' }}
+                            title="메모"
+                            onPress={() => navigation.navigate('MemoPage')}
+                        />
+
+                    </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>
+
+                </View>
+            </TouchableWithoutFeedback>
         </>
     )
 }
 
+
 const style = StyleSheet.create({
     TextInput: {
         borderColor: 'skyblue',
@@ -36,6 +83,27 @@ const style = StyleSheet.create({
     },
     Font: {
         fontSize: 24
+    },
+    modalToggle: {
+
+        padding: 10,
+        borderRadius: 10,
+        alignSelf: 'flex-start',
+        marginTop: -40, //위치를 center로
+    },
+    modalClose: {
+        alignSelf: 'center',
+        alignItems: 'flex-start',
+        marginTop: 150,
+        marginBottom: 50,
+    },
+    modalContent: {
+        flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
+    },
+    Contents: {
+        justifyContent: "center",
+        alignItems: "center",
+        margin: 10
     }
 });
 

MemoPage.js

+import React, { useState } from 'react';
+import { StyleSheet, Text, View, FlatList, TouchableOpacity, Modal, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import TodoItem from './components/todoItem';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { NavigationContainer } from '@react-navigation/native';
+import MemoDetails from './screens/MemoDetails';
+import MemoForm from './screens/MemoForm';
+import ButtonsForm from './components/ButtonsForm';
+import { TabView } from 'react-native-elements';
+
+
+
+function MemoPage({ navigation }) {
+    const [selectedIndex, setSelectedIndex] = useState(0)
+    const [modalOpen, setModalOpen] = useState(false);
+    const [todo, setTodo] = useState([
+        { date: '매달10일', person: '식비', money: '100만원', key: '1' },
+        { date: '매달20일', person: '휴대폰요금', money: '100만원', key: '2' },
+        { date: '매달24일', person: '생활비', money: '100만원', key: '3' }
+    ]);
+
+    const addInfo = (info) => {
+        info.key = Math.random().toString(); //앞에 key를 받아올수있도록 생성
+        setTodo((currentInfos) => {
+            return [info, ...currentInfos]; //새로운 정보와 지금까지 정보를 합친다
+        });
+        setModalOpen(false); //modal이 보여지지 않게
+    }
+
+    const pressHandler = (key) => {
+        setTodo((prevTodos) => {
+            return prevTodos.filter(todo => todo.key != key);
+        });
+    }
+    const [todos, setTodos] = useState([
+        { date: '매달10일', person: '농협', money: '100만원', key: '1' },
+        { date: '매달20일', person: '삼성전자', money: '100만원', key: '2' },
+        { date: '매달30일', person: '비트코인', money: '100만원', key: '3' }
+    ]);
+
+
+
+    return (
+        <TouchableWithoutFeedback onPress={() => {
+            Keyboard.dismiss();
+        }}>
+            <View Style={style.container}>
+                <ButtonsForm
+                    onPress={(index) => setSelectedIndex(index)}
+                    selectedIndex={selectedIndex}
+                    group={["적금", "생활비"]} />
+
+                <View>
+                    <View style={{ width: '100%', height: '75%' }}>
+                        <TabView value={selectedIndex} onChange={setSelectedIndex} >
+                            <TabView.Item style={{ width: '100%', height: '100%' }}>
+                                <FlatList
+                                    data={todos}
+                                    renderItem={({ item }) => (
+                                        <TouchableOpacity onPress={() => navigation.navigate('MemoDetails', item)}>
+                                            <TodoItem item={item} pressHandler={pressHandler} />
+                                        </TouchableOpacity>
+                                    )}
+                                />
+                            </TabView.Item>
+                            <TabView.Item style={{ width: '100%', height: '100%' }}>
+                                <FlatList
+                                    data={todo}
+                                    renderItem={({ item }) => (
+                                        <TouchableOpacity onPress={() => navigation.navigate('MemoDetails', item)}>
+                                            <TodoItem item={item} pressHandler={pressHandler} />
+                                        </TouchableOpacity>
+                                    )}
+                                />
+                            </TabView.Item>
+                        </TabView>
+                    </View>
+                    <Ionicons
+                        name='add'
+                        size={24}
+                        style={style.modalToggle} //...은 중괄호를 풀어서 합치려고 이용함
+                        onPress={() => setModalOpen(true)}
+                    />
+                </View>
+                <View>
+                    <Modal visible={modalOpen} animationType='slide'>
+                        <View style={style.modalContent}>
+                            <Ionicons
+                                name='close'
+                                size={24}
+                                style={style.modalToggle}
+                                onPress={() => setModalOpen(false)}
+                            />
+                            <MemoForm addInfo={addInfo} />
+
+                        </View>
+                    </Modal>
+                </View>
+            </View>
+        </TouchableWithoutFeedback >
+    );
+}
+
+
+
+
+
+
+const style = StyleSheet.create({
+    container: {
+        flex: 1,
+        width: '100%',
+    },
+    modalToggle: {
+        borderWidth: 1,
+        borderColor: 'gray', //gray
+        padding: 5,
+        borderRadius: 10,
+        alignSelf: 'center', //위치를 center로
+    },
+
+    modalContent: {
+        flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
+    },
+
+
+    TextInput: {
+        borderColor: 'skyblue',
+        height: 40,
+        margin: 12,
+        borderWidth: 1
+    },
+    Font: {
+        fontSize: 24
+    }
+});
+
+export default MemoPage;

components/ButtonsForm.js

@@ -40,4 +40,4 @@ const style = StyleSheet.create({
     },
 })
 
-export default ButtonsForm
\ No newline at end of file
+export default ButtonsForm

components/InputBox.js

@@ -51,4 +51,4 @@ const style = StyleSheet.create({
     },
 })
 
-export default InputBox
\ No newline at end of file
+export default InputBox

components/StyledButton.js

@@ -29,4 +29,4 @@ const style = StyleSheet.create({
     },
 })
 
-export default StyledButton
\ No newline at end of file
+export default StyledButton

components/todoItem.js

+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+
+
+function TodoItem({ item, pressHandler }) {
+    return (
+        <View style={styles.item}>
+            <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>
+
+    )
+
+}
+
+const styles = StyleSheet.create({
+    item: {
+        padding: 16,
+        marginTop: 16,
+        borderColor: '#bbb', //light grey
+        borderWidth: 1,
+        borderStyle: 'd',
+        borderStyle: 'dashed', //little line
+        borderRadius: 10,
+        flexDirection: 'row' //같은 행에 있도록
+    },
+    itemText: {
+        marginLeft: 10,
+    }
+})
+
+export default TodoItem;
\ No newline at end of file

index.js

@@ -5,5 +5,4 @@
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
-
 AppRegistry.registerComponent(appName, () => App);

screens/InfoDetails.js

+import React, { useEffect, useState } from 'react';
+import { StyleSheet, View, Text, Button, Pressable, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import { globalStyles } from '../styles/global';
+import InputBox from '../components/InputBox';
+import StyledButton from '../components/StyledButton';
+
+
+function InfoDetails({ route }) {
+    const [date, setDate] = useState('')
+    const [person, setPerson] = useState('')
+    const [money, setMoney] = useState('')
+    const [remained_money, setRemained_money] = useState('')
+    useEffect(() => {
+        setDate(route.params?.date)
+        setPerson(route.params?.person)
+        setMoney(route.params?.money)
+        setRemained_money(route.params?.remained_money)
+    }, [])
+
+    return (
+        <TouchableWithoutFeedback onPress={() => {
+            Keyboard.dismiss();
+        }}>
+            <View style={{ flex: 1 }}>
+                <View>
+                    <InputBox
+                        inputTitle="날짜"
+                        value={date}
+                        onChangeText={
+                            (date) => setDate(date)
+                        }
+                    />
+                    <InputBox
+                        inputTitle="누구에게"
+                        value={person}
+                        onChangeText={
+                            (person) => setPerson(person)
+                        }
+                    />
+                    <InputBox
+                        inputTitle="금액"
+                        value={money}
+                        onChangeText={
+                            (money) => setMoney(money)
+                        }
+                    />
+                    <InputBox
+                        inputTitle="남은 금액"
+                        value={remained_money}
+                        onChangeText={
+                            (remaied_money) => setRemained_money(remained_money)
+                        }
+                    />
+                </View>
+                <View style={style.buttonRow}>
+                    <StyledButton
+                        name="수정"
+                        onPress={() => console.log('수정버튼')}
+                        style={style.submitButton}
+                    />
+                    <StyledButton
+                        name="저장"
+                        onPress={() => console.log('취소버튼')}
+                        style={style.cancelButton}
+                    />
+                </View>
+            </View>
+        </TouchableWithoutFeedback>
+    )
+}
+
+
+
+const style = StyleSheet.create({
+
+    buttonRow: {
+        flexDirection: 'row',
+        alignItems: "center",
+        marginHorizontal: 10,
+        marginVertical: 3,
+    },
+    submitButton: {
+        flex: 1,
+        height: 50,
+    },
+    cancelButton: {
+        flex: 1,
+        height: 50,
+    }
+});
+
+
+
+
+export default InfoDetails;
\ No newline at end of file

screens/MemoDetails.js

+import React, { useState } from 'react';
+import { StyleSheet, View, Text, Button, Pressable, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import { globalStyles } from '../styles/global';
+import InputBox from '../components/InputBox';
+import StyledButton from '../components/StyledButton';
+
+
+function MemoDetails({ route }) {
+    const [date, setDate] = useState('')
+    const [person, setPerson] = useState('')
+    const [money, setMoney] = useState('')
+
+
+    return (
+        <TouchableWithoutFeedback onPress={() => {
+            Keyboard.dismiss();
+        }}>
+            <View style={{ flex: 1 }}>
+                <View>
+                    <InputBox
+                        inputTitle="날짜"
+                        placeholder={route.params?.date}
+                        onChangeText={
+                            (date) => setDate(date)
+                        }
+                    />
+                    <InputBox
+                        inputTitle="내용"
+                        placeholder={route.params?.person}
+                        onChangeText={
+                            (person) => setPerson(person)
+                        }
+                    />
+                    <InputBox
+                        inputTitle="금액"
+                        placeholder={route.params?.money}
+                        onChangeText={
+                            (money) => setMoney(moeny)
+                        }
+                    />
+                </View>
+                <View style={style.buttonRow}>
+                    <StyledButton
+                        name="수정"
+                        onPress={() => console.log('수정버튼')}
+                        style={style.submitButton}
+                    />
+                    <StyledButton
+                        name="저장"
+                        onPress={() => console.log('취소버튼')}
+                        style={style.cancelButton}
+                    />
+                </View>
+            </View>
+        </TouchableWithoutFeedback>
+    )
+}
+
+
+
+const style = StyleSheet.create({
+
+    buttonRow: {
+        flexDirection: 'row',
+        alignItems: "center",
+        marginHorizontal: 10,
+        marginVertical: 3,
+    },
+    submitButton: {
+        flex: 1,
+        height: 50,
+    },
+    cancelButton: {
+        flex: 1,
+        height: 50,
+    }
+});
+
+
+
+
+export default MemoDetails;
\ No newline at end of file

screens/MemoForm.js

+import React from 'react';
+import { StyleSheet, Button, TextInput, View, Text, TouchableWithoutFeedback, Keyboard } 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(),
+
+})
+
+
+
+
+function MemoForm({ addInfo }) {
+    return (
+        <TouchableWithoutFeedback onPress={() => {
+            Keyboard.dismiss();
+        }}>
+            <View style={globalStyles.container} >
+                <Formik
+                    initialValues={{ date: '', person: '', money: ''}}
+                    validationSchema={ReviewSchema}
+                    onSubmit={(values) => {//위의 4개의 val들을 전달
+
+                        addInfo(values);
+                    }}
+
+                >
+
+                    {({ handleChange, handleSubmit, values }) => (
+                        <View>
+                            <TextInput
+                                style={globalStyles.input}
+                                placeholder='날짜'
+                                onChangeText={handleChange('date')} //우리가 바꾸려는 val
+                                value={values.date}
+                            />
+
+                            <TextInput
+                                style={globalStyles.input}
+                                placeholder='내용'
+                                onChangeText={handleChange('person')}
+                                value={values.person}
+                            />
+
+                            <TextInput
+                                style={globalStyles.input}
+                                placeholder='금액'
+                                onChangeText={handleChange('money')}
+                                value={values.money}
+                                keyboardType='numeric'
+                            />
+
+
+                            <Button title='입력' color='maroon' onPress={handleSubmit} />
+                        </View>
+                    )}
+
+                </Formik>
+
+            </View >
+        </TouchableWithoutFeedback>
+    )
+}
+
+export default MemoForm;
\ No newline at end of file

screens/infoForm.js

+import React from 'react';
+import { StyleSheet, Button, TextInput, View, Text, TouchableWithoutFeedback, Keyboard } 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()
+})
+
+
+
+
+function InfoForm({ addInfo }) {
+    return (
+        <TouchableWithoutFeedback onPress={() => {
+            Keyboard.dismiss();
+        }}>
+            <View style={globalStyles.container} >
+                <Formik
+                    initialValues={{ date: '', person: '', money: '', remained_money: '' }}
+                    validationSchema={ReviewSchema}
+                    onSubmit={(values) => {//위의 4개의 val들을 전달
+
+                        addInfo(values);
+                    }}
+
+                >
+
+                    {({ handleChange, handleSubmit, values }) => (
+                        <View>
+                            <TextInput
+                                style={globalStyles.input}
+                                placeholder='날짜'
+                                onChangeText={handleChange('date')} //우리가 바꾸려는 val
+                                value={values.date}
+                            />
+
+                            <TextInput
+                                style={globalStyles.input}
+                                placeholder='누구에게'
+                                onChangeText={handleChange('person')}
+                                value={values.person}
+                            />
+
+                            <TextInput
+                                style={globalStyles.input}
+                                placeholder='금액'
+                                onChangeText={handleChange('money')}
+                                value={values.money}
+                                keyboardType='numeric'
+                            />
+
+                            <TextInput
+                                style={globalStyles.input}
+                                placeholder='남은 금액'
+                                onChangeText={handleChange('remained_money')}
+                                value={values.remained_money}
+                                keyboardType='numeric'
+                            />
+
+                            <Button title='입력' color='maroon' onPress={handleSubmit} />
+                        </View>
+                    )}
+
+                </Formik>
+
+            </View >
+        </TouchableWithoutFeedback>
+    )
+}
+
+export default InfoForm;
\ No newline at end of file

styles/global.js

+import {StyleSheet} from 'react-native';
+
+export const globalStyles = StyleSheet.create({
+    container: {
+        flex:1,
+        padding:24,
+    },
+    titleText: {
+        fontFamily: 'nunito-bold',
+        fontSize:18,
+        color: '#333'
+    },
+    paragraph: {
+        marginVertical: 8,
+        lineHeight:20,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#ddd',
+        padding: 10,
+        fontSize: 18,
+        borderRadius:6,
+    }
+})
\ No newline at end of file