Commit facb1bb1 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

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

parents 13312bec d41e67bc
......@@ -10,11 +10,12 @@ 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';
import EditOption from './EditOption';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
......@@ -56,7 +57,7 @@ function App() {
backgroundColor: '#eee'
},
headerTitleStyle: {
fontWeight: 'bold',
fontFamily: 'GowunDodum-Regular'
},
headerTitleAlign: 'center'
}} >
......@@ -67,15 +68,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}
......
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 Ionicons from 'react-native-vector-icons/Ionicons';
import ButtonsForm from './components/ButtonsForm';
import DeptForm from './screens/DeptForm';
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={["빌려준금액", "빌린금액"]} />
......@@ -50,20 +76,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>
)}
/>
......@@ -73,7 +99,7 @@ function DeptPage({ navigation }) {
<Ionicons
name='add'
size={24}
style={style.modalToggle} //...은 중괄호를 풀어서 합치려고 이용함
style={style.modalToggle}
onPress={() => setModallOpen(true)}
/>
</View>
......@@ -86,8 +112,7 @@ function DeptPage({ navigation }) {
style={style.modalToggle}
onPress={() => setModallOpen(false)}
/>
<InfoForm addInfo={addInfo} />
<DeptForm addInfo={addInfo} />
</View>
</Modal>
</View>
......@@ -96,12 +121,13 @@ function DeptPage({ navigation }) {
);
}
const style = StyleSheet.create({
Font: {
fontFamily: 'GowunDodum-Regular'
},
container: {
fontFamily: 'GowunDodum-Regular',
flex: 1,
width: '100%',
},
......@@ -115,17 +141,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;
......@@ -83,6 +83,7 @@ const style = StyleSheet.create({
borderWidth: 1
},
Font: {
fontFamily : 'Jua-Regular',
fontSize: 24
},
modalToggle: {
......
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 Ionicons from 'react-native-vector-icons/Ionicons';
......@@ -7,36 +7,41 @@ 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 pressHandler = (key) => {
setTodo((prevTodos) => {
return prevTodos.filter(todo => todo.key != key);
});
const addInfo = async (info) => {
await memoApi.insertMemo(info)
setModalOpen(false);
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' }
]);
const onDeleteHandle = async (id) => {
await memoApi.deleteMemo(id)
loadMemos();
}
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%' }}>
<View style={{ width: '100%', height: '95%' }} >
<View style={{ width: '100%', height: '80%' }}>
<View >
<FlatList
data={todo}
data={memos}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => navigation.navigate('MemoDetails', item)}>
<TodoItem item={item} pressHandler={pressHandler} />
<TouchableOpacity onPress={() => navigation.navigate('MemoDetails', {item : item, loadMemos : loadMemos})}>
<TodoItem item={item} onDeleteHandle={() => onDeleteHandle(item.id)} />
</TouchableOpacity>
)}
/>
</TabView.Item>
</TabView>
</View>
</View>
<Ionicons
name='add'
......
import React from 'react';
import { ButtonGroup } from 'react-native-elements';
import { StyleSheet, Text } from 'react-native';
import { color } from 'react-native-elements/dist/helpers';
const ButtonsForm = (props) => {
const components = [];
......@@ -28,7 +27,6 @@ const ButtonsForm = (props) => {
);
};
const style = StyleSheet.create({
container: {
height: 50,
......
......@@ -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,
},
......
......@@ -43,11 +43,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,
},
......
......@@ -25,6 +25,7 @@ const style = StyleSheet.create({
borderRadius: 2,
},
buttonText: {
fontFamily: 'GowunDodum-Regular',
fontSize: 20,
},
})
......
......@@ -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,
}
})
......
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
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
......@@ -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
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
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>
......
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>
)}
......
......@@ -6,7 +6,7 @@ export const globalStyles = StyleSheet.create({
padding:24,
},
titleText: {
fontFamily: 'nunito-bold',
fontFamily: 'GowunDodum-Regular',
fontSize:18,
color: '#333'
},
......@@ -15,10 +15,11 @@ export const globalStyles = StyleSheet.create({
lineHeight:20,
},
input: {
fontFamily: 'GowunDodum-Regular',
borderWidth: 1,
borderColor: '#ddd',
padding: 10,
borderColor: 'blue',
padding: 8,
fontSize: 18,
borderRadius:6,
borderRadius:4,
}
})
\ No newline at end of file
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