Skip to content

GitLab

Commit d41e67bc authored by YoonDongMin's avatar YoonDongMin
Browse files

YDm

parent 8590a203
Hide whitespace changes
Inline Side-by-side
App.js
View file @ d41e67bc
...@@ -10,10 +10,11 @@ import PostMoney from './PostMoney'; ...@@ -10,10 +10,11 @@ import PostMoney from './PostMoney';
import MainScreen from './MainScreen'; import MainScreen from './MainScreen';
import DetailInfo from './DetailInfo'; import DetailInfo from './DetailInfo';
import DeptPage from './DeptPage'; import DeptPage from './DeptPage';
import InfoDetails from './screens/InfoDetails'; import DeptDetails from './screens/DeptDetails';
import MemoPage from './MemoPage'; import MemoPage from './MemoPage';
import MemoDetails from './screens/MemoDetails'; import MemoDetails from './screens/MemoDetails';
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
const Stack = createStackNavigator(); const Stack = createStackNavigator();
...@@ -55,7 +56,7 @@ function App() { ...@@ -55,7 +56,7 @@ function App() {
backgroundColor: '#eee' backgroundColor: '#eee'
}, },
headerTitleStyle: { headerTitleStyle: {
fontWeight: 'bold', fontFamily: 'GowunDodum-Regular'
}, },
headerTitleAlign: 'center' headerTitleAlign: 'center'
}} > }} >
...@@ -66,15 +67,15 @@ function App() { ...@@ -66,15 +67,15 @@ function App() {
<Stack.Screen <Stack.Screen
name="DeptPage" name="DeptPage"
component={DeptPage} component={DeptPage}
options={{ title: "부채", headerStyle: { backgroundColor: 'coral' } }} /> options={{ title: "부채", headerStyle: { backgroundColor: '#bfd3f2' } }} />
<Stack.Screen <Stack.Screen
name="InfoDetails" name="DeptDetails"
component={InfoDetails} component={DeptDetails}
options={{ title: "상세정보" }} /> options={{ title: "상세정보" }} />
<Stack.Screen <Stack.Screen
name="MemoPage" name="MemoPage"
component={MemoPage} component={MemoPage}
options={{ title: "메모", headerStyle: { backgroundColor: 'coral' } }} /> options={{ title: "메모", headerStyle: { backgroundColor: '#bfd3f2' } }} />
<Stack.Screen <Stack.Screen
name="MemoDetails" name="MemoDetails"
component={MemoDetails} component={MemoDetails}
......
DeptPage.js
View file @ d41e67bc
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 { StyleSheet, Text, View, FlatList, TouchableOpacity, Modal, Alert, TouchableWithoutFeedback, Keyboard } from 'react-native';
import TodoItem from './components/todoItem'; import TodoItem from './components/TodoItem';
import InfoForm from './screens/InfoForm'; import DeptForm from './screens/DeptForm';
import Ionicons from 'react-native-vector-icons/Ionicons'; import Ionicons from 'react-native-vector-icons/Ionicons';
import InfoDetails from './screens/InfoDetails' import DeptDetails from './screens/DeptDetails'
import ButtonsForm from './components/ButtonsForm'; import ButtonsForm from './components/ButtonsForm';
import { TabView } from 'react-native-elements'; import { TabView } from 'react-native-elements';
import deptApi from './db/deptPage.api';
function DeptPage({ navigation }) { function DeptPage({ navigation }) {
const [lend, setLend] = useState([]) //빌려준
const [dept, setDept] = useState([]) //빌린
const [selectedIndex, setSelectedIndex] = useState(0) const [selectedIndex, setSelectedIndex] = useState(0)
const [modallOpen, setModallOpen] = useState(false); const [modallOpen, setModallOpen] = useState(false);
const [todo, setTodo] = useState([
{ date: '7/10', person: 'Mark', money: '100만원', remained_money: '10만원남음', key: '1' }, const loadLend = async () => { //빌려준
{ date: '7/10', person: 'John', money: '100만원', remained_money: '10만원남음', key: '2' }, try {
{ date: '7/10', person: 'Steve', money: '100만원', remained_money: '10만원남음', key: '3' } const deptArray = await deptApi.selectLoan("빌려준금액")
]);
const [todos, setTodos] = useState([ setLend(deptArray);
{ date: '7/10', person: '수빈이', money: '100만원', remained_money: '10만원남음', key: '1' }, } catch (error) {
{ date: '7/10', person: '수현이', money: '100만원', remained_money: '10만원남음', key: '2' }, console.log('error in load lend ( DeptPage.js )', error)
{ date: '7/10', person: '가영이', money: '100만원', remained_money: '10만원남음', key: '3' } }
]); }
const addInfo = (info) => { const loadDept = async () => { //빌림
info.key = Math.random().toString(); //앞에 key를 받아올수있도록 생성 try {
setTodos((currentInfos) => { const deptArray = await deptApi.selectLoan("빌린금액")
return [info, ...currentInfos]; //새로운 정보와 지금까지 정보를 합친다 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이 보여지지 않게 setModallOpen(false); //modal이 보여지지 않게
loadLoan()
} }
const pressHandler = (key) => { const onDeleteHandle = async (id) => {
setTodos((prevTodos) => { await deptApi.deleteDept(id)
return prevTodos.filter(todo => todo.key != key); loadLoan()
});
} }
useEffect(() => { //처음 화면에 띄어지는거
loadLoan()
}, [])
console.log(selectedIndex)
return ( return (
<TouchableWithoutFeedback onPress={() => { <TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss(); Keyboard.dismiss();
}}> }}>
<View Style={style.container}> <View Style={style.container}>
<ButtonsForm <ButtonsForm
onPress={(index) => setSelectedIndex(index)} onPress={(index) => {
setSelectedIndex(index)
}}
selectedIndex={selectedIndex} selectedIndex={selectedIndex}
group={["빌려준금액", "빌린금액"]} /> group={["빌려준금액", "빌린금액"]} />
...@@ -51,20 +77,20 @@ function DeptPage({ navigation }) { ...@@ -51,20 +77,20 @@ function DeptPage({ navigation }) {
<TabView value={selectedIndex} onChange={setSelectedIndex} > <TabView value={selectedIndex} onChange={setSelectedIndex} >
<TabView.Item style={{ width: '100%', height: '100%' }}> <TabView.Item style={{ width: '100%', height: '100%' }}>
<FlatList <FlatList
data={todo} data={lend}
renderItem={({ item }) => ( renderItem={({ item }) => (
<TouchableOpacity onPress={() => navigation.navigate('InfoDetails', item)}> <TouchableOpacity onPress={() => navigation.navigate('DeptDetails', { item: item, loadLoan: loadLend })}>
<TodoItem item={item} pressHandler={pressHandler} /> <TodoItem item={item} onDeleteHandle={() => onDeleteHandle(item.id)} />
</TouchableOpacity> </TouchableOpacity>
)} )}
/> />
</TabView.Item> </TabView.Item>
<TabView.Item style={{ width: '100%', height: '100%' }}> <TabView.Item style={{ width: '100%', height: '100%' }}>
<FlatList <FlatList
data={todos} data={dept}
renderItem={({ item }) => ( renderItem={({ item }) => (
<TouchableOpacity onPress={() => navigation.navigate('InfoDetails', item)}> <TouchableOpacity onPress={() => navigation.navigate('DeptDetails', { item: item, loadLoan: loadDept })}>
<TodoItem item={item} pressHandler={pressHandler} /> <TodoItem item={item} onDeleteHandle={() => onDeleteHandle(item.id)} />
</TouchableOpacity> </TouchableOpacity>
)} )}
/> />
...@@ -87,22 +113,27 @@ function DeptPage({ navigation }) { ...@@ -87,22 +113,27 @@ function DeptPage({ navigation }) {
style={style.modalToggle} style={style.modalToggle}
onPress={() => setModallOpen(false)} onPress={() => setModallOpen(false)}
/> />
<InfoForm addInfo={addInfo} /> <DeptForm addInfo={addInfo} />
</View> </View>
</Modal> </Modal>
</View> </View>
</View> </View>
</TouchableWithoutFeedback > </TouchableWithoutFeedback >
); );
}
}
const style = StyleSheet.create({ const style = StyleSheet.create({
Font: {
fontFamily: 'GowunDodum-Regular'
},
container: { container: {
fontFamily: 'GowunDodum-Regular',
flex: 1, flex: 1,
width: '100%', width: '100%',
}, },
...@@ -116,17 +147,8 @@ const style = StyleSheet.create({ ...@@ -116,17 +147,8 @@ const style = StyleSheet.create({
modalContent: { modalContent: {
flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
},
TextInput: {
borderColor: 'skyblue',
height: 40,
margin: 12,
borderWidth: 1
},
Font: {
fontSize: 24
} }
}); });
export default DeptPage; export default DeptPage;
MainScreen.js
View file @ d41e67bc
...@@ -83,6 +83,7 @@ const style = StyleSheet.create({ ...@@ -83,6 +83,7 @@ const style = StyleSheet.create({
borderWidth: 1 borderWidth: 1
}, },
Font: { Font: {
fontFamily : 'Jua-Regular',
fontSize: 24 fontSize: 24
}, },
modalToggle: { modalToggle: {
......
MemoPage.js
View file @ d41e67bc
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, FlatList, TouchableOpacity, Modal, TouchableWithoutFeedback, Keyboard } from 'react-native'; 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 Ionicons from 'react-native-vector-icons/Ionicons';
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import MemoDetails from './screens/MemoDetails'; import MemoDetails from './screens/MemoDetails';
import MemoForm from './screens/MemoForm'; import MemoForm from './screens/MemoForm';
import ButtonsForm from './components/ButtonsForm'; import ButtonsForm from './components/ButtonsForm';
import { TabView } from 'react-native-elements'; import { TabView } from 'react-native-elements';
import memoApi from './db/memoPage.api';
function MemoPage({ navigation }) { function MemoPage({ navigation }) {
const [memos, setMemos] = useState([])
const [selectedIndex, setSelectedIndex] = useState(0) const [selectedIndex, setSelectedIndex] = useState(0)
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [todo, setTodo] = useState([
{ date: '매달10일', person: '식비', money: '100만원', key: '1' }, const loadMemos = async () => {
{ date: '매달20일', person: '휴대폰요금', money: '100만원', key: '2' }, try {
{ date: '매달24일', person: '생활비', money: '100만원', key: '3' } const memoArray = await memoApi.selectMemo()
]); console.log('memoload', memoArray)
setMemos(memoArray);
const addInfo = (info) => { } catch (error) {
info.key = Math.random().toString(); //앞에 key를 받아올수있도록 생성 console.log('error in load memos ( MemoPage.js )', error)
setTodo((currentInfos) => { }
return [info, ...currentInfos]; //새로운 정보와 지금까지 정보를 합친다 }
});
setModalOpen(false); //modal이 보여지지 않게
const addInfo = async (info) => {
await memoApi.insertMemo(info)
setModalOpen(false);
loadMemos();
} }
const pressHandler = (key) => { const onDeleteHandle = async (id) => {
setTodo((prevTodos) => { await memoApi.deleteMemo(id)
return prevTodos.filter(todo => todo.key != key); 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 }) { ...@@ -45,35 +50,20 @@ function MemoPage({ navigation }) {
Keyboard.dismiss(); Keyboard.dismiss();
}}> }}>
<View Style={style.container}> <View Style={style.container}>
<ButtonsForm
onPress={(index) => setSelectedIndex(index)}
selectedIndex={selectedIndex}
group={["적금", "생활비"]} />
<View> <View style={{ width: '100%', height: '95%' }} >
<View style={{ width: '100%', height: '75%' }}> <View style={{ width: '100%', height: '80%' }}>
<TabView value={selectedIndex} onChange={setSelectedIndex} > <View >
<TabView.Item style={{ width: '100%', height: '100%' }}> <FlatList
<FlatList data={memos}
data={todos} renderItem={({ item }) => (
renderItem={({ item }) => ( <TouchableOpacity onPress={() => navigation.navigate('MemoDetails', {item : item, loadMemos : loadMemos})}>
<TouchableOpacity onPress={() => navigation.navigate('MemoDetails', item)}> <TodoItem item={item} onDeleteHandle={() => onDeleteHandle(item.id)} />
<TodoItem item={item} pressHandler={pressHandler} /> </TouchableOpacity>
</TouchableOpacity> )}
)} />
/> </View>
</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> </View>
<Ionicons <Ionicons
name='add' name='add'
......
Monthly.js
View file @ d41e67bc
import React from 'react'; import React from 'react';
import Calendar from './components/Calendar'; import Calendar from './components/Calendar';
const Montly = () => { const Montly = ({ navigation }) => {
return ( return (
<Calendar /> <Calendar navigation={navigation} />
) )
} }
......
components/ButtonsForm.js
View file @ d41e67bc
...@@ -3,16 +3,17 @@ import { ButtonGroup } from 'react-native-elements'; ...@@ -3,16 +3,17 @@ import { ButtonGroup } from 'react-native-elements';
import { StyleSheet, Text } from 'react-native'; import { StyleSheet, Text } from 'react-native';
const ButtonsForm = (props) => { const ButtonsForm = (props) => {
const components = [];
const component1 = () => <Text>{props.group[0]}</Text> for (let i = 0; i < props.group.length; i++) {
const component2 = () => <Text>{props.group[1]}</Text> components[i] = { element: () => <Text style={{ fontFamily: 'GowunDodum-Regular' }}>{props.group[i]}</Text> }
const component3 = () => <Text>{props.group[2]}</Text> }
return ( return (
<ButtonGroup <ButtonGroup
onPress={props.onPress} onPress={props.onPress}
selectedIndex={props.selectedIndex} selectedIndex={props.selectedIndex}
buttons={[{ element: component1 }, { element: component2 }, { element: component3 }]} buttons={components}
containerStyle={style.container} containerStyle={style.container}
selectedButtonStyle={style.selectedButton} selectedButtonStyle={style.selectedButton}
selectedTextStyle={style.selectedText} selectedTextStyle={style.selectedText}
......
components/DatePicker.js
View file @ d41e67bc
...@@ -41,7 +41,7 @@ const DatePicker = (props) => { ...@@ -41,7 +41,7 @@ const DatePicker = (props) => {
const style = StyleSheet.create({ const style = StyleSheet.create({
container: { container: {
height:54, height: 54,
flexDirection: 'row', flexDirection: 'row',
alignItems: "center", alignItems: "center",
marginHorizontal: 10, marginHorizontal: 10,
...@@ -56,6 +56,7 @@ const style = StyleSheet.create({ ...@@ -56,6 +56,7 @@ const style = StyleSheet.create({
flex: 1, flex: 1,
}, },
inputTitle: { inputTitle: {
fontFamily: 'GowunDodum-Regular',
alignSelf: "center", alignSelf: "center",
color: "#1467ff", color: "#1467ff",
fontSize: 20, fontSize: 20,
...@@ -64,6 +65,7 @@ const style = StyleSheet.create({ ...@@ -64,6 +65,7 @@ const style = StyleSheet.create({
flex: 3, flex: 3,
}, },
dateTextStyle: { dateTextStyle: {
fontFamily: 'GowunDodum-Regular',
fontSize: 20, fontSize: 20,
}, },
......
components/InputBox.js
View file @ d41e67bc
...@@ -41,11 +41,13 @@ const style = StyleSheet.create({ ...@@ -41,11 +41,13 @@ const style = StyleSheet.create({
flex: 1, flex: 1,
}, },
inputTitle: { inputTitle: {
fontFamily: 'GowunDodum-Regular',
alignSelf: "center", alignSelf: "center",
color: "#1467ff", color: "#1467ff",
fontSize: 20, fontSize: 20,
}, },
textStyle: { textStyle: {
fontFamily: 'GowunDodum-Regular',
flex: 3, flex: 3,
fontSize: 20, fontSize: 20,
}, },
......
components/StyledButton.js
View file @ d41e67bc
...@@ -25,6 +25,7 @@ const style = StyleSheet.create({ ...@@ -25,6 +25,7 @@ const style = StyleSheet.create({
borderRadius: 2, borderRadius: 2,
}, },
buttonText: { buttonText: {
fontFamily: 'GowunDodum-Regular',
fontSize: 20, fontSize: 20,
}, },
}) })
......
components/todoItem.js
View file @ d41e67bc
...@@ -4,12 +4,12 @@ import Ionicons from 'react-native-vector-icons/Ionicons'; ...@@ -4,12 +4,12 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
function TodoItem({ item, pressHandler }) { function TodoItem({ item, onDeleteHandle }) {
return ( return (
<View style={styles.item}> <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.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.money}</Text>
<Text style={styles.itemText}>{item.remained_money}</Text> <Text style={styles.itemText}>{item.remained_money}</Text>
</View> </View>
...@@ -30,6 +30,7 @@ const styles = StyleSheet.create({ ...@@ -30,6 +30,7 @@ const styles = StyleSheet.create({
flexDirection: 'row' //같은 행에 있도록 flexDirection: 'row' //같은 행에 있도록
}, },
itemText: { itemText: {
fontFamily: 'GowunDodum-Regular',
marginLeft: 10, marginLeft: 10,
} }
}) })
......
db/deptPage.api.js 0 → 100644
View file @ d41e67bc
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 0 → 100644
View file @ d41e67bc
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 0 → 100644
View file @ d41e67bc
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
View file @ d41e67bc
...@@ -3,38 +3,50 @@ import { StyleSheet, View, Text, Button, Pressable, TouchableWithoutFeedback, Ke ...@@ -3,38 +3,50 @@ import { StyleSheet, View, Text, Button, Pressable, TouchableWithoutFeedback, Ke
import { globalStyles } from '../styles/global'; import { globalStyles } from '../styles/global';
import InputBox from '../components/InputBox'; import InputBox from '../components/InputBox';
import StyledButton from '../components/StyledButton'; import StyledButton from '../components/StyledButton';
import DatePicker from '../components/DatePicker.js';
import deptApi from '../db/deptPage.api';
function DeptDetails({ route, navigation }) {
function InfoDetails({ route }) { const { item, loadLoan } = route.params
const [date, setDate] = useState('') const getDate = () => {
const [person, setPerson] = useState('') 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 [money, setMoney] = useState('')
const [remained_money, setRemained_money] = useState('') const [remained_money, setRemained_money] = useState('')
useEffect(() => { useEffect(() => {
setDate(route.params?.date) setDate(String(item.date))
setPerson(route.params?.person) setMessage(item.message)
setMoney(route.params?.money) setMoney(String(item.money))
setRemained_money(route.params?.remained_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 ( return (
<TouchableWithoutFeedback onPress={() => { <TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss(); Keyboard.dismiss();
}}> }}>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<View> <View style={style.Font}>
<InputBox <DatePicker
inputTitle="날짜" inputTitle="날짜"
value={date} date={date}
onChangeText={ setDate={setDate}
(date) => setDate(date)
}
/> />
<InputBox <InputBox
inputTitle="누구에게" inputTitle="내용"
value={person} value={message}
onChangeText={ onChangeText={
(person) => setPerson(person) (message) => setMessage(message)
} }
/> />
<InputBox <InputBox
...@@ -48,21 +60,16 @@ function InfoDetails({ route }) { ...@@ -48,21 +60,16 @@ function InfoDetails({ route }) {
inputTitle="남은 금액" inputTitle="남은 금액"
value={remained_money} value={remained_money}
onChangeText={ onChangeText={
(remaied_money) => setRemained_money(remained_money) (remained_money) => setRemained_money(remained_money)
} }
/> />
</View> </View>
<View style={style.buttonRow}> <View style={style.buttonRow}>
<StyledButton <StyledButton
name="수정" name="수정"
onPress={() => console.log('수정버튼')} onPress={() => { onUpdateHandle() }}
style={style.submitButton} style={style.submitButton}
/> />
<StyledButton
name="저장"
onPress={() => console.log('취소버튼')}
style={style.cancelButton}
/>
</View> </View>
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
...@@ -73,7 +80,12 @@ function InfoDetails({ route }) { ...@@ -73,7 +80,12 @@ function InfoDetails({ route }) {
const style = StyleSheet.create({ const style = StyleSheet.create({
Font: {
fontFamily: 'GowunDodum-Regular'
},
buttonRow: { buttonRow: {
fontFamily: 'GowunDodum-Regular',
flexDirection: 'row', flexDirection: 'row',
alignItems: "center", alignItems: "center",
marginHorizontal: 10, marginHorizontal: 10,
...@@ -92,4 +104,4 @@ const style = StyleSheet.create({ ...@@ -92,4 +104,4 @@ const style = StyleSheet.create({
export default InfoDetails; export default DeptDetails;
\ No newline at end of file \ No newline at end of file
screens/infoForm.js → screens/DeptForm.js
View file @ d41e67bc
import React from 'react'; import React, { useState } from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableWithoutFeedback, Keyboard } from 'react-native'; import { StyleSheet, Button, View, Text, TextInput, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { globalStyles } from '../styles/global.js' import { globalStyles } from '../styles/global.js'
import { Formik } from 'formik'; import { Formik } from 'formik';
import * as yup from 'yup'; import * as yup from 'yup';
import DatePicker from '../components/DatePicker.js';
import InputBox from '../components/InputBox';
const ReviewSchema = yup.object({ const ReviewSchema = yup.object({
date: yup.string() //string만 받는다 date: yup.string() //string만 받는다
.required() //아무것도 입력안했하면 안받음 .required(), //아무것도 입력안했하면 안받음
.min(4), //최소4글짜 message: yup.string()
person: yup.string()
.required() .required()
.min(2), .min(2),
money: yup.string() money: yup.number()
.required(), .required(),
remained_money: yup.string() remained_money: yup.number()
.required() .required()
}) })
const getDate = () => {
var date = new Date();
return (String(date.toJSON()).split(/T/)[0])
}
// const [date, setDate] = useState(getDate())
function DeptForm({ addInfo }) {
function InfoForm({ addInfo }) {
return ( return (
<TouchableWithoutFeedback onPress={() => { <TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss(); Keyboard.dismiss();
}}> }}>
<View style={globalStyles.container} > <View style={globalStyles.container} >
<Formik <Formik
initialValues={{ date: '', person: '', money: '', remained_money: '' }} initialValues={{ date: '', message: '', money: '', remained_money: '' }}
validationSchema={ReviewSchema} validationSchema={ReviewSchema}
onSubmit={(values) => {//위의 4개의 val들을 전달 onSubmit={(values) => {//위의 4개의 val들을 전달
...@@ -38,37 +42,37 @@ function InfoForm({ addInfo }) { ...@@ -38,37 +42,37 @@ function InfoForm({ addInfo }) {
{({ handleChange, handleSubmit, values }) => ( {({ handleChange, handleSubmit, values }) => (
<View> <View>
<TextInput
style={globalStyles.input}
placeholder='날짜'
onChangeText={handleChange('date')} //우리가 바꾸려는 val
value={values.date}
/>
<TextInput <DatePicker
style={globalStyles.input} inputTitle='날짜'
placeholder='누구에게' date={values.date || getDate()}//오늘날짜 아니면 바뀐날짜
onChangeText={handleChange('person')} setDate={handleChange('date')}
value={values.person}
/> />
<InputBox
inputTitle="내용"
onChangeText={handleChange('message')}
value={values.message}
<TextInput />
style={globalStyles.input} <InputBox
placeholder='금액' inputTitle="금액"
onChangeText={handleChange('money')} onChangeText={handleChange('money')}
value={values.money} value={values.money}
keyboardType='numeric' keyboardType="numeric"
/>
<TextInput />
style={globalStyles.input} <InputBox
placeholder='남은 금액' inputTitle="남은금액"
onChangeText={handleChange('remained_money')} onChangeText={handleChange('remained_money')}
value={values.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> </View>
)} )}
...@@ -79,4 +83,4 @@ function InfoForm({ addInfo }) { ...@@ -79,4 +83,4 @@ function InfoForm({ addInfo }) {
) )
} }
export default InfoForm; export default DeptForm;
\ No newline at end of file \ No newline at end of file
screens/MemoDetails.js
View file @ d41e67bc
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, Button, Pressable, TouchableWithoutFeedback, Keyboard } from 'react-native'; import { StyleSheet, View, Text, Button, Pressable, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { globalStyles } from '../styles/global'; import { globalStyles } from '../styles/global';
import InputBox from '../components/InputBox'; import InputBox from '../components/InputBox';
import StyledButton from '../components/StyledButton'; import StyledButton from '../components/StyledButton';
import DatePicker from '../components/DatePicker.js';
import memoApi from '../db/memoPage.api';
function MemoDetails({ route }) { function MemoDetails({ route, navigation }) {
const [date, setDate] = useState('') const {item, loadMemos} = route.params
const [person, setPerson] = useState('') const getDate = () => {
const [money, setMoney] = useState('') 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 ( return (
<TouchableWithoutFeedback onPress={() => { <TouchableWithoutFeedback onPress={() => {
...@@ -17,39 +35,26 @@ function MemoDetails({ route }) { ...@@ -17,39 +35,26 @@ function MemoDetails({ route }) {
}}> }}>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<View> <View>
<InputBox <DatePicker
inputTitle="날짜" inputTitle="날짜"
placeholder={route.params?.date} date={date}
onChangeText={ setDate={setDate}
(date) => setDate(date)
}
/> />
<InputBox <InputBox
inputTitle="내용" inputTitle="내용"
placeholder={route.params?.person} value={message}
onChangeText={ onChangeText={
(person) => setPerson(person) (message) => setMessage(message)
}
/>
<InputBox
inputTitle="금액"
placeholder={route.params?.money}
onChangeText={
(money) => setMoney(moeny)
} }
/> />
</View> </View>
<View style={style.buttonRow}> <View style={style.buttonRow}>
<StyledButton <StyledButton
name="수정" name="수정"
onPress={() => console.log('수정버튼')} onPress={() => { onUpdateHandle() }}
style={style.submitButton} style={style.submitButton}
/> />
<StyledButton
name="저장"
onPress={() => console.log('취소버튼')}
style={style.cancelButton}
/>
</View> </View>
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
......
screens/MemoForm.js
View file @ d41e67bc
import React from 'react'; import React, { useState } from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableWithoutFeedback, Keyboard } from 'react-native'; import { StyleSheet, Button, View, Text, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { globalStyles } from '../styles/global.js' import { globalStyles } from '../styles/global.js'
import { Formik } from 'formik'; import { Formik } from 'formik';
import * as yup from 'yup'; import * as yup from 'yup';
import DatePicker from '../components/DatePicker.js';
import InputBox from '../components/InputBox.js';
const ReviewSchema = yup.object({ const ReviewSchema = yup.object({
date: yup.string() //string만 받는다 // date: yup.string() //string만 받는다
.required() //아무것도 입력안했하면 안받음 // .required() //아무것도 입력안했하면 안받음
.min(4), //최소4글짜 // , //최소4글짜
person: yup.string() message: yup.string()
.required() .required()
.min(2), .min(2),
money: yup.string()
.required(),
}) })
const getDate = () => {
var date = new Date();
return (String(date.toJSON()).split(/T/)[0])
}
function MemoForm({ addInfo }) { function MemoForm({ addInfo }) {
...@@ -26,7 +29,7 @@ function MemoForm({ addInfo }) { ...@@ -26,7 +29,7 @@ function MemoForm({ addInfo }) {
}}> }}>
<View style={globalStyles.container} > <View style={globalStyles.container} >
<Formik <Formik
initialValues={{ date: '', person: '', money: ''}} initialValues={{ date: '', message: '' }}
validationSchema={ReviewSchema} validationSchema={ReviewSchema}
onSubmit={(values) => {//위의 4개의 val들을 전달 onSubmit={(values) => {//위의 4개의 val들을 전달
...@@ -34,33 +37,23 @@ function MemoForm({ addInfo }) { ...@@ -34,33 +37,23 @@ function MemoForm({ addInfo }) {
}} }}
> >
{({ handleChange, handleSubmit, values }) => ( {({ handleChange, handleSubmit, values }) => (
<View> <View>
<TextInput <DatePicker
style={globalStyles.input} inputTitle='날짜'
placeholder='날짜' date={values.date || getDate()}//오늘날짜 아니면 바뀐날짜
onChangeText={handleChange('date')} //우리가 바꾸려는 val setDate={handleChange('date')}
value={values.date}
/> />
<InputBox
inputTitle="내용"
onChangeText={handleChange('message')}
value={values.message}
<TextInput
style={globalStyles.input}
placeholder='내용'
onChangeText={handleChange('person')}
value={values.person}
/> />
<TextInput <View style={{ marginVertical: '10%', marginHorizontal: 10 }}>
style={globalStyles.input} <Button title='입력' color='dodgerblue' onPress={handleSubmit} />
placeholder='금액' </View>
onChangeText={handleChange('money')}
value={values.money}
keyboardType='numeric'
/>
<Button title='입력' color='maroon' onPress={handleSubmit} />
</View> </View>
)} )}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment