YDm

App.js

@@ -10,10 +10,11 @@ import PostMoney from './PostMoney';
 import MainScreen from './MainScreen';
 import DetailInfo from './DetailInfo';
 import DeptPage from './DeptPage';
-import InfoDetails from './screens/InfoDetails';
+import DeptDetails from './screens/DeptDetails';
 import MemoPage from './MemoPage';
 import MemoDetails from './screens/MemoDetails';
 
+
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
@@ -55,7 +56,7 @@ function App() {
           backgroundColor: '#eee'
         },
         headerTitleStyle: {
-          fontWeight: 'bold',
+          fontFamily: 'GowunDodum-Regular'
         },
         headerTitleAlign: 'center'
       }} >
@@ -66,15 +67,15 @@ function App() {
         <Stack.Screen
           name="DeptPage"
           component={DeptPage}
-          options={{ title: "부채", headerStyle: { backgroundColor: 'coral' } }} />
+          options={{ title: "부채", headerStyle: { backgroundColor: '#bfd3f2' } }} />
         <Stack.Screen
-          name="InfoDetails"
-          component={InfoDetails}
+          name="DeptDetails"
+          component={DeptDetails}
           options={{ title: "상세정보" }} />
         <Stack.Screen
           name="MemoPage"
           component={MemoPage}
-          options={{ title: "메모", headerStyle: { backgroundColor: 'coral' } }} />
+          options={{ title: "메모", headerStyle: { backgroundColor: '#bfd3f2' } }} />
         <Stack.Screen
           name="MemoDetails"
           component={MemoDetails}

DeptPage.js

-import React, { useState } from 'react';
+import React, { useState, useEffect } 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 TodoItem from './components/TodoItem';
+import DeptForm from './screens/DeptForm';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import InfoDetails from './screens/InfoDetails'
-import ButtonsForm from './components/ButtonsForm'; 
+import DeptDetails from './screens/DeptDetails'
+import ButtonsForm from './components/ButtonsForm';
 import { TabView } from 'react-native-elements';
-
+import deptApi from './db/deptPage.api';
 
 function DeptPage({ navigation }) {
+  const [lend, setLend] = useState([]) //빌려준
+  const [dept, setDept] = useState([])  //빌린
   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]; //새로운 정보와 지금까지 정보를 합친다
-    });
+
+  const loadLend = async () => { //빌려준
+    try {
+      const deptArray = await deptApi.selectLoan("빌려준금액")
+
+      setLend(deptArray);
+    } catch (error) {
+      console.log('error in load lend ( DeptPage.js )', error)
+    }
+  }
+
+  const loadDept = async () => { //빌림
+    try {
+      const deptArray = await deptApi.selectLoan("빌린금액")
+      setDept(deptArray);
+    } catch (error) {
+      console.log('error in load lend ( DeptPage.js )', error)
+    }
+  }
+
+  const loadLoan = async () => {
+    loadLend()
+    loadDept()
+  }
+
+  const addInfo = async (info) => {
+    if (selectedIndex) {
+      info['loan'] = "빌린금액"
+    } else {
+      info['loan'] = "빌려준금액"
+    }
+    await deptApi.insertDept(info)
     setModallOpen(false); //modal이 보여지지 않게
+    loadLoan()
   }
 
-  const pressHandler = (key) => {
-    setTodos((prevTodos) => {
-      return prevTodos.filter(todo => todo.key != key);
-    });
+  const onDeleteHandle = async (id) => {
+    await deptApi.deleteDept(id)
+    loadLoan()
   }
 
+  useEffect(() => { //처음 화면에 띄어지는거
+    loadLoan()
+  }, [])
+
+
+  console.log(selectedIndex)
   return (
     <TouchableWithoutFeedback onPress={() => {
       Keyboard.dismiss();
     }}>
       <View Style={style.container}>
         <ButtonsForm
-          onPress={(index) => setSelectedIndex(index)}
+          onPress={(index) => {
+            setSelectedIndex(index)
+          }}
           selectedIndex={selectedIndex}
           group={["빌려준금액", "빌린금액"]} />
 
@@ -51,20 +77,20 @@ function DeptPage({ navigation }) {
             <TabView value={selectedIndex} onChange={setSelectedIndex} >
               <TabView.Item style={{ width: '100%', height: '100%' }}>
                 <FlatList
-                  data={todo}
+                  data={lend}
                   renderItem={({ item }) => (
-                    <TouchableOpacity onPress={() => navigation.navigate('InfoDetails', item)}>
-                      <TodoItem item={item} pressHandler={pressHandler} />
+                    <TouchableOpacity onPress={() => navigation.navigate('DeptDetails', { item: item, loadLoan: loadLend })}>
+                      <TodoItem item={item} onDeleteHandle={() => onDeleteHandle(item.id)} />
                     </TouchableOpacity>
                   )}
                 />
               </TabView.Item>
               <TabView.Item style={{ width: '100%', height: '100%' }}>
                 <FlatList
-                  data={todos}
+                  data={dept}
                   renderItem={({ item }) => (
-                    <TouchableOpacity onPress={() => navigation.navigate('InfoDetails', item)}>
-                      <TodoItem item={item} pressHandler={pressHandler} />
+                    <TouchableOpacity onPress={() => navigation.navigate('DeptDetails', { item: item, loadLoan: loadDept })}>
+                      <TodoItem item={item} onDeleteHandle={() => onDeleteHandle(item.id)} />
                     </TouchableOpacity>
                   )}
                 />
@@ -87,22 +113,27 @@ function DeptPage({ navigation }) {
                 style={style.modalToggle}
                 onPress={() => setModallOpen(false)}
               />
-              <InfoForm addInfo={addInfo} />
+              <DeptForm addInfo={addInfo} />
 
             </View>
           </Modal>
         </View>
-      </View> 
+      </View>
     </TouchableWithoutFeedback >
   );
-}
 
 
+}
 
 
 
 const style = StyleSheet.create({
+  Font: {
+    fontFamily: 'GowunDodum-Regular'
+  },
+
   container: {
+    fontFamily: 'GowunDodum-Regular',
     flex: 1,
     width: '100%',
   },
@@ -116,17 +147,8 @@ const style = StyleSheet.create({
 
   modalContent: {
     flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
-  },
-
-  TextInput: {
-    borderColor: 'skyblue',
-    height: 40,
-    margin: 12,
-    borderWidth: 1
-  },
-  Font: {
-    fontSize: 24
   }
+
 });
 
 export default DeptPage;

MainScreen.js

@@ -83,6 +83,7 @@ const style = StyleSheet.create({
         borderWidth: 1
     },
     Font: {
+        fontFamily : 'Jua-Regular',
         fontSize: 24
     },
     modalToggle: {

MemoPage.js

-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, View, FlatList, TouchableOpacity, Modal, TouchableWithoutFeedback, Keyboard } from 'react-native';
-import TodoItem from './components/todoItem';
+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';
-
+import memoApi from './db/memoPage.api';
 
 
 function MemoPage({ navigation }) {
+    const [memos, setMemos] = useState([])
     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 loadMemos = async () => {
+        try {
+            const memoArray = await memoApi.selectMemo()
+            console.log('memoload', memoArray)
+            setMemos(memoArray);
+        } catch (error) {
+            console.log('error in load memos ( MemoPage.js )', error)
+        }
+    }
+
+
+    const addInfo = async (info) => {
+        await memoApi.insertMemo(info)
+        setModalOpen(false);
+        loadMemos();
     }
 
-    const pressHandler = (key) => {
-        setTodo((prevTodos) => {
-            return prevTodos.filter(todo => todo.key != key);
-        });
+    const onDeleteHandle = async (id) => {
+        await memoApi.deleteMemo(id)
+        loadMemos();
     }
-    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' }
-    ]);
+
+
+
+    useEffect(() => {
+        loadMemos()
+    }, [])
 
 
 
@@ -45,35 +50,20 @@ function MemoPage({ navigation }) {
             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 style={{ width: '100%', height: '95%' }} >
+                    <View style={{ width: '100%', height: '80%' }}>
+                        <View >
+                            <FlatList
+                                data={memos}
+                                renderItem={({ item }) => (
+                                    <TouchableOpacity onPress={() => navigation.navigate('MemoDetails', {item : item, loadMemos : loadMemos})}>
+                                        <TodoItem item={item} onDeleteHandle={() => onDeleteHandle(item.id)} />
+                                    </TouchableOpacity>
+                                )}
+                            />
+                        </View>
+
                     </View>
                     <Ionicons
                         name='add'

Monthly.js

 import React from 'react';
 import Calendar from './components/Calendar';
 
-const Montly = () => {
+const Montly = ({ navigation }) => {
   return (
-    <Calendar />
+    <Calendar navigation={navigation} />
   )
 }
 

components/ButtonsForm.js

@@ -3,16 +3,17 @@ import { ButtonGroup } from 'react-native-elements';
 import { StyleSheet, Text } from 'react-native';
 
 const ButtonsForm = (props) => {
+    const components = [];
 
-    const component1 = () => <Text>{props.group[0]}</Text>
-    const component2 = () => <Text>{props.group[1]}</Text>
-    const component3 = () => <Text>{props.group[2]}</Text>
+    for (let i = 0; i < props.group.length; i++) {
+        components[i] = { element: () => <Text style={{ fontFamily: 'GowunDodum-Regular' }}>{props.group[i]}</Text> }
+    }
 
     return (
         <ButtonGroup
             onPress={props.onPress}
             selectedIndex={props.selectedIndex}
-            buttons={[{ element: component1 }, { element: component2 }, { element: component3 }]}
+            buttons={components}
             containerStyle={style.container}
             selectedButtonStyle={style.selectedButton}
             selectedTextStyle={style.selectedText}

components/DatePicker.js

@@ -41,7 +41,7 @@ const DatePicker = (props) => {
 
 const style = StyleSheet.create({
     container: {
-        height:54,
+        height: 54,
         flexDirection: 'row',
         alignItems: "center",
         marginHorizontal: 10,
@@ -56,6 +56,7 @@ const style = StyleSheet.create({
         flex: 1,
     },
     inputTitle: {
+        fontFamily: 'GowunDodum-Regular',
         alignSelf: "center",
         color: "#1467ff",
         fontSize: 20,
@@ -64,6 +65,7 @@ const style = StyleSheet.create({
         flex: 3,
     },
     dateTextStyle: {
+        fontFamily: 'GowunDodum-Regular',
         fontSize: 20,
     },
 

components/InputBox.js

@@ -41,11 +41,13 @@ const style = StyleSheet.create({
         flex: 1,
     },
     inputTitle: {
+        fontFamily: 'GowunDodum-Regular',
         alignSelf: "center",
         color: "#1467ff",
         fontSize: 20,
     },
     textStyle: {
+        fontFamily: 'GowunDodum-Regular',
         flex: 3,
         fontSize: 20,
     },

components/StyledButton.js

@@ -25,6 +25,7 @@ const style = StyleSheet.create({
         borderRadius: 2,
     },
     buttonText: {
+        fontFamily: 'GowunDodum-Regular',
         fontSize: 20,
     },
 })

components/todoItem.js

@@ -4,12 +4,12 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 
 
 
-function TodoItem({ item, pressHandler }) {
+function TodoItem({ item, onDeleteHandle }) {
     return (
         <View style={styles.item}>
-            <Ionicons name='trash-outline' size={15} color='#333' onPress={() => pressHandler(item.key)} />
+            <Ionicons name='trash-outline' size={15} color='#333' onPress={onDeleteHandle} />
             <Text style={styles.itemText}>{item.date}</Text>
-            <Text style={styles.itemText}>{item.person}</Text>
+            <Text style={styles.itemText}>{item.message}</Text>
             <Text style={styles.itemText}>{item.money}</Text>
             <Text style={styles.itemText}>{item.remained_money}</Text>
         </View>
@@ -30,6 +30,7 @@ const styles = StyleSheet.create({
         flexDirection: 'row' //같은 행에 있도록
     },
     itemText: {
+        fontFamily: 'GowunDodum-Regular',
         marginLeft: 10,
     }
 })

db/deptPage.api.js

+
+import { DEBUG, enablePromise } from 'react-native-sqlite-storage';
+import getDb from './moneyDB'
+
+DEBUG(true);
+enablePromise(true);
+
+const insertDept = async (deptData) => {
+    const db = await getDb();
+    const { date, loan, message, money, remained_money } = deptData //객체의 value값들을 가져옴
+    return new Promise((resolve, reject) => {
+        db.transaction((tx) => {
+            console.log("데이터 삽입하기");
+            tx.executeSql('INSERT INTO dept (repayment_date, loan, loan_name, principal, repayment) VALUES (?,?,?,?,?);',
+                [date, loan, message, money, remained_money], //가져온 value값들을 배열형식으로
+                (error) => console.log(error))
+            resolve('데이터 삽입 완료');
+        })
+    })
+};
+
+
+
+
+
+const selectLoan = async (title) => {
+    const db = await getDb();
+    console.log(title, "123")
+    return new Promise((resolve, reject) => {
+        db.transaction(async (tx) => {
+            console.log("내용 부르기");
+            const [txn, results] = await tx.executeSql(`SELECT * FROM dept WHERE loan ="${title}"`);
+            console.log('item length', results.rows.length);
+            const temp = [];
+            for (let i = 0; i < results.rows.length; i++) {
+                const tempId = results.rows.item(i).dept_id;
+                const tempLoan = results.rows.item(i).loan;
+                const tempPrincipal = results.rows.item(i).principal;
+                const tempRepayment = results.rows.item(i).repayment;
+                const tempRe_date = results.rows.item(i).repayment_date;
+                const tempLoan_name = results.rows.item(i).loan_name;
+                temp.push({ id: tempId, date: tempRe_date, loan: tempLoan, message: tempLoan_name, money: tempPrincipal, remained_money: tempRepayment });
+            }
+            resolve(temp);
+
+        })
+    })
+}
+
+
+
+
+const deleteDept = async (id) => {
+    const db = await getDb();
+    return new Promise((resolve, reject) => {
+        db.transaction((tx) => {
+            console.log("데이터 삭제하기");
+            tx.executeSql(`DELETE FROM dept WHERE dept_id = ${id}`)
+            resolve('삭제완료');
+        })
+    })
+}
+
+
+const updateDept = async (deptData, id) => {
+    const db = await getDb();
+    const { date, message, money, remained_money } = deptData
+    console.log(date, message, id)
+    return new Promise((resolve, reject) => {
+        db.transaction((tx) => {
+            console.log("데이터 수정하기");
+            tx.executeSql(`UPDATE dept set repayment_date =?, loan_name=?, principal=?, repayment=? where dept_id =${id};`,
+                [date, message, money, remained_money],
+                (error) => console.log(error))
+            resolve('데이터 변경 완료');
+        })
+    })
+};
+
+
+const deptApi = {
+    insertDept,
+    selectLoan,
+    deleteDept,
+    updateDept,
+}
+
+export default deptApi;
\ No newline at end of file

db/memoPage.api.js

+import { DEBUG, enablePromise } from 'react-native-sqlite-storage';
+import getDb from './moneyDB'
+
+DEBUG(true);
+enablePromise(true);
+
+const insertMemo = async (memoData) => {
+    const db = await getDb();
+    return new Promise((resolve, reject) => {
+        db.transaction((tx) => {
+            console.log("데이터 삽입하기");
+            tx.executeSql('INSERT INTO memo (memo_date, message) VALUES (?,?);',
+                [memoData.date, memoData.message],
+                (error) => console.log(error))
+            resolve('데이터 삽입 완료');
+        })
+    })
+};
+
+const selectMemo = async () => {
+    const db = await getDb();
+    return new Promise((resolve, reject) => {
+        db.transaction(async (tx) => {
+            console.log("내용 부르기");
+            const [txn, results] = await tx.executeSql('SELECT * FROM memo');
+            console.log('item length', results.rows.length);
+            const temp = [];
+            for (let i = 0; i < results.rows.length; i++) {
+                const tempId = results.rows.item(i).memo_id;
+                const tempDate = results.rows.item(i).memo_date;
+                const tempMsg = results.rows.item(i).message;
+                temp.push({ id: tempId, date: tempDate, message: tempMsg });
+            }
+            console.log(temp)
+            resolve(temp);
+        })
+    })
+}
+
+const deleteMemo = async (id) => {
+    const db = await getDb();
+    return new Promise((resolve, reject) => {
+        db.transaction((tx) => {
+            console.log("데이터 삭제하기");
+            tx.executeSql(`DELETE FROM memo WHERE memo_id = ${id}`)
+            resolve('삭제완료');
+        })
+    })
+}
+
+const updateMemo = async (memoData, id) => {
+    const db = await getDb();
+    const { date, message } = memoData
+    console.log(date, message, id)
+    return new Promise((resolve, reject) => {
+        db.transaction((tx) => {
+            console.log("데이터 수정하기");
+            tx.executeSql(`UPDATE memo set memo_date =?, message =? where memo_id =${id};`,
+                [date, message],
+                (error) => console.log(error))
+            resolve('데이터 변경 완료');
+        })
+    })
+};
+
+// const insertDept = async (deptData) => {
+//     const db = await getDb();
+//     const { date, loan, message, money, remained_money } = deptData //객체의 value값들을 가져옴
+//     return new Promise((resolve, reject) => {
+//         db.transaction((tx) => {
+//             console.log("데이터 삽입하기");
+//             tx.executeSql('INSERT INTO dept (repayment_date, loan, loan_name, principal, repayment) VALUES (?,?,?,?,?);',
+//                 [date, loan, message, money, remained_money], //가져온 value값들을 배열형식으로
+//                 (error) => console.log(error))
+//             resolve('데이터 삽입 완료');
+//         })
+//     })
+// };
+
+const memoApi = {
+    insertMemo,
+    selectMemo,
+    deleteMemo,
+    updateMemo,
+}
+
+export default memoApi;
\ No newline at end of file

react-native.config.js

+module.exports = {
+    project: {
+      ios: {},
+      android: {}, // grouped into "project"
+    },
+    assets: ["./assets/fonts/"], // stays the same
+  };
\ No newline at end of file

screens/InfoDetails.js → screens/DeptDetails.js

@@ -3,38 +3,50 @@ import { StyleSheet, View, Text, Button, Pressable, TouchableWithoutFeedback, Ke
 import { globalStyles } from '../styles/global';
 import InputBox from '../components/InputBox';
 import StyledButton from '../components/StyledButton';
+import DatePicker from '../components/DatePicker.js';
+import deptApi from '../db/deptPage.api';
 
-
-function InfoDetails({ route }) {
-    const [date, setDate] = useState('')
-    const [person, setPerson] = useState('')
+function DeptDetails({ route, navigation }) {
+    const { item, loadLoan } = route.params
+    const getDate = () => {
+        var date = new Date();
+        return (String(date.toJSON()).split(/T/)[0])
+    }
+    const [date, setDate] = useState(getDate())
+    const [message, setMessage] = 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)
+        setDate(String(item.date))
+        setMessage(item.message)
+        setMoney(String(item.money))
+        setRemained_money(String(item.remained_money))
     }, [])
 
+    const onUpdateHandle = async () => {
+        await deptApi.updateDept({ date, message, money, remained_money }, item.id)
+        loadLoan()
+        navigation.navigate('DeptPage')
+
+    }
+
     return (
         <TouchableWithoutFeedback onPress={() => {
             Keyboard.dismiss();
         }}>
             <View style={{ flex: 1 }}>
-                <View>
-                    <InputBox
+                <View style={style.Font}>
+                    <DatePicker
                         inputTitle="날짜"
-                        value={date}
-                        onChangeText={
-                            (date) => setDate(date)
-                        }
+                        date={date}
+                        setDate={setDate}
                     />
                     <InputBox
-                        inputTitle="누구에게"
-                        value={person}
+                        inputTitle="내용"
+                        value={message}
                         onChangeText={
-                            (person) => setPerson(person)
+                            (message) => setMessage(message)
                         }
                     />
                     <InputBox
@@ -48,21 +60,16 @@ function InfoDetails({ route }) {
                         inputTitle="남은 금액"
                         value={remained_money}
                         onChangeText={
-                            (remaied_money) => setRemained_money(remained_money)
+                            (remained_money) => setRemained_money(remained_money)
                         }
                     />
                 </View>
                 <View style={style.buttonRow}>
                     <StyledButton
                         name="수정"
-                        onPress={() => console.log('수정버튼')}
+                        onPress={() => { onUpdateHandle() }}
                         style={style.submitButton}
                     />
-                    <StyledButton
-                        name="저장"
-                        onPress={() => console.log('취소버튼')}
-                        style={style.cancelButton}
-                    />
                 </View>
             </View>
         </TouchableWithoutFeedback>
@@ -73,7 +80,12 @@ function InfoDetails({ route }) {
 
 const style = StyleSheet.create({
 
+    Font: {
+        fontFamily: 'GowunDodum-Regular'
+    },
+
     buttonRow: {
+        fontFamily: 'GowunDodum-Regular',
         flexDirection: 'row',
         alignItems: "center",
         marginHorizontal: 10,
@@ -92,4 +104,4 @@ const style = StyleSheet.create({
 
 
 
-export default InfoDetails;
\ No newline at end of file
+export default DeptDetails;
\ No newline at end of file

screens/infoForm.js → screens/DeptForm.js

-import React from 'react';
-import { StyleSheet, Button, TextInput, View, Text, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import React, { useState } from 'react';
+import { StyleSheet, Button, View, Text, TextInput, TouchableWithoutFeedback, Keyboard } from 'react-native';
 import { globalStyles } from '../styles/global.js'
 import { Formik } from 'formik';
 import * as yup from 'yup';
+import DatePicker from '../components/DatePicker.js';
+import InputBox from '../components/InputBox';
 
 const ReviewSchema = yup.object({
     date: yup.string() //string만 받는다
-        .required()  //아무것도 입력안했하면 안받음
-        .min(4),  //최소4글짜
-    person: yup.string()
+        .required(),  //아무것도 입력안했하면 안받음
+    message: yup.string()
         .required()
         .min(2),
-    money: yup.string()
+    money: yup.number()
         .required(),
-    remained_money: yup.string()
+    remained_money: yup.number()
         .required()
 })
 
+const getDate = () => {
+    var date = new Date();
+    return (String(date.toJSON()).split(/T/)[0])
+}
+// const [date, setDate] = useState(getDate())
 
-
-
-function InfoForm({ addInfo }) {
+function DeptForm({ addInfo }) {
     return (
         <TouchableWithoutFeedback onPress={() => {
             Keyboard.dismiss();
         }}>
             <View style={globalStyles.container} >
                 <Formik
-                    initialValues={{ date: '', person: '', money: '', remained_money: '' }}
+                    initialValues={{ date: '', message: '', money: '', remained_money: '' }}
                     validationSchema={ReviewSchema}
                     onSubmit={(values) => {//위의 4개의 val들을 전달
 
@@ -38,37 +42,37 @@ function InfoForm({ addInfo }) {
 
                     {({ 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}
+                            <DatePicker
+                                inputTitle='날짜'
+                                date={values.date || getDate()}//오늘날짜 아니면 바뀐날짜
+                                setDate={handleChange('date')}
                             />
+                            <InputBox
+                                inputTitle="내용"
+                                onChangeText={handleChange('message')}
+                                value={values.message}
 
-                            <TextInput
-                                style={globalStyles.input}
-                                placeholder='금액'
+                            />
+                            <InputBox
+                                inputTitle="금액"
                                 onChangeText={handleChange('money')}
                                 value={values.money}
-                                keyboardType='numeric'
-                            />
+                                keyboardType="numeric"
 
-                            <TextInput
-                                style={globalStyles.input}
-                                placeholder='남은 금액'
+                            />
+                            <InputBox
+                                inputTitle="남은금액"
                                 onChangeText={handleChange('remained_money')}
                                 value={values.remained_money}
-                                keyboardType='numeric'
+                                keyboardType="numeric"
+
                             />
 
-                            <Button title='입력' color='maroon' onPress={handleSubmit} />
+                            <View style={{ marginVertical: '10%', marginHorizontal: 10 }}>
+                                <Button title='입력' color = 'dodgerblue'  onPress={handleSubmit} />
+                            </View>
+
                         </View>
                     )}
 
@@ -79,4 +83,4 @@ function InfoForm({ addInfo }) {
     )
 }
 
-export default InfoForm;
\ No newline at end of file
+export default DeptForm;
\ No newline at end of file

screens/MemoDetails.js

-import React, { useState } from 'react';
+import React, { useState, useEffect } 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';
+import DatePicker from '../components/DatePicker.js';
+import memoApi from '../db/memoPage.api';
 
 
-function MemoDetails({ route }) {
-    const [date, setDate] = useState('')
-    const [person, setPerson] = useState('')
-    const [money, setMoney] = useState('')
+function MemoDetails({ route, navigation }) {
+    const {item, loadMemos} = route.params
+    const getDate = () => {
+        var date = new Date();
+        return (String(date.toJSON()).split(/T/)[0])
+    }
+    const [date, setDate] = useState(getDate())
+    const [message, setMessage] = useState('')
+    const onUpdateHandle = async () => {
+        await memoApi.updateMemo({ date, message }, item.id)
+        loadMemos()
+        navigation.navigate('MemoPage')
+        // navigation.goBack()
+        // navigation.dispatch( navigation.navigate('MemoPage')); 
+
+    }
 
+    useEffect(() => {
+        setDate(String(item.date))
+        setMessage(item.message)
+    }, [])
 
     return (
         <TouchableWithoutFeedback onPress={() => {
@@ -17,39 +35,26 @@ function MemoDetails({ route }) {
         }}>
             <View style={{ flex: 1 }}>
                 <View>
-                    <InputBox
+                    <DatePicker
                         inputTitle="날짜"
-                        placeholder={route.params?.date}
-                        onChangeText={
-                            (date) => setDate(date)
-                        }
+                        date={date}
+                        setDate={setDate}
                     />
                     <InputBox
                         inputTitle="내용"
-                        placeholder={route.params?.person}
+                        value={message}
                         onChangeText={
-                            (person) => setPerson(person)
-                        }
-                    />
-                    <InputBox
-                        inputTitle="금액"
-                        placeholder={route.params?.money}
-                        onChangeText={
-                            (money) => setMoney(moeny)
+                            (message) => setMessage(message)
                         }
                     />
+
                 </View>
                 <View style={style.buttonRow}>
                     <StyledButton
                         name="수정"
-                        onPress={() => console.log('수정버튼')}
+                        onPress={() => { onUpdateHandle() }}
                         style={style.submitButton}
                     />
-                    <StyledButton
-                        name="저장"
-                        onPress={() => console.log('취소버튼')}
-                        style={style.cancelButton}
-                    />
                 </View>
             </View>
         </TouchableWithoutFeedback>

screens/MemoForm.js

-import React from 'react';
-import { StyleSheet, Button, TextInput, View, Text, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import React, { useState } from 'react';
+import { StyleSheet, Button, View, Text, TouchableWithoutFeedback, Keyboard } from 'react-native';
 import { globalStyles } from '../styles/global.js'
 import { Formik } from 'formik';
 import * as yup from 'yup';
+import DatePicker from '../components/DatePicker.js';
+import InputBox from '../components/InputBox.js';
 
 const ReviewSchema = yup.object({
-    date: yup.string() //string만 받는다
-        .required()  //아무것도 입력안했하면 안받음
-        .min(4),  //최소4글짜
-    person: yup.string()
+    // date: yup.string() //string만 받는다
+    //     .required()  //아무것도 입력안했하면 안받음
+    // ,  //최소4글짜
+    message: yup.string()
         .required()
         .min(2),
-    money: yup.string()
-        .required(),
 
 })
 
-
+const getDate = () => {
+    var date = new Date();
+    return (String(date.toJSON()).split(/T/)[0])
+}
 
 
 function MemoForm({ addInfo }) {
@@ -26,7 +29,7 @@ function MemoForm({ addInfo }) {
         }}>
             <View style={globalStyles.container} >
                 <Formik
-                    initialValues={{ date: '', person: '', money: ''}}
+                    initialValues={{ date: '', message: '' }}
                     validationSchema={ReviewSchema}
                     onSubmit={(values) => {//위의 4개의 val들을 전달
 
@@ -34,33 +37,23 @@ function MemoForm({ addInfo }) {
                     }}
 
                 >
-
                     {({ handleChange, handleSubmit, values }) => (
                         <View>
-                            <TextInput
-                                style={globalStyles.input}
-                                placeholder='날짜'
-                                onChangeText={handleChange('date')} //우리가 바꾸려는 val
-                                value={values.date}
+                            <DatePicker
+                                inputTitle='날짜'
+                                date={values.date || getDate()}//오늘날짜 아니면 바뀐날짜
+                                setDate={handleChange('date')}
                             />
+                            <InputBox
+                                inputTitle="내용"
+                                onChangeText={handleChange('message')}
+                                value={values.message}
 
-                            <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 style={{ marginVertical: '10%', marginHorizontal: 10 }}>
+                                <Button title='입력' color='dodgerblue' onPress={handleSubmit} />
+                            </View>
                         </View>
                     )}