Commit 4664fbfb authored by YoonDongMin's avatar YoonDongMin
Browse files

부채

parent 9433e4e0
...@@ -7,16 +7,20 @@ import Ionicons from 'react-native-vector-icons/Ionicons'; ...@@ -7,16 +7,20 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
import Monthly from './Monthly'; import Monthly from './Monthly';
import Analy from './Analy'; import Analy from './Analy';
import MoneyDB from './MoneyDB'; import MoneyDB from './MoneyDB';
import DeptPage from './DeptPage';
import ReviewForm from './screens/reviewForm'; import ReviewForm from './screens/reviewForm';
import { SpeedDial } from 'react-native-elements';
function MainScreen({ navigation }) { function MainScreen({ navigation }) {
const [number, onChangeNumber] = React.useState(null); const [number, onChangeNumber] = useState(null);
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [reviews, setReviews] = useState([ // const [reviews, setReviews] = useState([
{ title: 'aa', rating: 5, body: 'bb', key: '1' }, // { title: 'aa', rating: 5, body: 'bb', key: '1' },
]); // ]);
const [open, setOpen] = useState(false)
const addReview = (review) => { const addReview = (review) => {
review.key = Math.random().toString(); review.key = Math.random().toString();
...@@ -50,26 +54,42 @@ function MainScreen({ navigation }) { ...@@ -50,26 +54,42 @@ function MainScreen({ navigation }) {
title="월별 페이지로 이동" title="월별 페이지로 이동"
onPress={() => navigation.navigate('Monthly')} onPress={() => navigation.navigate('Monthly')}
/> />
<SpeedDial
isOpen={open}
icon={{ name: 'edit', color: '#fff' }} //연필모양
openIcon={{ name: 'close', color: '#fff' }} //x모양
onOpen={() => setOpen(!open)}
onClose={() => setOpen(!open)}
>
<SpeedDial.Action
icon={{ name: 'add', color: '#fff' }}
title="부채"
onPress={() => setModalOpen(true)}
/>
<SpeedDial.Action
icon={{ name: 'delete', color: '#fff' }}
title="Delete"
onPress={() => setModalOpen(true)}
/>
</SpeedDial>
<Modal visible={modalOpen} animationType='slide'> <Modal visible={modalOpen} animationType='slide'>
<View style={style.modalContent}> <View style={style.modalContent}>
<Ionicons <Ionicons
name='close' name='close'
color='red'
size={24} size={24}
style={{ ...style.modalToggle, ...style.modalClose }} style={{ ...style.modalToggle, ...style.modalClose }} //...은 중괄호를 풀어서 합치려고 이용함
onPress={() => setModalOpen(false)} onPress={() => setModalOpen(false)}
/> />
<ReviewForm addReview = {addReview} /> <DeptPage />
</View> </View>
</Modal> </Modal>
<Ionicons <MoneyDB />
name='add'
size={24}
style={style.modalToggle}
onPress={() => setModalOpen(true)}
/>
</View> </View>
</TouchableWithoutFeedback>
</TouchableWithoutFeedback>
</> </>
) )
} }
...@@ -113,18 +133,17 @@ const style = StyleSheet.create({ ...@@ -113,18 +133,17 @@ const style = StyleSheet.create({
modalToggle: { modalToggle: {
marginBottom: 10, marginBottom: 10,
borderWidth: 1, borderWidth: 1,
borderColor: '#f2f2f2', borderColor: 'grey', //grey
padding: 10, padding: 10,
borderRadius: 10, borderRadius: 10,
alignSelf: 'center', alignSelf: 'center', //위치를 center로
}, },
modalClose: { modalClose: {
marginTop: 20, marginTop: 20,
marginBottom: 0, marginBottom: 0,
}, },
modalContent: { modalContent: {
flex: 1, flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
}, },
TextInput: { TextInput: {
......
import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList, Alert, TouchableWithoutFeedback, Keyboard } from 'react-native';
import Header from './components/header';
import TodoItem from './components/todoItem';
import AddTodo from './components/addTodo';
import Sandbox from './components/sandbox';
export default function DeptPage() {
const [todos, setTodos] = useState([
{ text: 'buy coffee', key: '1' },
{ text: 'create an app', key: '2' },
{ text: 'play on the swithch', key: '3' }
]);
const pressHandler = (key) => {
setTodos((prevTodos) => {
return prevTodos.filter(todo => todo.key != key);
});
}
//이 함수로 내용 추가를 함 Addtodo함수에서 이용
const submitHandler = (text) => {
//alert를 사용하기위해 조건문 지정
if (text.length > 3) {
setTodos((prevTodos) => {
return [
{ text: text, key: Math.random().toString() },
...prevTodos //앞의 todos에 추가하여 내용을 더 추가함
];
});
} else { //3글자 보다 작으면 alert
Alert.alert('OOPs!', '3글짜 이상!', [
{ text: 'Understood', onPress: () => console.log('alert closed') }//understood 버튼 누르면 alert꺼짐
]);
}
}
return (
// <Sandbox />
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
console.log('dismissed keyboard');
}}>
<View Style={styles.container}>
<Header />
<View style={styles.content}>
<AddTodo submitHandler={submitHandler} />
<View style={styles.list}>
<FlatList
data={todos}
renderItem={({ item }) => (
<TodoItem item={item} pressHandler={pressHandler} />
)}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
);
}
//content는 내용이 추가되면 계속 커진다
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
content: {
padding: 40,
},
list: {
marginTop: 20, //top에서부터 거리
}
});
\ No newline at end of file
import React, {useState} from 'react'; import React, {useState} from 'react';
import {StyleSheet, Text,View, TextInput, Button} from 'react-native'; import {StyleSheet, Text,View, TextInput, Button} from 'react-native'; //추가하기 때문에TextInput, Button을 import 함
export default function AddTodo({submitHandler}) { export default function AddTodo({submitHandler}) {
const [text, setText] = useState(''); const [text, setText] = useState(''); //empty string
const changeHandler = (val) => { const changeHandler = (val) => {
setText(val); setText(val);
...@@ -12,10 +13,10 @@ export default function AddTodo({submitHandler}) { ...@@ -12,10 +13,10 @@ export default function AddTodo({submitHandler}) {
<View> <View>
<TextInput <TextInput
style = {styles.input} style = {styles.input}
placeholder = 'new todo...' placeholder = 'new todo...' //처음에 나오는 text
onChangeText={changeHandler} onChangeText={changeHandler} //value 받은 것 저장
/> />
<Button onPress= {() =>submitHandler(text)} title = 'add todo' color = 'coral' /> <Button onPress= {() =>submitHandler(text)} title = '입력' color = 'coral' />
</View> </View>
) )
} }
...@@ -25,7 +26,7 @@ const styles = StyleSheet.create({ ...@@ -25,7 +26,7 @@ const styles = StyleSheet.create({
marginBottom: 10, marginBottom: 10,
paddingHorizontal: 8, paddingHorizontal: 8,
paddingVertical:6, paddingVertical:6,
borderBottomColor: '#ddd', borderBottomColor: '#ddd', //light grey
borderBottomWidth: 1 borderBottomWidth: 1
} }
......
...@@ -4,7 +4,7 @@ import {StyleSheet, Text, View} from 'react-native'; ...@@ -4,7 +4,7 @@ import {StyleSheet, Text, View} from 'react-native';
export default function Header() { export default function Header() {
return( return(
<View style={styles.header}> <View style={styles.header}>
<Text style = {styles.title}>My Todos</Text> <Text style = {styles.title}>부채</Text>
</View> </View>
) )
} }
......
import React from 'react'; import React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
export default function TodoItem({item, pressHandler}) { //item은 앞의 text를 받음
export default function TodoItem({ item, pressHandler }) {
return( return (
<TouchableOpacity onPress= {() => pressHandler(item.key)}> <TouchableOpacity onPress={() => pressHandler(item.key)}>
<View style={styles.item}> <View style={styles.item}>
<MaterialIcons name= 'delete' size={18} color= '#333'/> <Ionicons name='trash-outline' size={15} color='#333' />
<Text style = {styles.item}>{item.text}</Text> <Text style={styles.itemText}>{item.text}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
) )
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
item: { item: {
padding:16, padding: 16,
marginTop:16, marginTop: 16,
borderColor: '#bbb', borderColor: '#bbb', //light grey
borderWidth : 1, borderWidth: 1,
borderStyle: 'd', borderStyle: 'd',
borderStyle: 'dashed', borderStyle: 'dashed', //little line
borderRadius: 10 borderRadius: 10,
flexDirection: 'row' //같은 행에 있도록
},
itemText: {
marginLeft: 10,
} }
}) })
\ No newline at end of file \ No newline at end of file
...@@ -2,12 +2,30 @@ import React from 'react'; ...@@ -2,12 +2,30 @@ import React from 'react';
import { StyleSheet, Button, TextInput, View, Text } from 'react-native'; import { StyleSheet, Button, TextInput, View, Text } 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';
const ReviewSchema = yup.object({
title: yup.string()
.required()
.min(4),
body: yup.string()
.required()
.min(8),
rating: yup.string()
.required()
.test('is-num-1-5', 'Rating must be a number 1 -5', (val) => {
return parseInt(val) < 6 && passInt(val) > 0;
})
})
export default function ReviewForm(addReview) { export default function ReviewForm(addReview) {
return ( return (
<View style={globalStyles.container}> <View style={globalStyles.container} >
<Formik <Formik
initialValues={{ title: '', body: '', rating: '' }} initialValues={{ title: '', body: '', rating: '' }}
validationSchema={ReviewSchema}
onSubmit={(values) => { onSubmit={(values) => {
addReview(values); addReview(values);
...@@ -38,14 +56,15 @@ export default function ReviewForm(addReview) { ...@@ -38,14 +56,15 @@ export default function ReviewForm(addReview) {
placeholder='Rating (1-5)' placeholder='Rating (1-5)'
onChangeText={props.handleChange('rating')} onChangeText={props.handleChange('rating')}
value={props.values.rating} value={props.values.rating}
keyboardType = 'numeric'
/> />
<Button title = 'submit' color = 'maroon' onPress = {props.handleSubmit}/> <Button title='submit' color='maroon' onPress={props.handleSubmit} />
</View> </View>
)} )}
</Formik> </Formik>
</View> </View >
) )
} }
\ 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